I enabled column resizing and it works great for the first 4 columns. At the 5th column when I hover to find the resizable icon, it just won't appear and every column after that also won't do it. ​Have I done something wrong in the grid? I tried commenting out the child grid and that didn't fix it. I also tried commenting out scrollable, sortable, filterable, pageable and reorderable. Still no luck.
$(document).ready(function () {
$("#gridWrapper").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "@ParentURL",
cache: false
},
schema: {
model: {
id: "Identity",
fields: {
Identity: { type: "string" },
CarrierName: { type: "string" }
}
}
},
pageSize: 50
},
height: 470,
scrollable: true,
detailInit: detailInit,
sortable: true,
filterable: true,
pageable: false,
resizable: true,
reorderable: true,
selectable: "Multiple",
//"template": "<
input
type=\"checkbox\" />"
toolbar: [{ text: "Select All", className: "SelectAll" }, { text: "Assign Load", className: "AssignLoad" }, { text: "Unassign Load", className: "UnAssignLoad" }, { text: "Update", className: "Update" }],
columns: [
{
field: "Load",
title: "Load",
width: 120
},
{
field: "Routes",
title: "Routes",
width: 120
},
{
field: "WHS",
title: "WHS",
width: 120
},
{
field: "CustomerName",
title: "Customer",
width: 220
},
{
field: "OrderNum",
title: "Order#",
width: 100
},
{
field: "City",
title: "City",
width: 100
},
{
field: "Status",
title: "Status",
width: 100
},
{
field: "PONum",
title: "PO#",
width: 120
},
{
field: "ShipDate",
title: "Ship Date",
width: 120,
template: '#= kendo.toString( toDate(ShipDate), "MM/dd/yyyy" ) #',
type: Date
},
{
field: "DeliveryDate",
title: "Delivery Date",
width: 120,
template: '#= kendo.toString( toDate(DeliveryDate), "MM/dd/yyyy" ) #',
type: Date
},
{
field: "CaseCount",
title: "Case Count",
width: 120
},
{
field: "ExpectedWgt",
title: "Expected Wgt",
width: 120
},
{
field: "ExpectedSkids",
title: "Expected Skids",
width: 120
},
{
field: "DeliveryCarrier",
title: "Delivery Carrier",
width: 120
},
{
field: "StopNum",
title: "Stop#",
width: 120
},
{
field: "LoadStopNumber",
title: "Seq#",
width: 120
},
{
field: "LineHaulCarrier",
title: "Line Haul Carrier",
width: 140,
//template: "#=CarrierName#",
//editor: reportEditor
},
{
field: "Comments",
title: "Comments",
width: 120
}]
}).attr("id", "GridOptions");
function detailInit(e) {
$("<
div
/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "json",
transport: {
read: "@ChildURL",
cache: false
},
filter: { field: "Identity", operator: "eq", value: e.data.OrderNum },
pageSize: 5
},
height: 200,
scrollable: {
virtual: true
},
sortable: true,
filterable: true,
pageable: true,
columns: [
{
field: "ProductCode",
width: 30
},
{
field: "Description",
width: 50
},
{
field: "Cases",
width: 30
},
{
field: "Weight",
width: 30
},
{
field: "Skids",
width: 30
}]
}).attr("id", "GridChildren");
}