Questions on UI for ASP.NET Core Forum

1 answer

1.2K+ views

I have a page with a handful of .TextBoxFor(m => m.PropertyX) and they work perfect when binding existing data to the property and thus the rendered Text Box. However, one of the text boxes should be hidden (like a password box) and then revealed on a click (again, like password box). All the examples have it as this:

@(Html.Kendo().TextBox()
    .Name("PropertyX")
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

This does work, however the existing data is not bound to the text box (because the text box is not bound to the property). When I do this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

it does not work - the show/hide is not rendered.

I've even tried this:

@(Html.Kendo().TextBoxFor(m => m.PropertyX)
    .Placeholder("Property X")
    .Value(Model.PropertyX)
    .HtmlAttributes(new { type = "password" }))
<span toggle="PropertyX" class="k-icon k-i-eye toggle-password"></span>

The show/hide icon ONLY shows up if there is no data in the text box (newly entered form and I'm typing in for the first time). If I'm editing a form and data already exists, the icon DOES NOT show up.

Is there a way to have the icon show up all the time regardless if I'm entering new data or editing existing data?

TextBox

answered on 27 Feb 2024

1 answer

267 views

Grid taghelper causes NullReferenceException in Microsoft.AspNetCore.Razor.Language when using AddRazorRuntimeCompilation with 2024.1.130 and ASP.NET Core MVC 8.0

In ASP.NET Core MVC 8.0 with KendoUI 2024.1.130, when rendering a page which contains a grid via the taghelper, if the application has enabled Razor runtime compilation, an exception will be thrown within Microsoft.AspNetCore.Razor.Language in Microsoft.AspNetCore.Razor.StringSegment.Equals. Full stack trace attached. This did not occur with ASP.NET Core MVC 6 and KendoUI 2022.3. Attached is a small sample app demonstrating the problem; navigating to the grid page will fail with an exception unless AddRazorRuntimeCompilation is commented out.

A couple levels up the call stack from where the exception occurs, Razor is iterating over descriptor.BoundAttributes; one of these whose DisplayName is "System.Collections.Generic.IDictionary<System.String, System.String> Kendo.Mvc.TagHelpers.GridTagHelper.Templates" has a Name property of null which is what results in the exception.

Grid

updated answer on 27 Feb 2024

1 answer

196 views

Required columns with DataTable in kendo mvc grid

Hi,

I am using datatable with my kendo mvc grid and want to make few columns as mandatory. I am not sure how can I do that.

How can I do this?

Thanks in advance.

Mahesh

Grid

answered on 27 Feb 2024

1 answer

235 views

Server Side Pagination Excel Export

Hi,

I'm looking to do the Excel Export with server side paging. Since we are server side paging, we are only exporting what is displayed on the screen at the time. I scoured the docs and knowledge base, but couldn't find any documentation or discussions pertaining to this.

Thanks for the help!

Joey

Grid

Pager

answered on 26 Feb 2024

1 answer

88 views

Kendo Grid and two columns.ForeignKey

I need to send a model to my controller action. I have created a Kendo grid:

Html.Kendo().Grid<XXXX.WebUI.Models.Employees.LocationsListViewModel>()
    .Name("EmployeeLocationsGrid")
    .Columns(columns => {
        columns.Select().Width(45);
        columns.Bound(c => c.UIDEmployee).Visible(false);
        columns.Bound(c => c.UIDEmployee_Location).Title("Id").Width(50);
        if (Model.LocationsEntities != null)
        {
            columns.ForeignKey(f => f.UIDLocation, Model.LocationsEntities?.Items, "UIDEntity", "Name")
                .Title("Location")
                .EditorTemplateName("FieldListLocations")
                .EditorViewData(new { locations = Model.LocationsEntities.Items })
                .Width(200);
        }
        if (Model.LocationsEntities != null)
        {
            columns.ForeignKey(f => f.UIDSublocation, Model.SublocationsEntities?.Items, "UIDEntity", "Name")
                    .Title("Sublocation")
                    .EditorTemplateName("FieldListSublocations")
                    .EditorViewData(new { sublocations = Model.SublocationsEntities.Items })
                    .Width(200);
        }
        columns.Bound(c => c.Main)
            .Title("Main")
            .EditorTemplateName("FieldCheckBox")
            .ClientTemplate("#= Main ? 'Yes' : 'No' #")
            .Width(100);
        columns.Bound(c => c.PercentageOfDedication)
            .Title("% Dedication")
            .EditorTemplateName("FieldNumericTextBox")
            .Format("{0} %")
            .Width(200);
        columns.Bound(c => c.StartDate)
            .Title("Start Date")
            .ClientTemplate("#= kendo.toString(kendo.parseDate(StartDate), 'dd/MM/yyyy') #")
            .EditorTemplateName("FieldDateOnlyPicker")
            .Width(200);
        columns.Bound(c => c.EndDate)
            .Title("End Date")
            .ClientTemplate("#= EndDate != null ? kendo.toString(kendo.parseDate(EndDate), 'dd/MM/yyyy') : '<strong>Currently</strong>' #")
            .EditorTemplateName("FieldDateOnlyPicker")
            .Width(200);
        columns.Bound(c => c.Comments)
            .Title("Comments")
            .EditorTemplateName("FieldTextArea")
            .Width(250);
        columns.Command(command => {
            command.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("bi bi-pencil-square").HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Edit" });
            command.Custom("deleteLocation")
                .Click("function(e) { var dataItemLoc = this.dataItem($(e.target).closest('tr')); window.i3.OnDeleteEmployeeLocation(dataItemLoc); }")
                .Text(" ").IconClass("bi bi-trash3")
                .HtmlAttributes(new { @class = "btn btn-outline-primary", title = "Delete" });
        }).Title("Actions");
    })
    .NoRecords(s => s.Template("<span class='ms-3 mt-3'><i class='bi bi-people-fill me-2'></i><strong>This employee was not assigned to any location.</strong></span>"))
    .AutoBind(true)
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Sortable(sorting => sorting.Enabled(true))
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).DragToSelect(false))
    .Events(events => events
        .Sort("window.i3.OnColumnSorted").Save("window.i3.OnSaveLocation")
    )
    .DataSource(ds => ds
        .Ajax()
        .Model(gridModel =>
        {
            gridModel.Id(entity => entity.UIDEmployee_Location);
            gridModel.Field(p => p.UIDEmployee_Location).Editable(false);
            gridModel.Field(p => p.UIDEmployee).Editable(false).DefaultValue(Model.UIDEmployee);
            gridModel.Field(p => p.UIDLocation).Editable(true);
            gridModel.Field(p => p.UIDSublocation).Editable(true);
            gridModel.Field(p => p.UIDStatus).Editable(false);
            gridModel.Field(p => p.UIDPosition).Editable(false);
        })
        .Read(r => r.Action("GetAllEmployeeLocations", "Employees", new { EmployeeID = Model.UIDEmployee }))
        .Events(events => events
            .RequestEnd("window.i3.OnRequestEndLocation")
        )
        .PageSize(10)
    )
)

This data reaches me at this event where I process it:

public OnSaveLocation(e: kendo.ui.GridSaveEvent): void {
    e.preventDefault();

    const gridLocation = $("#EmployeeLocationsGrid").data("kendoGrid");
    const locationsItems: LocationsListViewModel[] = (gridLocation?.dataSource.data() as unknown) as LocationsListViewModel[];
    let newLocItem: LocationsListViewModel = (e.model as any) as LocationsListViewModel;

    // Fix Date
    let startLocationDateNew = new Date(newLocItem.StartDate);
    let endLocationDateNew = new Date(newLocItem.EndDate);
    let offsetLocationNew = startLocationDateNew.getTimezoneOffset();
    startLocationDateNew = new Date(startLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));
    endLocationDateNew = new Date(endLocationDateNew.getTime() - (offsetLocationNew * 60 * 1000));

    let newLocationItem: LocationsListViewModel = {
        UIDEmployee_Location: newLocItem.UIDEmployee_Location,
        UIDEmployee: newLocItem.UIDEmployee,
        UIDLocation: newLocItem.UIDLocation,
        UIDSublocation: newLocItem.UIDSublocation,
        UIDPosition: newLocItem.UIDPosition,
        Main: newLocItem.Main,
        PercentageOfDedication: newLocItem.PercentageOfDedication,
        StartDate: startLocationDateNew.toISOString().split('T')[0],
        EndDate: endLocationDateNew.toISOString().split('T')[0],
        UIDStatus: newLocItem.UIDStatus,
        Comments: newLocItem.Comments
    };
}

All the data is well collected except Sublocations is set to null. Where it should be an int ID. I share with you the Template and the model:

@using XXXX.Application.Application.Maintenances.DTOs;

@model int?

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("UIDEntity")
    .OptionLabel("Select...")
    .BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["sublocations"]!)
)

@using XXXX.Application.Application.Maintenances.DTOs;

@model int

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("UIDEntity")
    .OptionLabel("Select...")
    .BindTo((IEnumerable<GenericMaintenanceEntityDTO>)ViewData["locations"]!)
)

interface LocationsListViewModel {
    UIDEmployee_Location: number;
    UIDEmployee: number;
    UIDLocation: number;
    UIDSublocation: number;
    UIDPosition: number;
    Main: boolean;
    PercentageOfDedication: string;
    StartDate: string;
    EndDate: string;
    UIDStatus: number;
    Comments: string;
}

I have been looking for the problem for quite some time but I can't find it. Can someone help me?

Thanks

DropDownList

Grid

answered on 26 Feb 2024

1 answer

85 views

migrating radmenu to ASP.NET Core MVC menu

