Refresh Event Handler for refreshing the grid with refresh set to true

Bug report

When using specific themes for a scrollable Kendo UI Grid which have long titles within the column header, the sort icon are partially shown or not shown.

Reproduction of the problem

1. Please check out this Progress Kendo UI Dojo
2. Sort the first column

Current behavior

The sort icon is not shown upon sorting.

Expected/desired behavior

The sort icon should be shown as expected with every theme.

Environment

• Kendo UI version: 2021.3.1109
• jQuery version: 3.6
• Browser: all

https://demos.telerik.com/kendo-ui/grid/server-grouppaging-virtualization and click to Edit in Dojo. It o

pens https://dojo.telerik.com/afoCefOJ

group: [{
                        field: "city",
                        dir: "asc"
                    }, {
                        field: "companyName",
                        dir: "asc"
                    }],

group: [{
                        field: "city",
                        dir: "asc"
                    }],

and also adjust pageSize to 10:

pageSize: 10,

Bug report

In the Html4 specification it required the tbody element to follow the tfoot element. In contrast, the current Html5 specification favors the thead > tbody > tfoot structure, even though it doesn't explicitly forbid the table's tfoot element to be rendered after the thead and before the tbody element: https://html.spec.whatwg.org/#the-table-element
In terms of accessibility, it makes more sense the tfoot element to be rendered after tbody. This way the readers would be able to read the elements in a logical order: thead > tbody > tfoot

Reproduction of the problem

https://demos.telerik.com/kendo-ui/grid/aggregates

Inspect the footer

Current behavior

tbody is rendered after tfoot.

Expected/desired behavior

tbody is rendered before tfoot.

Environment

• Kendo UI version: 2021.2.616
• jQuery version: x.y
• Browser: [all]

Hi Team,

I'd like to request the functionality to change the format of a Kendo UI Grid column without needing to call the setOptions method.  This would be nice to avoid additional Read calls.

Thank you!

Using filterable: { ui: "slider" }, allow us to also pass a min and max value for the slider. And automatically build the filter to be something like this:
{
 logic: "and",
 filters:
  [ 
   { field: fieldName, operator: "neq", value: null },                                            
   { field: fieldName, operator: "gte", value: s.values[0] }, 
   { field: fieldName, operator: "lte", value: s.values[1] }
  ]
}

Enable kendo grid to export excel with subscript/superscript and other options using Excel export API via configuration options. Right now it supports background, bold, color, fontName, fontSize, hAlign, italic, underline, and vAlign. Adding superscript/subscript would be great and it should not be difficult.

The paging functionality will not change the page automatically if no  data is left on the page.

I have recently encountered this issue, and I find it very astounding that i have found a request for this from several years ago and nothing has been done on it. 

This shouldn't have to be done by end users, the goal of your functionality is to provide easier solutions to users. This should be automatic functionality of any code that creates a pager. If the fix is as simple as the replies to requests for this suggest, it should be very simple to implement this in your next build to function automatically if paging is active.

Please get this fixed. 

Thanks.

The Grid already has beforeEdit event that can be used for preventing the editing depending on custom logic. The same thing could be used for preventing add or delete based on custom logic or validation.

Drag fill multiple cells like excel. Kendo Spreadsheet control already has it. This is a crucial feature missing from versatile grid , IMO

Quite often you would need to set custom attributes to buttons that may not have any inbuilt functionality for Kendo Grid. This option is currently not available unless we use a template and build our own buttons. It would be useful to set the attributes similar to how the class attributes are set so we won't have to build a template of our own.

Add a new attribute columns.command.materialIconClass and render it e.g. as <i class="material-icons">contact_mail</i> 

Example: 

var grid = $("#grid").kendoGrid({
                        dataSource: {
                           pageSize: 20,
                           data: createRandomData(50)
                        },
                        pageable: true,
                        height: 550,
                        columns: [
                            { field: "FirstName", title: "First Name", width: "140px" },
                            { field: "LastName", title: "Last Name", width: "140px" },
                            { field: "Title" },
                            { command: { materialIconClass: "contact_mail", text: "View Details", click: showDetails }, title: " ", width: "180px" }]
                    }).data("kendoGrid");

