Hi

I have a kendo grid and have turned on the column menu and the filtering. However, when the user opens the column menu, they then have to click again to open up the filtering. Is there a way to have this expanded by default? I have found some documentation that seems to show that functionality for the Angular side of kendo, but can't find anything for the MVC helpers, or the Jquery.

My grid currently looks like this.

@(Html.Kendo().Grid<HomeGridViewModel>().Name("WorkRequestGrid").Columns(x =>
{
	x.Bound(c => c.Priority).ClientTemplate("#=Priority#").Title("").Filterable(false).HtmlAttributes(new { @class = "crm_grid_priority" }).Width(20).Sticky();
	x.Bound(c => c.ActivityRef).ClientTemplate("<span>#=ActivityRef#</span>").Title("Activity Ref").HtmlAttributes(new { @class = "crm_grid_activity wordWrap" }).Width(135).Sticky();
	x.Bound(c => c.CustomerName).Title("Customer").HtmlAttributes(new { @class = "crm_customerName" }).Width(200);
	x.Bound(c => c.ProposerName).Title("Proposer Name").HtmlAttributes(new { @class = "crm_proposerName" }).Width(200);
	x.Bound(c => c.PostCode).Title("Postcode").HtmlAttributes(new { @class = "crm_postCode" }).Width(80);
	x.Bound(c => c.RequestDueDate).Format("{0:d}").Title("Client Due Date").HtmlAttributes(new { @class = "crm_dueDate" }).Visible(true).Width(100);
	x.Bound(c => c.SurveyType).Title("Survey Name").HtmlAttributes(new { @class = "crm_activityType" }).Width(200);
	x.Bound(c => c.SurveyorName).Title("Surveyor Name").HtmlAttributes(new { @class = "crm_surveyor" }).Width(200);
	x.Bound(c => c.ScheduledDate).Title("Booked date").Format("{0:d}").Visible(true).HtmlAttributes(new { @class = "crm_bookedDate" }).Width(100); 
	x.Bound(c => c.ItemStatus).Title("Status").HtmlAttributes(new { @class = "crm_status" }).Encoded(false).Sortable(false).Filterable(false).Width(200).Sticky();
})
	.HtmlAttributes(new { @class = "crm_grid" })
	.Sortable()
	.Filterable(f=>f.Enabled(true).Extra(false).Operators(Model.GridOperators))
	.ColumnMenu(m=> {
		m.ComponentType("modern");
		m.Columns(c =>
		{
			c.Sort("asc")
			.Groups(g =>
			{
				g.Add().Title("Survey Details").Columns(new List<string> { "ActivityRef", "SurveyType", "RequestDueDate", "SurveyorDueDate", "SurveyorName", "ScheduledDate"});
				g.Add().Title("Property Details").Columns(new List<string> { "CustomerName", "ProposerName", "PostCode" });
				g.Add().Title("Survey Status").Columns(new List<string> { "SurveyStatus" });
			});
		});
	})
	.Resizable(r=>r.Columns(true))
	.ColumnResizeHandleWidth(3)
	.Mobile(MobileMode.Auto)
	.Scrollable(s=>s.Height("400px"))
	.Pageable(p => p.Enabled(true).PageSizes(new int[] { 20, 50, 100,250 }))
	.DataSource(d => d
		 .Ajax()
		 .Read(read => read.Action("Grid_HomePage", "Home"))
		 .PageSize(50)
		 .ServerOperation(true)
	)
)

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