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:

And the refreshCurrentListView function as follows:

I'm adding a new record on the list and as soon as I add a second row , I get the following exception:

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.

Html:

Any of you have encountered this issue or am I missing any methods in widget?

Hi,

I have a kendo grid with few locked columns and multiple other columns. When I do navigate grid from other page it's working fine but not when refresh page using using F5 or reload option. Seems width is not set properly, please review atttached snapshots.