When a user zooms OUT on a browser(like Google Chrome) to 67% or 75%, sometimes the resize handles do not work.  We added css on top to see why(made the resize handle more visible).  The handle moves to the left the more the user zooms out.  Seems to work fine up to 80% but starts to fail after that.  Thanks

In the JQuery Grid if you have the following column definition (for example):

[
    {
        "field": "Name",
        "title": "Name"
    },
    {
        "title": "Address",
        "columns": [
            {
                "field": "Street",
                "title": "Number & Street"
            },
            {
                "field": "City",
                "title": "City"
            },
            {
                "field": "PostCode",
                "title": "Post Code"
            }
        ]
    },
    {
        "title": "Contact Details",
        "columns": [
            {
                "field": "Email",
                "title": "Email Address"
            },
            {
                "field": "Phone",
                "title": "Phone Number"
            }
        ]
    },
    {
        "field": "DOB",
        "title": "Date of Birth"
    }
]

When you drag the multi-column header "Address" and drop it over "Date of Birth" the header and it's child columns move as expected but the column headers in the two multi-columns get mixed up.

This only seems to happen when dragging a multi-column past another multi-column in either direction.

would be useful

With out using the group column header(columns.columns). it is better to enable one option to keep some of the columns locking together in the grid. If you reorder one column other columns should move with it like that. When we use the columns.columns option we can't find the columns under that header using the column Index (column[index]) option.

Current, if one were to use the Kendo Grid in UI for MVC, there's no way to bind the datasource using Ajax binding and specify server side parameters to the read function in the controller.

In many cases, the read function on the controller side will use a primary key to do a select statement to get particular details of a model to render.

This is relatively simple to keep track of on the javascript side and server side when there's just one grid, as we can use a hidden input and always update it's value from the model.

However, when we have an array of grids, and an array of primary keys for the grids, this is very difficult to keep track of which read function corresponds to which grid.

The only solution is to generate multiple javascript read functions with the primary key baked into the names and in the bodies of the functions on the server side, which is ugly and not optimal for security.

    @foreach(var modelID in Model.ModelIDs)

    var readFunction = "function modelStatsReadData_" + modelID + "()";
    <text>
    @readFunction
    {
        return {
            modelID: @modelID
        }
    }
    </text>
    } @*end foreach loop*@


@foreach(var model in Model.Models) 
{
....

                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model =>
                    {
                        model.Id(m => m.ID);
                    })
    				.Read(read => read.Action("FlowPlanDetails_Read", "SubmitFlow").Data("flowPlanReadData_" + @model.D))

}


This is solvable if we do server side binding for the datasource, as we can pass route values. But that is an entirely different implementation and we shouldn't have choose Ajax() versus Server() binding based on how functional the API is.

Currently, there's no way to pass variables into client footer template functions that are registered with client footer templates.

In the case when you have multiple grids on the same page with different grid ids, you are forced to instantiate multiple javascript callback functions with the grid id/name baked into the function.  

Consider:

             @foreach    @foreach (var model in Model.MyModels)
             ...
             ...
             @(Html.Kendo().Grid<eFHOL.Models.ViewModels.MyModelModel>
                    ()
                    .Name("ModelGrid_" + @model.ID)
                    .Columns(columns =>
                    {
                        columns.Bound(m => m.Name).Width(30).ClientFooterTemplate("#= footerLabel(data) #");
                        columns.Bound(m => m.Hours).Width(30).ClientFooterTemplate("#= HoursSumAvg_" + @model.ID + "(data) #");
                        columns.Bound(m => m.Weight).Width(30).ClientFooterTemplate("#= WeightSumAvg_" + @model.Weight + "(data) #");


And you will have to have server side code to register and wire up each of these distinct javascript footer template callback functions:

    @foreach(var modelID in Model.ModelIDs)
    {
        var hourFunction = "function HoursSumAvg_" + modelID + "(model) ";

    <text>
    @hourFunction
    {
        var grid_name = '#FlowPlanDetailsGrid_@modelID';
        return HoursSumAvg(grid_name);
    }


This quickly becomes a mess if you have a for loop that renders 5 or 10 grids, as we have the use-case for. 

It would be very helpful if there was a way to register the name of the callback which accepts server side parameters that can be evaluated on the server side and passed to the javascript function.

Alternatively, if the client footer template functions could somehow retain the name of the grid they are bound to, via a property in the parameter passed in, that would be good enough.