The ability to export a grid to excel has been a great addition, we would like the ability to export in CSV and XML also.

Hi!

We're using a drop down list as a grid cell's edit template, but.. our users are unable to properly edit the rows at the bottom of the grid due to drop down list going off the page, and closing when they attempt to scroll.

any ideas?

When you create a Grid using a TModel that inherits from DynamicObject, a type cast exception is thrown when setting the DataSource Model Id property.

public class Metadata : DynamicObject
{
    ...
}  

...
.DataSource(dataSource =>
{
    dataSource.Ajax()
      .Model(model =>
      {
          model.Id("Id");
      });
})

A type cast exception is thrown by the following line in Kendo\AspNet.Core\Kendo.Mvc\UI\DataSource\Fluent\DataSourceModelDescriptorFactoryBase.cs because ModelDynamicDataKey is not generic, so it cannot be cast to IDataKey<TModel>

dataKey = (IDataKey<TModel>)new ModelDynamicDataKey(fieldName, lambdaExpression);

The following code changes fix the issue:

DataSourceModelDescriptorFactoryBase.cs

namespace Kendo.Mvc.UI.Fluent
{
	using System.Reflection;
	using Extensions;

	/// <summary>
	/// Defines the fluent interface for configuring the <see cref="DataSource"/> Model definition.
	/// </summary>
	/// <typeparam name="TModel">Type of the model</typeparam>
	public abstract class DataSourceModelDescriptorFactoryBase<TModel> : IHideObjectMembers
        where TModel : class
    {
        protected readonly ModelDescriptor model;

        public DataSourceModelDescriptorFactoryBase(ModelDescriptor model)
        {
            this.model = model;
        }

        /// <summary>
        /// Specify the member used to identify an unique Model instance.
        /// </summary>
        /// <param name="fieldName">The member name.</param>
        protected void Id(string fieldName)
        {
            IDataKey<TModel> dataKey;
            if (typeof(TModel).IsDynamicObject())
            {
                var lambdaExpression = ExpressionBuilder.Expression<TModel, object>(fieldName);
                dataKey = new ModelDynamicDataKey<TModel>(fieldName, lambdaExpression);
            }
            else
            {
                dataKey = GetDataKeyForField(fieldName);
            }

            dataKey.RouteKey = dataKey.Name;

            model.Id = dataKey;
        }

        protected IDataKey<TModel> GetDataKeyForField(string fieldName)
        {
            var lambdaExpression = ExpressionBuilder.Lambda<TModel>(fieldName);
            var fieldType = typeof(ModelDataKey<,>).MakeGenericType(new[] { typeof(TModel), lambdaExpression.Body.Type });

            var constructor = fieldType.GetConstructor(new[] { lambdaExpression.GetType() });

            return (IDataKey<TModel>)constructor.Invoke(new object[] { lambdaExpression });
        }
    }
}

ModelDynamicDataKey.cs

namespace Kendo.Mvc.UI
{
    using System;
    using System.Linq.Expressions;
    using Microsoft.AspNetCore.Mvc.Rendering;

    internal class ModelDynamicDataKey<TModel> : IDataKey<TModel>
        where TModel : class
    {
        public ModelDynamicDataKey(string memberName, Expression<Func<TModel, object>> expression)
        {
            RouteKey = "id";
            Name = memberName;
            Expression = expression;
            Value = expression.Compile();
        }

        public string Name
        {
            get;
        }

        public string RouteKey
        {
            get;
            set;
        }

        public Func<TModel, object> Value
        {
            get;
        }

        public Expression<Func<TModel, object>> Expression
        {
            get;
        }

        public object GetValue(object dataItem)
        {
            try
            {
                return Value((TModel)dataItem);
            }
            catch (Microsoft.CSharp.RuntimeBinder.RuntimeBinderException)
            {
                return null;
            }
        }

        public string HiddenFieldHtml(IHtmlHelper<TModel> htmlHelper)
        {
            return htmlHelper.Hidden(Name, null, new { id = "" }).ToString();
        }
    }
}

Bug Report

Ticket ID:1486632

When using groupable.sort.compare with client operations and groupPaging, a JavaScript error is thrown:

Reproduction

Dojo

Environment

2020.3.915

Hi,

We have a property EnableHeaderContextAggregateMenu in Radgrid. By enabling this, we can aggregate any column in the Radgrid and show the result value in the corresponding column footer at runtime by the end user.

Do we have similar property in Kendo UI Grid? We need to implement this in Kendo UI Grid which has dynamic column data binding. We had attached a sample code here. Can you please implement the same in the code and revert?

Thanks & Regards,
Shivakumar. K

I posted this in the forums but didn't get a response so I'll try here.  Per this link, and other forum posts I thought that when server operations are set to 'false' that non string types would work in the search box for the ASP MVC Core grid.

Documentation:

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/search-panel?_ga=2.40480546.1407553043.1611076638-1335478734.1604974711

Another forum post reference:

https://www.telerik.com/forums/new-search-panel-and-datetime

My grid code is below.  The 'PaymentType' Column is an enum and the search does not work for it.  I have also tried adding this:

.Search(search=> { search.Field(f => f.PaymentType); })

but it didn't make a difference

    @(Html.Kendo().Grid<B3.Services.LoanServices.LoanServiceModels.PaymentServiceModel>()
        .Name("PaymentRegisterReport")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Payments_Read", "StandardReports", new { area = "Reports" }))
            .PageSize(1000)
            .ServerOperation(false)
        )
        .Columns(columns =>
        {
            columns.Bound(p => p.Date).Format("{0:MM/dd/yyyy}").Title("Date");
            columns.Bound(p => p.LoanName).Title("Loan Name");
            columns.Bound(p => p.PaymentType).Title("Payment Type");
            columns.Bound(p => p.CheckNumber).Title("Check Number");
            columns.Bound(p => p.Amount).Title("Amount").Format("{0:C}")
                .HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align: right" });

        })
        .Pageable()
        .Sortable()
        .Filterable()
        .HtmlAttributes(new { style = "font-size:12px" })
        .ColumnMenu()
        .ToolBar(t =>
        {
            t.Search();
            t.Excel();
        })
        .Reorderable(l => l.Columns(true))
        .Events( e =>
        {
            e.ColumnShow("saveKendoGridState");
            e.ColumnHide("saveKendoGridState");
            e.ColumnReorder("kendoGridColumnReorder");
        })
    )

The Custom() DataSource has capability to set the initial Page of the grid:

        .PageSize(20)
        .Page(4)

While the Ajax() DataSource does not. It would be nice if it gets added.

Currently, you can use the page() method for local or .Ajax() bound grid:
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page

Or query:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/query

It's kind of difficult to describe in the subject, but here's the scenario. In an ASP.NET Core 3.1 web app, we have some different Kendo Grids that are generated by using the HTML Helper. Some of these use server operations while others do not. Following the information in the Persist State demo, I'm working on changes to save the grid options (sorting, filtering, page number, etc.) when the user navigates away from a page, then restore them the next time it's loaded. With a grid we have using server operations, this is working well so far. For a grid we have using client operations, on the other hand, I'm getting unexpected results.

Example:

@(Html.Kendo().Grid(new[]
   {
      new { ProductName = "Product 1", UnitPrice = 3.50 },
      new { ProductName = "Product 2", UnitPrice = 5.30 }
   })
   .Name("TestGrid")
   .NoRecords(n => n.Template("No records found"))
   .Columns(columns =>
   {
      columns.Bound(p => p.ProductName);
      columns.Bound(p => p.UnitPrice);
   })
   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       .ServerOperation(false)
   )
)
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

If you comment out the JavaScript, you get a working grid. With the JavaScript in place, this should get the options from the grid, then immediately re-apply those same options (just for testing purposes) and the grid should end up looking the same as it did before. However, the setOptions() call seems to be triggering a POST back to the same page (with the data "sort=&group=&filter=") then wiping the data from the grid and showing the "No records found" message. However, since this grid is bound to a model property and has ServerOperation(false), all of the data needed is already at the client and there is no Ajax request that exists to get this data.

This is the code from viewing the source that was rendered by the code in the View from above:

<div id="TestGrid" name="TestGrid"></div><script>kendo.syncReady(function(){jQuery("#TestGrid").kendoGrid({"noRecords":{"template":"No records found"},"columns":[{"title":"Product Name","field":"ProductName","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true},{"title":"Unit Price","field":"UnitPrice","filterable":{"messages":{"selectedItemsFormat":"{0} selected items"},"checkAll":false},"encoded":true}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"pageSize":20,"page":1,"groupPaging":false,"total":2,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ProductName":{"editable":false,"type":"string"},"UnitPrice":{"editable":false,"type":"number"}}}},"data":{"Data":[{"ProductName":"Product 1","UnitPrice":3.5},{"ProductName":"Product 2","UnitPrice":5.3}],"Total":2}}});});</script>
<script>
   $(document).ready(function () {
      var grid = $("#TestGrid").data("kendoGrid");
      var options = grid.getOptions();
      grid.setOptions(options);
   });
</script>

I'm not sure why it's attempting an Ajax request, but that appears to be what's causing the problems. With the other grid we have that *does* use server operations, I'm assuming we're not having this same problem because it does actually require an Ajax request to read the data.

When a Grid is placed inside a template (e.g. hierarchy), the # symbol needs to be escaped from strings since it is a special key for the Kendo internal logic:
https://docs.telerik.com/kendo-ui/framework/templates/overview#creating-inline-templates 

This creates a problem with Unicode letters, since they are automatically encoded by the framework to values containing the # symbol on the client. Currently, a column having Unicode characters in its HtmlAttributes causes an "invalid template" error:

columns.Bound(p => p.Item).Width(200).Title("Item").HeaderHtmlAttributes(new {title = "Item with äöüÄÖÜß"});

Creating a .ToolTip("Hover Text") property similar to the existing .Title("Header Text") one will resolve this issue and help users to easily provide tooltips for the column headers.

Workarounds until the issue is fixed:

