Linked selects
 Next   Menu    Previous 

Select controls can be linked together using the LinkedControl property to create a hierarchy of dependent select controls. You can also use events to easily integrate 3rd party libraries such as maps
Loading...
Loading...
Loading...
Razor code

var citySelect = new SelectModel("cities") { Caption = "City", Searchable = true, Layout = LayoutType.Row, EmptyOption = "Select a city" };
citySelect.Columns = new List
{
    new SelectColumn("cityid") {PrimaryKey = true },
    new SelectColumn("cityname"),
    new SelectColumn("stateid") { ForeignKey = true },
    new SelectColumn("latitude"),
    new SelectColumn("longitude")
};
citySelect.ClientEvents[SelectClientEvent.OptionSelected] = "showSelectedCity";

var stateSelect = new SelectModel("states") { Caption = "State", Distinct = true, Searchable = true, Layout = LayoutType.Row, EmptyOption = "Select a state" };
stateSelect.Columns = new List
{
    new SelectColumn("stateid") {PrimaryKey = true },
    new SelectColumn("statename"),
    new SelectColumn("countryid") { ForeignKey = true}
};
stateSelect.LinkedControl = citySelect;

var countrySelect = new SelectModel(DataSourceType.SQLite, "DbNetSuiteCore", "countries") { Caption = "Country", Distinct = true, Searchable = true, Layout = LayoutType.Row, EmptyOption = "Select a country" };
countrySelect.Columns = new List
{
    new SelectColumn("countryid") {PrimaryKey = true },
    new SelectColumn("countryname")
};
countrySelect.LinkedControl = stateSelect;

<div class="flex flex-column">
    <div class="flex">
        @(await new DbNetSuiteCore.SelectControl(HttpContext).Render(countrySelect))
    </div>
    <div class="flex">
        @(await new DbNetSuiteCore.SelectControl(HttpContext).Render(stateSelect))
    </div>
    <div class="flex">
        @(await new DbNetSuiteCore.SelectControl(HttpContext).Render(citySelect))
    </div>
    <div class="flex" id="selectedCity" style="padding-top:10px"></div>
</div>

<style>
div.caption {
    width: 80px
}
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div class="flex p-1" id="map" style="height:400px; width:800px;margin-top:10px; border:1pt solid gainsboro; border-radius:5px;"></div>