Questions on Kendo UI for jQuery Forum

2 answers

130 views

The datetimepicker filter is not properly persisted after saving and loading the state of the grid

Hi,

I am facing an odd behavior with the kendo grid menu datetimepicker filter.

Replication (link https://dojo.telerik.com/aFOMARUq):
1- Filter the grid using the "Start" column (select any date or time).
2- Save grid state.
3- Load the grid state.
Check the "Start" column filter.

Observed behavior: the time picker is no longer displayed.

Is there something I am missing? any help or suggestions are much appreciated.

Grid

answered on 07 Sep 2020

4 answers

968 views

Creating a new row when enter key is pressed

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.

Grid

answered on 07 Sep 2020

48 answers

3.7K+ views

Grid filter with multiselect checkboxes: sort items alphabetically?

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?

Grid

answered on 07 Sep 2020

9 answers

338 views

Inline Grid TypeError:Cannot use 'in' operator to search for 'xxx' in null

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")).uid

31. dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource

32. 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.uid

43. dataSource = $("#grdWarehouse_OnWarehouseUserRelation").data("kendoGrid").dataSource

44. 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();

Grid

answered on 04 Sep 2020

2 answers

216 views

How can I add partial match new item.

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?

MultiSelect

answered on 04 Sep 2020

20 answers

1.3K+ views

Timeline year view

Hey!
I am trying to implement a timeline with year view, is there a way to do this with the scheduler?
In all of your example the maximum is month..
Thanks,

Scheduler

answered on 04 Sep 2020

1 answer

132 views

Series value text is getting crop

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>");
}
}

Charts

answered on 04 Sep 2020

3 answers

147 views

Kendo jQuery Grid , Get text on dropdown filter

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

Grid

answered on 04 Sep 2020

1 answer

148 views

multiple level drag and drop

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

TileLayout

answered on 04 Sep 2020

1 answer

1.1K+ views

Uncaught TypeError: Cannot read property 'data' of undefined

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)