For 3 or maybe four years I have tried to understand and make telerik work... and it is just impossible to get this thing to work in a simple MVC application... Clearly people make it work... but for me it's not possible it seems.

I have followed all the steps to get telerik into my application and when it comes to making the datetime picker work... it does nothing..

So let me ask.

If I have an existing MVC application that has a datatime picker working in it 

Is it not possible to get the telerik date time picker to work?

This what I have now and this used the datetime picker that id default to the MVC I am guessing 

                <div class="form-group">

                    @Html.LabelFor(model => model.RES_START_DATE, htmlAttributes: new { @class = "control-label col-md-3" })

                    <div class="col-md-6">

                        @Html.EditorFor(model => model.RES_START_DATE, new { htmlAttributes = new { @class = "datepicker" } })
                        @Html.ValidationMessageFor(model => model.RES_START_DATE, "", new { @class = "text-danger" })
                    </div>

The above code work just fine with a datetime picker that must be a default thing...

But as soon as I added the attempt to use the Kendo dateime picker as listed in the example I get nothing ..

I am following these directions... (see below)and I have been trying to get any telerik control to work for 3 years with no luck

I must be doing something wrong. I come back everything I write an application because the controls look so nice...

but I end up with the same result. Nothing

https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5#add-telerik-ui-for-aspnet-mvc

When I add: @(Html.Kendo().DatePicker().Name("datepicker"))

To my mvc application I get nothing but a blank field... each and every time I try...

Pure Kendo nothingness...

Also in the browser's f12 view I get what you see in the screen shots.

I am pretty much giving up on telerik after this attempt so this nightmare can be over..

but since I have the forums I thought I would give it one my try.

Please see screen shots if you have time to assist as I am totally lost! Thank You!

I'm having trouble with the shapeMouseEnter event not firing on any layer but the last one added (top layer).  I have a background layer using the openmap.org, and then I have 2 GeoJSON layers.  These layers don't overlap, one is the US counties, and the other is all the other countries of the world.  The problem is that the shapeMouseEnter only gets triggered on the layer that was added last to the map.  I thought that the shapeMouseEnter event should fire for all layers with shapes.  Is this not correct?  Here is an example of my map definition:

I have a multiSelect and want to have paste to select, nut some times I am getting this error, 

Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

function ParsePaste(inputSent) {

try {

//console.log($(CtrlName).data("kendoMultiSelect").dataSource.data().length);
var originalArray = $(CtrlName).data("kendoMultiSelect").value();
var pidArray = inputSent.val().trim().replace(/\s*,\s*|\s*;\s*|\s+/g, ",").split(",");

if (originalArray.length >= 1) {
for (var i = 0; i < originalArray.length; i++) {
pidArray.push(originalArray[i]);
console.log(pidArray);
}
}
inputSent.val("");
setTimeout(function () {
try {
$(CtrlName).data("kendoMultiSelect").value(pidArray);
} catch (ex) {
alert('try again!');
console.log(ex); 
}
setTimeout(function () {
try {
var newArray = $(CtrlName).data("kendoMultiSelect").value();
Array.prototype.diff = function (a) {
return this.filter(function (i) { return a.indexOf(i) < 0; });
};
if (pidArray.diff(newArray).length > 0) { aeriesWin.prototype.alert(pidArray.diff(newArray) + " not found!"); }

} catch (ex) { alert('try again!'); }
}, 250);

}, 200);
} catch (ex) {
//alert("2:" + ex);
alert('try again!');
}
}


$(function () {

$(document).on('paste', '.k-multiselect-wrap input:visible', function (e) {

setTimeout(function (e) {

ParsePaste($('.k-multiselect-wrap input:visible'));
}, 50);
});

$(document).on('keyup', '.k-multiselect-wrap input:visible', function (e) {

if (e.which == 13) {
var originalArray = $(CtrlName).data("kendoMultiSelect").value();
 originalArray.push($(this).val());
setTimeout(function () {
$(CtrlName).data("kendoMultiSelect").value(originalArray);
}, 250);
}

});
// $("#" +  ).siblings("div").find("input[aria-owns^=" +msStudents+"]").keyup(function (e) {
//if (e.which == 13) {
//alert('xxx');
//}

//});

})

