Questions on UI for ASP.NET Core Forum

0 answers

109 views

Date D M Y being incorrectly validated as M D Y

The user edits dates in a grid in D M Y format .. BUT when saved we see an error that indicates it is expecting M D Y format.

Please see attached files.

DateInput

Grid

Localization

asked on 21 Mar 2022

2 answers

298 views

Newbie - Using asp.net core MVC - Cannot display data in Grid

I think I'm close. Its not throwing any errors but its also not displaying any data... Im just trying to get it to display a list of Company Names and Company IDs from my TblCompanyInfo table.

This is my controller:

        public async Task<IActionResult> Index()
            {
            var apptReminderContext = _context.TblCompanyInfos.Include(t => t.AcctType).Include(t => t.CompanyStatus).Include(t => t.OnHoldReason);
            return View(await apptReminderContext.ToListAsync());
            //return View();
        }

        public JsonResult Products_Read([DataSourceRequest] DataSourceRequest request)
        {
            DataSourceResult result = _context.TblCompanyInfos.ToDataSourceResult(request,
                model => new TblCompanyInfo
                {
                    CompanyId = model.CompanyId,
                    CompanyName = model.CompanyName
                });
            return Json(result);
        }

and my view...

@model IEnumerable<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>

@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>

@using AppointmentRemindersNetCoreMVC.Data
@using Kendo.Mvc.UI
@addTagHelper *, Kendo.Mvc

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()

       @(Html.Kendo().Grid<AppointmentRemindersNetCoreMVC.Models.TblCompanyInfo>()
        .Name("grid")
        .DataSource(dataSource => dataSource.Ajax()
        .Read(read => read.Action("Products_Read", "Company"))
        .PageSize(20)
        //.ServerOperation(false)
        //.Model(model => model.Id(c => c.CompanyId))
        //.Read("Products_Read", "Company")
        //.Read(read => read.Action("Products_Read", "Company"))
        .Update("UpdateCustomer", "Home")
        .Create("InsertCustomer", "Home")
        .Destroy("DeleteCustomer", "Home"))

        .Columns(columns =>
        {
            columns.Bound(product => product.CompanyName);
            columns.Bound(product => product.CompanyId);
        })
        .Pageable()
        .Sortable()
        
    )

I know that the Products_Read function is being called by the view and I also know that the "result" contains 32 rows of data. However, nothing is displayed in the grid

See the attached screenshot.

Thank you for any help you can provide!!

Grid

answered on 18 Mar 2022

1 answer

509 views

Split cell in grid

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.2K+ views

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

323 views

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

420 views

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

270 views

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

562 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

355 views

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

132 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