Grid initialization problem after 2017.R2 release

[Berivan]

Hello, 

We have a grid that row mode filter is enabled and data source model has a field that has type as object. After we used the 2017 r2 release this grid is not loading correctly. Below you can find a sample code block that demonstrates this issue on dojo.

function renderStores(stores) {
    if (typeof stores != "undefined" && stores != null) {
        var template = "<ol>";
        for (var i = 0; i < stores.length; i++)
            template = template + "<li>" + stores[i] + "</li>";
        return template + "</ol>";
    } else {
        return "";
    }
}
$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            data: products,
            schema: {
                model: {
                    fields: {
                        ProductName: {
                            type: "string"
                        },
                        UnitPrice: {
                            type: "number"
                        },
                        UnitsInStock: {
                            type: "number"
                        },
                        Discontinued: {
                            type: "boolean"
                        },
                        Stores: {
                            type: "object"
                        }
                    }
                }
            },
            pageSize: 20
        },
        height: 550,
        scrollable: true,
        sortable: true,
        filterable: {
            mode: "row"
        },
        pageable: {
            input: true,
            numeric: false
        },
        columns: [
            "ProductName",
            {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}"
            },
            {
                field: "UnitsInStock",
                title: "Units In Stock"
            },
            {
                field: "Discontinued"
            },
            {
                field: "Stores",
                template: "#=renderStores(Stores)#",
                filterable: {
                    cell: {
                        template: function (args) {
                            console.log(args.element);
                        }
                    }
                }
            }
        ]
    });
});
var products = [{
    ProductID: 1,
    ProductName: "Chai",
    SupplierID: 1,
    CategoryID: 1,
    QuantityPerUnit: "10 boxes x 20 bags",
    UnitPrice: 18.0000,
    UnitsInStock: 39,
    UnitsOnOrder: 0,
    ReorderLevel: 10,
    Discontinued: false,
    Category: {
        CategoryID: 1,
        CategoryName: "Beverages",
        Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    Stores: ["Store 1", "Store 2", "Store 3"]
}, {
    ProductID: 2,
    ProductName: "Chang",
    SupplierID: 1,
    CategoryID: 1,
    QuantityPerUnit: "24 - 12 oz bottles",
    UnitPrice: 19.0000,
    UnitsInStock: 17,
    UnitsOnOrder: 40,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
        CategoryID: 1,
        CategoryName: "Beverages",
        Description: "Soft drinks, coffees, teas, beers, and ales"
    },
    Stores: ["Store 1", "Store 2", "Store 3"]
}, {
    ProductID: 3,
    ProductName: "Aniseed Syrup",
    SupplierID: 1,
    CategoryID: 2,
    QuantityPerUnit: "12 - 550 ml bottles",
    UnitPrice: 10.0000,
    UnitsInStock: 13,
    UnitsOnOrder: 70,
    ReorderLevel: 25,
    Discontinued: false,
    Category: {
        CategoryID: 2,
        CategoryName: "Condiments",
        Description: "Sweet and savory sauces, relishes, spreads, and seasonings"
    },
    Stores: ["Store 1", "Store 2", "Store 3"]
}];

What is the correct way to fix this issue?
Regards.

[Stefan]

Hello Necati,

Thank you for the provided example.

After inspecting it the issue occurs because the Store field is not an actual object, as it is an array of strings.

Once I removed the object type the Grid was loaded as expected:

http://dojo.telerik.com/uzApO

I can assume that in some of the older versions this was automatically mapped as an array and that is why the issue does not occur.

Regards,
Stefan
Progress Telerik

[Berivan]

Hello Stefan,

Thank you for your reply. We used asp.net mvc wrapper to generate grids and wrapper automatically generate store fields from model.In the actual case we use real objects and parse their values with template methods. 

[Stefan]

Hello Necati,

Thank you for the clarification.

Could you please send an example or code snippet of the current implementation, as this will help us test the scenario which will be closer to the real application.

I will be expecting the additional information and I will gladly assist.

Regards,
Stefan
Progress Telerik

[Berivan]

Hello Stefan,

Below you can find the sample of the asp.net mvc code.

Model:

public class Product
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public int UnitPrice { get; set; }
    public int UnitsInStock { get; set; }
    public List<Store> Stores { get; set; }
}

