I am having an issue when I attempt to reorder the columns in my kendo grid and save the state. I am able to get the column order saved after reordering and then reloaded correctly in the updated order, but the issue is that only the column headers are responding to the reorder not the column content especially when the column contains a columnTemplate. How do I ensure that when I reorder my columns, that the column content and column headers are both reordered, and my column content is not mismatched to an incorrect column header on reload or lost due to unexpected behavior. For context I am using this method to reset the column order after its saved and reloaded

  reorderColumns(grid: kendo.ui.Grid, order: any) {
    var columns = grid.columns;
    for (var i = 0; i < order.length; i++) {
      var field = order[i];
      var currentIndex = -1;
      var targetIndex = i;

      for (var j = 0; j < columns.length; j++) {
        if (columns[j].field === field) {
          currentIndex = j;
          break;
        }
      }
      if (currentIndex !== -1 && currentIndex !== targetIndex) {
        grid.reorderColumn(currentIndex, targetIndex);
      }

    }
  }

Hi,

I use the MultiViewCalendar, and have a style for selected days. I let the user save those days, and apply them when he opens the calendar, with:

kendoCalendar.selectDates(dateArray);

The days get colorized as I styled them like:

#IdentificationName > .k-calendar-view > table > tbody > tr > td.k-state-selected .k-link {
    background-color: lightgreen !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 0 10px mediumseagreen;
    color: black;
}

it works, except for the "today" day.
When I inspect, it seems, the framework has overwritten the "k-state-selected"-class with "k-today".

What happens then is, my selected days are green, but the selected day which is also the "today" day, is white with red border.

From Browser Dev Tools:

(Any other "selected" day:)
<td role="gridcell" class="k-state-selected" aria-selected="true"><a tabindex="-1" class="k-link" href="#" data-value="2024/3/1" title="Montag, 1. April 2024"></a></td>

(Today selected day:)
<td class="k-today" role="gridcell" id="IdentificationName_cell_selected" aria-selected="false"><a tabindex="-1" class="k-link" href="#" data-value="2025/1/5" title="Mittwoch, 5. Februar 2025">5</a></td>

How can I keep the green filling color of my selected class which gets loaded initally?
(and only add the red border in css for the "today selected day")

Thank you,
Best regards

What are the alternative approaches to using script tags to house templates?

If you have a <script id="bla" type="text/x-kendo-template"> tag in a partial and try to render it in your main view with either Html.Partial or Html.RenderPartial, it seems that Razor messes around with those script tags somehow.

It's that, or the browser doesn't like the fact that I'm embedding one script tag within another. The reason I'm doing this is because the outer script tag is used for a Kendo View template/content. The inner script tags are templates for a Grid.

?

Hi, I am using Telerik grid in Razor pages applications. I have main grid and Detail grid.

Problem:   .ToolBar(tb => tb.Columns()) is not working on Detail grid template. 

The following grid column definition renders the enum as a string:

columns.Bound(p => p.SomeEnum);

The ajax call actually returns an int for the enum but the grid does some magic and shows the enum string.

If I need to customize the output and use a ClientTemplate, it renders as an int though:

columns.Bound(p => p.SomeEnum).ClientTemplate("foo #=SomeEnum#");

How can I get my ClientTemplate to render the string version of the enum?

Hello!

I am trying to use ListView with Buttons inside a Tabstrip. I want the user to be able to select an item to view a report.
As part of this list, I want a clickable hamburger button for the user to open up a popover menu for additional settings.

This setup works for all browsers when I do not perform the "filter" function. However on Firefox (only), using this filter function on the ListView causes my Kendo buttons inside the list to suddenly not fire the onClick handlers.

    $("#listView").data("kendoListView").dataSource.filter({      
      filters: [
        { field: "Document_Number", operator: "contains", value: "J82901" }
      ]
    });

On Chrome and Edge, the Kendo buttons work just fine even after this filter. On Firefox however, I notice that the Kendo buttons are unformatted and do not respond to the click events when logging output in the console.

To reproduce the issue, I have provided the following dojo code: Sandbox Code here

Here is a sample image of the output: I have a Tabstrip with a ListView nested within. Each ListView entry has a button attached to it via a template. On click, the button should fire the click handler and print output to the console. (And a popover in the future)

Any help to get this working on Firefox would be greatly appreciated! This is an older version of Kendo UI (Sept 2021).

Thanks.

Hi Kendo Gurus,

I am have a really tough time with a binding issue and I am not sure if it is MVVM related or Template related. I will try and provide as much information as possible.

The binding is done via nested templates like this:


obsOccupants is an ObservableArray that is a child property to an ObservableObject, that is bound to a form and includes the below. The "s20-employees-list" template looks like this:



I do NOT believe that anything above is an issue as this binds and works just fine on initial load, ala (I'm hiding information so there are blanks):



Further, clicking the delete icon on the right (red trash can) "soft" deletes the row via the click event handler in the bindings (pictured above), resulting in this:



Clicking the undelete icon on the right (green trash can) also behaves as expected. This is done by updating the isDeleted property on an ObservableObject in the ObservableArray. Additionally, there are other, more complicated bindings that are working just fine in the same form, although no adds - this is the first.

So far so good and I thought I was on fire. But now, when I click the Add Occupant button, search for an employee (via a separate UI not pictured) and select an employee and add it to the Observable array, things go south.

The code to add to the Observable array looks like this, and I have tried all three permutations below (First Try, Second Try, etc.). The third one seems really stupid and I was hoping that would not be the answer. :D  



All of these fire a bound change event as expected, and you can see that the count of obsOccupants has increased to 2 and the added employee is included in the event, ala: 



So the new employee exists in the obsOccupants array, the count is correct but the HTML does not update, although as mentioned above, a change on any of the objects IN the Observable Array correctly updates the HTML..

I have tried simplifying the HTML as well as the bindings but still to no avail. Is there anything I should be looking for or trying?

Thankyou for any help.

Cheers,

Justin

Hey everybody! 

There must be something simple that I am missing.

I currently have a template set up to render through renderMessage() which runs for every message on initialization. 
Loosely based on this. Thank you Martin for this one.
https://www.telerik.com/forums/set-date-on-rendermessage-in-kendochat

The issue is that when I hit the send button and it goes into the post() method, this template no longer applies and it seems to reverts back to default.

How do I wire up my template to be used by default on send button click? 

Best, 
Jeff 

This example not works as expected:

https://dojo.telerik.com/ESAQEsip/2

It should only select: Red and Green.

Isn't it?

It's the same if I write the value of the input field by hand: value="Red"

Docs:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays

Many thanks