Kendo UI Grid Frozen Column

Question

kendo ui grid не поддерживает замороженные столбцы. было бы хорошо, если бы кто-то мог помочь настроить настроенный сценарий для замороженных столбцов сетки кендо. какие-либо предложения?

колонны: []

Answer 1

Кендо UI Сетка будет поддерживать замороженные столбцы в следующем официальном релизе - Q1 2014. До тех пор лучшее предложение, которое я могу дать вам использовать две сетки, присоединенные к одному источнику данных.

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 
}); 

Это и некоторые CSS магия будет имитировать внешний вид замороженный колонки: http://jsbin.com/uCEQOCi/1/edit

Там есть один нюанс, хотя. В этом случае будет работать только режим редактирования всплывающих окон.

Answer 2

Ниже код, который вы можете получить представление о замороженном колонке

<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> 

вы должны включить «columnMenu: правда и прокручивать: истинно» и то и должны определить ширину для каждого столбца.