Hello,

part of my code with filter looks like this:

    @(Html.FilterSectionFor<ItemViewModel, ItemFilter>(vm => vm.Filter, gridId)
          .Portlet(Lang.Filters)
          .LabelEditorValidatorFor(m => m.Filter.Id)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeFrom)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeTo)
          .LabelEditorValidatorFor(m => m.Filter.Model)
          )

And Model is dictionary

Whether it is possible to select two options and filter the results for those two options?

Good day I am using a Kendo Grid on one of my applications. The Grid is defined like below. Editing of data is done via a popup that started from the _EditRoute action. Data for the grid is bound serverside via _SelectRouteData but users can apply their own filter to the Data via the header column since we have .Filterable() enabled on the Grid. Currently the state of that filter is lost when context passes back to the main grid after an update on the the Popup Screen as we call grid.rebind() in Javascript to refresh data in the Grid Post update.

Is there an easy way to persist the state of the ClientSide filter?

I have tried saving and reapplying the filter in Javascript like this

var filter = grid.dataSource.filter(); grid.rebind(); grid.dataSource.filter(filter);

but this still loses the filter after grid.rebind()


Any help would be greatly appreciated.

Best Regard
Wilhelm Erxleben

@(Html.Telerik().Grid(Model)
                                .Name("RouteManagement")
                                .DataKeys(keys => keys.Add(r => r.RouteID))
                                .ColumnContextMenu()
                                .Columns(columns =>
                                {
                                    columns.Bound(r => r.RouteID).Title("Route ID").Width(40).Hidden(true).IncludeInContextMenu(false);
                                    columns.Command(commands =>
                                        commands.Custom("editRoute")
                                            .Text("Edit Route")
                                            .ButtonType(GridButtonType.Image)
                                            .DataRouteValues(route => route.Add(r => r.RouteID).RouteKey("routeId"))
                                            .Ajax(true)
                                            .Action("_EditRoute", "RouteData")

                                    ).Width(50).IncludeInContextMenu(false);

                                    columns.Bound(r => r.AccountNo).Title("Account No")
                                    columns.Bound(r => r.ConsumerNo).Title("Consumer No")
                                    columns.Bound(r => r.DivertCodes).Width(105);


                                })
                                .DataBinding(dataBinding => dataBinding.Ajax()
                                    .Select("_SelectRouteData", "RouteData"))
                                .Sortable()
                                .Selectable()
                                .Filterable()
                                .Resizable(resizing => resizing.Columns(true))

                                .Scrollable(scroll => scroll.Height("410px"))
                                .ClientEvents(events => events
                                                .OnLoad("onLoad").OnDataBinding("BindValues")
                                                .OnRowSelect("onRouteRowSelected")
                                                .OnRowDataBound("onRouteRowDataBound")
                                                .OnComplete("onRouteComplete"))
        )

Hello,

My MVC project used kendo grid control which contain date column.  It seems date filter does not work  - after I clicking Filter button as below Page refreshed without filter. Any suggestion? Thanks in advance.

in View:

...

 columns.Bound(model => model.HireDate).Width(120).Format("{0:yyyy/MM/dd}");

...

  .ColumnMenu(columnMenu => columnMenu.Enabled(true).Filterable(true).Sortable(false).ComponentType("modern"))

Hi Team,

I am using Kendo UI MVC Grid and trying to override the checkbox style using FontAwesome fonts. I thought of doing it through CSS alone but since we can't select parent selector through CSS I ended up using the filterMenuInit event. 

Grid column is configured using:-

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

I am adding another label to the rendered checkbox text using the below function:-

 function addCustomLabel(e) {
            var container = e.container;
            var allCheckboxes = $("input[type='checkbox']", container);
            $.each(allCheckboxes, function (id) {
                $(this).attr("id", 'chk' + id).addClass("blueCheckbox");
                var checkbox = $(this)[0];
                console.log(checkbox);
                var parentLabel = $(this).parent('label');
                var labelText = parentLabel.text();
                parentLabel.empty();
                parentLabel.append(checkbox);
                parentLabel.append("<label for='"+ 'chk' + id +"'>" + labelText + "</label>");
            });
        }

