Telerik Forums
UI for ASP.NET Core Forum
3 answers
133 views

Hello,

We have some DDL with more then 10 items and also with less than 10 items we use a EditorTemplate where the filter setting is:  .Filter("contains")
but it makes no sense to habe a filter if there are only a few rows - in the DataBound event I wanted to disable/enable the filter like this but it doesn't work:

function FilterSetting(e) {
        var ds = this.dataSource.data();
        if (ds.length > 10) {
            this.options.filter = "contains";
        } else {
            this.options.filter = "none";
        }
    }

 

How can I display the filter depending on how many rows are available?

 

robert

 

Eyup
Telerik team
 answered on 18 Sep 2018
1 answer
87 views
I see nothing in the documentation, or any hints to it being possible via Visual Studio IntelliSense. Is this possible? If, so can an example be given?
Veselin Tsvetanov
Telerik team
 answered on 14 Sep 2018
6 answers
328 views

Hi Team:

 

I need to evaluate the ASP.NET Core for the Scheduler control.  I downloaded  the sample application from Telerik:

 

https://github.com/telerik/ui-for-aspnet-mvc-6-demos/releases

 

But when I opened the solution I got hundreds of errors related with dependencies that could not be resolved.

I was following these steps:

http://docs.telerik.com/aspnet-core/introduction

 

What can I do to install this easily in my pc ?

 

Appreciate your help.

 

David

 

 

 

 

 

Veselin Tsvetanov
Telerik team
 answered on 14 Sep 2018
1 answer
312 views

I am trying to use Telerik with Core 2.0 and razor pages

            @(Html.Kendo().Menu()
                .Name("Menu")
                .Items(items =>
                {
                    items.Add()
                        .Text("Home")
                        .Action("Index", "Index");

What parameter(controller) should I use for Action since there is no more controller?

Thank you.

 

Dimitar
Telerik team
 answered on 14 Sep 2018
4 answers
457 views

The telerik for asp.NET Core comes with some EditorTemplates and one of them is Number.cshtml.

I have used the following code <div class="col">@Html.EditorFor(m => m.MeasurementMin)</div> however the generated code is using the String.cshtml template. 

When is the template Number.cshtml used? How should the name for the editor template for double be named?

Dan
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 14 Sep 2018
1 answer
269 views

Hi,

I have a form containing a kendo-window with a select inside the window that isn't posting.  When I place the select outside the kendo-window, it posts correctly.

Is there something I need to be doing to get a field inside a kendo-window to post?

Note: all other fields including the window are in the form #changeForm.

 

Markup:

<kendo-window name="confirm" modal="true" title="Send" draggable="false" resizable="false" width="600" visible="false">
    <content>
        <p>Who would you like to send the email to?</p>
        <div id="dialog-content">
            <select asp-for="Names" multiple="multiple" class="form-control" asp-items="@(new SelectList(ViewBag.Users))">
                <option value="" selected></option>
            </select>
        </div>
        <hr />
        <button class="btn btn-success" type="button" id="confirmSend">Send</button>
    </content>
</kendo-window>

 

Script:

$("#confirmSend").click(function() {
    $("#changeForm").submit();
});

 

Thanks!

Brian
Top achievements
Rank 2
Iron
 answered on 13 Sep 2018
1 answer
522 views

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.

Neli
Telerik team
 answered on 12 Sep 2018
1 answer
576 views

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);
                })
)

Tsvetina
Telerik team
 answered on 11 Sep 2018
1 answer
119 views

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>
Viktor Tachev
Telerik team
 answered on 11 Sep 2018
1 answer
226 views

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 

Angel Petrov
Telerik team
 answered on 10 Sep 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?