Search code examples
ajaxkendo-uikendo-datasource

How to get changes in my array?


I need get changes in my array then i edit data in user controls. In this snipet my example. As I did not try, I can not do it. How I can make it?


Solution

  • Please try with the below code snippet.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Kendo UI Snippet</title>
    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/angular.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/jszip.min.js"></script>
    </head>
    <body>
        <a id="btnShowTest" href="#">Test</a>
        <div id="layout"></div>
    
        <script>
    
            var root = {};
    
            root.data =
            [
                {
                    code: 1,
                    name: "Test1",
                    status: true
                },
                {
                    code: 2,
                    name: "Test2",
                    status: true
                },
                {
                    code: 3,
                    name: "Test3",
                    status: false
                },
            ];
    
            $(function () {
    
                $("#btnShowTest").kendoButton().click(function (e) {
                    Show();
                });
    
                root.ds = new kendo.data.DataSource(
                {
                    pageSize: 10,
                    schema:
                    {
                        model:
                        {
                            id: "code",
                            fields:
                            {
                                code:
                                {
                                    editable: false,
                                    nullable: true
                                },
                                name:
                                {
                                    type: "string"
                                },
                                status:
                                {
                                    type: "boolean"
                                },
                            }
                        }
                    },
                    data: root.data
                });
    
                $("#layout").kendoListView(
                {
                    dataSource: root.ds,
                    template: kendo.template($("#managersTemplate").html())
                });
            });
    
            function Show() {
                //root.ds.sync();
    
                // var arr = root.ds.data();
                var arr = root.data;
    
                var str = "";
    
                for (var i = 0; i < arr.length; ++i) {
                    str += arr[i].status + ", ";
                }
    
                alert(str);
            }
    
            function testclick(obj) {
                var arr = root.data;
                for (var i = 0; i < arr.length; ++i) {
                    if (arr[i].code == $(obj).attr('id')) {
                        arr[i].status = $(obj).prop('checked');
                    }
                }
            }
        </script>
    
        <script type="text/x-kendo-tmpl" id="managersTemplate">
            <div >
                <input type="checkbox" data-bind="checked:status"  name="status" id="#:code#" onclick="testclick(this)" />
                <span class="checkbox">#:name#</span>
            </div>
        </script>
    
    
    </body>
    </html>
    

    Let me know if any concern.