Telerik Forums
UI for ASP.NET Core Forum
or
Ask question
All Questions
Unanswered
Answered
2,819 questions
1 answer
501 views
Simple Form Example?

Perhaps my Google skills are failing me, but is there an example of best practices control use inside a form? Preferably with TagHelpers. I understand that I can do whatever I want with it; but a simple starting point would be nice.

I guess what I'm asking is: For a decent looking form with built in styling, how should I structure my form and what classes should I be adding to elements? There is no <kendo-textbox /> for example, if there was one, what would it output.

General Discussions
Neli
Telerik team
 answered on 12 Sep 2018
1 answer
564 views
Grid inline edit with Autocomplete Editor as EditorTemplate

Hi, On clicking update after selecting item from autocomplete editor , the newly selected value is not updated back in the grid .Instead the previous value is shown again. (the selected value appears in cell before clicking update)

Did I miss any configuration? No errors in console.

Thanks!

@(Html.Kendo().Grid(Model.Customers)
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Id);
                        columns.Bound(p => p.FirstName).EditorTemplateName("AutoCompleteEditor");
                        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
                    })
                    .HtmlAttributes(new { style = "height: 480px;" })
                    .ToolBar(toolbar => toolbar.Create())
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Scrollable()
            .Sortable()
            .Filterable()
            .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5)           
            )
            .DataSource(dataSource => dataSource
            .Ajax()
            .ServerOperation(false)
            .Read(read => read.Action("Index", "Grid"))
            )
            .Events(events => events.Change("onChange"))
    )

AutoCompleteEditor.cshtml
@(Html.Kendo().AutoCompleteFor(m => m.Customer)
                .Filter("startswith")
                .DataTextField("firstName")
                .ValuePrimitive(true)
                .Placeholder("Select customer...")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetCustomer", "Grid");
                    })
                    .ServerFiltering(false);
                })
)

Grid
Tsvetina
Telerik team
 answered on 11 Sep 2018
1 answer
113 views
Double Scrollbars/Column Resizing

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>
Grid
Viktor Tachev
Telerik team
 answered on 11 Sep 2018
1 answer
220 views
Razor Tag vs TagHelper (ID generation)

The tag helper for a DatePickerFor   and the Razor Tag for a DatePickerFor generate different ID for their respective control.

 Tag Razor: @(Html.Kendo().DatePickerFor(m => m.testObject.TestSousObject))

Generate : <input id="testObject_TestSousObject" name="testObject.TestSousObject" type="text" value="" /><script>kendo.syncReady(function(){jQuery("#testObject_TestSousObject").kendoDatePicker({"format":"yyyy-MM-dd"});});</script>

Where the Id = testObject_TestSousObject  (with an underscore)

---------------------------

 <kendo-datepicker name="DateComparaisonExamensImagerieAnterieurs" for="ExamensImagerieMedicale.DateComparaisonExamensImagerieAnterieurs" />

Generate :  <input id="testObject.TestSousObject" name="testObject.TestSousObject" type="text" value="" /><script>kendo.syncReady(function(){jQuery("#testObject\\.TestSousObject").kendoDatePicker({});});</script>

Where the Id = testObject.TestSousObject  (with a dot)

Is it something new  with .NET Core compared to MVC? In my mind, both method should generate the same Code and Ids.

 

Note:  I tested it with a entirely new .NET core 2.1 project 

Date/Time Pickers
Angel Petrov
Telerik team
 answered on 10 Sep 2018
2 answers
281 views
Realtime data from server

Hi,

I found the dojo for realtime draw https://www.telerik.com/forums/redraw-in-real-time.

What is the best way to implement this for measurement data in 100-ms-steps from a server with database?

At first call, the read method for the DataSourceRequest  in the Controller class can send the newest datapoints of the last minute (600 datapoints).
The next calls from the timeout event should only send the newer values.
That is no problem to realize it in the C# controller classs.

In a normal chart the data are overwritten. How can I append this values?

