So far my grid works fine but on datetime filter area it creates a extra dropdown filter which I don't want and couldn't find out where it is coming from.
Couldn't figure out why it is creating it only for datetime column.
$(document).ready(function () {
$("#listing-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "@Html.Raw(Url.Action("CargoListingList", "Cargo", new { cargoType = cargoType }))",
type: "POST",
dataType: "json"
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
fields: {
CargoTitle: { editable: false, type: "string" },
CommodityNames: { editable: false, type: "string" },
CargoQty: { editable: false, type: "number" },
CargoQtyId: { editable: false, type: "string" },
IsPartCargo: { type: "boolean" },
FirstPort: { editable: false, type: "string" },
LastPort: { editable: false, type: "string" },
LaycanStart: { editable: false, type: "datetime" },
LaycanEnd: { editable: false, type: "datetime" },
SeName: { editable: false, type: "string" }
}
}
},
pageSize: @(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [@(gridPageSizes)]
},
scrollable: false,
sortable: true,
filterable: true,
columns: [{
field: "CargoTitle",
title: "Title",
width: 315,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: '<a href="/cargo/#=SeName#">#=CargoTitle#</a>',
headerTemplate: '<span title="The cargo listing title">Title <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: { extra: false }
}, {
field: "CommodityNames",
title: "Commodity(s)",
width: 225,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
headerTemplate: '<span title="Cargo Commodity(s)">Commodity(s) <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: { extra: false }
}, {
field: "CargoQty",
title: "Cargo Qty",
width: 125,
template: "#=CargoQty # #=CargoQtyId #",
attributes: { style: "text-align:center" },
headerAttributes: { style: "text-align:center" },
headerTemplate: '<span title="Total Cargo Quantity">Cargo Qty <i class="fa fa-info-circle" aria-hidden="true"></i></span>'
}, {
field: "IsPartCargo",
title: "PCGO",
width: 105,
template: '# if(IsPartCargo) {# <i class="fa fa-check true-icon"></i> #} else {# <i class="fa fa-close false-icon"></i> #} #',
attributes: { style: "text-align:center" },
headerAttributes: { style: "text-align:center" },
headerTemplate: '<span title="Part Cargo">PCGO <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: { messages: { info: "Part Cargo Availability:", isTrue: "Yes", isFalse: "No" } }
}, {
field: "FirstPort",
title: "First POL",
width: 150,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
headerTemplate: '<span title="First Port of Loading">First POL <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: { extra: false }
}, {
field: "LastPort",
title: "Final POD",
width: 150,
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
headerTemplate: '<span title="Final Descharging Port">Final POD <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: { extra: false }
}, {
field: "LaycanStart",
title: "First Layday",
width: 140,
template: "#= kendo.toString(kendo.parseDate(LaycanStart), 'dd/MM/yyyy HH:mm') #",
attributes: { style: "text-align:center" },
headerAttributes: { style: "text-align:center" },
headerTemplate: '<span title="The first day for Laycan">First Layday <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: {
ui: "datetimepicker"
}
}, {
field: "LaycanEnd",
title: "Cancelation Day",
width: 135,
template: "#= kendo.toString(kendo.parseDate(LaycanEnd), 'dd/MM/yyyy HH:mm') #",
attributes: { style: "text-align:center" },
headerAttributes: { style: "text-align:center" },
headerTemplate: '<span title="The cancelation day for Laycan">Cancelation Day <i class="fa fa-info-circle" aria-hidden="true"></i></span>',
filterable: {
ui: "datepicker"
}
}
],
filterMenuInit: function (e) {
e.container.find('.k-filter-help-text').remove();
}
});
$("#cargoes-grid").kendoTooltip({
filter: ".k-header span"
});
});