In my application, I have a grid that has around 25 columns. I've set up the grid to allow resizing of the columns. At one point I had also set up the scrollable attribute on the grid. However when I did set up scrollable on the grid, we noticed that, depending on the amount of data being rendered, we would get two vertical scrollbars (image attached). Users did not like this, but it did allow us to resize columns. I commented out the scrollable attribute and now notice that we are unable to resize columns. Is there a workaround so that we can turn off scrollable and still resize columns?
@{
ViewData["Title"] = "Scada Errors Data Correction";
}
@Html.AntiForgeryToken()
<
h2
>Scada Errors Data Correction</
h2
>
<
script
type
=
"text/javascript"
>
function getSearchParameters() {
var region = getMultiSelectValues("regionSelect").toString();
var area = getMultiSelectValues("areaSelect").toString();
var asset = getMultiSelectValues("assetSelect").toString();
var errorType = getMultiSelectValues("errorTypeSelect").toString();
var dateFrom = $('#ReadingDateFrom').data('kendoDatePicker').value();
var dateTo = $('#ReadingDateTo').data('kendoDatePicker').value();
return {
regions: region,
areas: area,
assets: asset,
errorTypes: errorType,
readingDateFrom: dateFrom,
readingDateTo: dateTo
};
}
function triggerGridRefresh() {
$('#grid').data('kendoGrid').dataSource.read();
$('#grid').data('kendoGrid').refresh();
}
function getAssetData() {
var locations = getMultiSelectValues("areaSelect");
return {
text: $("#Asset").val(),
location: locations.toString()
};
}
function changeRegion() {
//debugger;
var areaMultiSelect = $('#areaSelect').data('kendoMultiSelect');
var regionMultiSelect = $('#regionSelect').data('kendoMultiSelect');
var assetMultiSelect = $('#assetSelect').data('kendoMultiSelect');
var regionMS = getMultiSelectValues("regionSelect");
if (regionMS.toString() === '') {
//reset the multiselects when you reset the first multiselect
areaMultiSelect.options.placeholder = "Select Area(s)...";
areaMultiSelect.value([]);
areaMultiSelect.enable(false);
//clear out the asset multiselect too
if (getMultiSelectValues("assetSelect").toString() !== '') {
assetMultiSelect.options.placeholder = "hello!";
assetMultiSelect.value([]);
assetMultiSelect.enable(false);
}
}
else {
areaMultiSelect.enable();
$('#areaSelect').data('kendoMultiSelect').dataSource.read();
}
}
function changeArea() {
//var value = this.value()
//debugger;
var areaMultiSelect = $('#areaSelect').data('kendoMultiSelect');
var assetMultiSelect = $('#assetSelect').data('kendoMultiSelect');
var areaMS = getMultiSelectValues("areaSelect");
if (areaMS.toString() === '') {
assetMultiSelect.options.placeholder = "Select Asset(s)...";
assetMultiSelect.value([]);
assetMultiSelect.enable(false);
}
else {
assetMultiSelect.enable();
$('#assetSelect').data('kendoMultiSelect').dataSource.read();
}
}
function changeAsset() {
return;
}
function regionfilter() {
//debugger;
var regionMS = getMultiSelectValues("regionSelect");
var areaInput = $('#areaSelect').data('kendoMultiSelect');
var inputtext = areaInput.input.val();
return {
text: inputtext,
region: regionMS.toString()
};
}
function areafilter() {
var areaMS = getMultiSelectValues("areaSelect");
var assetInput = $('#assetSelect').data('kendoMultiSelect');
var inputtext = assetInput.input.val();
return {
text: inputtext,
area: areaMS.toString()
};
}
function errorTypeFilter() {
//var value = this.val();
//alert(value);
}
function getMultiSelectValues(multiSelectControl) {
var multiSelect = $("#" + multiSelectControl).data("kendoMultiSelect");
var values = multiSelect.value($("#value").val());
return values;
}
(function ($, kendo) {
//register custom validation rules
$.extend(true, kendo.ui.validator, {
rules: { // custom rules
operatinghoursexceededvalidation: function (input, params) {
var grid = $('#grid').data('kendoGrid');
var selectedRow = grid.dataItem('tr.k-grid-edit-row');
var maxHours = getMaxOperatingHours();
if (input.is("[name='Operating_hrs']") && input.val() !== "") {
if (input.val() > maxHours) {
return false;
}
}
return true;
},
downtimehoursexceededvalidation: function (input, params) {
var grid = $('#grid').data('kendoGrid');
var selectedRow = grid.dataItem('tr.k-grid-edit-row');
var maxHours = getMaxOperatingHours();
if (input.is("[name='Ttl_downtime_hrs']") && input.val() !== "") {
if (input.val() > maxHours) {
return false;
}
}
return true;
} ,
totalhoursexceededvalidationDown: function (input, params) {
var grid = $('#grid').data('kendoGrid');
var selectedRow = grid.dataItem('tr.k-grid-edit-row');
var maxHours = getMaxOperatingHours();
if (input.is("[name='Ttl_downtime_hrs']") && input.val() !== "") {
//debugger;
var operatingHours = parseFloat(selectedRow.Operating_hrs);
var downtimeHours = parseFloat(input.val());
if (downtimeHours + operatingHours > maxHours) {
return false;
}
}
return true;
},
totalhoursexceededvalidationUp: function (input, params) {
var grid = $('#grid').data('kendoGrid');
var selectedRow = grid.dataItem('tr.k-grid-edit-row');
var maxHours = getMaxOperatingHours();
if (input.is("[name='Operating_hrs']") && input.val() !== "") {
//debugger;
var operatingHours = parseFloat(input.val());
var downtimeHours = parseFloat(selectedRow.Ttl_downtime_hrs);
if (downtimeHours + operatingHours > maxHours) {
return false;
}
}
return true;
}
},
messages: { //custom rules messages
operatinghoursexceededvalidation: "Operating Hours cannot exceed maximum possible hours for this date.",
downtimehoursexceededvalidation: "Downtime Hours cannot exceed maximum possible hours for this date.",
totalhoursexceededvalidationDown: "Sum of downtime and operating hours exceeds maximum possible hours for this date",
totalhoursexceededvalidationUp: "Sum of Operating and Downtime hours exceeds maximum possible hours for this date"
}
});
})(jQuery, kendo);
function error_handler(args) {
if (args.errors) {
var grid = $("#grid").data("kendoGrid");
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel grid rebind if error occurs
var fieldCellIndices = {},
dataSource = grid.dataSource,
errors = args.errors;
//get current column indexes
for (var i = 0; i <
grid.columns.length
; i++) {
if (grid.columns[i].field) {
fieldCellIndices[grid.columns[i].field] = i;
}
}
for (var
k
=
0
; k < errors.length; k++) {
var
error
=
errors
[k],
item
=
dataSource
.get(error.id),
row
=
grid
.table.find("tr[
data-uid
=
'" + item.uid + "'
]");
for (var
j
=
0
; j < error.errors.length; j++) {
var
field
=
error
.errors[j].field,
message
=
error
.errors[j].message;
//find the cell
var
container
=
row
.find("td:eq(" + fieldCellIndices[field] + ")");
//show the validation error message
showMessage(container, field, message, item.id);
//highlight the cell that have error
container.css("border", "1px solid red");
}
}
});
}
}
function showMessage(container, name, errors, id) {
var
validationMessageTmpl
=
kendo
.template($("#message").html());
//add the validation message to the form
container.find("[
data-valmsg-for
=
" + name + "
]")
.replaceWith(validationMessageTmpl({ field: name, message: errors, id: id }));
}
function onAdditionalData() {
return {
text: $("#Region").val()
};
}
function sendAntiForgery() {
return { "__RequestVerificationToken": $('input[
name
=
__RequestVerificationToken
]').val() };
}
function requestEnd(e) {
//debugger;
if (e.type === 'update' && !e.response.Errors) {
kendo.alert("You have updated " + e.response.count + " rows");
e.sender.read();
}
}
function onGridEdit(e) {
//debugger;
if (e.model.dirty === true) {
$('#Comments').prop('disabled', false);
}
else {
$('#Comments').prop('disabled', true);
}
}
function getMaxOperatingHours() {
//Let's check for the max & min operating hours
//The pain in the ass for this will be figuring out the daylight savings switch
var
dSTDates
=
new
Object();
dSTDates
=
DisplayDstSwitchDates
();
var
beginDST
=
new
Date(dSTDates['BeginDST']);
beginDST
= beginDST.toDateString();
var
endDST
=
new
Date(dSTDates['EndDST']);
endDST
= endDST.toDateString();
var
todaysDate
=
new
Date();
todaysDate
= todaysDate.toDateString();
var
maxHours
=
24
;
//Check to see if today is the beginning of DST, if it is, then max hours for this date is 23
if (todaysDate === beginDST) {
maxHours
=
23
;
}
//Check to see if today is the end of DST, if it is, then max hours for this date is 25
if (todaysDate === endDST) {
maxHours
=
25
;
}
return maxHours;
}
function DisplayDstSwitchDates() {
var
year
=
new
Date().getYear();
if (year < 1000)
year += 1900;
var
firstSwitch
=
0
;
var
secondSwitch
=
0
;
var
lastOffset
=
99
;
// Loop through every month of the current year
for (
i
=
0
; i < 12; i++) {
// Fetch the timezone value for the month
var
newDate
= new Date(Date.UTC(year, i, 0, 0, 0, 0, 0));
var tz = -1 * newDate.getTimezoneOffset() / 60;
// Capture when a timzezone change occurs
if (tz > lastOffset)
firstSwitch = i - 1;
else if (tz <
lastOffset
)
secondSwitch
= i - 1;
lastOffset
=
tz
;
}
// Go figure out date/time occurences a minute before
// a DST adjustment occurs
var
secondDstDate
=
FindDstSwitchDate
(year, secondSwitch);
var
firstDstDate
=
FindDstSwitchDate
(year, firstSwitch);
if (firstDstDate === null && secondDstDate === null) {
return 'Daylight Savings is not observed in your timezone.';
}
else {
//riveraM 3/29/2018 I modified the code to put the begin/end date for DST in an array and return that for use
//in the validation functions above
//return 'Last minute before DST change occurs in ' +
// year + ': ' + firstDstDate + ' and ' + secondDstDate;
var
DSTDates
=
new
Object();
DSTDates['BeginDST'] = firstDstDate;
DSTDates['EndDST'] = secondDstDate;
return DSTDates;
}
}
function FindDstSwitchDate(year, month) {
// Set the starting date
var
baseDate
=
new
Date(Date.UTC(year, month, 0, 0, 0, 0, 0));
var
changeDay
=
0
;
var changeMinute = -1;
var baseOffset = -1 * baseDate.getTimezoneOffset() / 60;
var dstDate;
// Loop to find the exact day a timezone adjust occurs
for (
day
=
0
; day < 50; day++) {
var
tmpDate
=
new
Date(Date.UTC(year, month, day, 0, 0, 0, 0));
var tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;
// Check if the timezone changed from one day to the next
if (tmpOffset !== baseOffset) {
var
minutes
=
0
;
changeDay
=
day
;
// Back-up one day and grap the offset
tmpDate
=
new
Date(Date.UTC(year, month, day - 1, 0, 0, 0, 0));
tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;
// Count the minutes until a timezone chnage occurs
while (changeMinute === -1) {
tmpDate
=
new
Date(Date.UTC(year, month, day - 1, 0, minutes, 0, 0));
tmpOffset = -1 * tmpDate.getTimezoneOffset() / 60;
// Determine the exact minute a timezone change
// occurs
if (tmpOffset !== baseOffset) {
// Back-up a minute to get the date/time just
// before a timezone change occurs
tmpOffset
=
new
Date(Date.UTC(year, month,
day - 1, 0, minutes - 1, 0, 0));
changeMinute
=
minutes
;
break;
}
else
minutes++;
}
// Add a month (for display) since JavaScript counts
// months from 0 to 11
dstDate
=
tmpOffset
.getMonth() + 1;
// Pad the month as needed
if (dstDate < 10)
dstDate
=
"0"
+ dstDate;
// Add the day and year
dstDate += '/' + tmpOffset.getDate() + '/' + year + ' ';
// Capture the time stamp
tmpDate
=
new
Date(Date.UTC(year, month,
day - 1, 0, minutes - 1, 0, 0));
dstDate += tmpDate.toTimeString().split(' ')[0];
return dstDate;
}
}
}
function onDataBound() {
//var grid = $('#grid').data('kendoGrid');
//for (var
i
=
0
; i < grid.columns.length; i++) {
// grid.autoFitColumn(i);
//}
return;
}
//
window.onbeforeunload
=
function
() {
// var grid = $('#grid').data('kendoGrid');
// var
dataSource
=
grid
.dataSource;
// var
data
=
dataSource
.data();
// var
hasChanges
=
dataSource
.hasChanges();
// for (var
loop
=
0
; loop < data.length; loop++) {
// if (data[loop].dirty) {
//
hasChanges
=
true
;
// break;
// }
// }
// if (hasChanges) {
// return kendo.confirm("You have made changes data in the grid. The changes will be lost if you leave this page without clicking the save button.");
// }
//};
</script>
<
style
>
#grid th a.k-state-active {
background-color: lightgoldenrodyellow;
}
.k-grid {
/*font-size: 9px;*/
/*width: 2000px;*/
}
.k-grid td {
line-height: 2em;
}
.k-readonly {
color: darkgray;
}
.k-grid-header {
font-weight: 700;
}
.k-grid-header .center-header {
text-align: center;
}
.k-grid-header .wrap-header {
height: auto;
overflow: visible;
white-space: normal;
}
k-tooltip-validation {
background-color: red !important;
position: absolute;
}
.k-invalid-msg.field-validation-error {
color: red !important;
position:relative;
display:inline-flex;
background-color: white !important;
text-align:center;
}
.k-autocomplete.k-header {
/*width: 500px;*/
}
.wrapper {
display: grid;
grid-template-columns: 2fr 1fr;
}
div.text {
margin: 0;
padding: 0;
padding-bottom: 1.25em;
}
div.text label {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
padding-top: .1em;
padding-right: .25em;
width: 6em;
text-align: right;
float: left;
}
#Comments {
height: 100px;
}
</
style
>
<
script
type
=
"text/kendo-template"
id
=
"message"
>
<
div
class
=
"k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error"
style
=
"margin: 0.5em; display: block; "
data-for
=
"#=field#"
data-valmsg-for
=
"#=field#"
id
=
"#=field#_#=id#_validationMessage"
>
<
span
class
=
"k-icon k-warning"
> </
span
>#=message#<
div
class
=
"k-callout k-callout-n"
></
div
>
</
div
>
</
script
>
<
button
data-toggle
=
"collapse"
data-target
=
"#searchCriteria"
>Show Search Criteria</
button
>
<
div
class
=
"divBody"
>
<
div
id
=
"searchCriteria"
class
=
"collapse"
>
<
label
for
=
"regionSelect"
>Region:</
label
>
<
div
id
=
"divRegion"
class
=
"text"
>
@(Html.Kendo().MultiSelect()
.Name("regionSelect")
.DataTextField("Region")
.DataValueField("Region")
.Placeholder("Select Region(s)...")
.AutoBind(false)
.Events(e => e.Change("changeRegion"))
.DataSource(ds => ds
.Read(read => read.Action("GetRegions", "ScadaErrors"))
.ServerFiltering(true)
))
</
div
>
<
label
for
=
"areaSelect"
>Area:</
label
>
<
div
id
=
"divArea"
class
=
"text"
>
@(Html.Kendo().MultiSelect()
.Name("areaSelect")
.DataTextField("AreaDescription")
.DataValueField("Area")
.Placeholder("Select Area(s)...")
.AutoBind(false)
.Events(e => e.Change("changeArea"))
.Enable(false)
.DataSource(ds => ds
.Read(read => read.Action("GetAreas", "ScadaErrors")
.Data("regionfilter"))
.ServerFiltering(true))
)
</
div
>
<
label
for
=
"assetSelect"
>Asset:</
label
>
<
div
id
=
"divAsset"
class
=
"text"
>
@(Html.Kendo().MultiSelect()
.Name("assetSelect")
.DataTextField("AssetNumDescription")
.DataValueField("Assetnum")
.Placeholder("Select Asset(s)...")
.AutoBind(false)
.Events(e => e.Change("changeAsset"))
.Enable(false)
.DataSource(ds => ds
.Read(read => read.Action("GetAssets", "ScadaErrors")
.Data("areafilter"))
.ServerFiltering(true))
)
</
div
>
<
label
for
=
"errorTypeSelect"
>Error Type:</
label
>
<
div
id
=
"divLocation"
class
=
"text"
>
@(Html.Kendo().MultiSelect()
.Name("errorTypeSelect")
.DataTextField("Name")
.DataValueField("Name")
.Placeholder("Select Error Type(s)...")
.AutoBind(true)
.DataSource(ds => ds
.Read(read => read.Action("GetErrorTypes", "ScadaErrors")
.Data("errorTypeFilter"))
.ServerFiltering(true))
)
</
div
>
<
div
id
=
"divCalendar"
>
Reading Date From:
@(Html.Kendo().DatePicker()
.Name("ReadingDateFrom")
.Value(DateTime.Now.AddDays(-30))
.HtmlAttributes(new { style = "width: 20%", title = "datetimepicker" })
.DateInput()
.Format("MM/dd/yyyy")
)
Reading Date To:
@(Html.Kendo().DatePicker()
.Name("ReadingDateTo")
.Value(DateTime.Now)
.HtmlAttributes(new { style = "width: 20%", title = "datetimepicker" })
.DateInput()
.Format("MM/dd/yyyy")
)
</
div
>
<
br
/>
<
div
id
=
"divSearchButton"
>
<
button
id
=
"btnSearch"
onclick
=
"triggerGridRefresh();"
>Search</
button
>
</
div
>
<
br
/>
</
div
>
<
div
id
=
"Message"
></
div
>
<
div
id
=
"divDataGrid"
>
@(Html.Kendo().Grid<
FDMDCT.Models.ScadaErrorViewModel
>
()
.Name("grid")
.Events(events => events
.Edit("onGridEdit")
.DataBound("onDataBound"))
.Columns(columns =>
{
columns.Bound(c => c.ID).Hidden(true);
columns.Bound(c => c.ScadaDailyID).Hidden(true);
columns.Bound(c => c.Bwp_Userid).Hidden(true);
columns.Bound(c => c.Bwp_region).Width(100).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Region").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
columns.Bound(c => c.Bwp_Area).Width(100).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Area").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;font-weight:700;" });
columns.Bound(c => c.Fdm_Scada_Link).Width(100).Hidden(true).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Scada Link").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
columns.Bound(c => c.Assetnum).Width(100).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
columns.Bound(c => c.Asset_Description).Width(300).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset Description").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
columns.Bound(c => c.Reading_date).Width(100).Format("{0:MM/dd/yyyy}").Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Reading Date").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
columns.Bound(c => c.Error_type).Width(100).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Error Type").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
columns.Bound(c => c.Comments).Width(100).ClientTemplate("#if (Comments==null){# #=''# #} else {# #=Comments# #};#<
span
data-valmsg-for
=
'Comments'
></
span
>").EditorTemplateName("CommentsEditor");
//change the column below to a checkbox
//columns.Bound(c => c.ErrorCorrected).ClientTemplate("<
input
type
=
'checkbox'
disabled
=
'true'
value
=
'#= errorCorrected #'
" + " # if (errorCorrected) { #" + "
checked
=
'checked'
" + "# } #" + "/>" );
columns.Bound(c => c.Operating_hrs).Width(150).Title("Operating Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Operating_hrs#<
span
data-valmsg-for
=
'Operating_hrs'
></
span
>");
columns.Bound(c => c.Ttl_downtime_hrs).Width(150).Title("Downtime Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Ttl_downtime_hrs#<
span
data-valmsg-for
=
'Ttl_downtime_hrs'
></
span
>");
columns.Bound(c => c.Hrsepwr_hrs).Width(150).Title("Horsepower Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Hrsepwr_hrs#<
span
data-valmsg-for
=
'Hrsepwr_hrs'
></
span
>");
columns.Bound(c => c.Thruput_mmcf).Width(150).Title("Throughput/Capacity (mmscf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Thruput_mmcf#<
span
data-valmsg-for
=
'Thruput_mmcf'
></
span
>");
columns.Bound(c => c.Fuel_consumed).Width(150).Title("Fuel Consumed (mcf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Fuel_consumed#<
span
data-valmsg-for
=
'Fuel_consumed'
></
span
>");
columns.Bound(c => c.Avg_unit_rpm).Width(150).Title("RPM - Average Engine Speed").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Avg_unit_rpm#<
span
data-valmsg-for
=
'Avg_unit_rpm'
></
span
>");
columns.Bound(c => c.Oil_to_comp_cyl).Width(150).Title("Compressor Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_comp_cyl#<
span
data-valmsg-for
=
'Oil_to_comp_cyl'
></
span
>");
columns.Bound(c => c.Oil_to_cc_hand).Width(150).Title("Crankcase Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_cc_hand#<
span
data-valmsg-for
=
'Oil_to_cc_hand'
></
span
>");
columns.Bound(c => c.Oil_new_cc_ren).Width(150).Title("Crankcase Auto Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_new_cc_ren#<
span
data-valmsg-for
=
'Oil_new_cc_ren'
></
span
>");
columns.Bound(c => c.Oil_to_pwr_cyl).Width(150).Title("Power Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_pwr_cyl#<
span
data-valmsg-for
=
'Oil_to_pwr_cyl'
></
span
>");
columns.Bound(c => c.Engine_starts_attempts).Width(150).Title("Start Attempts").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_attempts#<
span
data-valmsg-for
=
'Engine_starts_attempts'
></
span
>");
columns.Bound(c => c.Engine_starts_success).Width(150).Title("Start Successes").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_success#<
span
data-valmsg-for
=
'Engine_starts_success'
></
span
>");
columns.Bound(c => c.Engine_starts_failed).Width(150).Title("Start Failures").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_failed#<
span
data-valmsg-for
=
'Engine_starts_failed'
></
span
>");
columns.Bound(c => c.Startup_duration).Width(150).Title("Startup Duration (min)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Startup_duration#<
span
data-valmsg-for
=
'Startup_duration'
></
span
>");
columns.Bound(c => c.Electricity_used).Width(150).Title("Electricity Used (Kwh)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Electricity_used#<
span
data-valmsg-for
=
'Electricity_used'
></
span
>");
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Sortable()
.Filterable()
.Pageable()
.AutoBind(true)
//.Scrollable(scrollable => scrollable.Height(650))
.Reorderable(reorderable => reorderable.Columns(true))
.Resizable(resizable => resizable.Columns(true))
.ColumnResizeHandleWidth(30)
.ColumnMenu()
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(20)
.ServerOperation(false)
.Events(events => events
.Error("error_handler")
.RequestEnd("requestEnd")
)
.Model(model =>
{
//set the fields to non-editable here
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
model.Field(p => p.Fdm_Scada_Link).Editable(false);
model.Field(p => p.Bwp_Userid).Editable(false);
model.Field(p => p.ScadaDailyID).Editable(false);
model.Field(p => p.Bwp_region).Editable(false);
model.Field(p => p.Bwp_Area).Editable(false);
model.Field(p => p.Assetnum).Editable(false);
model.Field(p => p.Asset_Description).Editable(false);
model.Field(p => p.Reading_date).Editable(false);
model.Field(p => p.Error_type).Editable(false);
})
.Read(read => read.Action("Fill_Grid", "ScadaErrors").Data("sendAntiForgery")
.Data("getSearchParameters"))
.Update(update => update.Action("Update_Grid", "ScadaErrors").Data("sendAntiForgery"))
)
)
</
div
>
</
div
>