Hello, 

I have a kendo grid, with custom filter in some columns defined like this:

c = columns.Bound(x => x.Field1).Title("Field1").Width(130).Filterable(filterable => filterable.Extra(false).UI("customField1Filter").Operators(op => op.ForString(str => str.Clear().IsEqualTo("Is equal to"))));

and

function customField1Filter(element) {
        element.kendoDropDownList({
            dataTextField: "Text",
            dataValueField: "Value",
            dataSource: {
                transport:{
                    read: {
                        data: getdata(),
                        url: "@Url.Action("PopulateField1Filter", "Common")"
                    }
                }
            },
            optionLabel: "--Select Value--"
        });
    }

It works fine, but in order to implement a complex cascading filtering betweent a lot of columns, I have to refresh the options of them.

For exemple: columns 1 display country, columns 2 display city, both are filterable. When I select a country on first filter, i have to refresh the options of the city filter.

How to programmacally refresh filter option of a specific column ? Or refresh filters of all columns witout refresh grid data ?

Thanks in advance

Okay, here is what I have and I'll try to describe it as best I can here.

I have an ASP.NET MVC page that contains a Tab Strip (with 4 tabs).  Each one of the tabs contain a kendo.grid.  Each grid is basically identical looking with the only difference being the data source it is grabbing the model data.  Each grid has 4 buttons defined with command.Custom.

