Questions on UI for ASP.NET Core Forum

1 answer

86 views

Fields return undefined when clicking add new record in grid

When clicking the Add new record button on a grid from the Toolbar.Create method I am getting an error: kendo.all.js:3314 Uncaught TypeError: Cannot read properties of undefined (reading 'IsActive'). I'm using a ViewModel that is as follows:

public class PersonAddressViewModel
{
    public List<PersonInfo>? PersonInfoList { get; set; }

    public List<PersonAddress>? PersonAddressList { get; set; }

    public PersonInfo? Person { get; set; }

    public PersonAddress? Address { get; set; }
}

which is referencing these:

public partial class PersonInfo
{
    [Key]
    public int Id { get; set; }

    [Required]
    [StringLength(120)]
    [Unicode(false)]
    public string Name { get; set; }

    public int Age { get; set; }

    [Required]
    [StringLength(10)]
    [Unicode(false)]
    public string Sex { get; set; }

    [Required]
    [StringLength(120)]
    [Unicode(false)]
    public string CreatedBy { get; set; }

    public DateTime CreatedDate { get; set; }

    [StringLength(120)]
    [Unicode(false)]
    public string? UpdatedBy { get; set; }

    public DateTime? UpdatedDate { get; set; }

    public bool IsActive { get; set; }

    [InverseProperty("FkPersonInfoNavigation")]
    public virtual ICollection<PersonAddress>? PersonAddresses { get; set; } = new List<PersonAddress>();
}

public partial class PersonAddress
{
    [Key]
    public int Id { get; set; }

    [StringLength(120)]
    [Unicode(false)]
    public string StreetAddress { get; set; }

    [StringLength(120)]
    [Unicode(false)]
    public string City { get; set; }

    [StringLength(2)]
    [Unicode(false)]
    public string State { get; set; }

    [StringLength(10)]
    [Unicode(false)]
    public string Zip { get; set; }

    [Column("FK_PersonInfo")]
    public int FkPersonInfo { get; set; }

    [ForeignKey("FkPersonInfo")]
    [InverseProperty("PersonAddresses")]
    public virtual PersonInfo FkPersonInfoNavigation { get; set; }
}

This is my cshtml:

@(
    Html.Kendo().DataSource<PersonAddressViewModel>()
        .Name("DsPerAddVM")
        .Ajax(datasource => datasource
            .ServerOperation(false)
            .Model(model =>
            {
                model.Id(perAdd => perAdd.Person.Id);
                model.Field(perAdd => perAdd.Person.Id).Editable(false);
                model.Field(perAdd => perAdd.Person.IsActive).DefaultValue(true);
                model.Field(perAdd => perAdd.Person.Name).DefaultValue("Enter Name");
                model.Field(perAdd => perAdd.Person.Age).DefaultValue(0);
                model.Field(perAdd => perAdd.Person.Sex).DefaultValue("Optional");
                model.Field(perAdd => perAdd.Person.CreatedBy).Editable(false).DefaultValue("Some User");
                model.Field(perAdd => perAdd.Person.CreatedDate).Editable(false).DefaultValue(DateTime.Now);
                model.Field(perAdd => perAdd.Person.UpdatedBy).Editable(false);
                model.Field(perAdd => perAdd.Person.UpdatedDate).Editable(false);
                model.Field(perAdd => perAdd.Address.Id).Editable(false);
                model.Field(p => p.Address.FkPersonInfo).Editable(false);
            })
            .Read(read => read.Action("KendoRead", "Home"))
            .Create(create => create.Action("KendoCreate", "Home"))
            .Update(update => update.Action("KendoUpdate", "Home"))
            .Destroy(destroy => destroy.Action("KendoDelete", "Home"))
        )
)

