Questions on UI for ASP.NET Core Forum

1 answer

536 views

Hello,

I have a grid for my ASP.NET Core Razor page, and have it bound to the Model object.

In the interest of saving horizontal space, and for readability, we would like to split some cells to show Start date / End date in one cell, rather than have two columns for this data. Both data should be editable.

Is this possible?

Thanks

Grid

answered on 18 Mar 2022

1 answer

1.3K+ views

[Solved] Grid filter date format

Good afternoon,

I've used the following to get the date filter in my Grid to use the dd/MM/yyyy format:

columns.Bound(t => t.Datestamp).Title("Date").Format("{0:dd/MM/yyyy HH:mm:ss}").Filterable(f => f.UI("datestampFilter"));

    function datestampFilter(element) {
        element.kendoDatePicker({
            format: "{0:dd/MM/yyyy}",
            parseFormats: ["dd/MM/yyyy"]
        });
    }

This works but the class of the datepicker input is incorrect and, as as result, the button is not aligned right and the border of the input is darker:

It generates an input:

<input title="Value" data-bind="value:filters[0].value" class="" type="text" data-role="datepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" autocomplete="off" aria-disabled="false" aria-readonly="false">

It's missing class="k-input-inner" which is what is generated when no formatting is applied to the date column.

Have I missed something else which is causing the slightly incorrect styling?

Kind regards,

Richard

Grid

answered on 17 Mar 2022

1 answer

345 views

[Solved] ListBox Drag and Drop

Is there a way to drag and drop from one ListBox to any number of other ListBoxes? I have a use case where I have a list of items and I want to be able to drag those items to any one of multiple other ListBoxes to assign them to a group. The documentation and examples show being able to drag to ony one other ListBox.

Has anyone done this before and can point me to some example code?

Thank you!

ListBox

answered on 17 Mar 2022

1 answer

451 views

[Solved] grid popup edit change height button position

I have a grid with two columns one text and one is datetime. The grid has to be edited in a popup. Because the datetime calendar is too big we want move the buttons in the popup below. So we tried to give the popup window a height. However if we do that the buttons do not stick to the bottom. They remain to where the content is finished.

How can this be achieved?

Grid

answered on 16 Mar 2022

1 answer

285 views

[Solved] Dropdown filter in scheduler toolbar

Is there a way to add a dropdown to filter events in the scheduler? I can't seem to find an example to accomplish this. Would this entail using a resource in the scheduler? I've added images of my scheduler and events. Each event is a leave request from a user and has a department id. I'd like to filter the scheduler with a drop down based on department id.

Scheduler

answered on 16 Mar 2022

2 answers

580 views

Selected Items from batch enabled Grid always null on POST to Controller from custom Toolbar button

I posted this query as a support ticket but I'm hoping to get an answer before the weekend is over.

I have a Grid with batch editing enabled. It also features a custom toolbar with an additional button: 'Archive'.

Users will be able to check multiple rows and click the 'Archive' button in the toolbar.

The button should submit all the selected rows (models) and POST them to a server side method for processing.

I have used this post as a basis for my work:
https://www.telerik.com/forums/how-to-pass-a-grid%27s-selected-row-values-to-controller

In the post, the custom button simply gets the selected items and posts them to the appropriate Controller method.

I need to POST an IEnumerable<T> to the Controller. Not just properties of an object.

I keep getting this error message:

"Javascript error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'field')'

or the Controller gets NULL.

markup:

<div class="container-fluid"><div class="fc-day-grid-container">
        @(Html.Kendo().Grid<Core.Resources.EmPowerReconciliationDto>
    ()
    .Name("EmpFSRollGrid")
    .Columns(columns =>
    {
        columns.Select().Width(50)
             .ClientHeaderTemplate("<input type='checkbox' id='selectAll' class='k-checkbox' onClick='selectAll(this)'/>" +
                                     "<label for='selectAll'>&nbsp;All</label>").HeaderHtmlAttributes(new { @class = "k-header" });

        columns.Bound(c => c.ProjMessage).Width(100);
        columns.Bound(c => c.ProjectId).Width(150);
        columns.Bound(c => c.ElectricUtilityUtilityName).Width(150);
        columns.Bound(c => c.GasUtilityUtilityName).Width(150);
        columns.Bound(c => c.PrimaryHeatingFuel).Width(100);
        columns.Bound(c => c.ReferralSF).Width(100);
        columns.Bound(c => c.MeasureType).Width(100);
        columns.Bound(c => c.ProgramName).Width(100);
        columns.Bound(c => c.MeasureId).Width(100);
        columns.Bound(c => c.FundedAmount).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
        columns.Bound(c => c.Adj).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
        columns.ForeignKey(c => c.XFundingSourceId, (System.Collections.IEnumerable)ViewData["fundingsource"], "FundingSourceId", "FundingSourceDesc").Width(160).Title("Funding Source");
        columns.Bound(c => c.MeasureCategoryMeasureCategoryDesc).Width(100);
        columns.Bound(c => c.ProjectStage).Width(100);


    })
    .ToolBar(toolbar =>
    {
        toolbar.ClientTemplateId("GridToolbarTemplate");
    })
    .Excel(excel => excel
        .FileName($"EmPowerReconciliationReport{System.DateTime.Now.ToString("yyyyMMMMdd")}.xlsx")
        .Filterable(true)
        .AllPages(true)
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable(pageable =>
    {
        pageable.Refresh(true);
        pageable.PageSizes(new[] { 10, 20, 50 });
    })
    .Sortable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
    .Scrollable(s => s.Enabled(true))
    .Resizable(resize => resize.Columns(true))
    .PersistSelection()
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(emp => emp.MeasureId);
        model.Field(emp => emp.ProjMessage).Editable(false);
        model.Field(emp => emp.ProjectId).Editable(false);
        model.Field(emp => emp.ElectricUtilityUtilityName).Editable(false);
        model.Field(emp => emp.GasUtilityUtilityName).Editable(false);
        model.Field(emp => emp.PrimaryHeatingFuel).Editable(false);
        model.Field(emp => emp.ReferralSF).Editable(false);
        model.Field(emp => emp.MeasureType).Editable(false);
        model.Field(emp => emp.ProgramName).Editable(false);
        model.Field(emp => emp.MeasureId).Editable(false);
        model.Field(emp => emp.FundedAmount).Editable(false);
        model.Field(emp => emp.Adj).Editable(true);
        model.Field(emp => emp.XFundingSourceId).Editable(true);
        model.Field(emp => emp.MeasureCategoryMeasureCategoryDesc).Editable(false);
        model.Field(emp => emp.ProjectStage).Editable(false);

    })
    .ServerOperation(false)
    .Batch(true)
    .Events(events => events.Error("error_handler"))
    .Events(events => events.RequestEnd("request_end"))
    .Read(read => read.Action("GetAllFsRollup", "EmPowerReconciliation"))
    .Update(update => update.Action("UpdateCompositeInvoice", "EmPowerReconciliation"))
    //.Create(create => create.Action("AddInvoice", "EmPowerInvoiceReport"))
    //.Destroy(destroy => destroy.Action("DeleteInvoice", "EmPowerInvoiceReport"))
    )
    )
    </div></div><script id="GridToolbarTemplate" type="text/x-kendo-template">
    <div class="toolbar">
        <a role="button" class="k-button k-button-icontext k-grid-excel" href="\\#"><span class="k-icon k-i-file-excel"></span>Export to Excel</a>
        &nbsp;
       <a role="button" class="k-button k-button-icontext k-grid-save-changes" href="\\#"><span class="k-icon k-i-check"></span>Save changes</a>
        &nbsp;
       <a role="button" id="cancelmeasureChanges" class="k-button k-button-icontext k-grid-cancel-changes" href="\\#"><span class="k-icon k-i-cancel"></span>Cancel changes</a>
        &nbsp;
     <a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>
        &nbsp;
         @*@(Html.Kendo().DropDownList()
                .Name("InvoicedList")
                .OptionLabel("All")
                .DataTextField("InvoiceSatusName")
                .DataValueField("InvoiceStatusId")
                .AutoBind(true)
                .Events(e => e.Change("invoicedStatusChange"))
                .DataSource(ds =>
                {
                    ds.Read("InvoiceStatuses", "EmPowerInvoiceReport");
                })
                .ToClientTemplate()
    )*@
    </div>
