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

Hello, is it possible to open a selected document into the editor ? I'm looking to open a document into the editor when the editor loads up. I have gone through the demos and saw its possible to import a file to the editor, however I'm looking for the editor to open up a document selected in the controller.

Thank you

Anisha

Hi there,

Is the recommended way of dealing with encoded HTML in grid cells being sent back to the controller still using [ValidateInput(false)] on the controller as per this forum post html encode in UI for ASP.NET MVC | Telerik Forums ?

Thank you,

Mike Kingscott

Hello,

We plan to use kendo UI bar chart for our MVC project to present our business logic. My question is how to handle long text on CategoryField? Is there any way to make label on different direction like brown colored lines on the bottom in below image? Thanks.

I am using Telerik UI for ASP.NET MVC R2 2021 SP1 (2021.2.616)  in VB.net, Visual Studio 2019

I have added a FileManager to an MVC view following the code in the Basic Usage demo (https://demos.telerik.com/aspnet-mvc/filemanager) and everything is working correctly, except when I try to implement the code for the New Folder button (Which fires the Create command on the DataSource).

@Html.Kendo().FileManager().Name(Model.ControllerName & "_FileManager").DataSource(Sub(ds)
	ds.Read(Sub(r)
		r.Type(HttpVerbs.Post).Action("Read", Model.ControllerName)
	End Sub)
	ds.Create(Sub(c)
		c.Type(HttpVerbs.Post).Action("Create", Model.ControllerName)
	End Sub)
	ds.Update(Sub(u)
		u.Type(HttpVerbs.Post).Action("Update", Model.ControllerName)
	End Sub)
End Sub).Upload(Sub(u)
	u.Validation(Sub(v)
		v.AllowedExtensions(Model.AllowedFileExtensions)
	End Sub)
End Sub).UploadUrl("Upload", Model.ControllerName).Toolbar(Sub(t)
		t.Items(Sub(i)
		i.Add("createFolder")
		i.Add("upload")
		i.Add("sortDirection")
		i.Add("sortField")
		i.Add("spacer")
		i.Add("search")
	End Sub)
End Sub).InitialView("grid").ContextMenu(Sub(c)   
	c.Items(Sub(i)
		i.Add("download").Command(Model.ControllerName & "DownloadCommand").Text("Download").SpriteCssClass("k-icon k-i-download")
	End Sub)
End Sub)

On the demo page, if you have the developer tab open to the Network, when clicking the New Folder button you can see the request that is sent to the url defined in the Create endpoint and it contains the target path as well as the data for a FileManagerEntry object for the New Folder in the Form Data:

When I click the button in my FileManager view I can see the Form Data only includes the target property but none of the others:

Here is the code for the Create function in my Controller (it's almost identical to the demo code):

        Public Function Create(ByVal target As String, ByVal entry As FileManagerEntry) As ActionResult
            Dim newEntry As FileManagerEntry

            If String.IsNullOrEmpty(entry.Path) Then
                newEntry = CreateNewFolder(target, entry)
            End If

            Return Json(VirtualizePath(newEntry))
        End Function

I have not been able to figure out why the FileManager in my view is not returning the same data to the controller that the demo one does.

Any help would be greatly appreciated.

I have a grid, I have added custom validations on multiple columns. It's working as expected. But there is one issue, I am not able to edit other cells if there is any validation error on the cell, So first I need to fix the error for this cell then only I am allowed to edit other cells. But I want that it should show the validation error in the tooltip and as well as to edit other cells.

I have attached the tooltip message in the question.

columns.Bound(config => config.X).Title("X").HeaderHtmlAttributes(new { @class = "grid-headercustom" }).
ClientTemplate("#if(data.X == 1)" + "{#<span>Y</span>#}" + "else{#<span>N</span>#}#").
HtmlAttributes(new { @class = "grid-rowcustom" }).HtmlAttributes(new { style = "font-size:12px" }).Filterable(ftb => ftb.Enabled(false));

$.extend(true, kendo.ui.validator, {
    rules: {
        RateV: function (input, params) {
            if (input.is("[name='X']")) {
                var grid = $("#mygrid").data("kendoGrid");
                var row = input.closest("tr");
                var dataItem = grid.dataItem(row);
                if (dataItem.X == true && dataItem.Y <= 0) {
                    input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return false;
                }
            }
            
            return true;
            }
        },
        messages: {
            RateV: function (input) {
                // return the message text
                return input.attr("data-val-X");
            }
        }
    });
})(jQuery, kendo);

I have tried to return true also but it doesn't show the error then.

 input.attr("data-RateV-msg", "X must be greater than zero when the Y is ticked");
                    return true;