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>
];

Using the example from this page: https://docs.telerik.com/kendo-ui/framework/pdf/page-templates

My goal is to produce a PDF from the webpage with a header and footer as shown on the page above, and to be able to save the PDF to a location.

When using this method, the template header and footer display correctly.

 kendo.drawing.drawDOM("#grid", {
                  paperSize: "A4",
                  margin: "3cm",
                  template: $("#page-template").html()     //WORKS
              }).then(function(group){
                  kendo.drawing.pdf.saveAs(group, "filename.pdf");
              });

However, when using this method, the "template" is ignored. I have tried placing the properties in the "saveAs" object, but this didn't work either.

kendo.drawing.drawDOM("#grid", {
              }).then(function(group){
		return kendo.drawing.exportPDF(group, {
                        paperSize: "A4",
                        margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                        template: $("#page-template").html()   //IGNORED
                    });
              })
                .done(function (data) {
                    kendo.saveAs({
                        dataURI: data,
                        fileName: "filename.pdf",
                        //proxyURL: "myurl/Test/"
                    });
                });

How can I get the template to show the header and footers with the 2nd method?

Or does the "kendo.drawing.pdf.saveAs" have a "proxyURL" property?

.ToolBar(toolbar =>{

toolbar .ClientTemplate(

"<text>" +

"<a class=\"k-primary" href=\””+@Url.Action ("CreateId", "Home") + "\">" "Create New Person" +

"</a>" +

"</text>");

toolbar .Excel().Text("Excel"); 

})

Excel(excel => excel

FileName("Tabledata.xlsx") 

Filterable(true))

I am trying to add excel buuton the existing client template but, the excel is not coming only the create new preson button is only coming. If i write the excel individually then it is working. I want the create new person button next to it the excel button.

can some one plz look into this.

Thanks.

with this line the excel button is working but after upgrading the button is not showing. Can someone plz help with the issue

Thanks