Kendo-grid locked column and grouping -
Kendo-grid locked column and grouping -
i have grid locked (frozen) column , grouping this:
demos.telerik.com/kendo-ui/grid/frozen-columns
but have 1 frozen column , little width.
and when grouping column long string values (eg ship address), these grouping values in grouping header displayed in multiple lines.
screen
how show grouping header in 1 line if first part of grid (with locked columns) has little width? source
$(document).ready(function() { $("#grid").kendogrid({ datasource: { type: "odata", transport: { read: "http://demos.telerik.com/kendo-ui/service/northwind.svc/orders" }, schema: { model: { fields: { orderid: { type: "number" }, shipcountry: { type: "string" }, shipname: { type: "string" }, shipcity: { type: "string" }, shipaddress: { type: "string" } } } }, pagesize: 30, group: { field: "shipname" } }, height: 540, sortable: true, reorderable: true, groupable: true, resizable: true, filterable: true, columnmenu: true, pageable: true, columns: [ { field: "orderid", title: "order id", locked: true, lockable: false, width: 50 }, { field: "shipcountry", title: "ship country", width: 300 }, { field: "shipcity", title: "ship city", width: 300 },{ field: "shipname", title: "ship name", width: 300 }, { field: "shipaddress", width: 400 } ] }); });
solution
alexander popov telerik write this:
$(document).ready(function() { $("#grid").kendogrid({ databound: function(e){ var grid = this; this.lockedtable.find(".k-grouping-row").each(function(index) { var arrow = $(this).find("a"); grid.tbody.find(".k-grouping-row:eq("+index+") td").text($(this).text()) $(this).find("p").text(" ").append(arrow); }) }, datasource: { type: "odata", transport: { read: "http://demos.telerik.com/kendo-ui/service/northwind.svc/orders" }, schema: { model: { fields: { orderid: { type: "number" }, shipcountry: { type: "string" }, shipname: { type: "string" }, shipcity: { type: "string" }, shipaddress: { type: "string" } } } }, pagesize: 30 }, height: 540, sortable: true, reorderable: true, groupable: true, resizable: true, filterable: true, columnmenu: true, pageable: true, columns: [ { field: "orderid", title: "order id", locked: true, lockable: false, width: 50 }, { field: "shipcountry", title: "ship country", width: 300 }, { field: "shipcity", title: "ship city", width: 300 },{ field: "shipname", title: "ship name", width: 300 }, { field: "shipaddress", lockable: false, width: 400 } ] }); });
kendo-ui kendo-grid
Comments
Post a Comment