مخفی کردن سطر و ستون با استفاده از جی کوئری در Kendo Grid

در این مقاله قصد داریم با استفاده از جی کوئری و MVVM Model یک سطر و ستون از کندو خود را مخفی نماییم. در این مقاله قصد بر این است که با استفاده از کد بتوانیم سطر و ستون خود را مخفی نماییم.

ما می خواهیم در این نمونه با استفاده از سرویس rest یک سطر از اطلاعات آن را مخفی نماییم.

ابتدا با استفاده از postman باید سرویس api/product را درخواست بدهیم ،به صورت زیر:

حالا با استفاده از روش code first اطلاعات را داخل kendo خود قرار می دهیم.

یک صفحه ی html ایجاد نمایید و داخل آن کد زیر را قرار دهید:

    <!DOCTYPE html>    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />    
        <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>    
        <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>    
        <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>    
        <title></title>    
    </head>    
    <body>    
        <div class="container" id="example">    
            <div class="row">    
        
                <div id="test-grid" data-role="grid"    
                     data-scrollable="true"    
                     data-editable="false"    
                     data-columns="[    
        
                           { 'field': 'ProductName','width':'100px' },    
                        { 'field': ' UnitPrice','width':'100px'},    
                     ]"    
                     data-pageable='true'    
                     data-bind="source:products"    
                     style="height: 300px"></div>    
        
            </div>    
        </div>    
            
    </body>    
    </html>

فایل javascript با MVVM Model

var viewModel = kendo.observable({      
    isVisible: true,      
    products: new kendo.data.DataSource({      
        schema: {      
            model: {      
                id: "ProductID",      
                fields: {      
                    ProductName: { type: "string" },      
                    UnitPrice: { type: "string" }      
                }      
            }      
        },      
        batch: true,      
        pageSize: 5,      
        transport: {      
            read: {      
                url: "api/Products",      
                dataType: "json"      
            },      
            parameterMap: function (options, operation) {      
                if (operation !== "read" && options.models) {      
                    return { models: kendo.stringify(options.models) };      
                }      
            }      
        }      
    })      
});      
kendo.bind($("#example"), viewModel);

خروجی به صورت زیر است:

داخل صفحه ی postman:

نتیجه در خروجی به صورت زیر خواهد بود:

اگر شما از postman استفاده نمایید با استفاده از آن می توان اطلاعات را خالی کرد ونمایش داد به صورت بالا یعنی رکورد مورد نظر ایجاد شده است ولی با استفاده از postman این اطلاعات پاک شده است.

خود kendo یک ID منحصر به فرد دارد که با استفاده از آن ID مورد نظر می توانیم ستونی را حذف کرد.

onDataBound: function (e) {    
    var data = this.products.data();    
    for (item in data) {    
        if (data[item].ProductName == '') {    
  
            e.preventDefault();    
            alert(data[item].uid)    
            var grid = $("#userGrid").data("kendoGrid");    
            grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()    
        }    
    }    
},

حالا می خواهیم یک ستون حذف شود با استفاده از javascript با مدل MVVM Model :

داخل صفحه ی html قطعه کد زیر را می نویسیم:

<html>  
<head>  
    <title></title>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <meta charset="utf-8" />  
</head>  
<body>  
    <div class="container" id="example">  
        <div class="row">  
  
            <div id="userGrid" data-role="grid"  
                 data-scrollable="true"  
                 data-editable="false"  
                 data-columns="[  
  
                       { 'field': 'ProductName','width':'100px' },  
                    { 'field': ' UnitPrice','width':'100px'},  
                 ]"  
                 data-pageable='true'  
                 data-bind="source:products,events: { dataBound: onDataBound }"  
                 style="height: 300px;width:500px"></div>  
  
        </div>  
    </div>    
    <script>  
        var viewModel = kendo.observable({  
            isVisible: true,  
            products: new kendo.data.DataSource({  
                schema: {  
                    model: {  
                        id: "ProductID",  
                        fields: {  
                            ProductName: { type: "string" },  
                            UnitPrice: { type: "string" }  
                        }  
                    }  
                },  
                batch: true,  
                pageSize: 5,  
                transport: {  
                    read: {  
                        url: "api/Products",  
                        dataType: "json"  
                    },  
                    parameterMap: function (options, operation) {  
                        if (operation !== "read" && options.models) {  
                            return { models: kendo.stringify(options.models) };  
                        }  
                    }  
                },  
             
            }),  
            onDataBound: function (e) {  
                 
                var data = this.products.data();  
                 
                for (item in data) {  
                    if (data[item].ProductName == '') {  
  
                        e.preventDefault();  
                        alert(data[item].uid)  
                        var grid = $("#userGrid").data("kendoGrid");  
                        grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()  
                    }  
                }  
            },  
        });  
        kendo.bind($("#example"), viewModel);  
    </script>  
</body>  
</html>

خروجی:

حالا اگر بخواهیم یک ستون را مخفی نماییم باید در script خود hidden:true را قرار دهیم.

کد html آن به صورت زیر خواهد بود:

<html>  
<head>  
    <title></title>  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
    <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
    <meta charset="utf-8" />  
</head>  
<body>  
    <div class="container" id="example">  
        <div class="row">  
  
            <div id="userGrid" data-role="grid"  
                 data-scrollable="true"  
                 data-editable="false"  
                 data-columns="[  
  
                       { 'field': 'ProductName','width':'100px' },  
                    { 'field': ' UnitPrice','width':'100px','hidden':'true'},  
                 ]"  
                 data-pageable='true'  
                 data-bind="source:products,events: { dataBound: onDataBound }"  
                 style="height: 300px;width:500px"></div>  
  
        </div>  
    </div>    
    <script>  
        var viewModel = kendo.observable({  
            isVisible: true,  
            products: new kendo.data.DataSource({  
                schema: {  
                    model: {  
                        id: "ProductID",  
                        fields: {  
                            ProductName: { type: "string" },  
                            UnitPrice: { type: "string" }  
                        }  
                    }  
                },  
                batch: true,  
                pageSize: 5,  
                transport: {  
                    read: {  
                        url: "api/Products",  
                        dataType: "json"  
                    },  
                    parameterMap: function (options, operation) {  
                        if (operation !== "read" && options.models) {  
                            return { models: kendo.stringify(options.models) };  
                        }  
                    }  
                },  
             
            }),  
            onDataBound: function (e) {  
                 
                var data = this.products.data();  
                 
                for (item in data) {  
                    if (data[item].ProductName == '') {  
  
                        e.preventDefault();  
                        alert(data[item].uid)  
                        var grid = $("#userGrid").data("kendoGrid");  
                        grid.tbody.find("tr[data-uid=" + data[item].uid + "]").hide()  
                    }  
                }  
            },  
        });  
        kendo.bind($("#example"), viewModel);  
    </script>  
</body>  
</html>

خروجی به صورت زیر است: