I have a Kendo grid that is created once the Ajax success event is triggered returning JSON data. The grid displays and works as I would expect. I have two buttons, one for Export to Excel and the other PDF - Excel works fine. PDF just grays out the grid and displays an empty progress bar that is never filled. The PDF is never generated. I have stripped all .js includes (and have also used the kendo demo versions of the .js files) and additional .css includes and yet the problem remains. It won't work in IE (11) nor in Chrome.
<link href="kendo.common.min.css" rel="stylesheet"/><link href="kendo.default.min.css" rel="stylesheet"/><script src="jquery-1.11.3.js"></script><script src="kendo.all.min.js"></script><script src="jszip.min.js"></script><script src="pako_deflate.min.js"></script><div id="grid"></div>
... $.ajax({ url: <web service url>, type: 'POST', dataType: 'json', data: {<parameters>}, success: function (_data) { var oTable = $("#grid").kendoGrid({ toolbar: ["pdf", "excel"], pdf: { fileName: "Kendo UI Grid Export.pdf" }, excel: { fileName: "Kendo UI Grid Export.xlsx" }, dataSource: { data: _data, schema: { model: { fields: { ... } } }, }, selectable: "single", sortable: true, filterable: true, pageable: false, scrollable: true, height: 500, columns: [ ... ] }); ...
Hello,
We have a wide grid with horizontal scrolling, with 2 frozen columns. It is very wide (over 20 columns), so the horizontal scrolling is always needed.
We are using the Filter Row option to allow the user to filter. Works well, but if the user tabs between the filter fields, an issue arises. If the user tabs to a hidden field (hidden as in having to scroll to see it), then the header will scroll to accomodate, but the body will not. Likewise, if the user is scrolled all the way to the right and tabs out of the last frozen column, the scrolling again gets out of sync.
See the following Dojo example to experience the issue yourself.
http://dojo.telerik.com/iNONA/2
If anyone has any clue as to how to fix this issue, I'd appreciate it very much!
Thanks!
Hi!
As far as I have understood, the toggle state of a toggle button is set via its "k-state-active" css class. There are some situations where I want to select or unselect a toggle button dynamically by adding or removing the "k-state-active" css class. On the other hand if I want to know the toggle state of a toggle button, I am checking if the link has the "k-state-active" css class.
The event handler looks like this:
function onToggle(e) {
let button = $(e.target);
let selected = button.hasClass("k-state-active");
if (selected === false && condition) {
button.addClass("k-state-active");
}
}
For some reasons I don't understand, the boolean value of "selected" sometimes differs from the actual rendered state of the toggle button. It seems like the toggle button has some other internal state, or maybe I am accessing the toggle button just not the right way.
Best regards,
Kaan
I have a grid that has subHeaders and subColumns. Ideally when I select/deselect the parent column, it should display/hide the parent columns and headers along with its subHeaders and subColumns. However it is not working fine.
After a deeper investigation, I find that the index of the columns are messed up in this situation, which looks like 0,1,4,2,3 . And even worse, if there are dynamic columns, as we use k-rebind, the indexes of the columns are not unique any more.
Hi
been trying to find a solution to a problem i have trying to solve over the last few days and beginning to wonder if its even possible.
I have set up a "Dojo" with all the code snippets which can be found here - http://dojo.telerik.com/aBuVul/7
The issue stems from the need to be able to reference data with a name that may contain hyphen in a template.
an example can be seen below, more details examples can be seen on the Dojo link above
var DashFirstName = "first-name",
dashData = new kendo.data.DataSource({
data: [
{"first-name": "Joe", "country": "Germany"},
{"first-name": "Jane", "country": "UK"},
{"first-name": "Maria", "country": "Spain"}
]
});
$("#grid2").kendoGrid({
dataSource:dashData,
columns: [{
field: "[\"first-name\"]",
test: "22",
title: "First Name",
template: "<input type='radio' name='#= data." + DashFirstName + "#'>#= data." + DashFirstName + "#",
width: 200
}, {
field: "country",
title: "Country"
}]
});
I've tried various escapes to no avail... Any ideas would be greatly appreciated.
Our application makes repeated calls to the spreadsheet control, sometimes numbering in the tens of thousands. The application logic sets cell values, then reads back the value of other, calculated cells.
Execution speed gets slower and slower over time. For example with a simple spreadsheet, I can run 500 iterations in roughly 10 seconds. The second block of 500 iterations takes 27 seconds and the 3rd block of 500 iterations takes 44 seconds. As a rough approximation, there is an exponential fall-off in performance, presumably due to memory-allocations internally.
The problem manifests itself in the cell SetValue() method. Initially, this method returns control to the calling program in less than 1ms. But after say, 1500 iterations, this method is taking 200 to 300ms.
In case it helps with reproducing the problem: this delay only occurs if SetValue() follows a call to the cell GetValue() method. If GetValue() does not get called, then repeated calls to the SetValue() method happen quickly, in <1ms
Am hoping there is an easy fix for this.
Regards,
Mike Wiese
Dunsborough
Western Australia
/** * This is a security dashboards controller */define([ 'wsipccontext', 'jquery', 'underscore', 'utils/helpers', 'utils/alerts', 'kendoui/kendo.core.min', 'kendoui/kendo.data.min', 'kendoui/kendo.splitter.min', 'kendoui/kendo.panelbar.min', 'kendoui/kendo.grid.min'], function (WSIPCContext, $, _, Helpers, Alerts, studentDetailTemplate) { //PRIVATE PROPERTIES var ksCharts, ksMain, kgSecurityGrid, ksChartsAndGrid, kpbContent, firstPass, nextRead, dsSchoolRiskFactors; //CONSTRUCTOR var init = function () { //ON DOC READY $(function () { initElements(); onInitialLoad(); }); }; var init1 = function () { //ON DOC READY $(function () { onInitialLoad(); }); }; //EVENTS var initElements = function () { firstPass = true; nextRead = false; ksMain = $("#main").kendoSplitter({ orientation: "horizontal", panes: [{ size: "240px", collapsible: true, scrollable: true }] }).data("kendoSplitter"); kpbContent = $("#linkPanel").kendoPanelBar().data("kendoPanelBar"); kpbContent.append([ { text: "Additional Dashboards", content: "<a href='/DistrictEWSDashboard/'><img src='/assets/images/EWS District TN.png' /> <a href='/admindashboards/'><img src='/assets/images/EWS School TN.png' /> </a><a href='/StudentEWSDashboard/'><img src='/assets/images/EWS Student.png' /> </a><a href='/AdminDashboards.aspx/'><img src='/assets/images/Portal-big.png' /></a>" } ]); kpbContent = $("#panelBar").kendoPanelBar().data("kendoPanelBar"); kpbContent.element.find("#comparativeDashboardPanelContents").css("height", "1104px"); kpbContent.element.find("#gridPane").css("height", "770px"); kpbContent.expand(kpbContent.element.find("li:first")); kgSecurityGrid = $("#securityGrid").kendoGrid({ scrollable: true, columns: [ { field: "Username", title: "User Name", width: 150, editable: false }, { field: "FreeReduced", title: "Free and Reduced", width: 50 }, { field: "SpecEd", title: "Spec Ed", width: 60 }, { field: "Discipline", title: "Discipline", width: 50 }, { field: "Assessment", title: "Assessment", width: 50 }, { field: "Activities", title: "Activities", width: 50 }, { command: ["destroy"], title: " ", width: "172px" }, ], dataSource: { transport: { read: function (options) { if (!(kgSecurityGrid)) { options.success([]); return; } kendo.ui.progress(kgSecurityGrid.element, true); $.getJSON(Helpers.toServicesUrl("/GetctrlSecurityInfo"), { userName: WSIPCContext.UserName, districtId: WSIPCContext.DistrictId }, function (data) { options.success([]); kgSecurityGrid.dataSource.data(data.GetctrlSecurityInfoResult.RootResults); }).always(function () { kendo.ui.progress(kgSecurityGrid.element, false); }); }, update: function (options) { if (!(kgSecurityGrid)) { // options.success([]); // return; } kendo.ui.progress(kgSecurityGrid.element, true); $.postJSON(Helpers.toServicesUrl("/GetupdateSecurityInfo"), { userName: WSIPCContext.UserName, districtId: WSIPCContext.DistrictId, UserToUpdate: "wise\lhedman", Role: "Teacher", FnR: "yes", SpecEd: "yes", Assess: "yes", Discipline: "yes", Activites: "yes", MSDAdmin: "no" }, function (data) { options.success([]); // kgSecurityGrid.dataSource.data(data.GetupdateSecurityInfoResult.RootResults); }).always(function () { kendo.ui.progress(kgSecurityGrid.element, false); });// type: "POST" } }, sort: { field: "Username", dir: "asc" }, schema: { model: { fields: { Username: { type: "string", editable: false }, FreeReduced: { type: "string" }, SpedEd: { type: "string" }, Discipline: { type: "string" }, Assessment: { type: "string" }, Activities: { type: "string" } } } }, pageSize: 15, batch: true, page: 1 }, pageable: true, sortable: true, groupable: true, filterable: true, resizable: true, height: 760, toolbar: ["create", "save", "cancel"], editable: true }).data("kendoGrid"); $("#applyFilters").css('display', 'none'); kgSecurityGrid.dataSource.read(); }; //end of initelements //ACTIONS var index = function () { }; // var visitNodes = function (nodes, callback) { for (var i = 0; i < nodes.length; i++) { callback(nodes[i]); if (nodes[i].hasChildren) visitNodes(nodes[i].children.view(), callback) } }; var eachItemToJSON = function (items) { var result = new Array(items.length); for (var i = 0; i < items.length; i++) result[i] = items[i].toJSON(); return result; }; function onInitialLoad() { // $("#applyFilters").trigger("click"); }; //CALL CONSTRUCTOR init(); // init1(); //PUBLIC PROPERTIES return { index: index };});Hello,
I am looking at following example and I would like to get the index of the clicked item, how would I do that?
http://dojo.telerik.com/@korchev/amaK
Thanks
$(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { }, schema: { model: { fields: { OrderID: { type: "number" }, ShipCountry: { type: "string" }, ShipName: { type: "string" }, ShipCity: { type: "string" }, ShipAddress: { type: "string" } } } }, pageSize: 30, group: { field: "ShipName" } }, height: 540, sortable: true, reorderable: true, groupable: true, resizable: true, filterable: true, columnMenu: true, pageable: true, columns: [ { field: "OrderID", title: "Order ID", locked: true, lockable: false, width: 50 }, { field: "ShipCountry", title: "Ship Country", width: 300 }, { field: "ShipCity", title: "Ship City", width: 300 },{ field: "ShipName", title: "Ship Name", width: 300 }, { field: "ShipAddress", width: 400 } ] }); });Hi,
We are trying to use the Telerik Testing Studio to automate testing.
We're running into problems testing Kendo UI charts, since there's no way to hook to the series in the chart.
Is there a way to configure the chart to add classes (or ids or any other usable attributes) to each of the series (and to each of the bars in the series in case of stacked bar chart) ?
If not, how can we use your tool to inspect your widgets ?
Thanks in advance