Double Scrollbars/Column Resizing

[Michael]

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() {
        //https://www.codeproject.com/Articles/58728/JavaScript-code-to-determine-when-DayLight-Savings
        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>

[Viktor Tachev]

Hello Michael,

By default the browser will display a scrollbar when the content on the page does not fit the available space in the viewport. Would you decrease the height of the Grid and other elements that are before and after it and see how the behavior changes?

With that said, column resizing should work with or without scrolling. When scrolling is disabled and a column is resized by the user the other columns will also be resized to fit the available space. Please check out the sample below that illustrates the behavior.

• https://dojo.telerik.com/opIrawuY

In case the issue persists please send us a runnable sample where the behavior is replicated so we can examine it locally.



Regards,
Viktor Tachev
Progress Telerik