I am migrating a WebForms application to ASP.NET Core MVC

In that application a radmenu is used.

Radmenu had a string property "value".

A sort of free to use property.

Is there any way to achieve this in a core MenuItem?

Menu

answered on 26 Feb 2024

1 answer

451 views

Could not load file or assembly 'System.Reflection.TypeExtensions, Version=4.1.0.0, Culture=neutral, PublicKeyToken=XXXXXXXXX'. The system cannot find the file specified.

I am using Telerik.UI.for.AspNet.Core version 2023.1.314 in .NET Core project which uses System.Reflection.TypeExtensions. The deployed version is working fine but occasionally it give me error Could not load file or assembly 'System.Reflection.TypeExtensions, Version=4.1.0.0. After restart of app pool it works fine again. Not sure what the problem is. Please help. Thank you

General Discussions

answered on 23 Feb 2024

0 answers

61 views

How to use WorkWeekStart and what does it do?

How to use WorkWeekStart and what does it do? What are the valid integer values? 0 to 6? 1 to 7? The month view is rendered Sunday to Saturday... If I need to display Monday to Sunday would the changing the WorkWeekStart help? It doesn't seem to do anything.

Scheduler

asked on 20 Feb 2024

1 answer

264 views

Html.Kendo().Grid checkbox selection not working

Hello,

I have Html.Kendo().Grid with checkbox column based on field(IsEnabled) is true that particular grid cell with check box needs to allow the user selection. if field(IsEnabled) is false that particular cell should be disabled and not allow the user to select or deselect.

The issue I'm facing is, it is allow to select the check box in second click only. not allowing to select in single click on that check box

sample code which I am using:

columns.Bound(c => c.IsEnabled)
.Title(Localizer["EnableDisableFlag", "PSFPro"].Value)
.ClientTemplate("<input type='checkbox' class='check-state enableDisableFlagCB'" +
$"onclick = 'handleEnableDisableFlagCheckBoxClicked(this);'" +
$"#= {nameof(TransactionTypeMappingParameterViewModel.IsEnabled)} ? " +
"'checked=checked' : '' # />")
.Sortable(false);

Grid

answered on 19 Feb 2024

1 answer

1.0K+ views

Cannot read properties of undefined (reading 'field') from grid.DataSource

I've pulled ViewModel objects into my selectable grid. After a user selects rows, a submit button allows an ajax call which will post the selected objects (rows) to a controller method:

    function submitAddressImport() {
         var grid = $("#groupAddressesImportGrid").data('kendoGrid');
         var selectedItems = grid.selectedKeyNames();
         var actualItems = [];

         if (selectedItems.length > 0) {
           selectedItems.forEach(function(key) {
            actualItems.push(grid.dataSource.get(key));
           });
         }

        kendo.ui.progress($("#groupAddressesImportGrid"), true);
        for (var i = 0; i < actualItems.length; i++) {
                $.ajax({
                type: "POST",
                url: "@Url.Action("AddAddress", "Address")",
                contentType: "application/json;",
                data: actualItems[i],  // JSON.stringify(actualItems[i]) avoids console error
                traditional: false,
                success: function (data) {
                 ...
                },
                error: function (data) {
                  ...
                },
                timeout: function (data) {
                   ...
                }, complete: function () {
                   ...
                }
            });
        }
        closeGroupAddresspopup()
    }

What is most curious about this error is that it is avoided if I use JSON.stringify() to convert the object to a JSON string. My model expects an object of a class, and if a stringified object is sent the object itself will not be null but will have all properties set to null.

When troubleshooting this, I removed the call to JSON.stringify() and encountered the console error:

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

Why does this error occur when JSON.stringify() is not used, and how can it be avoided?

My grid is configured as follows:

            @(
                Html.Kendo().Grid(Model.groupAddresses)
                .Name("groupAddressesImportGrid")
                .HtmlAttributes(new { @class = "table-cell" })
                .Columns(columns =>
                {
                    columns.Select().Width(50);
                    columns.Bound(obj => obj.AddressType).Title("Type").Width(60);
                    columns.Bound(obj => obj.PrimaryField).Title("Primary");
                    columns.Bound(obj => obj.Address1).Title("Address");
                    columns.Bound(obj => obj.AddressCity).Title("City");
                    columns.Bound(obj => obj.State).Title("State");
                    columns.Bound(obj => obj.ZipCode).Title("Zip Code");
                    columns.Bound(obj => obj.County).Title("County");
                })
                .Sortable(_ => _.AllowUnsort(true))
                .Resizable(resizable => resizable.Columns(true))
                .Navigatable()
                .Filterable()
                .Scrollable()
                .Resizable(resize => resize.Columns(true))
                .Events(ev=>ev.Change("handleCheckBox"))
                .PersistSelection()
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.AddressId)) 
                )
                )

Grid

answered on 19 Feb 2024