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?

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

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>

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).

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.

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?

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

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.

I was able to add a grid to the form, but when clicking save the grid data does not submit with the rest of the form.

I was wondering if there are any articles on this situation or if I have to write custom JavaScript to handle it in on-submit of the form.

this is roughly my setup.

<kendo-form name="bid-form" form-data="@Model" layout="grid" asp-controller="" asp-action="" method="post">

... other items

<form-item field="@(nameof(Bid.ObjectList))" editor-handler="gridAsEditor"></form-item>
</form-items>
</kendo-form>

I have an editor template where i have added this list View as component while rendering on grid edit/add why am i seeing this [object object]. I'm not sure what mistake I've making here.
Editor Template:

@(Html.Kendo().Template()
    .AddHtml("<div class=\"k-edit-label\">")
    .AddHtml(Html.LabelFor(m => m.WeekDays).ToHtmlString())
    .AddHtml("</div>")
    .AddHtml("<div class=\"k-edit-field\">")
    .AddComponent(c => c.ListView<CheckboxList>()
        .Name("weekDays")
        .TagName("div")
        .ClientTemplateHandler("weekDaysTemplateHandler")
        .HtmlAttributes(new { data_bind = "source: daysDataSource"})
    )
    .AddHtml("</div>")
)

function weekDaysTemplateHandler(data){
 
    var result = '<div style="width: 33%;">';
    result += `<input class="weekDays" data-name="${kendo.htmlEncode(data.Name)}" data-id="${kendo.htmlEncode(data.ID)}" name="weekDays" type="checkbox" style="vertical-align: -2px" data-bind="checked:weekDays[${kendo.htmlEncode(data.ID)}].Selected" />`;
    result += ` <span>${kendo.htmlEncode(data.Name)}</span>`;
    result += "</div>"
    return result;
}
var viewmodel = new kendo.observable({
    dataSource: [],
    weekDaysDataSource: new kendo.data.DataSource({
        data: []
    }),
    OnEdit: function(e){
         this.weekDaysDataSource.data(e.model.WeekDays);
    }
});

WeekDays: [
    {
          ID: 1,
          Name: "Monday",
          Selected: false
    },
    {
         ID: 2,
        Name: "Tuesday",
        Selected: false
   },
   .... <rest of the days>
];