Hello, 

We are using a donut chart and have a problem with truncated labels, as explained below. 

Here are the chart settings:
type: 'donut',
holeSize: 76,
size: 10,
startAngle: 150,
labels: {
distance: 1,
margin: 0,
position: 'outsideEnd',
visible: true,
align: 'circle',
background: 'transparent',
font: `600 12px/12px Assistant,Helvetica Neue,Helvetica,Arial,sans-serif;`,
color: '#474E7A',
template: "#= kendo.toString(dataItem.percent, '\\#\\#,\\#.\\#') + '%\\n' + dataItem.category #"
},
connectors: false,
visual: e => {
const width = 18;
const space = 6;
const group = new kendo.drawing.Group();

const A = (Math.PI - Math.acos(((width / 2) + space) / 2 / e.radius) * 2) * 180 / Math.PI;

const geometry = new kendo.geometry.Arc([ e.center.x, e.center.y ], {
radiusX: e.radius - width / 2,
radiusY: e.radius - width / 2,
startAngle: e.startAngle + A,
endAngle: e.endAngle - A
});

const arc = new kendo.drawing.Arc(geometry, {
stroke: {
color: this.colorChart,
width: width,
lineCap: 'round',
lineJoin: 'round'
}
});

return group.append(arc);
},
highlight: {
visible: false
}
}

Our textual is RTL and some of the categories have long text titles.
For this reason we updated our dataItem.category so if the text it too long we will split it to two lines using \n
However there are still cases where the text exceeds the edge of the chart area - see for example the two lines marked in the attached image. 
In those two lines, the first line string length is 11 but actually only the first 8 characters are rendered (you can only see half of the 9th letter). The second line string length is 18 and only 10 is visible.


1) Can you advise us of a better way to handle the truncated labels text? For example we have no problem with using “…” at the end of the string when text is too long, but we are not familiar with a built in mechanism to do so
2) As you can see our template concatenates the dataItem.percent, new line (\n) and dataItem.category. We would like to use a different font styles so dataItem.percent will have one style and dataItem.category will have a different font size and color. How can we achieve this?

Thanks,

Ron.

Hi,

I am trying to show validation error message on the grid (for example if the start date is greater than end date)- https://dojo.telerik.com/OjAnEJoV/2 Can you please help? Thanks in advance

Hello all ;)

When I Maximize the window I zoom in on the page, but I can not change the position TOP 

Hello Everyone,

I am facing problem in implementing the kendo alert functionality.

In my page I am using kendo grid which is working perfectly. But when I am trying to use kendo alert, javascript error comes "kendo.alert is not a function". Below is a part of the code.

kendo.ui.progress($('#myGridDiv'), true);
            $.ajax({
                url: '<%=ResolveUrl("~/ReportDataService.asmx/GetReportData") %>',
                data: "{'Office':'" + Office + "','Team':'" + Team + "','Client':'" + Client + "','FileNo':'" + FileNo + "','BillNo':'" + BillNo + "'}",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d.length > 0) {
                        var grid = $('#myGridDiv').getKendoGrid();
                        grid.dataSource.data(data.d);
                        grid.refresh();
                    }
                    else {
                        kendo.alert('No results found. Displaying last searched results.');     //--> Error comes from here. If no record is found for the grid.
                    }
                    kendo.ui.progress($('#myGridDiv'), false);
                },
                error: function (error) {
                    alert("Error: " + JSON.stringify(error));
                    kendo.ui.progress($('#myGridDiv'), false);
                }
            });

The scripts that I am using are

<link rel="stylesheet" href="Styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.mobile.min.css" />
<script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/jszip.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>

Can somebody please help.

Thanks & Regards