Here is one of the tab/grid sections...

            tabstrip.Add().Text("Product A")
                 .Selected(@bWR)
                 .Content(@<text>
                    @(Html.Kendo().Grid(Model)
                        .Name("updategrid")
                        .Columns(columns =>
                        {
                            columns.Bound(p => p.Id).Hidden(true);
                            columns.Bound(p => p.AllowEditDelete).Hidden(true);
                            columns.Bound(p => p.AllowDeploy).Hidden(true);
                            columns.Command(command =>
                            {
                                command.Custom("DeployA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDeploy");
                                command.Custom("EditA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showEdit");
                                command.Custom("EraseA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showErase");
                                command.Custom("DeleteA").Text("<span style='margin-left:auto;margin-right:auto'/>").Click("showDelete");
                            }).Locked(true).HtmlAttributes(new { style = "background-color: lightgrey;" }).Width(125).MinResizableWidth(125); ;
                            columns.Bound(p => p.Product).Width(180);
                            columns.Bound(p => p.Version).Width(100);
                            columns.Bound(p => p.TargetVersion).ClientTemplate("<span title='#= TargetVersion #'>#= TargetVersion #</span>").Width(245);
                            columns.Bound(p => p.Name).Width(100);
                            columns.Bound(p => p.Description).Width(210);
                            columns.Bound(p => p.File).ClientTemplate("<span title='Click to download'><a href='https://*******/updates-blob-container/" + "#= File #'><u>#= File #</u></a></span>").Width(150);
                            columns.Bound(p => p.Created).Filterable(x => x.UI("datePicker")).Width(100);
                            columns.Bound(p => p.Pilot).ClientTemplate("#= Pilot ? '<span style=\"color: green; \">✔</span>' : '' #").Width(100);
                            columns.Bound(p => p.Deployed).Width(120);
                            columns.Bound(p => p.Success).Width(120).ClientTemplate("<font color=green><a href='" + Url.Action("Success", "UpdateQueue") + "/#= Id #'><u>#= SuccessCount # (#= kendo.toString(Success,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Failure).Width(120).ClientTemplate("<font color=red><a href='" + Url.Action("Failure", "UpdateQueue") + "/#= Id #'><u>#= FailureCount # (#= kendo.toString(Failure,'n0') #%)<u></a></font>");
                            columns.Bound(p => p.Pending).Width(120).ClientTemplate("<font color=blue><a href='" + Url.Action("Pending", "UpdateQueue") + "/#= Id #'><u>#= PendingCount # (#= kendo.toString(Pending,'n0') #%)<u></a></font>");
                        })
                        .Editable(editable => editable.Mode(GridEditMode.PopUp))
                        .Pageable(pager => pager.Refresh(true))
                        .Sortable()
                        .Scrollable()
                        .Filterable()
                        .Selectable()
                        .Resizable(resize => resize.Columns(true))
                        .HtmlAttributes(new { style = @styleGrid })
                        .DataSource(datasource => datasource
                            .Ajax()
                            .Read(read => read.Action("Read_WR", "Update").Data("additionalInfo"))
                            .PageSize(50)
                            .Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
                            .Sort(sort => { sort.Add("Name").Ascending(); sort.Add("Version").Ascending(); })
                        )
                        .Events(events => events
                        .DataBound("onDataBoundA")
                        .FilterMenuInit("onFilterMenuInit"))
                    )
                </text>);

This all works fine and tabbing between each grid displays the correct data and the command buttons work fine.

I am trying to introduce persistence on the filters for each grid.  Based on other posts I have read here, it seems straightforward.  In the onDataBound I have added the getOptions method and saved to local storage.

    function onDataBoundA(e) {
        console.log('onDataBoundA');

        // save the state of each grid.
        localStorage["wrGridOptions"] = kendo.stringify($("#updategrid").data("kendoGrid").getOptions());
}

And then, instead of the  $(document).ready(function () I have a onTabSelect function that checks which tab has been selected and then does a setOptions.

    function onTabSelect(e) {
        if ($(e.item).find("> .k-link").text() == 'Product A') {
            var wrOptions = localStorage["wrGridOptions"];
            if (wrOptions) {
                console.log('Loading wr grid options');
                var grid = $("#updategrid").data("kendoGrid")
                grid.setOptions(JSON.parse(wrOptions));
                grid.dataSource.read();
            }
        }
}

The problem is that when I first visit the page and click on any of the command buttons, the appropriate dialog window displays.  Then if I select a different tab and click on a command nothing happens.  It has lost its click event.  If I refresh the page (F5), the command button works.  And if I again select another tab, the command button does not.

If I comment out the setOptions code, then the command buttons work normally again, but I lose filter persistence.

Any thoughts on what might be causing this?

Regards,

Shawn

Hey everyone,

I have a grid with multiple text and numeric columns. I have hidden the filter menu, which comes with an clear button.

The text columns are autocompletes, which have a clear button inside the cell.

My Problem is the numeric input elements ("k-numerictextbox") dont have a clear button inside.

I have tried around adding them later with Javascript and tried using a template, but that didnt work out and was very fragile.

Any ideas how to get that going?

Thanks 😊

Hi,

Im using kendo MVC version 2016.3.1118.545

I want to use equal to filter on date and time column for format {MM/dd/yyyy hh:mm tt} but its not working

I have seen few solution but its only for filtering date alone.

Please provide some solution for this

Hello,

I have a Kendo grid with multiple columns, and only one of the columns has .Filterable(true). When the filter icon above this column is clicked, a custom filter menu pops up. This menu has fields to set the filter data for multiple columns all at once, and then a "Filter" button which sets the datasource filter data to these specifications.

This filtering is working correctly, however the issue is, when going to another page in the results, the column with .Filterable(true) has its filter data removed from the request that is sent to the Controller. All other columns have their filter data persisted across the pages, just not the one with .Filterable(true). This is the case for whichever column is given this attribute.

For example, if I have Column2 set to .Filterable(true), then filter Column2's data and click "Filter", the correct filtered results are populated in the grid. But after clicking to another page of the results, the results reset and no longer filter Column2's data. It also stays like this when clicking back to page 1.

When looking at the DataSourceRequest object passed to the Controller method that gets the grid results, I can see the filter data for this column is there after clicking the "Filter" button. But after clicking to another page in the results, the request object sent to the Controller method no longer has this column included in its filter data.

Any idea why this is happening or how to resolve?

I've included some code for the grid, the custom filter menu function, and the controller method. Please let me know if anything else is needed, thank you.

.cshtml Grid Code

    @(Html.Kendo().Grid<Model>()
    .Name("MyGrid")
    .HtmlAttributes(new { style = "height: 400px;font-size:12px;" })
    .Columns(columns =>
    {
        columns.Bound(m => m.Column1).Title("Column1").Width(90).Filterable(false);
        columns.Bound(m => m.Column2).Title("Column2").Width(90).Filterable(true);
        columns.Bound(m => m.Column3).Title("Column3").Width(90).Filterable(false);

    . . .

    })
            .Sortable()
            .AutoBind(false)
            .Pageable(p => p
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5))
            .Scrollable()
            .Filterable(f => f
                        .Mode(GridFilterMode.Menu)
                        )
            .Events(e => e
                .FilterMenuInit("OnFilterMenuInit")
            )
        .Resizable(rs => rs.Columns(true))
        .Navigatable()
        .Selectable(s => s
           .Mode(GridSelectionMode.Single)
           .Type(GridSelectionType.Row))
        .NoRecords("No Records!")
        .DataSource(ds => ds
            .Ajax()
            .Model(m=> m.Id(p => p.id))
            .PageSize(10)
                    .Read(read => read.Action("GetData", "Test").Data("{arg1: " + 1 + ", arg2:'testarg'}"))
            .Update(upd => upd.Action("EditData", "Test"))
            .Events(e => e.RequestEnd("onRequestEnd").Error("error_handler"))
            .ServerOperation(true))

.js OnFilterMenuInit function:

function OnFilterMenuInit(e) {

    e.container
      .empty()
        .append($('<div class="row"><div class="col-md-2"><span>Column1: </span></div><div class="col-md-1"><input id="col1-operators" /></div><div class="col-md-4"><input id="col1-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col1-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column2: </span></div><div class="col-md-1"><input id="col2-operators" /></div><div class="col-md-4"><input id="col2-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col2-logic" /> </div> </div>\
<div class="row"><div class="col-md-2"><span>Column3: </span></div><div class="col-md-1"><input id="col3-operators" /></div><div class="col-md-4"><input id="col3-tb" class="k-textbox" /></div><div class="col-md-1"><input id="col3-logic" /> </div> </div>\
<div class="row"><div class="col-md-4"> <button type="submit" class="k-button k-primary" id="filter">Filter</button> </div><div class="col-md-4"><button type="reset" class="k-button" id="clear">Clear</button></div></div>'));

    $('#filter').kendoButton({
        click: function () {
            var col1 = $('#col1-tb').val();
            var col2 = $('#col2-tb').val();
            var col3 = $('#col3-tb').val();

            var col1Ops = $('#col1-operators').value();
            var col2Ops = $('#col2-operators').value();
            var col3Ops = $('#col3-operators').value();

            var col1Logic = $('#col1-logic').value();
            var col2Logic = $('#col2-logic').value();
            var col3Logic = $('#col3-logic').value();

            var orfilter = { logic: "or", filters: [] };
            var andfilter = { logic: "and", filters: [] };

            if (col1 != "") {
                if (col1Logic == 'and') {
                    andfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
                else {
                    orfilter.filters.push({ field: "Column1", operator: col1Ops, value: col1 })
                }
            }

            if (col2 != "") {
                if (col2Logic == 'and') {
                    andfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
                else {
                    orfilter.filters.push({ field: "Column2", operator: col2Ops, value: col2 })
                }
            }

            if (col3 != "") {
                if (col3Logic == 'and') {
                    andfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
                else {
                    orfilter.filters.push({ field: "Column3", operator: col3Ops, value: col3 })
                }
            }
. . .

            andfilter.filters.push(orfilter);
            orfilter = { logic: "or", filters: [] };

            e.sender.dataSource.filter(andfilter);
            localStorage["kendo-grid-filter"] = kendo.stringify(e.sender.dataSource.filter().filters);

        }
    });

    $('#clear').kendoButton({
        click: function () {
            e.sender.dataSource.filter({});
            localStorage["kendo-grid-filter"] = kendo.stringify({});
        }
    })
}

.cs TestController GetData Method