Grid initialization problem after 2017.R2 release

8 posts, 0 answers
  1. Berivan
    Berivan avatar
    5 posts
    Member since:
    Nov 2016

    Posted 12 Jul 2017 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    2956 posts

    Posted 14 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Berivan
    Berivan avatar
    5 posts
    Member since:
    Nov 2016

    Posted 14 Jul 2017 Link to this post

    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. 

  4. Stefan
    Admin
    Stefan avatar
    2956 posts

    Posted 18 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Berivan
    Berivan avatar
    5 posts
    Member since:
    Nov 2016

    Posted 18 Jul 2017 Link to this post

    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.

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 20 Jul 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Berivan
    Berivan avatar
    5 posts
    Member since:
    Nov 2016

    Posted 20 Jul 2017 in reply to Konstantin Dikov Link to this post

    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

     

     

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 24 Jul 2017 Link to this post

    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:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top