or
1 answer
160 views
Loading data's based on lazy loading method.
Ex; Initially I want to load only 5 data's from API, then once I click next button (arrow) in timeline and again need to trigger API with another 5 records to load.
Georgi Denchev
Telerik team
answered
on
05 Apr 2022
1 answer
156 views
In my app, I need to get current page index when scroll the page, but there's no api details on the site.
Thanks for your reply.
Martin
Telerik team
answered
on
04 Apr 2022
1 answer
349 views
I know in the Grid component, there is a visible property that can be set on the columns.command. That works well for conditionally showing a command.
I'm not seeing that in the TreeList. How can I conditionally show a command in a TreeList based on the row data?
Georgi Denchev
Telerik team
answered
on
04 Apr 2022
0 answers
1.1K+ views
Hello,
I am pretty new to Kendo and am looking for some help. Getting an invalid template error when data has #. Not sure which cshtml or cs file that I need to update to fix this. Any help is appreciated.
kendo.all.js:238 Uncaught Error: Invalid template:'
<div class="k-widget k-grid" id="grid_#=AggregateID#"><div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-mode=insert"><span class="k-icon k-i-add"></span>Add New Record</a></div><div class="k-grid-header"><div class="k-grid-header-wrap"><table><colgroup><col style="width:150px" /><col style="width:300px" /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-index="0" id="1e37206d-9413-4245-8db3-97f8bc0e21a4" scope="col"><span class="k-link"> </span></th><th class="k-header" data-field="ItemAggregateID" data-index="1" data-title="Item Aggregate ID" id="#=kendo.guid()#" scope="col" style="display:none"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=ItemAggregateID-asc">Item Aggregate ID</a></th><th class="k-header" data-field="AggregateID" data-index="2" data-title="Aggregate ID" id="#=kendo.guid()#" scope="col" style="display:none"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=AggregateID-asc">Aggregate ID</a></th><th class="k-header" data-field="AggregateOptionID" data-index="3" data-title="Option Name" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=AggregateOptionID-asc">Option Name</a></th><th class="k-header" data-field="ItemID" data-index="4" data-title="Source" id="#=kendo.guid()#" scope="col"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=ItemID-asc">Source</a></th></tr></thead></table></div></div><div class="k-grid-content k-auto-scrollable" style="height:200px"><table><colgroup><col style="width:150px" /><col style="width:300px" /><col /></colgroup><tbody><tr class="k-no-data"><td colspan="3"></td></tr></tbody></table></div></div><script>
kendo.syncReady(function(){jQuery("\#grid_#=AggregateID#").kendoGrid({"save":OptionMembershipSave,"columns":[{"width":"150px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]},{"title":"Item Aggregate ID","headerAttributes":{"data-field":"ItemAggregateID","data-title":"Item Aggregate ID","id":"#=kendo.guid()#"},"hidden":true,"field":"ItemAggregateID","encoded":true,"editor":"\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field ItemAggregateID must be a number.\" data-val-required=\"The ItemAggregateID field is required.\" id=\"ItemAggregateID\" name=\"ItemAggregateID\" type=\"number\" value=\"0\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ItemAggregateID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Aggregate ID","headerAttributes":{"data-field":"AggregateID","data-title":"Aggregate ID","id":"#=kendo.guid()#"},"hidden":true,"field":"AggregateID","encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field AggregateID must be a number.\" data-val-required=\"Please select aggregate name\" id=\"AggregateID\" name=\"AggregateID\" value=\"0\" /\u003e\u003cscript\u003e\tkendo.syncReady(function(){jQuery(\"\\#AggregateID\").kendoTextBox({\"value\":\"0\"});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"AggregateID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"title":"Option Name","headerAttributes":{"data-field":"AggregateOptionID","data-title":"Option Name","id":"#=kendo.guid()#"},"width":"300px","field":"AggregateOptionID","encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field AggregateOptionID must be a number.\" data-val-required=\"Please select option name\" id=\"AggregateOptionID\" name=\"AggregateOptionID\" type=\"text\" value=\"0\" /\u003e\u003cscript\u003e\tkendo.syncReady(function(){jQuery(\"\\#AggregateOptionID\").kendoDropDownList({\"dataSource\":[{\"Text\":\"Product Offering: International\",\"Value\":\"1029\"},{\"Text\":\"Product Offering: Premium Model\",\"Value\":\"1030\"},{\"Text\":\"Product Offering: Standard Model\",\"Value\":\"1031\"},{\"Text\":\"Region: Americas\",\"Value\":\"1026\"},{\"Text\":\"Region: Asia/Pacific\",\"Value\":\"1027\"},{\"Text\":\"Region: Europe\",\"Value\":\"1028\"}],\"dataTextField\":\"Text\",\"dataValueField\":\"Value\"});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"AggregateOptionID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","values":[{"text":"Product Offering: International","value":"1029"},{"text":"Product Offering: Premium Model","value":"1030"},{"text":"Product Offering: Standard Model","value":"1031"},{"text":"Region: Americas","value":"1026"},{"text":"Region: Asia/Pacific","value":"1027"},{"text":"Region: Europe","value":"1028"}]},{"title":"Source","headerAttributes":{"data-field":"ItemID","data-title":"Source","id":"#=kendo.guid()#"},"field":"ItemID","encoded":true,"editor":"\u003cinput data-val=\"true\" data-val-number=\"The field ItemID must be a number.\" data-val-required=\"Please select Subfamily\" id=\"ItemID\" name=\"ItemID\" type=\"text\" value=\"0\" /\u003e\u003cscript\u003e\tkendo.syncReady(function(){jQuery(\"\\#ItemID\").kendoDropDownList({\"dataSource\":[{\"Text\":\"Receivers / AM/FM Radio / Asia B Mod\",\"Value\":\"1041\"},{\"Text\":\"Receivers / AM/FM Radio / Asia Radios\",\"Value\":\"1002\"},{\"Text\":\"Receivers / AM/FM Radio / Specials\",\"Value\":\"1009\"},{\"Text\":\"Receivers / AM/FM Radio / US Compact\",\"Value\":\"1015\"},{\"Text\":\"Receivers / AM/FM Radio / US Radios\",\"Value\":\"1019\"},{\"Text\":\"Receivers / Cellular / Asia Radios\",\"Value\":\"1042\"},{\"Text\":\"Receivers / Industrial / R\\u0026D\",\"Value\":\"1006\"},{\"Text\":\"Receivers / Industrial / Specials\",\"Value\":\"1010\"},{\"Text\":\"Receivers / Industrial / Standards\",\"Value\":\"1011\"},{\"Text\":\"Receivers / Medical / Medical\",\"Value\":\"1005\"},{\"Text\":\"Two Way / Cellular / Europe C Mod\",\"Value\":\"1003\"},{\"Text\":\"Two Way / Cellular / R\\u0026D\",\"Value\":\"1007\"},{\"Text\":\"Two Way / Cellular / US A Mod\",\"Value\":\"1012\"},{\"Text\":\"Two Way / Cellular / US B Mod\",\"Value\":\"1013\"},{\"Text\":\"Two Way / Cellular / US C Mod\",\"Value\":\"1014\"},{\"Text\":\"Two Way / Industrial / Asia C Mod\",\"Value\":\"1001\"},{\"Text\":\"Two Way / LMR / Europe P Mod\",\"Value\":\"1004\"},{\"Text\":\"Two Way / LMR / R\\u0026D\",\"Value\":\"1008\"},{\"Text\":\"Two Way / LMR / US M Mod\",\"Value\":\"1016\"},{\"Text\":\"Two Way / LMR / US N Mod\",\"Value\":\"1017\"},{\"Text\":\"Two Way / LMR / US Other\",\"Value\":\"1018\"},{\"Text\":\"Two Way / Test# / Test #9\",\"Value\":\"398896\"}],\"dataTextField\":\"Text\",\"dataValueField\":\"Value\"});});\u003c\\/script\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"ItemID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","values":[{"text":"Receivers / AM/FM Radio / Asia B Mod","value":"1041"},{"text":"Receivers / AM/FM Radio / Asia Radios","value":"1002"},{"text":"Receivers / AM/FM Radio / Specials","value":"1009"},{"text":"Receivers / AM/FM Radio / US Compact","value":"1015"},{"text":"Receivers / AM/FM Radio / US Radios","value":"1019"},{"text":"Receivers / Cellular / Asia Radios","value":"1042"},{"text":"Receivers / Industrial / R\u0026D","value":"1006"},{"text":"Receivers / Industrial / Specials","value":"1010"},{"text":"Receivers / Industrial / Standards","value":"1011"},{"text":"Receivers / Medical / Medical","value":"1005"},{"text":"Two Way / Cellular / Europe C Mod","value":"1003"},{"text":"Two Way / Cellular / R\u0026D","value":"1007"},{"text":"Two Way / Cellular / US A Mod","value":"1012"},{"text":"Two Way / Cellular / US B Mod","value":"1013"},{"text":"Two Way / Cellular / US C Mod","value":"1014"},{"text":"Two Way / Industrial / Asia C Mod","value":"1001"},{"text":"Two Way / LMR / Europe P Mod","value":"1004"},{"text":"Two Way / LMR / R\u0026D","value":"1008"},{"text":"Two Way / LMR / US M Mod","value":"1016"},{"text":"Two Way / LMR / US N Mod","value":"1017"},{"text":"Two Way / LMR / US Other","value":"1018"},{"text":"Two Way / Test# / Test #9","value":"398896"}]}],"sortable":true,"resizable":true,"scrollable":{"height":"200px"},"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add New Record"}]},"noRecords":true,"messages":{"noRecords":"No assignments to display"},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Settings/GetItemAggregateList2?aggregateId=#=AggregateID#\u0026companyId=1"},"prefix":"","update":{"url":"/Settings/UpdateOptionAssignment?aggregateId=%3D#AggregateID#\u0026companyId=1"},"create":{"url":"/Settings/CreateOptionAssignment?aggregateId=#=AggregateID#\u0026companyId=1"},"destroy":{"url":"/Settings/DeleteOptionAssignment?aggregateId=%3D#AggregateID#\u0026companyId=1"}},"error":onError,"sync":sync_handler,"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"ItemAggregateID","fields":{"ItemAggregateID":{"type":"number"},"ItemID":{"type":"number"},"AggregateOptionID":{"type":"number"},"AggregateID":{"type":"number"},"CompanyID":{"type":"number"},"ItemCompanyID":{"type":"number","defaultValue":null},"IsConsolidation":{"type":"boolean"},"CreatedDt":{"type":"date","defaultValue":null},"ModifiedDt":{"type":"date","defaultValue":null},"CreatedID":{"type":"string"},"ModifiedID":{"type":"string"}}}}}});});
<\/script>
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n\n <div class="k-widget k-grid" id="grid_'+(AggregateID)+'"><div class="k-header k-grid-toolbar k-grid-top"><a class="k-button k-button-icontext k-grid-add" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-mode=insert"><span class="k-icon k-i-add"></span>Add New Record</a></div><div class="k-grid-header"><div class="k-grid-header-wrap"><table><colgroup><col style="width:150px" /><col style="width:300px" /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-index="0" id="1e37206d-9413-4245-8db3-97f8bc0e21a4" scope="col"><span class="k-link"> </span></th><th class="k-header" data-field="ItemAggregateID" data-index="1" data-title="Item Aggregate ID" id="'+(kendo.guid())+'" scope="col" style="display:none"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=ItemAggregateID-asc">Item Aggregate ID</a></th><th class="k-header" data-field="AggregateID" data-index="2" data-title="Aggregate ID" id="'+(kendo.guid())+'" scope="col" style="display:none"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=AggregateID-asc">Aggregate ID</a></th><th class="k-header" data-field="AggregateOptionID" data-index="3" data-title="Option Name" id="'+(kendo.guid())+'" scope="col"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=AggregateOptionID-asc">Option Name</a></th><th class="k-header" data-field="ItemID" data-index="4" data-title="Source" id="'+(kendo.guid())+'" scope="col"><a class="k-link" href="/Settings/GetItemAggregateList2?aggregateId=%23%3DAggregateID%23&companyId=1&grid_%23%3DAggregateID%23-sort=ItemID-asc">Source</a></th></tr></thead></table></div></div><div class="k-grid-content k-auto-scrollable" style="height:200px"><table><colgroup><col style="width:150px" /><col style="width:300px" /><col /></colgroup><tbody><tr class="k-no-data"><td colspan="3"></td></tr></tbody></table></div></div><script>\n\tkendo.syncReady(function(){jQuery("#grid_'+(AggregateID)+'").kendoGrid({"save":OptionMembershipSave,"columns":[{"width":"150px","command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":" ","update":" ","edit":" "}},{"name":"destroy","buttonType":"ImageAndText","text":" "}]},{"title":"Item Aggregate ID","headerAttributes":{"data-field":"ItemAggregateID","data-title":"Item Aggregate ID","id":"'+(kendo.guid())+'"},"hidden":true,"field":"ItemAggregateID","encoded":true,"editor":"\u003cinput class=\\\"text-box single-line\\\" data-val=\\\"true\\\" data-val-number=\\\"The field ItemAggregateID must be a number.\\\" data-val-required=\\\"The ItemAggregateID field is required.\\\" id=\\\"ItemAggregateID\\\" name=\\\"ItemAggregateID\\\" type=\\\"number\\\" value=\\\"0\\\" /\u003e\u003cspan class=\\\"field-validation-valid\\\" data-valmsg-for=\\\"ItemAggregateID\\\" data-valmsg-replace=\\\"true\\\"\u003e\u003c/span\u003e"},{"title":"Aggregate ID","headerAttributes":{"data-field":"AggregateID","data-title":"Aggregate ID","id":"'+(kendo.guid())+'"},"hidden":true,"field":"AggregateID","encoded":true,"editor":"\u003cinput data-val=\\\"true\\\" data-val-number=\\\"The field AggregateID must be a number.\\\" data-val-required=\\\"Please select aggregate name\\\" id=\\\"AggregateID\\\" name=\\\"AggregateID\\\" value=\\\"0\\\" /\u003e\u003cscript\u003e\tkendo.syncReady(function(){jQuery(\\\"\#AggregateID\\\").kendoTextBox({\\\"value\\\":\\\"0\\\"});});\u003c\\/script\u003e\u003cspan class=\\\"field-validation-valid\\\" data-valmsg-for=\\\"AggregateID\\\" data-valmsg-replace=\\\"true\\\"\u003e\u003c/span\u003e"},{"title":"Option Name","headerAttributes":{"data-field":"AggregateOptionID","data-title":"Option Name","id":"'+(kendo.guid())+'"},"width":"300px","field":"AggregateOptionID","encoded":true,"editor":"\u003cinput data-val=\\\"true\\\" data-val-number=\\\"The field AggregateOptionID must be a number.\\\" data-val-required=\\\"Please select option name\\\" id=\\\"AggregateOptionID\\\" name=\\\"AggregateOptionID\\\" type=\\\"text\\\" value=\\\"0\\\" /\u003e\u003cscript\u003e\tkendo.syncReady(function(){jQuery(\\\"\#AggregateOptionID\\\").kendoDropDownList({\\\"dataSource\\\":[{\\\"Text\\\":\\\"Product Offering: International\\\",\\\"Value\\\":\\\"1029\\\"},{\\\"Text\\\":\\\"Product Offering: Premium Model\\\",\\\"Value\\\":\\\"1030\\\"},{\\\"Text\\\":\\\"Product Offering: Standard Model\\\",\\\"Value\\\":\\\"1031\\\"},{\\\"Text\\\":\\\"Region: Americas\\\",\\\"Value\\\":\\\"1026\\\"},{\\\"Text\\\":\\\"Region: Asia/Pacific\\\",\\\"Value\\\":\\\"1027\\\"},{\\\"Text\\\":\\\"Region: Europe\\\",\\\"Value\\\":\\\"1028\\\"}],\\\"dataTextField\\\":\\\"Text\\\",\\\"dataValueField\\\":\\\"Value\\\"});});\u003c\\/ at Object.compile (kendo.all.js:238:31)
at Object.i [as template] (jquery.min.js:2:88757)
at <anonymous>:2:1332
at Object.n [as syncReady] (kendo.aspnetmvc.js:900:42)
at <anonymous>:2:8
at b (jquery.min.js:2:866)
at He (jquery.min.js:2:48373)
at S.fn.init.append (jquery.min.js:2:49724)
at S.fn.init.<anonymous> (jquery.min.js:2:50816)
at $ (jquery.min.js:2:32425)
0 answers
774 views
Hi,
I need to extend the kendo form dynamically. I created a dojo for demonstration:
https://dojo.telerik.com/IDElitox
In the first form, user should be able to click "Add" button and create a new pair of field at the bottom of the form, which shouldn't affect previously filled fields. So instead of 1, the user can submit more than 1 header pair.
Is it possible? How can I do that?
The number of inputs is ambiguous so I didn't think of any better solution. If there is a dedicated tool for this purpose, please let me know.
Regards,
Umutcan
1 answer
103 views
Hi,
I am trying to use kendo Editor MVC and jQuery in my web application, were i have Kendo UI version 2015.1.318. but i am getting like this ".kendoEditor is not a function" . does kendo version 2015.1.318 supports Editor for MVC/Jquery?
Regards
Martin
Telerik team
answered
on
01 Apr 2022
1 answer
492 views
Hi team,
Is it possible to reference kendo js with "defer" attribute?
<!-- Reference to the Kendo UI JavaScript file -->
<script DEFER src="js/kendo.all.min.js"></script>
Any contraindications?
Thanx
Neli
Telerik team
answered
on
01 Apr 2022
0 answers
446 views
Looking to upgrade from a random jquery plugin to a built-in if one exists. This is rendered as a hidden Radio Button with a bunch of Label elements.
Is there a Kendo UI component for this?
1 answer
305 views
I am successfully using the drag and drop feature in an editable grid. The grid is using batch update, so after a row is moved, I need to somehow notify the user they need to click the save option in my toolbar.
Modifying any cell data automatically flags the cell as dirty, but drag drop does not. Ideally, I would like the red dirty flag to show up in the draggable cell, so not to be confused with a data change to that row.
I know there is a rowReorder event I can leverage, however so far I'm struggling to manually flag the cell as dirty. I've tried getting the item by Uid and setting item.dirty = true, but this isn't adding the visual cue.
Here is my grid definition:$('#grid').kendoGrid({
dataSource: dataSource,
columns: [
{draggable: true, width: '45px' },
{command: ['destroy'], title: 'Action', width: 100 },
{field: 'Field', title: 'Field', width: 125 },
{field: 'Required', title: 'Required', width: 90 },
{field: 'Type', title: 'Type', width: 100 },
{field: 'Length', title: 'Length', width: 100 },
{field: 'Allow_Multiple', title: 'Allow Multiple', width: 125 },
{field: 'Description', title: 'Description' },
{field: 'Example', title: 'Example' },
{field: 'Notes', title: 'Notes' },
],
toolbar: [
'create',
'save',
'cancel',
{
template: '<a id="preNotesButton" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base"><span class="glyphicon glyphicon-list-alt"></span> Edit notes</a>'
},
{
template: '<a id="exitButton" class="k-button k-button-md k-button-rectangle k-rounded-md k-button-solid k-button-solid-base" style="float: right;"><span class="glyphicon glyphicon-arrow-left"></span> Exit</a>'
}
],
editable: {
'mode': 'incell',
'confirmation': 'Are you sure you want to delete this item?',
'createAt': 'bottom',
},
navigatable: true,
reorderable: {
rows: true
},
rowReorder: function(e) {
// How can I flag the draggable cell as dirty?
uid = e.row[0].dataset.uid;
dataSource = $('#grid').data('kendoGrid').dataSource;
item = dataSource.getByUid(uid);
item.dirty = true;
console.log(item);
}
});
Georgi Denchev
Telerik team
answered
on
30 Mar 2022
1 answer
866 views
I have a grid that is initiated with a local datasource. I have a schema and a parse that manipulates the data received. I need to replace the datasource but don't want to retype the entire schema over again. How can I do that? I have an example dojo here. In my example, I am adding 100 to the age. Notice that after reloading the new records don't have the 100 added to the age. I need to know how to do this for the entire grid and also for updating a single record in the grid. I tried pushUpdate for a single record and it ignores the parse also.
http://dojo.telerik.com/OxazIqAG
Here is the relevant code:<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" },
{ field: "id" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
parse: function(response) {
var users = [];
for (var i = 0; i < response.length; i++) {
let record = response[i];
var user = {
id: record.id,
name: record.name,
age: record.age + 100
};
users.push(user);
}
return users;
},
model: {
id: "id",
fields: {
id: { type: "number" }
}
}
}
}
});
$("#setData").click(function(){
$("#grid").data("kendoGrid")
.dataSource
.data([{id: 3, name: "new item", age: 20}]);
});
</script>
Georgi Denchev
Telerik team
answered
on
29 Mar 2022
