I would like to show a clickable URL within a Kendo Grid that opens a bootstrap modal. Unfortunately, when the user clicks on this link, the browser navigates to a new page to show the results.

The code below is supposed to open a partial view that would load the proper data for the specified LotId.

Any help would be greatly welcomed.

Thanks!

})

// Etc...


I want to create MVVM Kendo Grid where it is grouped in multiple levels and also want a nested grid or a hierarchical grid for each parent's grid row i.e. each  k-master-row .  In the ScreenShot Is it possible to create a Nested/ Child / Hierarchical Grid for each row? If yes, Can someone please provide me with sample demo. 

I didn't find any documentation or helpful resource?

Parent Grid:

   Grouped by Field 1

          Grouped By Field 2

             Row1

                           Nested  / Child Grid with child Grid Columns  For ROW1

             Row2

                        Nested / Child Grid with child Grid Columns For ROW 2

How can I extend this view with more fields?

I have a Scheduler Project that allows for the selection on multiple "Attendees" like some of the samples.

My problem is how to save that field to a Web API with a MS SQL backend.

The CRUD endpoints work perfectly until I introduce the Attendee's array.

e.g. [1,2]

I can define it in the Model as type: "string" and it will save it in the SQL as nvarchar(MAX).

Just can't get it back.

Any help would be appreciated.

Ed

Hi, I use kendo ui for jquery media player in blazor project. On page load i call media player by this code;

await JSRuntime.InvokeAsync<string>("EmbedVideo", record.Id, record.Title);

and my javascript code is;

function EmbedVideo(recordId,title) {
    $("#mediaplayer").kendoMediaPlayer({
        autoPlay: true,
        navigatable: true,
        media: {
            title: title,
            source: "/api/record/GetRecordFile?recordId=" + recordId +"+&fileRequestType=1"
        },
        timeChange: function () {
            console.log('changed')
        }
    });
}

when i change time i can see the 'changed' log in console but video starting over again.

These ara my referances;

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>

There is an HTML element, called "template", more information here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template. We cannot use this element in a Kendo Editor, because it will always remove all contents from this element.

It can be reproduced in your demos here: https://demos.telerik.com/kendo-ui/editor/all-tools by following these steps:

Click the "View HTML" tool/button, then add this HTML to it:

<h1>Hello</h1>
<p>This is a test</p>
<template><p>This is a template</p></template>

Click "Update".

Then open the "View HTML" tool again. You now see that the HTML has been changed to this:

<h1>Hello</h1>
<p>This is a test</p>
<template></template>

Hello,

I'm using LitElement to create a reusable tab component, but when I 'm initializing the kendoTabStrip, the TabStrip property is undefined. 

In my firstUpdated function I'm setting the TabElement property:

    firstUpdated (changedProperties) {
        this.TabElement = this.shadowRoot.querySelector('#tabs-container')
    }
   

In the parent element, I'm setting the TabConfig property:

    setHtml () {
        const tabs = this.shadowRoot.querySelector('tabs')
       tabs.TabConfig = TabConfig(this)
    }

I have a setter in the tabs component that addsTabs after being set:

    set TabConfig (value) {
        const oldValue = this._TabConfig
        this._TabConfig = value
        const self = value.self
        this.addTabs(self, oldValue)
    }

I'm initializing the kendoabStrip using the previously set properties (all properties are defined):

    addTabs () {
        this.TabStrip = $(this.TabElement).kendoTabStrip(this.TabConfig).data('kendoTabStrip')

        this.TabConfig.tabs.forEach(tab => {
            if (tab.show) {
                this.TabStrip.append(tab) // This throws an error "Cannot read property append of undefined"
            }
        })
    }

I tried initializing the TabStrip property in the setter for the TabConfig, but ended up with the same result. Any idea as to why this.TabStrip is undefined?

Hi experts,

I have run into a problem where i have to update existing kendo grid implementation. Let me explain the ask as below.

Earlier we had a grid which was mapped with individual fields. For example, lets say i had a data of an employee which contains employee name, age, salary, address and department, perfect one-to-one mapping.

Now lets says employee got multiple departments. Business wants to keep same structure but change only Department column into multiple rows. Like if there are 2 departments for a particular employee i should have 2 rows in a single column against that employee. Have a look at the image attached. have a look at row 2 and column 3 and 4.

I am able to show it using template but while editing and saving it could not map to the actual field of array.

I have a listview populated with remote data through PHP. I want to add grouping but after reading the documentation can't figure out how to do it. This is the template I'm currently using. I want to group by a field called "category_name" and display show that field as the group header. I don't need any footer.

    <script type="text/x-kendo-template" id="template">
      <div class='product'>
        <img src='product_images/#:thumbnail_image#'>
        <div ID=divProductName style='color: rgb(21,159,136); font-size: 17px; font-weight: bold'>#:product_name#</div>
        <div style='font-size: 18px'>#:short_desc#</div>
      </div>
    </script>

This is the code from your grouping sample, which adds various classes such as "k-listview-item", "k-group-title" "k-card" which I am not using. It isn't clear to me if these classes are necessary when using grouping or how to incorporate it into my template. I would appreciate if you could modify my code to include this. Thanks.

<script type="text/x-kendo-template" id="template">
        <div class="k-listview-item k-content">
            <h4 class="k-group-title">#= data.value #</h4>
            <div class="cards">
                # for (var i = 0; i < data.items.length; i++) { #
                <div class="k-card" style="width: 15em; margin:2%">
                    <img class="k-card-image" src="#=destinationURL(data.items[i].ImageUrl)#" />
                    <div class="k-card-body">
                        <h4 class="k-card-title">#= data.items[i].Title #</h4>
                        <h5 class="k-card-subtitle">#= data.items[i].Description #</h5>
                    </div>
                </div>
                # } #
            </div>
            <h5 class="k-group-footer"> #=data.items.length# Destinations in #= data.value #</h5>
        </div>
    </script>