javascript - kendo ui treelist - lock a column -
i trying create lock on column on treelist in kendo ui. if user clicks on button lock column in treelist, tried :
<!doctype html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/treelist/frozen-columns"> <style>html { font-size: 12px; font-family: arial, helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script> </head> <body> <button>click me</button> <div id="example"> <div id="treelist"></div> <script> $(document).ready(function () { $("button").click(function(){ var treelist = $("#treelist").data("kendotreelist"); treelist.lockcolumn("lastname"); }); var crudservicebaseurl = "http://demos.telerik.com/kendo-ui/service"; var datasource = new kendo.data.treelistdatasource({ transport: { read: { url: crudservicebaseurl + "/employeedirectory", datatype: "jsonp" } }, schema: { model: { id: "employeeid", fields: { employeeid: { type: "number", nullable: false }, parentid: { field: "reportsto", nullable: true } } } } }); $("#treelist").kendotreelist({ datasource: datasource, reorderable: true, resizable: true, sortable: true, filterable: true, columnmenu: true, columns: [ { field: "firstname", expandable: true, title: "first name", lockable: true, width: 250 }, { field: "lastname", title: "last name", lockable: true, width: 200 }, { field: "position", width: 400, lockable: true }, { field: "extension", title: "ext", format: "{0:#}", width: 150, } ] }); }); </script> <style> #treelist { width: 950px; } </style> </div> </body> </html>
lockcolumn function gives error on console , not producing lock on treelist :
typeerror: d undefined kendo.all.min.js:53:29331
lockcolumn api : http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist
telerik kendo uis treelist has limitation in column locking, @ least 1 column must locked in initialization phase programmatical column locking work per documentation: "in order use method, treelist must initialized @ least 1 locked column, , should have unlocked columns left after target column locked.", source http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#methods-lockcolumn.
see corrected dojo example here: http://dojo.telerik.com/@mrtaunus/iyegi.
Comments
Post a Comment