public class Store
{
    public int StoreId { get; set; }
    public string Name { get; set; }
    public string Location { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult List(DataSourceRequest request)
    {
        var products = new List<Product>
        {
            new Product
            {
                ProductId = 39,
                ProductName = "Chai",
                UnitPrice = 180000,
                UnitsInStock = 39,
                Stores=new List<Store>{
                    new Store{StoreId=1,Name = "Store A",Location = "UK"},
                    new Store{StoreId=2,Name = "Store B",Location = "Germany"},
                    new Store{StoreId=3,Name = "Store C",Location = "UK"}
                }
            },
            new Product
            {
                ProductId = 2,
                ProductName = "Chang",
                UnitPrice = 190000,
                UnitsInStock = 17,
                Stores=new List<Store>{
                    new Store{StoreId=1,Name = "Store A",Location = "UK"},
                    new Store{StoreId=2,Name = "Store B",Location = "Germany"},
                    new Store{StoreId=4,Name = "Store D",Location = "Mexico"}
                }
            },
            new Product
            {
                ProductId = 2,
                ProductName = "Chang",
                UnitPrice = 190000,
                UnitsInStock = 17,
                Stores=new List<Store>{
                    new Store{StoreId=1,Name = "Store A",Location = "UK"},
                    new Store{StoreId=2,Name = "Store B",Location = "Germany"},
                    new Store{StoreId=3,Name = "Store C",Location = "UK"},
                    new Store{StoreId=4,Name = "Store D",Location = "Mexico"}
                }
            }
        }.AsQueryable();

        /*** Filter Logic */
        // If request contains filter descriptor with member name "Stores" manually filter query and remove filter descriptor with name "Stores"

        return Json(products.ToDataSourceResult(request,r=>r));
    }
}

View:

<script>
        function renderStores(stores) {
            if (typeof stores != "undefined" && stores != null) {
                var template = "<ol>";
                for (var i = 0; i < stores.length; i++)
                    template = template + "<li>" + stores[i].Name +" ("+stores[i].Location+")</li>";
                return template + "</ol>";
            } else {
                return "";
            }
        }
</script>

@(Html.Kendo().Grid<Product>()
      .Name("ProductGrid")
      .Filterable(f=>f.Mode(GridFilterMode.Row))
      .DataSource(ds=>ds.Ajax().Read(r=>r.Action("List","Home").Type(HttpVerbs.Post)))
      .Columns(col =>
      {
          col.Bound(m => m.ProductName);
          col.Bound(m => m.UnitPrice).Format("{0:c}");
          col.Bound(m => m.UnitsInStock);
          col.Bound(m => m.Stores).ClientTemplate("#=renderStores(Stores)#");
      }))

 

Generated Kendo Grid Script:

kendo.syncReady(function () {
    jQuery("#ProductGrid").kendoGrid({
        "columns": [{
            "title": "Product Name",
            "headerAttributes": {
                "data-field": "ProductName",
                "data-title": "Product Name"
            },
            "field": "ProductName",
            "encoded": true
        }, {
            "title": "Unit Price",
            "headerAttributes": {
                "data-field": "UnitPrice",
                "data-title": "Unit Price"
            },
            "field": "UnitPrice",
            "format": "{0:c}",
            "encoded": true
        }, {
            "title": "Units In Stock",
            "headerAttributes": {
                "data-field": "UnitsInStock",
                "data-title": "Units In Stock"
            },
            "field": "UnitsInStock",
            "encoded": true
        }, {
            "title": "Stores",
            "headerAttributes": {
                "data-field": "Stores",
                "data-title": "Stores"
            },
            "template": "#=parseStores(Stores)#",
            "field": "Stores",
            "encoded": true
        }],
        "filterable": {
            "mode": "row"
        },
        "scrollable": false,
        "messages": {
            "noRecords": "No records available."
        },
        "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": "/dbs/Home/List"
                },
                "prefix": ""
            },
            "serverPaging": true,
            "serverSorting": true,
            "serverFiltering": true,
            "serverGrouping": true,
            "serverAggregates": true,
            "filter": [],
            "schema": {
                "data": "Data",
                "total": "Total",
                "errors": "Errors",
                "model": {
                    "fields": {
                        "ProductId": {
                            "type": "number"
                        },
                        "ProductName": {
                            "type": "string"
                        },
                        "UnitPrice": {
                            "type": "number"
                        },
                        "UnitsInStock": {
                            "type": "number"
                        },
                        "Stores": {
                            "type": "object"
                        }
                    }
                }
            }
        }
    });
});

 

Regards.

[Konstantin Dikov]

Hi Necati,

First I would suggest that you move the loading of the script files in the HEAD section if they are currently loaded in the BODY. In the latest versions we have introduced the "kendo.syncReady" method in order to resolve a breaking change in jQuery 3+, but that change requires the script files to be loaded within the HEAD tag.

If that does not resolve the problem you could inspect the browser's console for any JavaScript errors.

Finally, if the issue persists, please provide more information on the exact problem and especially what you mean with "grid is not loading correctly".

Regards,
Konstantin Dikov
Progress Telerik

[Berivan]

Hello Konstantin,

You can see the error from console on http://dojo.telerik.com/uzApO/5 with libraries Kendo UI 2017 R2 or Kendo UI 2017 R2 sp1. Error:

TypeError: t is undefined[Learn More]  kendo.all.min.js:68:2579
    _createOperatorDropDown/< https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:68:2579
    trigger https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:25:6805
    set https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:27:9555
    _refreshUI https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:68:3494
    init https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:68:920
    plugin/e.fn[c]/< https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:26:4388
    each https://code.jquery.com/jquery-1.12.3.min.js:2:2879
    each https://code.jquery.com/jquery-1.12.3.min.js:2:844
    plugin/e.fn[c] https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:26:4360
    _filterRow https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:51:31543
    _thead https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:52:13429
    init https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:49:30412
    plugin/e.fn[c]/< https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:26:4388
    each https://code.jquery.com/jquery-1.12.3.min.js:2:2879
    each https://code.jquery.com/jquery-1.12.3.min.js:2:844
    plugin/e.fn[c] https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js:26:4360
    <anonymous> http://runner.telerik.io/result:27:5
    i https://code.jquery.com/jquery-1.12.3.min.js:2:27444
    fireWith https://code.jquery.com/jquery-1.12.3.min.js:2:28213
    ready https://code.jquery.com/jquery-1.12.3.min.js:2:30004
    K https://code.jquery.com/jquery-1.12.3.min.js:2:30366

 

I think the problem is not arise directly from js library. It arises from mvc grid helper. Kendo grid constructor script generates by mvc helper. Helper always puts the filed type as object like below. "Generated Kendo Grid Script" at the previous post was copied from page sourge which was generated by kendo mvc helper. 

Can you try to run sample code with Ui for Asp.Net Mvc product?

Regards

 

 

[Konstantin Dikov]

Hello Necati,

The problem in the dojo example is due to the fact that you are enabling the filtering for a column with complex object, which is not supported scenario. For resolving the issue you could either set the "Filterable" property of the column to "false" or use a ForeignKey column instead:

• http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik