I have the following code in my HTML template

<div class="form-group col-xs-6">
    <label for="txtDiscountFrom">Available From</label>
   <input class="form-control k-input-lg" data-role="datepicker"
data-bind="enabled:editorModel.onlineEnabled, value:editorModel.discountFrom"
name="txtDiscountFrom" id="txtDiscountFrom" placeholder="Enter From Date"
data-required-msg="Enter From Date"/>
</div>

As you can see I have bound editorModel.enabled to the enabled property. I have other INPUT fields on this form (not shown) which are also bound to this field and they are enabled/disabled correctly. However, the 2 datePicker fields I have seem to ignore this property. They always stay enabled. Does DatePicker not support the enabled property? 

Interestingly enough if I remove the data-role="datepicker" from the above HTML the enabled binding works! Is there something specific on datepicker that I should be doing instead?

I am running Kendo 2019.1.115

0down votefavorite

Kendo UI Grid is working fine in desktop mode but when mobile : "phone" is enabled the grid do not display correctly.

Kendo ui grid on desktop mode see attached image

Kendo ui grid on mobile or tablet mode see attached image

here is my view

<link href="/assets/plugins/kendoui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.mobile.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="~/assets/plugins/kendoui/styles/kendo.dataviz.flat.min.css" rel="stylesheet" /> <!-- Page-Title --> <div class="row"> <div class="col-sm-12"> <h4 class="page-title">System Logs</h4> <ol class="breadcrumb"> <li><a href="/Dashboard">Home</a></li> <li class="active">System Logs</li> </ol> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="card-box table-responsive"> <div id="tbl_log"></div> </div> </div> </div> <script src="/assets/plugins/kendoui/js/kendo.all.min.js"></script> <script src="/assets/plugins/kendoui/js/jszip.min.js"></script> <script src="/assets/plugins/moment/moment.js"></script> <script src="/CustomScripts/logviewer.js"></script>

Kendo UI Grid is working fine in desktop mode but when mobile : "phone" is enabled the grid do not display correctly.
Kendo ui grid on desktop mode enter image description here
Kendo ui grid on mobile or tablet mode
enter image description here
here is my view
<link href="/assets/plugins/kendoui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.flat.mobile.min.css" rel="stylesheet" /> <link href="/assets/plugins/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet"> <link href="~/assets/plugins/kendoui/styles/kendo.dataviz.flat.min.css" rel="stylesheet" /> <!-- Page-Title --> <div class="row"> <div class="col-sm-12"> <h4 class="page-title">System Logs</h4> <ol class="breadcrumb"> <li><a href="/Dashboard">Home</a></li> <li class="active">System Logs</li> </ol> </div> </div> <div class="row"> <div class="col-sm-12"> <div class="card-box table-responsive"> <div id="tbl_log"></div> </div> </div> </div> <script src="/assets/plugins/kendoui/js/kendo.all.min.js"></script> <script src="/assets/plugins/kendoui/js/jszip.min.js"></script> <script src="/assets/plugins/moment/moment.js"></script> <script src="/CustomScripts/logviewer.js"></script>
here is the js
$("#tbl_log").kendoGrid({ toolbar: ["excel"], excel: { allPages: true }, dataSource: { type: "json", transport: { read: "/ViewLog/GetLogs" }, schema: { type: 'json', data: 'msg', total: "total", model: { id: "LogID", fields: { LogID: { type: "number" }, LogModule: { type: "string" }, LogDetails: { type: "string" }, Username: { type: "string" }, LogLevel: { type: "string" }, LogDateTime: { type: "date" } } } }, pageSize: 15 }, height: 670, sortable: true, groupable: true, filterable: true, reorderable: true, resizable: true, mobile: "phone", selectable: "row", pageable: { refresh: true, pageSizes: [15, 25, 50, 100], buttonCount: 5 }, columns: [ { field: "LogID", title: "Log #", width: 120 }, { field: "Username", title: "User", width: 180 }, { field: "LogLevel", title: "Level", width: 120, //template: "#if(ErrorDesc==null){# #: DeviceLabel # #}else If(ErrorDesc==""){# #: DeviceLabel # #}else{# #: DeviceText # #}#" template: '#if(data.LogLevel === "Information"){#<span class="label label-primary"> Information </span>#}#' + '#if(data.LogLevel === "Critical"){#<span class="label label-danger"> Critical </span>#}#' + '#if(data.LogLevel === "Warning"){#<span class="label label-warning"> Warning </span>#}#', }, { field: "LogModule", title: "Module", width: 140 }, { field: "LogDetails", title: "Details", width: 300, }, { field: "LogDateTime", title: "Date", format: "{0:dd-MMM-yyyy hh:mm:ss tt}", parseFormats: ["MM/dd/yyyy h:mm:ss"], width: 160, filterable: { ui: "datetimepicker" } } ] });

please advice

$("#myDropdown").data("kendoDropDownList");
.bind("change", function (e) {
if(!confirm('warning'))
return false;
}
thanks for your help
Arun

I am trying to center a funnel chart in a div, but it doesn't work with my css. It would work well if I use other svg in a div. It looks like that the svg for the unnel chart always start from the point(0, 0) even though I set its margin in css. Much appreciate if any help.

Following is my css

div svg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

New user here - I am trying to set up a SharePoint site (2010/2013 on prem) and insert the Kendo UI map control with the geoJSON data to create a clickable world map.  I have follow the example and uploaded all the corresponding files.

I can get the regular map to display, but the geoJSON map is just blank, with the zoom/pan controls visible. I know there were other threads saying to be sure that you added json to the MIME types, but that appears to already be there in IIS on my SharePoint server.

Here is what I am seeing (attached).

Any other thoughts/suggestions?  Is there any particular issue with using this control in SharePoint?

Thanks

Is there an easy way to swap left/right panes so that the right pane would show on the left in an rtl environment? Looking at the demo, https://demos.telerik.com/kendo-ui/splitter/right-to-left-support, the left pane is always on the left and the right pane is always on the right.

For example:

Left-To-Right layout: [Left] [Right]

Right-To-Left layout: [Right] [Left]