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

Wondering if someone can point out how to use CSP compatible templates with KendoNotifications.

Here is kendo's demo https://demos.telerik.com/kendo-ui/notification/templates.

I've added a content-policy without 'unsafe-eval' included. https://dojo.telerik.com/urImEZAk

Is there a way to convert these templates to be CSP compatible while keeping them in the script statement instead of having the html inside the kendoNotification initialize? The kendo documentation doesn't have many examples. https://docs.telerik.com/kendo-ui/framework/templates/get-started-csp-templates

This works, but would be nice to be able to separate the templates. https://dojo.telerik.com/urImEZAk/4

Thanks.

The URL that opens when you visit https://demos.telerik.com/kendo-ui/ > Hybrid UI > Launch Demos fails to load with the following exception in the console:

kendo.all.js:318535 Uncaught TypeError: n.headerTemplate is not a function
    at Object.<anonymous> (kendo.all.js:318535:21)
    at Object.render (kendo.all.js:318535:21)
    at init.replaceGrouped (kendo.all.js:318535:21)
    at init.refresh (kendo.all.js:318535:21)
    at init._refreshHandler (kendo.all.js:318535:21)
    at init.trigger (kendo.all.js:318535:21)
    at init._process (kendo.all.js:318535:21)
    at init.success (kendo.all.js:318535:21)
    at success (kendo.all.js:318535:21)
    at n.success (kendo.all.js:318535:21)

Does the Hybrid UI work for version 6.2.0?

P.S. none of the tags are relevant but it is a required field to submit a new thread so I just picked "templates" since the console error has the keyword template in it. Feel free to modify it.

My requirement is to create a diagram which is using different widgets to child and parent nodes. Is there a way to use two or more different custom templates for parent and its child nodes. Please see the image below that is something I want to create

Hello,

I'm trying to implement a tooltip that shows how many and what kind of events the resource has for the day when hovering mouse cursor over resource. I was able to do this in day/week/month views by using a custom group header template but I'm having a hard time trying to implement it in agenda view because I'm not able to make a custom template for resource group header, only event date, event time and event custom templates are available as far as I'm aware. Basically what I need is the ability, when hovering over a resource, to know what resource and what date it is to get the relevant information.

Any help is greatly appreciated! Thank you!

Hi

On Kendo Grids we use the following template on a column to convert the string to a href link:

(e.g. workItemLink = <a href="/link/to/a/page.aspx?Key=ABC">ABC</a>

columns: [
	{
		field: "workItemLink",	
		template: "#=workItemLink#",
		title: "Work Item Ref",
		width: "110px"
	}
]

This doesn't seem to work on kendoGantt columns:

columns: [
	{ 
		field: "workItemLink",
		template: "#=workItemLink#",
		title: "Link"
}]

Are templates not supported in gantt charts? Is there another way to add a link the column part of the gantt?

Thanks
Ben

would like to check if it is possible to style the upload control to as follows

when no file selected

after file selected

Hello

I would like to use jQuery ListView to display products for an eshop solution.

Is it possible to nest a jQuery Rating Widget inside the ListView template and set the value when binding the data to the ListView?

I use ASP.Net Core with RazorPages.

Thank u for ur support!

We have a .Net Core 6 application.

We are using the "jQuery Grid Detail Template" to display a customer's orders in a KendoGrid. Then when the detail template icon is clicked, we fetch the order details and show those rows in another sub kendoGrid.

We are following this example: https://demos.telerik.com/kendo-ui/grid/detailtemplate

We can get this working for our situation, but only for the first customer that is searched.

When a different customer orders are searched, and the detail icon is clicked, we get an error ("Uncaught TypeError: Cannot convert undefined or null to object").

Our UI uses the "kendo-dropdownlist" for customer names, and a "Html.Kendo().DatePicker()" for the From/To date ranges. And a "Html.Kendo().DropDownButton()" for a Search button.

This is what happens when the form is first loaded:
1: user selects customer + date range then clicks [Search]
2: the javascript function "GetMyData()" is called
3: The "$("#myOrders-grid").kendoGrid" is populated correctly
4: when any details icon is clicked, the "detailInit: detailInit" function is called, the detail data is fetched and displayed correctly in sub grid.

PROBLEM occurs here
5: user selects a different customer and clicks [Search]
6: The "$("#myOrders-grid").kendoGrid" is populated correctly
7: BUT when any details icon is clicked, this error is generated: "Uncaught TypeError: Cannot convert undefined or null to object"
    the "detailInit: detailInit" function is never triggered
8: HOWEVER: If I select the original customer and original date range from dropdown and press [Search], the details icon works again, but only for the original customer and date range.

It seems like something remembers only the original customer's data. Do I have to clear something from memory?

What am I doing wrong below?

//My pseudo code 
function GetMyData(e) {
	var formattedStartDate = dateFns.parse(datefrom.value, 'YYYY-MM-DD hh:mm:ss')
	var formattedEndDate = dateFns.parse(dateto.value, 'YYYY-MM-DD hh:mm:ss')
	var myUrlString = '@Url.Action("GetOrders", "MyController")'
	var payloadContent = {
		"customerId": parseInt(customerDropdown.value),
		"startDate":  formattedStartDate,
		"endDate": formattedEndDate
		}
	$("#myOrders-grid").kendoGrid({
		dataSource: {
			transport: {
				read: function(options) {
					axios.post(myUrlString, payloadContent).then(function (response) {
						options.success(response.data);
					})
				}
			},
			pageSize: 10,
			sort: { field: "eventStart", dir: "asc" },
			schema: {
				model: {
					fields: {
						eventStart: { type: "date" },
						...ETC
					}
				}
			}
		},
		detailTemplate: kendo.template($("#template-details").html()),
		detailInit: detailInit,
		height: 600,
		sortable: true,
		pageable: {
			numeric: true
		},
		columns: [
			{ field: "eventStart", title: "Event Start", format: "{0:MM/dd/yyyy}", width: "6%" },
			...ETC
		],
		excel: {
			fileName: "orders-data.xlsx",
			allPages: true,
			filterable: true
		},
	})
}

function detailInit(e) {
	var detailRow = e.detailRow;
	var detailsUrlString = '@Url.Action("GetDetails", "MyController")'
	var payloadContent = {
		"customerID": e.data.custId,
		"orderID":  e.data.orderid
		}

	detailRow.find(".detailTabstrip").kendoTabStrip({
		animation: {
			open: { effects: "fadeIn" }
		}
	});

	detailRow.find(".details").kendoGrid({
		dataSource: {
			transport: {
					read: function(options) {
						axios.post(detailsUrlString, payloadContent).then(function (response) {
							options.success(response.data);
						})
					}
				},

			pageSize: 10,
			sort: { field: "orderID", dir: "asc" },
			schema: {
				model: {
					fields: {
						description: { type: "string" },
						...ETC
					}
				}
			},
		},
		scrollable: false,
		sortable: true,
		height: 250,
		pageable: true,
		columns: [
			{ field: "description", title:"Description" },
			...ETC
		]
	});
}

<script type="text/javascript" id="template-details">
        <div class="detailTabstrip">
            <ul>
                <li class="k-active">
                    Order Details
                </li>
                <li>
                    Customer Details
                </li>
            </ul>
            <div>
                <div class="details"></div>
            </div>
            <div>
                <div class='customer-details'>
                    <h3>Customer details will go here later</h3>
                </div>
            </div>
        </div>
</script>