MultiSelect group by but sort items in each group

[Kristen]

I have a multiselect that contains a list of states. In the list there are states from different countries. I would like to be able to group the list by country but then have each group sorted by the state abreviation alphabetically. I'm having trouble finding some documentation on how to exctly do this.

 

Here is my multiselect:

@(Html.Kendo().MultiSelect()
.Name("primary_service_area")
.DataTextField("state_abreviation")
.DataValueField("state_abreviation")
.TagTemplate("<span class=\"multiselect-selected-value\">#= state_abreviation #</span>")
.ItemTemplate("<span>#= state_abreviation # - #= state_name #, #= country_code #</span>")
.DataSource(source =>
{
source
.Custom()
.ServerGrouping(true)
.Group(g => g.Add("country_code", typeof(string)))
.Transport(transport =>
transport.Read(read =>
{
read.Action("GetStates", "Company", new { country = "ALL"});
})
)
.ServerFiltering(false);
})
.Events(e => {
e.Change("multiSelect_Change").DataBound("multiSelect_databound");
})
.AutoClose(false)
.Value(Model.primary_service_area)
.HtmlAttributes(new { @class = "omni-multiselect" })
)

 

Here is my GetStates function:

public ActionResult GetStates(string country)
{
    try
    {
        List<State> selectedStates = new List<State>();
        if (country != null)
        {
            if (country == "ALL")
            selectedStates = states.OrderBy(s => s.country_code).ThenBy(s => s.state_abreviation).ToList();
            else
            selectedStates = states.Where(s => s.country_code == country).ToList();
        }

        return Json(selectedStates.Select(s => new { state_abreviation = s.state_abreviation, state_name = s.state_name, country_code = s.country_code }));
    }
    catch (Exception ex)
    {
        return Json("");
    }
}

[Neli]

Hi Kristen,

I would suggest you to use the ToDataSourceResult extension method and send DataSourceRequest to the server. The DataSourceRequest object is holding information about the sorting, filtering, grouping and paging.
You will need to set type to the dataSource as follows:

.Type("aspnetmvc-ajax")

You will also need to configure Schema in order to read the response. Below is an example of view, where server grouping and sorting are enabled. 

@(Html.Kendo().MultiSelect()
    .Name("multiselect")
    .DataTextField("Name")
    .DataValueField("Name")
    .DataSource(source => source
        .Custom()
        .Type("aspnetmvc-ajax")
        .ServerGrouping(true)
        .ServerSorting(true)
        .Sort(s => s.Add("Name"))
        .Group(g => g.Add("TypeP", typeof(string)))
        .Transport(transport => transport
        .Read(read =>
        {
            read.Action("GetProducts", "Home");
        }))
        .Schema(s => s
            .Data("Data")
            .Model( m => m.Id("Id"))
        )
    )
    .Placeholder("Select product...")
)

Than in the controller, you will need to handle the request.

public JsonResult GetProducts([DataSourceRequest]DataSourceRequest request)
{
var productss = ProductsAll().ToDataSourceResult(request);
return Json(productss);
}

Attached you will find a sample .Net Core project where the grouping and sorting are implemented in the described way. 

Regards,
Neli
Progress Telerik