</script><script type="text/javascript">

   function Archive() {
        var items = {};
        //var items = [];

        var grid = $('#EmpFSRollGrid').data('kendoGrid');
        var selectedElements = grid.select();
        
        for (var j = 0; j < selectedElements.length; j++) {
            var item = grid.dataItem(selectedElements[j]);
            //items.push(item);
            items['archiveItems[' + j + ']'] = item;
            //items[j] = item;
        }
        $.ajax({
                   type: "POST",
                   data: items,
                   url: '@Url.Action("Archive", "EmPowerReconciliation")',
                   success: function (result) {
                       console.log(result);
                   }
               })


    }
    // ******* Select/deSelect All
    function selectAll(mainCheck) {
        var grid = $("#EmpFSRollGrid").data("kendoGrid");
        var items = grid.items();
        items.each(function (index, td) {

            var chckbx = $(td).find("input").get(0);
            $(chckbx).prop("checked", mainCheck.checked);
            var dataItem = grid.dataItem(this);
            dataItem.IsSubmitted = mainCheck.checked;

            if (mainCheck.checked) {
                //$(chckbx).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
                $(chckbx).closest("tr").addClass("k-state-selected");
                dataItem.dirty = true;
                dataItem.dirtyFields = { IsSubmitted: true }
            }
            else {
                //$(chckbx).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
                $(chckbx).closest("tr").removeClass("k-state-selected");
                dataItem.dirty = false;
                dataItem.dirtyFields = { IsSubmitted: false }
            }
        })
        if (mainCheck.checked == false) {
            dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
            grid._selectedIds = {};
            grid.clearSelection();
        }
    }
    // ***************** Grid Textbox edited
    $("#EmpFSRollGrid").on("change", "input.text-box.single-line.k-valid", function (e) {
        var grid = $("#EmpFSRollGrid").data("kendoGrid"),
            dataItem = grid.dataItem($(e.target).closest("tr"));
        if (dataItem.dirty) {
            grid.dataItem($(e.target).closest("tr").addClass("k-state-selected"));
            var chk = $(e.target).closest("tr").find(".k-checkbox");
            chk.prop("checked", true);
        }

    });
    // *************** Grid checkbox checked/unchecked
    $("#EmpFSRollGrid").on("change", "input.k-checkbox", function (e) {
        var grid = $("#EmpFSRollGrid").data("kendoGrid"),
            dataItem = grid.dataItem($(e.target).closest("tr"));
        dataItem.IsSubmitted = this.checked;
        if (this.checked) {
            //$(e.target).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
            dataItem.dirty = true;
            dataItem.dirtyFields = { IsSubmitted: true }
        }
        else {
            // $(e.target).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
            dataItem.dirty = false;
            dataItem.dirtyFields = { IsSubmitted: false }

            var row = e.target.closest('tr')
            var uid = $(row).data(uid)
            dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
            var item = dataSource.getByUid(uid.uid);
            dataSource.cancelChanges(item);
            grid.refresh();
        }
        if (!this.checked) {
            $("#selectAll").prop('checked', false);
        }
    });
    // ************** Clear the grid after an Update
    function request_end(e) {
        var grid = $("#EmpFSRollGrid").data("kendoGrid");
        var items = grid.items();
        items.each(function (index, td) {
            var chckbx = $(td).find("input").get(0);
            $(chckbx).prop("checked", false);
            $(chckbx).closest("tr").removeClass("k-state-selected");
        });
        grid._selectedIds = {};
        grid.clearSelection();
    }
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

