Grid Filter Multi-Select Checkbox Sorting - Brute Force Solution

[Darron]

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

 

[Boyan Dimitrov]

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

[John]

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();}},

[Boyan Dimitrov]

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

[John]

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)
)

[Boyan Dimitrov]

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