Questions on Kendo UI for jQuery Forum

1 answer

4.3K+ views

I have tried the solution in the following post: Add new row at the bottom. The row is added to the bottom of the grid in edit mode, but once you click out of edit mode, the row then moves to the top of the grid. I need the row to stay at the bottom or in other words, add rows to the grid in order from top to bottom. How can this be done?

Thanks!

Grid

answered on 10 Mar 2019

3 answers

1.3K+ views

Grid Display Issue When Mobile phone or tablet

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

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" />  <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

Grid

answered on 10 Mar 2019

5 answers

4.2K+ views

Cancel Dropdown list change event

Hi how do i cancel the dropdown change event?
i am doing a user conformation on dropdown change event. if the user confirm no then the dropdown selected value should go back to its old value. i tried return false but didnt work.

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

DropDownList

answered on 09 Mar 2019

1 answer

1.0K+ views

How to center a funnel chart in a div

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

Charts

answered on 08 Mar 2019

3 answers

259 views

geoJSON issue

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

Map

answered on 08 Mar 2019

1 answer

156 views

Swap panes for rtl

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]

Splitter

answered on 08 Mar 2019

3 answers

1.9K+ views

Grid Title or Table Caption

I am looking to utilize a grid title or the table caption to host html.
Any recommendations?

Grid

answered on 08 Mar 2019

2 answers

138 views

Filter Kendo UI Menu Items using AngularJS Filter List

I have an application that needs to have an angular filter function for menu items. At first I thought this couldn't be done in Kendo UI. However, it can be done using the HTML content property on the menu item in the dataSource. I spent like 3 hours trying to figure this out. Hopefully, it will save someone else the time who is trying to solve the same problem.

NavBar

answered on 07 Mar 2019

1 answer

491 views

Checkbox column - Checkboxes persist checked state

Hello,

I have added a checkbox column as per the suggestion here:

https://www.telerik.com/forums/treelist-with-checkboxes

The main difference is I am not binding the checkboxes' values, and I reload the list at times.

The issue is if I check the box in any row - for example: Row 1, then I reload the grid (with different data) - the checkbox in row 1 will still be checked, even though the list has been reloaded (grid.dataSource.read()) and populated with different data.

It is very odd behavior - is there any fix or workaround?

I created a dojo reproducing the behavior.

http://dojo.telerik.com/ehIwuKOS

1. Check the box in Row 1 (or Row 2, it doesn't matter)

2. Click the "Reload Grid" button to reload the list's data.

3. Note that the checkbox is still checked.

Thanks,

Justin

TreeList