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.
my js code is:
$(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"
});
});