</script>

The important part is here.

 <a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>

Here:

 function Archive() {
        var items = {};
        //var items = [];

        var grid = $('#EmpFSRollGrid').data('kendoGrid');
        var selectedElements = grid.select();
        
        for (var j = 0; j < selectedElements.length; j++) {
            var item = grid.dataItem(selectedElements[j]);
            //items.push(item);
            items['archiveItems[' + j + ']'] = item;
            //items[j] = item;
        }
        $.ajax({
                   type: "POST",
                   data: items,
                   url: '@Url.Action("Archive", "EmPowerReconciliation")',
                   success: function (result) {
                       console.log(result);
                   }
               })


    }

Controller

[AcceptVerbs("Post")]
        public async Task<ActionResult> Archive([DataSourceRequest] DataSourceRequest request
             ,IEnumerable<EmPowerReconciliationDto> archiveItems)
        {
            return Json(archiveItems);
        }

Any help is appreciated!

Button

Grid

Toolbar

answered on 16 Mar 2022

1 answer

388 views

[Solved] TagHelper - How to define an array?

Hey guys,

currently I'm trying to get use of the tag helper in general. Now I'm stuck at the daterangepicker.

Can somebody describe how you can put an array to the definition? I'm talking about the "DisableDates".

Html.Kendo().DateRangePicker()
                        .DisableDates(new[] { "sa", "su" })
                        .Max(DateTime.Now.AddYears(1))
                        .Messages(m => m.StartLabel("Start").EndLabel("Ende"))
                        .Name("daterangepickerReservierungswunsch")
                        .Range(r => r.Start(Model.Startdatum).End(Model.Enddatum))

<kendo-daterangepicker name="daterangeReservation" disable-dates="???" max="DateTime.Now.AddYears(1)" >
                <messages start-label="Start" end-label="Ende" />
                <range start="Model.DateStart" end="Model.DateEnd" />
            </kendo-daterangepicker>

DateRangePicker

answered on 16 Mar 2022

0 answers

149 views

Grid Not Shown In Mobile Display In ASP.NET Core

I have a strange problem with one of my grids, everything works just fine in normal display, but when I switch to mobile display, the grid does not show up and I get this error in the console:

Uncaught TypeError: Ke.Pane is undefined

My other grids which almost have identical code structure to this one, works fine in both displays. Any idea what could be the reason for this error? Thank you in advance.

Grid

asked on 15 Mar 2022

1 answer

325 views

TxtDataProvider exists in Both Telerik.Windows.Controls.RichTextBox and Telerik.Windows.Documents

Good Afternoon,

ive been doing some work on upgrading to .net6 and have run into some telerik issues.

From my understanding Telerik.Windows.Controls.RichTextBox doesn't even exist anymore, nor is it installed anywhere in my solution. The closet thing to it is Telerik.Windows.Controls.RichTextBoxUI.

After i import telerik into my xaml file via

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

i receive errors stating
```

Error CS0433 The type 'RadRichTextBox' exists in both 'Telerik.Windows.Controls.RichTextBox, Version=2021.3.1109.60, Culture=neutral, PublicKeyToken=5803cfa389c90ce7' and 'Telerik.Windows.Documents, Version=2021.3.1109.45, Culture=neutral, PublicKeyToken=5803cfa389c90ce7''

```

I'm not even sure were to look or what to try, as I've checked to make sure its not installed anywhere, triple checked, and also have deleted bin and obj folders tried to do a clean rebuild build. i don't even understand how it can think about wanting something from a package that isn't even installed

TextBox

answered on 10 Mar 2022

0 answers

320 views

Asp.Net Core (.Net5) kendo grid data binding not working

I am trying to use kendo grid in asp.net core (.net5) web application but data is not visible in grid I guess binding is not working.

Kendo grid is able make read data request to action method and also able to get result back but that result is not being bound to grid and I am not sure what is going wrong in here.

I have attached the sample project here.

Can someone help me find the issue?

Grid

asked on 10 Mar 2022