<div>
    @(
        Html.Kendo().Grid<PersonAddressViewModel>()
        .Name("UserGrid")
        .Columns(columns =>
        {
            columns.Bound(perAdd => perAdd.Person.IsActive);
            columns.Bound(perAdd => perAdd.Person.Name);
            columns.Bound(perAdd => perAdd.Person.Age);
            columns.Bound(perAdd => perAdd.Person.Sex);
            columns.Bound(perAdd => perAdd.Address.StreetAddress);
            columns.Bound(perAdd => perAdd.Address.City);
            columns.Bound(perAdd => perAdd.Address.State);
            columns.Bound(perAdd => perAdd.Address.Zip);
            columns.Command(command => command.Destroy());
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
            toolbar.Search();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Scrollable()
        .DataSource("DsPerAddVM")
    )
</div>

My grid loads the data as expected with the following methods (image attached):

public ActionResult KendoRead([DataSourceRequest] DataSourceRequest dsRequest)
{
    List<PersonAddressViewModel> perAddList = KendoViewServices.GetGridData(_context);

    return Json(perAddList.ToDataSourceResult(dsRequest));
}

public static List<PersonAddressViewModel> GetGridData(TestJohnCrudOpContext context)
{
    context = context;

    List<PersonAddressViewModel> perAddList = [];
    PersonAddressViewModel GetPerAddVm = new()
    {
        PersonInfoList = [],
        PersonAddressList = []
    };
    GetPerAddVm.PersonInfoList = context.PersonInfo.ToList();
    GetPerAddVm.PersonAddressList = context.PersonAddresses.ToList();

    foreach (PersonInfo person in GetPerAddVm.PersonInfoList)
    {
        PersonAddressViewModel perAddVm = new()
        {
            Person = new PersonInfo
            {
                Id = person.Id,
                Name = person.Name,
                Age = person.Age,
                Sex = person.Sex,
                CreatedBy = person.CreatedBy,
                CreatedDate = person.CreatedDate,
                UpdatedBy = person.UpdatedBy,
                UpdatedDate = person.UpdatedDate,
                IsActive = person.IsActive
            }
        };

        foreach (PersonAddress address in GetPerAddVm.PersonAddressList.Where(w => w.FkPersonInfo == person.Id))
        {
            perAddVm.Address = new PersonAddress
            {
                Id = address.Id,
                StreetAddress = address.StreetAddress,
                City = address.City,
                State = address.State,
                Zip = address.Zip,
                FkPersonInfo = address.FkPersonInfo
            };
        }
        perAddList.Add(perAddVm);
    }

    perAddList.ToList();

    return perAddList;

I've used this ViewModel to load and edit a standard HTML table with no issues. Also, updating the grid or performing a deletion works without error. I can tell that it is cutting off the first property of each field prior to the "." but I can't find a solution to correct this.

Grid

Toolbar

answered on 26 Nov 2024

1 answer

85 views

Am I crazy, or did a BUNCH of stuff stop rendering the HTML inside of passed strings?

I'm just starting to catalog the issues list, but I'm immediately noticing that any markup passed to non-template areas has ceased rendering.

For example:

<div class="demo-section">
    @(Html.Kendo().Switch()
                .Name("switch")
                .Messages(c => c.Checked("<span>YES</span>").Unchecked("<span>NO</span>"))
    )
</div>

used to render the markup vs displaying the markup text. Now it spits it out.

I have used similar techniques in Grid commands as well, which are all also broken. Basic custom commands I can work around by using the .Template option instead of .Text, but for an Edit's UpdateText and CancelText, I cannot find a workaround that isn't completely unbearable to manage at anything remotely near scale.

Is there a workaround or option to re-enable rendering HTML in these places I am simply not seeing?

Also, this feels like a pretty significant change to bury inside of a generic "rendering mismatch" (which may not even be referring to this, but I cannot find anything in the breaking changes mentioning something like this change). If there's not an effective way to get back to this functionality, it's going to potentially cost me days/weeks to find a tenable solution.

Grid

Switch

Template

answered on 22 Nov 2024

0 answers

165 views

Dropdownlist - CSS class values cause razor NullReferenceException with v2024.4.1112

I have upgraded our libraries to version 2024.4.1112 and we are experiencing a NullReferenceException when we do this:

<kendo-dropdownlist for="Id" datatextfield="Name" datavaluefield="Id" auto-width="true" class="form-control w-75" required>

If I remove the class declaration and the required tag, page renders just fine.

Stack Trace: NullReferenceException: Object reference not set to an instance of an object. on Microsoft.AspNetCore.Razor.Language.TagHelperMatchingConventions.TryGetFirstBoundAttributeMatch

The breaking change listed on the release notes references a backward compatibility page but has no information specific to the dropdownlist control.

What am I missing?

DropDownList

Styling

updated question on 20 Nov 2024

1 answer

257 views

DatePickerFor not working with Model Binding

Hi Support Team,

I upgrade my project from .Net 8.0 Telerik 2024 Q3 to .Net 9.0 Telerik 2024 Q4

I have an issue with DatePickerFor. Currently DatePickerFor data not showing when using model binding with DateTime? (allow null).

Note: This issue was working with Telerik 2024 Q3.

I create simple ASP.NET MVC Core project:

+ TestDateVM view model:

 public class TestDateVM
 {
     public DateTime? Date { get; set; }
 }

+ HomeController.cs : I set value Date for view model = 01 Nov 2024

public class HomeController : Controller
{
    public IActionResult Index()
    {
        var filter = new TestDateVM();
        filter.Date = new DateTime(2024, 11, 1);
        return View(filter);
    }
}

+ Index.cshtml

@model TestDateVM
@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    Date
    <div class="col-sm-3 form-group">
        @{
            Html.Kendo().DatePickerFor(s => s.Date).Format("dd MMM yyyy")
            .HtmlAttributes(new { id = Guid.NewGuid().ToString() }).Render();
        }
    </div></div>

When run project, DatePicker not show data of model binding. DatePicker should show value = 01 Nov 2024. Please help me how DatePickerFor work with Model Binding with new Telerik version 2024 Q4

Below is a result picture when I run simple project above.

Thanks

Date/Time Pickers

answered on 20 Nov 2024

0 answers

42 views

Splitter, splitbar not move to rightmost side.

Two panes inside a Splitter, both collapsible and resizable, when collapsing right pane, it's content invisible, but the splitbar not move to rightmost side, what I missing?

@addTagHelper *, Kendo.Mvc

<kendo-splitter name="vertical" orientation="SplitterOrientation.Horizontal">
    <pane size="50%" collapsible="true" id="left-pane">
        <div class="pane-content">
            <h3>Inner splitter / left pane</h3>
            <p>Resizable and collapsible.</p>
        </div>
    </pane>
    <pane size="50%" collapsible="true" id="right-pane">
        <div class="pane-content">
            <h3>Inner splitter / right pane</h3>
            <p>Resizable and collapsible.</p>
        </div>
    </pane>
</kendo-splitter>

<style>
    #vertical { height: 100%; }

    #left-pane { color: #000; background-color: #F5F5F5; }
    #right-pane { background-color:lightyellow; }

    .pane-content { padding: 0 10px; }
</style>

Splitter

asked on 20 Nov 2024

1 answer

155 views

Grid Export Bug - Export to Excel loading indicator doesn't go away when canceling the export in JS

Hi,

The Kendo version Kendo UI for jQuery 2024.2.514 (2024 Q2) appears to have introduced a new feature that shows a loading / progress overlay on the grid when you click the Export button.

Something we do in our grids is call e.preventDefault() if there is no data to export and the button is clicked. That appears to be the recommended approach to prevent an export based on the documentation here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/excelexport

While e.preventDefault() does prevent the export, the loading / progress overlay remains on the grid. Furthermore, simply hiding it with JS (e.g. grid.loader.hide() or grid.loaderOverlay.hide()) makes it go away, but the grid is in an unresponsive state (e.g. you can't sort rows or click Export again).

Grid

answered on 13 Nov 2024

1 answer

62 views

Calendar and Time Picker Showing Multiple Times on a Day and Choosing One

Hi,

I've looked for a good example to achieve this scenario. Cannot find one so I thought I would ask.

When a person creates a meeting they choose the date and the time of the meeting. Multiple meeting may happen on a single day just not at the same time. This part can be easily coded. The part that I'm having trouble with is when I'm trying to associate a document to one of those meetings that occurred on the same day.

Here's what I'm looking to do:

I click on the calendar control

On the calendar I click the 12th which had multiple meetings:

I select 8:00 am which fills my underlying control.

On the dates that only have one meeting then clicking on the date will just select that one meeting and it's time.

Any examples would be appreciated.

Calendar

Date/Time Pickers

DropDownList

answered on 13 Nov 2024

1 answer

66 views

Derivation of the TagHelper class

We have a question regarding to the inheritance of TagHelpers.

Currently we want to derive some parts of the Telerik Grid as TagHelpers.
What we have done is to create our own instance of the TagHelper e.g. "ExampleGridTagHelper", inherit from your "GridTagHelper" class and override the "ProcessAsync" method.
There we set some properties that we want to have as default values (e.g. Name = "ExampleName").
Because of to the class Attributes [HtmlTargetElement] and [RestrictChildren], we have to derive each subpart of the grid (e.g. Columns, Scrollable, Sortable,...), which is not nice, but it works.

However when it comes to overriding the TagHelper GridColumnsTagHelper, we face a problem that we have not yet been able to solve.
Inside this TagHelper class there is a property Columns with the type IList<GridColumnTagHelper>.
When we want to add our derived version of GridColumnTagHelper to GridColumnsTagHelper.Columns, the framework cannot work with that.
Probably because in many cases the type of the TagHelper is stored inside a context.Items dictionary.
So in the end when we add <custom-column/> inside of <custom-columns></custom-columns> we get an error.

So our question here is: Is there a proper way to work around this or will this be changed in the "near" future?

Grid

answered on 04 Nov 2024

1 answer

149 views

Using a ClientTemplate on a ForeignKey in a Grid

Hi

I have a grid that has a foreign key to lookup and display the value from another table. I want to make the column into a hyperlink when not in edit mode, to go and view the related record. I can't seem to get the textual value to display, it's fine obviously with the numerical FK value.

My code is :

.Columns(columns =>
{
    columns.ForeignKey(p => p.PrimaryKeyId, ds => ds.Read(r => r.Action("CustomerList", "Customer")), "CustomerId", "CustomerName")
        .Title("Company")
        .ClientTemplate("<a href='/Customer/Edit/#=data.PrimaryKeyId#' class='link-primary'>#=data.Customer.CustomerName#</a>")
        .HeaderHtmlAttributes(new { @class = "small" });
    columns.Bound(c => c.Primary).HeaderHtmlAttributes(new { @class = "small" });
    columns.ForeignKey(p => p.SiteId, ds => ds.Read(r => r.Action("xCustomerSitesJSon", "Customer", new { custId = 0 })), "SiteId", "SiteName")
        .Title("Site")
        .HeaderHtmlAttributes(new { @class = "small" });
    columns.Command(command =>
    {
        command.Edit();
    });
})

Obviously it is the #=data.Customer.CustomerName# part that doesn't work - I understand that the Customer isn't really part of the data array, but not sure if / how this can be accessed?

Thanks

Grid

answered on 01 Nov 2024

1 answer

109 views

grid column filter multi-checkbox search server side

Hi, I'm using UI ASP.Net core to display some data on a grid. On one of the grid column I need a filter with multi-checkbox and search. I'm doing this by the following code on the view:

columns.Bound(c => c.Affects).Title("Components").ClientTemplate("#=showComponents(data)#").Groupable(false).Width(180).Hidden(true)
.Filterable(fb => fb.Multi(true).CheckAll(true).Search(true).ItemTemplate("filterComponentsTemplate")
.DataSource(ds => ds.Read(r => r.Action("GetComponentsNamesForGridFilter", "Changes"))));

My problem is than the list of components is very very big and I get performance issue on the initial load of the filter menu. I would like to limit the number of components to be displayed to 100 and refresh the list every time a key is pressed on the Search textbox.

How to do that? I cannot find a way to handle events from the filter search textbox.

Checkbox

Filter

Grid

answered on 01 Nov 2024