This is a migrated thread and some comments may be shown as answers.

Grid Filter Multi-Select Checkbox Sorting - Brute Force Solution

5 Answers 390 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Darron
Top achievements
Rank 1
Darron asked on 10 Feb 2017, 05:22 PM

I've achieved sorting in Filter Multi-Select Checkboxes but I'm thinking I may be making it harder than it has to be.

The simpler code shown here provides multi-select checkboxes, but they're not sorted into order.

.Filterable(ftb => ftb.Multi(true).Search(true));

Adding a data source enables us to sort each checkbox list into proper order.

.Filterable(ftb => ftb.Multi(true).Search(true).DataSource(ds => ds.Read(r => r.Action("filterPOD", "Home").Data("{ field: 'PODNumber' }"))))

 

But this requires me to have a corresponding block of code in my controller for EACH column that I intend to filter with Multi-select CBs.

public ActionResult filterPOD(string field)
{
    var w = new SQL_DB_Entities();
    var result = w.Shipping_Table.Select(x => new filterModel
    {
        PODNumber = x.PODNumber 
    }).Distinct().OrderBy(p => p.PODNumber);
    return Json(result, JsonRequestBehavior.AllowGet);
}

 

It's probably something simple I'm overlooking, but I'd like to create a block of "Generic" code in my controller to return the sorted lists needed for multi select checkboxes, rather than having to repeat this block of code for each fieldname / column that I filter.  I'm already passing the field name as a string (named "field").  How can I replace the 3 instances of "PODNumber" in this block of code to use the value of the field variable instead so that I can have a single generic block of code?  That would be a more elegant solution than the "brute force" one of repeating this code over and over.  I'm new to MVC and jquery, so please be gentle with me.  -Darron

 

5 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 14 Feb 2017, 09:45 AM

Hello,

Alternative way would be sort the items on the client-side as shown in the Sort Multiple Checkbox Filter how-to article. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
John
Top achievements
Rank 1
answered on 07 Jan 2019, 02:24 PM

is there an example on how to do this in ASP.NET columns.bound instead of webapi?

filterMenuInit: function(e) {if (e.field === "UnitPrice" || e.field === "UnitsInStock") {var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck") filterMultiCheck.container.empty(); filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});// uncomment the following line to handle any grouping from the original dataSource:// filterMultiCheck.checkSource.group(null); filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON()); filterMultiCheck.createCheckBoxes();}},

0
Boyan Dimitrov
Telerik team
answered on 09 Jan 2019, 02:33 PM
Hello,

Could you please clarify whether you are using client-side paging or server-side paging? Since it is functionality achieved using JavaScript on the client the actual service implementation on the service (web api or something else) should not be taking into account. 

Regards,
Boyan Dimitrov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
John
Top achievements
Rank 1
answered on 09 Jan 2019, 04:49 PM

Thanks for responding, here's my code:

@(Html.Kendo().Grid<Shared_ViewModels.Contract.ContractListItemVM>()
        .Name("grid")
        .Columns(columns =>
        {
        columns.Bound(c => c.ContractOid).Hidden();

        columns.Bound(c => c.ContractIDCoalesced).Width(40).Title("Contract ID")
        .ClientTemplate(@Html.ActionLink("#=ContractIDCoalesced#", "TransactionSummary", "Home", new { contractOid = "#=ContractOid#" }).ToHtmlString());
            columns.Bound(c => c.LesseeName).Width(230).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(c => c.AmountFinanced).Width(100).Format("{0:C}").HtmlAttributes(new { style = "text-align:right" }).HeaderHtmlAttributes(new { style = "text-align:right" });
            columns.Bound(c => c.StatusCode).Width(100).Filterable(ftb => ftb.Multi(true));
            columns.Bound(c => c.SalesRepName).Width(100).Filterable(ftb => ftb.Multi(true).Search(true));
            columns.Bound(c => c.OriginatorName).Width(230).Filterable(ftb => ftb.Multi(true));
            columns.Bound(c => c.FinanceCompanyName).Width(180).Filterable(ftb => ftb.Multi(true));
            columns.Bound(c => c.GAContractID).Width(100);
        })

   .DataSource(dataSource => dataSource
       .Ajax()
       .Read(read => read.Action("ContractList3_GetData", "Contract"))         //.Data("sendAntiForgery"))
)
.Pageable(pageable => pageable.PageSizes(new int[] { 10, 20, 50, 100, 999 }))
.Sortable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource.Ajax()
.PageSize(20)
.ServerOperation(false)
)

0
Boyan Dimitrov
Telerik team
answered on 11 Jan 2019, 06:30 PM
Hello,

Since you are using ServerOperations(false) the solution from your previous reply should do the trick. What I am missing in your code is binding to the filterMenuInit event in order to place the sorting logic in the handler of the event. In order to bind to the filterMenuInit event you can use the following syntax: 

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
    .Name("Grid")   
    .Columns(columns => {       
        columns.Bound(p => p.ProductName);
....
    })
    .ToolBar(toolbar => {
        toolbar.Create();
        toolbar.Save();       
    })
...
    .Events(ev => ev.FilterMenuInit("filterMenuInit"))
    .DataSource(dataSource => dataSource       
        .Ajax()        
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)               
....
    )
)

function filterMenuInit(e) {
  if (e.field === "UnitPrice" || e.field === "UnitsInStock") {
    var filterMultiCheck = this.thead.find("[data-field=" + e.field + "]").data("kendoFilterMultiCheck")
    filterMultiCheck.container.empty();
    filterMultiCheck.checkSource.sort({field: e.field, dir: "asc"});
 
    // uncomment the following line to handle any grouping from the original dataSource:
// filterMultiCheck.checkSource.group(null);
 
    filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
    filterMultiCheck.createCheckBoxes();
  }
},


Regards,
Boyan Dimitrov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Darron
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
John
Top achievements
Rank 1
Share this question
or