Kendo UI Grid Frozen Column - grid

Question

kendo ui grid is not supporting frozen columns. it would be appreciate if someone could help for customized script for kendo grid frozen columns. any suggestions?
columns: [ ]

Answer 1

Kendo UI Grid will support frozen columns in the next official release - Q1 2014. Until then the best suggestion I can give you is to use two grids bound to the same data source.
var dataSource = new kendo.data.DataSource({
/* snip */
});
$("#frozen").kendoGrid({
dataSource: dataSource,
columns: [
"OrderID"
],
height: 200,
sortable: true
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 200,
columns: [
{ field: "Freight", width: 100 },
{ field: "ShipName", width: 200 },
{ field: "OrderDate", width: 200, format: "{0:d}" },
{ field: "ShipCity", width: 200 }
],
sortable: true
});
This and some CSS magic would simulate the frozen column appearance: http://jsbin.com/uCEQOCi/1/edit
There is a caveat though. Only popup editing mode will work in this scenario.

Answer 2

i think with the new Version, also in 2020.1.219, is there a locked Attribute.
Lock in: Example - locked columns
<div id="grid"></div>
JS:
<script>
$("#grid").kendoGrid({
columns: [
{ locked: true, field: "id", width:200 },
{ field: "name", width:800 }
],
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>

Answer 3

Below code you may get the idea about frozen column
<div id="kendogrid" data-bind="kendoGrid: { data: SearchResults, schema: { model: { fields: { DateOfBirthSortable: { type: 'date' }}}}, pageable:{pageSize: 15} ,selectable:'row',reorderable: true, navigatable:true, sortable: true,resizable: true,filterable: true,groupable: true,columnMenu: true,navigatable: true,
columns: [ { field: 'UniqueID', title : 'Id' , width:50,locked: true,lockable:false,event:{change:DoSearch}},
{ field: 'Salutation', title : '#',width:80,locked: true, template:'<span> #if(Salutation != null) {# <span> #= Salutation #</span> # } #</span>' },
{ field: 'FirstName', title : 'First Name', width:150,locked: true, },
{ field: 'LastName', title : 'Last Name',width:150,locked: true, template:'<span> #if(LastName != null) {# <span> #= LastName #</span> # } #</span>' },
{ field: 'Mobile', title : 'Mobile' ,width:100, template:'<span>#if(Mobile != null) {# <span>#=Mobile #</span> #}# </span>' },
{ field: 'Phone', title : 'Phone',width:100, template:'<span>#if(Phone != null){#<span>#= Phone#</span> #}# </span>' },
{ field: 'Email', title : 'Email',width:200, template:'<span>#if(Email != null){#<span>#= Email#</span> #}# </span>' },
{ field: 'DateOfBirthSortable', title : 'DOB',width:100,format: '{0: MM/dd/yyyy }',filterable:{ui: 'datepicker'} ,template:'<span> #if(DateOfBirth != null) {# <span> #= DateOfBirth #</span> # } #</span>' },
{ field: 'AddressLine1', title : 'AddressLine1', width:150, template: '<span >#if(AddressLine1 != null){#<span>#=AddressLine1 #</span> #} # </span>' },
{ field: 'AddressLine2', title : 'AddressLine2', width:150, template: '<span > #if(AddressLine2 != null){# <span>#=AddressLine2 # </span> #} # </span>' },
{ field: 'City', title : 'City', width:100, template: '<span >#if(City != null){#<span>#=City #</span> #} # </span>' },
{ field: 'State', title : 'State', width:100, template: '<span >#if(State != null){#<span>#=State #</span> #} #</span>' },
{ field: 'Country', title : 'Country', width:100, template: '<span >#if(Country != null){#<span>#=Country #</span> #} #</span>' },
{ field: 'Zip', title : 'Zip', width:100, template: '<span >#if(Zip != null){#<span>#=Zip #</span> #} #</span>' }
],change: onChange}">
</div>
you must include "columnMenu: true and scrollable:true" and then u must define the width for every column .