Workaround 1:

columns.Bound(p => p.Item).Width(200)
          .HeaderHtmlAttributes(new {
              title = GetEncodedText("äöüÄÖÜß"), @class="encodedHeader" });
...
@{ string GetEncodedText(string title)
    {
        return Html.Encode(title).Replace("#", "\\#");
    } }

<script>
    $(document).ready(function () {
        $("div.k-grid.k-widget").each(function (i, e) {
            var grid = $(e).data().kendoGrid;
            grid.bind("dataBound", gridDataBound);
            grid.bind("detailExpand", function (args) {
                var innerGrid = args.detailRow.find("div.k-grid.k-widget").data().kendoGrid;
                innerGrid.bind("dataBound", gridDataBound);
            });

            function gridDataBound(e) {
                e.sender.element.find("th.encodedHeader").each(function (i, e) {
                    var headerCell = $(this);
                    headerCell.attr("title", $("<textarea/>").html(headerCell.attr("title")).text());
                });
            }
        });
    });
</script>

2. Workaround:

columns.Bound(p => p.Item).Width(200)
.ClientHeaderTemplate("<span class='headerTemplate' title='Item with äöüÄÖÜß'>Title</span>");

Event definition:

@(Html.Kendo().Grid<OrderPosModel>()
...
.Events(e=>e.DataBound("gridDataBound"))

function gridDataBound(e) {
     e.sender.element.find("span.headerTemplate").each(function (i, span) {
     span.parentElement.title = span.title;
});

Trouble on iPad 6/7/8 with Safari.

Using grid with batch and incell edit mode.

Datepicker is not working. It just shows the text box to manually type in date.

Every once in a while the date picker pops up and stays for selection.

Sometimes I see the dat picker, but it goes away suddenly before being able to set a date.

I want to be able to expand / collapse grouped column headers in my grid (ASP.NET Core). I have found this example which achieves what I need (https://docs.telerik.com/kendo-ui/knowledge-base/grid-expand-collapse-columns-group-button-click), however the HeaderTemplate() method appears to be unavailable. See my placement below. 

I am using the following packages:

KendoUIProfessional, Version="2020.3.915"
Telerik.UI.for.AspNet.Core, Version="2020.3.915"

Bug Report:

Whenever the foreign key column of the grid is configured for multi checkbox filtering and is nullable, the value of the "null" option is sent to the server as "NaN".

Steps to replicate:

1. Set ForeignKey column

2. Make the column nullable

3. Set the filterable.multi option to true

4. filter by the null value

A sample project with reproduction has been shared in Ticket with ID: 1463089

Bug report

Grid's items are not correctly calculated when a group is expanded and groupPaging is set to "true".

Reproduction of the problem

1. Open this Dojo and run it
2. Expand the "Assistant Sales Agent" group.
3. Expand the "Assistant Sales Representative" group

Current behavior

On the expand of the "Assistant Sales Agent" group, the footer displays the following:

On the expand of the "Assistant Sales Representative" group, the footer displays:

The number of the displayed items is incorrectly calculated

Expected/desired behavior

The number of the displayed items should be calculated based on the number of the rows inside the opened groups

Environment

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

Bug report

When the data source of the grid is set to WebAPI, the Batch option is not available. 

Reproduction of the problem

1. Set the DataSource to WebAPI()

2. Attempt to enable the Batch(true) option.

Description

Reproducible only with the latest version of the suite - 2019.3.1023. The Batch option is available in the 2019.3.917 version.

Environment

* **Kendo UI version:** 2019.3.1023
* **jQuery version:** 1.12.4
* **Browser:** [all] 

Enhancement 

Add support for setting ClientHeaderTemplate as a function in Html Helper Grid

Current behavior
ClientHeaderTemplate can be set only as a string

Expected/desired behavior
ClientHeaderTemplate shall allow executing a function 

Environment
Kendo UI version: all
Browser: all

Hello,

i guess i've found some bug in the Version 2020.2.617.

I have upgraded from 2020.1.406 to 2020.2.617

after them it is not in the correct way possible for me to hidde or display the correct columns.

If i click the first or second column nothing happend..

after them i get the wrong fields to hidde or display.. if i use the old js files from your CDN

it works again, but i'm not sure what will not be working in our WebApp if i do so.

/Tino

Hi Team ,

I Am trying to export kendo grid content from Server side as i need to do some modification(View model) before exporting to excel. and also i need to add some custom headers while exporting.

Can you please provide me the solution with example with this scenario.

Thanks,

Narasegowda

When a hierarchy grid id contains a dot, the grid fails to generate its detail template. 

The dot(and other legal HTML identifier characters) should be escaped internally by Kendo, so that they can be selected by jQuery and the grid initialized.

Here is a sample Dojo to illustrate:

https://dojo.telerik.com/@bubblemaster/ASivogAF/2

Kendo UI has the property https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/scrollable that can not be set in the UI for ASP.NET Core with the value TRUE

The reason I am asking is because if I change it on document ready using the grid.setOptions if the grid has autobind then the Read method is executed twice.