Possible by using of the datasource events push or requestEnd? Is there an example available?

Peter

 

Chart
Peter
Top achievements
Rank 1
 answered on 10 Sep 2018
3 answers
111 views
Replace Grid Entity Factory Method with Call to Dependency Injection Container

Hi, is there a way to specify using the .Net Core Dependency Injection container instead of constructing an entity directly by the Grid?

For instance, I would like to specify the interface of the Entity to request from the DI container as below:

@(Html.Kendo().Grid<IEntityInterface>()

When I click add new it throws an exception saying it cannot create an instance of the interface, which of course is correct, I would like it to request an instance from the DI container instead.

Is this possible?

Thanks!

Grid
Konstantin Dikov
Telerik team
 answered on 07 Sep 2018
2 answers
119 views
Kendo grid making date as column

hi,

Are there any ways to group my data in kendo grid while making my date as a column. please see attached image as my sample data. thanks!

Grid
Enrico
Top achievements
Rank 1
 answered on 07 Sep 2018
2 answers
441 views
Expand node with single click

Hi, 

I need the selected node to expand on single click if the node has children.  I tried using the toggle() method on the selected node during the dropdowntree change event but have been unable to produce the desired result.

For your health,

Chad

DropDownTree
Chad
Top achievements
Rank 1
 answered on 06 Sep 2018
2 answers
845 views
Validation on Databound Event of Grid

My application consists of a couple of pages of data populating a grid.  This data is made up of dirty data that needs to be cleaned up.  The user wants to see if we can populate the data and when the page renders, show the cells with bad data in them -- basically run the validation code for every cell of every row in the grid. .  My guess is that this would be cpu intensive and would need to occur on the databound event of the grid.  Is this even possible? 

 

Error Type Col1     Col2     Col3   Col4    Col5

Out of Range

Grid
Michael
Top achievements
Rank 1
 answered on 06 Sep 2018
6 answers
460 views
Adding title / legend for RadialGauge

Hello. Is there a possibility to add a Title or Legend inside the @(Html.Kendo().RadialGauge() )? By trying .title or .legend nothing appears. In the demo's there arent titles nor legends. 

 

Regards.

Gauge
Rumen
Telerik team
 answered on 05 Sep 2018
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
DropDownList
Chart
Editor
Scheduler
Form
TreeList
Upload
Installer and VS Extensions
Date/Time Pickers
TabStrip
Spreadsheet
MultiSelect
ListView
Menu
ComboBox
Window
Filter
PDFViewer
TreeView
Toolbar
Wizard
AutoComplete
TextBox
Button
ListBox
NumericTextBox
Checkbox
DropDownTree
FileManager
Styling
PanelBar
TileLayout
DateRangePicker
PivotGrid
Template
Timeline
Dialog
Gantt
Calendar
ImageEditor
Localization
Security
ToolTip
OrgChart
Pager
Splitter
Switch
Accessibility
Breadcrumb
Drawer
MaskedTextBox
MultiColumnComboBox
Notification
RadioGroup
ScrollView
TaskBoard
Gauge
Loader
TextArea
Popover
Barcode
Card
Chat
CheckBoxGroup
ColorPicker
DateInput
Diagram
ExpansionPanel
Licensing
Stepper
ResponsivePanel
Sortable
Captcha
GridLayout
AppBar
FloatingActionButton
ProgressBar
QRCode
Avatar
DockManager
VS Code Extension
Badge
MultiViewCalendar
Rating
Slider
ActionSheet
SkeletonContainer
ColorGradient
DropDownButton
Signature
ChipList
BottomNavigation
BulletGraph
Collapsible
RadioButton
Ripple
Sparkline
TreeMap
CircularGauge
HeatMap
PivotGridV2
FlatColorPicker
CircularProgressBar
ColorPalette
SplitButton
StackLayout
TimeDurationPicker
Chip
ToggleButton
AIPrompt
PropertyGrid
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
AICodingAssistant
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
232 233
234
235 236
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how