MultiSelect group by but sort items in each group

2 posts, 0 answers
  1. Kristen
    Kristen avatar
    7 posts
    Member since:
    Dec 2017

    Posted 10 Apr 2018 Link to this post

    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("");
        }
    }
  2. Neli
    Admin
    Neli avatar
    246 posts

    Posted 13 Apr 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top