Two grid switch lead to loading issue

8 posts, 1 answers
  1. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 10 May 2018 Link to this post

    I have two kendo ui grid in one html page. They displayed based on the options that user choose in dropdownlist. For example, if I chose 1, the first grid displayed and the second one hidden. And if I choose 2, the second one displayed but first one hidden.

    But after I choose 1 and add some items to grid 1, then choose 2 to switch to grid 2 and add some items to grid 2. Now when I switch back to grid 1, it display a loading icon always. I could not operate my grid 1 any more.

    The attached screenshot is the issue. And following is my code. Can someone help us check what's wrong with my code? Thanks.

     

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="../styles/kendo.common.min.css" />
        <link rel="stylesheet" href="../styles/kendo.default.min.css" />
        <link rel="stylesheet" href="../styles/kendo.default.mobile.min.css" />
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kendo.all.min.js"></script>
        <script type="text/javascript">
            function SelectRawMaterType() {
                var type = document.getElementById("Type");
                var meat = document.getElementById("Meat");
                var additive = document.getElementById("Additive");
                var gridMeat = document.getElementById("gridMeat");
                var gridAdditive = document.getElementById("gridAdditive");
                if (type.value == 0) {

                    additive.style.display = "none";
                    meat.style.display = "block";
                    gridMeat.style.display = "block";
                    gridAdditive.style.display = "none";
                }
                if (type.value == 1) {

                    additive.style.display = "block";
                    meat.style.display = "none";
                    gridMeat.style.display = "none";
                    gridAdditive.style.display = "block";
                }

                Records();
            }

            function Records() {
                var para = document.getElementById("Type");
                if (para.value == 0) {
                    $(document).ready(function () {
                        var mydata = new kendo.data.DataSource({
                            transport: {
                                //读取数据
                                read: function (e) {
                                    ////alert(111);
                                    //e.success(datasource);
                                },
                                //更新数据
                                update: function (e) {
                                    e.success();
                                }

                            },
                            schema: {
                                model: {
                                    id: "Id",
                                    fields: {
                                        RawName: { type: "string" },
                                        Unit: { type: "string" },
                                        Remark: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 5
                        });

                        $("#gridMeat").kendoGrid({
                            dataSource: mydata,
                            selectable: "multiple, row", //设置多列可选
                            filterable: true,            //设置过滤可用
                            sortable: true,              //设置排序可用
                            pageable: true,              //设置分页可用
                            editable: "popup",           //设置编辑模式。popup:弹窗;linline:行内编辑
                            columns: [{
                                field: "RawName",
                                title: "原材料名称",
                                width: 240
                            }, {
                                field: "Unit",
                                title: "原材料单位"
                            }, {
                                field: "Remark",
                                title: "备注"
                            },
                            { command: ["edit"], title: "操作" }]
                        });
                    });


                }
                if (para.value == 1) {
                    $(document).ready(function () {
                        var mydata = new kendo.data.DataSource({
                            transport: {
                                //读取数据
                                read: function (e) {
                                    ////alert(111);
                                    //e.success(datasource);
                                },
                                //更新数据
                                update: function (e) {
                                    e.success();
                                }

                            },
                            schema: {
                                model: {
                                    id: "Id",
                                    fields: {
                                        RawName: { type: "string" },
                                        Unit: { type: "string" },
                                        MaximumUsage:{ type:"string"},
                                        Remark: { type: "string" }
                                    }
                                }
                            },
                            pageSize: 5
                        });

                        $("#gridAdditive").kendoGrid({
                            dataSource: mydata,
                            selectable: "multiple, row", //设置多列可选
                            filterable: true,            //设置过滤可用
                            sortable: true,              //设置排序可用
                            pageable: true,              //设置分页可用
                            editable: "popup",           //设置编辑模式。popup:弹窗;linline:行内编辑
                            columns: [{
                                field: "RawName",
                                title: "原材料名称",
                                width: 240
                            }, {
                                field: "Unit",
                                title: "原材料单位"
                                },
                            {
                                field: "MaximumUsage",
                                title:"最大使用量"
                            }, {
                                field: "Remark",
                                title: "备注"
                            },
                            { command: ["edit"], title: "操作" }]
                        });
                    });
                }
            };

            $(window).load(function () {
                SelectRawMaterType();
                //Records();
            });

            function GetSourceForMeat() {
                var gridMeat = $("#gridMeat").data("kendoGrid");
                var datasourceOfMeat = gridMeat.dataSource;
                datasourceOfMeat.insert({
                    RawName: "牛肉1",
                    Unit: "袋",
                    Remark: "备注1"
                });
            };

            function GetSourceForAdditive() {
                var gridAdditive = $("#gridAdditive").data("kendoGrid");
                var datasourceOfAdditive = gridAdditive.dataSource;
                datasourceOfAdditive.insert({
                    RawName: "添加剂1",
                    Unit: "袋",
                    MaximumUsage: "100ml",
                    Remark:"备注2"
                });
            };
        </script>

    </head>
    <body>
        <div class="title">
            <h4>原材料管理</h4>
        </div>
        <div class="rawMaterType">
            原材料类型:
            <select id="Type" onchange="SelectRawMaterType()">
                <option value="0">肉类</option>
                <option value="1">添加剂</option>
            </select>
        </div>
        <div class="itemsForMeat" id="Meat">
            <div class="items">
                <table>
                    <tr>
                        <td>原材料名称:</td>
                        <td><input type="text" name="MeatName" /></td>
                        <td>原材料单位:</td>
                        <td><input type="text" name="MeatUnit" /></td>
                    </tr>
                    <tr>
                        <td>备注:</td>
                        <td><input type="text" name="MeatRemark" /></td>
                        <td><input type="button" name="MeatAdd" value="添加" onclick="GetSourceForMeat()" /></td>
                        <td><input type="button" name="MeatDelete" value="删除选中" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="itemsForAdditive" id="Additive">
            <div class="items">
                <table>
                    <tr>
                        <td>原材料名称:</td>
                        <td><input type="text" name="AdditiveName" /></td>
                        <td>原材料单位:</td>
                        <td><input type="text" name="AdditiveUnit" /></td>
                        <td><input type="button" name="AdditiveAdd" value="添加" onclick="GetSourceForAdditive()" /></td>
                    </tr>
                    <tr>
                        <td>最大使用量:</td>
                        <td><input type="text" name="MaxUsage" /></td>
                        <td>备注:</td>
                        <td><input type="text" name="AdditiveRemark" /></td>
                        <td><input type="button" name="AdditiveDelete" value="删除选中" /></td>
                    </tr>
                </table>
            </div>
        </div>
        <div id="gridMeat" class="records">

        </div>
        <div id="gridAdditive" class="records">

        </div>
    </body>
    </html>

  2. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 10 May 2018 Link to this post

    I have found out the problem. This is caused by the read function in kendo ui grid. When the grid display again, it need to execute the read function again.

    But how can I bind the local datasource again to the grid? I'm using local json data. How can I bind in read function?? Please help.

  3. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 10 May 2018 Link to this post

    It seems I need to get the datasource that I bind on grid and rebind it again in read function. How can I implement this?
  4. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 10 May 2018 Link to this post

    I can confirm now, the problem is the read function that in datasource. What the data the read function needed for local datasource?

     

     transport: {
                                read: function (e) {
                                    e.success(datasource);//What should be the datasource for e.success()???
                                },
                               

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 14 May 2018 Link to this post

    Hi, Weiwei,

    Thank you for the provided information. 

    The issue that you are experiencing should be caused by the lack of a data source transport create function. When the insert method is used, the data source of the grid would not be able to function correctly, which may have lead you to believe that a read is necessary. If the create function is configured, then the only thing that you would need when toggling the visibility may be to resize the grid

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#hidden-containers

    To answer your first question, the expected parameter for the success callback when the read method is set as a function is an array of data, effectively this is the grid's data:

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

    For a complete CRUD example with local data and more information, visit the article at:

    https://docs.telerik.com/kendo-ui/framework/datasource/crud#local-or-custom-transport-crud-operations

    Let me know if you need further information.

    Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 14 May 2018 in reply to Alex Hajigeorgieva Link to this post

    Hi Alex,
    Thanks for your help.
    Following code I have added Create function, but still have some problem when I Edit a item -> Delete a item -> Edit another item. When I finishing edit second item and click Update button on popup window, it still stay in loading state.
    Can you help me check what's wrong with my code? Thank you very much.

    var mydata = new kendo.data.DataSource({
                        transport: {
                            read: function (e) {
                                e.success(datasource);
                            },
                            update: function (e) {
                                e.success();
                            },
                            create: function (e) {
                                datasource.push(e.data);
                                e.success(e.data);
                            }

                        },
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    RawName: { type: "string" },
                                    Unit: { type: "string" },
                                    Count: { type: "string" },
                                    InstockDate: { type: "date" },
                                    SourceArea: { type: "string" },
                                    ManufactureDate: { type: "date" },
                                    ExpirationDate: { type: "date" },
                                    Supplier: { type: "string" },
                                    Recipient: {type:"string"}
                                }
                            }
                        },
                        pageSize: 5
                    });


  7. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 15 May 2018 Link to this post

    Hi, Weiwei,

    The issue with the create operation is that the newly created item is missing an id. 

    https://docs.telerik.com/kendo-ui/framework/datasource/crud#create-local

     
    // thee newly created item needs a unique id
    e.data.my_ID_field_name = 123;
    datasource.push(e.data);
    // then e.success with the new item will notify the data source and refresh the grid
    e.success(e.data);

    Also, if deleting items is required, the data source should be configured for destroying:

    https://docs.telerik.com/kendo-ui/framework/datasource/crud#destroy-local
    :
    transport: {
     destroy: function (e) {
        // assuming that the array with data is named dataSource
        var indexOfItemToDestroy = dataSource.map(function(e) { return e.my_ID_field_name; }).indexOf(e.data.my_ID_field_name);
         dataSource.splice(index, 1);
         e.success();
        }
    }

    Both of these operations are fully working in the example code at:

    https://docs.telerik.com/kendo-ui/framework/datasource/crud#examples

    You can click "Open in Dojo" and use that to change and alter it so you can better understand and debug the code.



    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Weiwei
    Weiwei avatar
    8 posts
    Member since:
    May 2018

    Posted 16 May 2018 in reply to Alex Hajigeorgieva Link to this post

    Thanks for your help. It works now.

Back to Top