Hi all,
I tried using various code snippets for implementing this particular functionality of creating a new row when you press enter key WHILE YOU ARE EDITING in a particular cell.
$(document).on('keypress','body',function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
grid.addRow();
}
});
The above code worked when you simply press enter key, but when you're editing a cell and pressing enter key, it did not create a new row.
I want to create a new row when you press enter key while editing a particular cell.
It would be really great if someone can help me regarding this.
Thanks in advance.

I have many grids with a multiple columns that are filtered by a multiple checkboxes - just like excel data filtering (using Asp.Net MVC):
columns.Bound(m => m.Status).Groupable(true).Filterable(ftb => ftb.Multi(true)); But items in the checkbox list appear in the random order. On a multiple occasions different clients in different projects asked if these can be sorted alphabetically.
I know I can provide my own list with `.DataSource()` and point to an endpoint that provides the data and that worked for me before on a small scale.
But now I have about 40 grids with average of 3 columns filtered in this fashion and creating 120 endpoints is just not going to fly.
Is there any better way to force sort order on checkbox items?
My combobox
01.function userNameEditor(container, options) {02. debugger;03. var gridDataSource = new kendo.data.DataSource({04. transport: {05. read: {06. url: '../Warehouse/SearchUser',07. dataType: "json"08. },09. success: function(e) {10. debugger;11. },12. error: function (e) {13. debugger;14. }15. }16. });17. var cmb=$('<input name="' + options.field + '"/>')18. .appendTo(container)19. .kendoComboBox({20. autoBind: false,21. dataTextField: "UserFullName",22. dataValueField: "Id",23. filter: "contains",24. minLength: 3,25. dataSource: gridDataSource,26. filtering: function (e) {27. 28. var filter = e.filter;29. gridDataSource.read({ userSearchText: filter.value });30. //dataSource.filter({ userSearchText: filter.value });31. },32. dataBound: function (e) {33. debugger;34. var equipmentData = e.sender.dataSource.data();35. 36. 37. $.each(equipmentData, function (index, selectedEquipmentData) {38. var dataItem = e.sender.dataSource.at(index);39. 40. });41. },42. select: function(e) {43. debugger;44. this.refresh();45. },46. complete: function(e) {47. debugger;48. },49. error: function(e) {50. debugger;51. }52. }).data('kendoComboBox');53. cmb.refresh();54. 69.};
I have one inline grid my grid have one column user combobox.I click update see error "Uncaught TypeError: Cannot use 'in' operator to search for 'RelId' in null" but I cant understand can you help me little?
My Grid
01.var grid = new BaseGrid('grdWarehouse_OnWarehouseUserRelation');02. grid._batch = false;03. grid._dataSourceAutoSync = false;04. grid._autoBind = false;05. grid._toolbar = ['create'/*, 'save', 'cancel'*/];06. 07. grid._editable = {08. mode: "inline",09. create: true,10. update: true,11. destroy: true,12. 13. };14. 15. grid._schemaMethod = {16. model: {17. id: 'RelId',18. fields: {19. RelId: { editable: false, type: "string" },20. User: { defaultValue: { Id: '', UserFullName: '' } },21. }22. }23. };24. 25. grid._columns.push(grid.GridColumn('RelId', null, '200px', null, null, null, null, null, null, null, true));26. grid._columns.push(grid.GridColumn('User', 'User', '200px', null,"#=User.UserFullName#", null, null, null, null, null, null, null, null, null, userNameEditor));27. grid._columns.push(grid.GridColumn(null, ' ', '200px', { style: 'text-align:right' }, null, null, null, null, null, null, null, null, null, ['edit', 'destroy']));28. 29. grid._cancelMethod = function (e) {30. var uid = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(e.container).closest("tr")).uid31. dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource32. var item = dataSource.getByUid(uid);33. dataSource.cancelChanges(item);34. };35. 36. grid._removeMethod = function (e) {37. debugger;38. 39. DeleteWarehouseUserRelation(e.model.Id);40. e.model.IsActive = false;41. e.preventDefault();42. var uid = e.model.uid43. dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource44. var item = dataSource.getByUid(uid);45. 46. dataSource.cancelChanges(item);47. 48. 49. KendoData('grdWarehouse_OnWarehouseUserRelation').refresh();50. };51. 52. grid._updateMethod = function (e) {53. 54. debugger;55. };56. grid._createMethod = function (item) {57. 58. debugger;59. var error = SameWarehouseUserReleationError();60. 61. if (error == true) {62. CreateWarehouseUserReleation(item.data.User.Id);63. }64. 65. 66. KendoData('grdWarehouse_OnWarehouseUserRelation').refresh();67. };68. grid._dataBoundMethod = function (e) {69. 70. $("#grdWarehouse_OnWarehouseUserRelation tbody tr .k-grid-edit").each(function () {71. 72. var currentDataItem = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataItem($(this).closest("tr"));73. 74. $(this).remove();75. 76. });77. 78. e.sender.items().each(function () {79. var dataItem = e.sender.dataItem(this);80. kendo.bind(this, dataItem);81. });82. };83. 84. grid.GetGrid();
I notice that kendo has a new feature to customize the noDataTemplate. Then you can use that to allow user adding a new item when there is no match.
Just like this example: http://demos.telerik.com/kendo-ui/multiselect/addnewitem
But what if I want to add a new item of partial match. Say you have "Chai" in the options, but I want to add "Cha". Can we do that with kendo?
I have charts which have dyanamic Series value text so text is getting crop.
$('#topStationsChart').kendoChart({
dataSource: topFiveStation.LstTopFiveDataItem,
chartArea: {
height: 370
},
title: {
text: selectedKPI + " by " + activeVariable,
visible: true,
},
legend: {
position: 'top'
},
seriesDefaults: {
type: "bar"
},
series: [{
//name: '',
data: totalVisit,
//type: 'column',
stack: false,
color: '#08889b'
}, {
field: 'HalfValueVariance',
//categoryField: 'TopChartVariable',
categoryField: 'TopVariableFullName', // ARME- 610
type: 'line',
width: 0,
tooltip: {
visible: true,
template: function (e) {
var value = e.value * 2;
var strcommsepvalue = CommasSperatedNumber(value);
var tooltipString = "";
var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
tooltipString += KPINameString + " : " + "<span style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";
return tooltipString;
},
border: { color: "08889b" },
autoHide: false
},
highlight: {
toggle: function (e) {
e.preventDefault();
var visual = e.visual;
var transform = null;
if (e.show) {
var center = visual.rect().center();
// Uniform 1.5x scale with the center as origin
transform = kendo.geometry.transform().scale(1.5, 1.5, center);
}
visual.transform(transform);
}
},
markers: {
size: 30,
visual: function (e) {
var src = kendo.format('/' + "{0}", e.dataItem.IconURL);
if (e.dataItem.IconURL == null || e.dataItem.IconURL == undefined || e.dataItem.IconURL == '') {
src = "/Content/Images/stationIcon_placeholder.png";
}
var image = new kendo.drawing.Image(src, e.rect);
return image;
}
}
}],
valueAxis: {
title: {
text: strVarValTitle
},
labels: {
//format: "{0}%"
},
line: {
visible: true
},
majorGridLines: {
visible: false
},
axisCrossingValue: 0,
visible: true
},
categoryAxis: {
line: {
visible: true
},
majorGridLines: {
visible: false
},
labels: {
template: "#=shortLabels(value)#",
rotation: "auto",
visual: adjustLabelsForTopStationChart
},
visible: true,
},
tooltip: {
visible: true,
template: function (e) {
var value = e.value;
var strcommsepvalue = CommasSperatedNumber(value);
var tooltipString = "";
var KPINameString = selectedKPI + ($(".customSwitch span.active").text() == "Percent" ? "(%)" : " ");
tooltipString += "<span style=\"text-align:center;display:inline-block;width:100%;\">";
tooltipString += (activeVariable == "Top 5 Stations" ? "Station" : activeVariable) + " : " + e.category + "</span>";
tooltipString += "<hr style=\"border-color:#ccc;margin: 5px 0;\" class=\"hrTooltps\">"
tooltipString += "<span style=\"float:left;display:inline-block;\">" + KPINameString + "</span>" + " : " + "<span style=\"float:right;display:inline-block;\">" + strcommsepvalue + "</span>";
return tooltipString;
},
background: "rgba(248,248,248,0.8)",
color: "#333",
autoHide: false
//format: "{0}"
},
seriesHover: function(e) {
$("#topStationsChart").css("cursor", "default");
},
render: function (e) {
var tooltip = $(".customTooltipTop");
e.sender.surface.bind("mouseenter", function (e) {
if (e.element.parent.chartElement.content && e.element.parent.chartElement.text.indexOf('...') != -1) {
var pos = e.element.bbox().getOrigin();
tooltip.html(e.element.parent.chartElement.value)
.css({
left: pos.x - 60,
top: pos.y + 20
})
.show();
}
});
e.sender.surface.bind("mouseleave", function (e) {
tooltip.hide();
});
},
});
onBarLineChartHover(nBarLineChartLength, 13);
} else {
$("#topStationsChart").html("<div class='noData'>No Data Available</div>");
}
}
How can i get the text field of a dropdown in the column filter?
I have the following example : https://dojo.telerik.com/izUviSID/2

Dear Admin,
I am developing the list which can drag and drop in "list to list" and "item to item". But there are some bug, can you suggest anyway to overcome it. I write a example in the following. Thanks.
https://dojo.telerik.com/@eltiel/uZAWoYiy
Regards,
Simon
Hi all,
I have a listView with the following bindings:
listView.bind("remove", function(e) {$.ajax({type : "POST",url : vulnerabilityAssessment.deleteVulnerabilityAssessmentItem.replace("{itemId}", e.model.id),contentType : 'application/json',dataType : "json",success : function(response) {refreshCurrentListView(listViewId, scope);},});}listView.bind("save", function(e) {var item = {id: ...,vulnerabilityAssessment: vulnerabilityAssessmentId,.....}if(e.model.id == null)item.id = -1;$.ajax({type : "POST",url : vulnerabilityAssessment.saveVulnerabilityAssessmentItem,contentType : 'application/json',data : JSON.stringify(item),complete : function(e) {refreshCurrentListView(listViewId, scope);},error : function(e) {showErrorDialog(e);},dataType : "json"});});
And the refreshCurrentListView function as follows:
function refreshCurrentListView(listViewId, scope) { var type = parseInt(listViewId.substr(listViewId.indexOf("_") + 1)); var vulnerabilityAssessmentId = $("#vulnerabilityCurrentAssessmentListView", scope).children('div').children('div')[0].id.substr($("#vulnerabilityCurrentAssessmentListView", scope).children('div').children('div')[0].id.indexOf("_") + 1); if(listViewId.includes("Strenght")) { var itemViewModel = itemViewStrength(vulnerabilityAssessmentId, type, 'S'); kendo.bind ($("#threatCurrentVulnerabilityAssessment #" + listViewId, scope), itemViewModel); $("#threatStrenghtListView_" + type + " .edit-buttons").show(); } }
I'm adding a new record on the list and as soon as I add a second row , I get the following exception:
Uncaught TypeError: Cannot read property 'data' of undefined at init.setup (kendo.all.min.js:27) at init.create (kendo.all.min.js:27) at Object.<anonymous> (kendo.all.min.js:27) at Function.Deferred (jquery.min.js:2) at init._promise (kendo.all.min.js:27) at init._send (kendo.all.min.js:27) at init.sync (kendo.all.min.js:27) at init.save (kendo.all.min.js:54) at HTMLAnchorElement.<anonymous> (kendo.all.min.js:54) at HTMLDivElement.dispatch (jquery.min.js:3)
This exception happens when the ajax call inside the 'save' binding takes place (and before it gets to the complete function).
Any ideas?

I am trying to create a kendo custom widget in typescript, but the data function always returns null.
let emptyWidget = $('#emptyCriteria').kendoEmptyTemplate().data('kendoEmptyTemplate'); console.log(emptyWidget) // getting always undefined
Widget Code:
interface JQuery { kendoEmptyTemplate(options?: KendoWidgets.IEmptyTemplateOptions): JQuery; data(key: "kendoEmptyTemplate"): KendoWidgets.EmptyTemplateOptions;}module KendoWidgets { export interface IEmptyTemplateOptions { } export class EmptyTemplateOptions implements IEmptyTemplateOptions{ name: string = 'EmptyTemplate'; } export class EmptyTemplate extends kendo.ui.Widget { options: EmptyTemplateOptions; constructor(element: Element, options: IEmptyTemplateOptions) { super(element, options); } } // Create an alias of the prototype (required by kendo.ui.plugin) EmptyTemplate.fn = EmptyTemplate.prototype; // Deep clone the widget default options EmptyTemplate.fn.options = new EmptyTemplateOptions(); // Create a jQuery plugin. kendo.ui.plugin(EmptyTemplate);}
Html:
<div id="emptyCriteria"></div>
Any of you have encountered this issue or am I missing any methods in widget?