Telerik Forums
Kendo UI for jQuery Forum
11 answers
1.2K+ views

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: [
                            ...
                    ]
 
                });

 ...

Vladimir Iliev
Telerik team
 answered on 24 Nov 2016
1 answer
123 views

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!

Alex Hajigeorgieva
Telerik team
 answered on 24 Nov 2016
6 answers
1.7K+ views

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

Kaan
Top achievements
Rank 1
 answered on 23 Nov 2016
5 answers
1.1K+ views

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.

 

 

Dimiter Topalov
Telerik team
 answered on 23 Nov 2016
3 answers
375 views

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.

 

Andrew
Top achievements
Rank 1
 answered on 23 Nov 2016
18 answers
630 views

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

Aylin
Telerik team
 answered on 23 Nov 2016
9 answers
395 views
Hi - I have a grid that I am doing batch updates on, and I'm getting an error as shown in the attached screen shot.  I'm not sure what I'm doing wrong?  The text of the error is "Uncaught TypeError: Cannot call method "call" of undefined.
Thanks for any help.

Lisa

Here is my code:
/**
 * 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
    };
});


Srinivasan
Top achievements
Rank 1
 answered on 23 Nov 2016
3 answers
1.6K+ views

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

Alex Hajigeorgieva
Telerik team
 answered on 23 Nov 2016
13 answers
2.6K+ views
I have grid with locked (frozen) column and grouping like this:

http://demos.telerik.com/kendo-ui/grid/frozen-columns

But I have only one frozen column and small width.

And when I group by column with long string values (eg ship address),
these group values in group header displayed in multiple lines.

Screen 1
Screen 2

How show group header in one line even if first part of grid (with locked columns) has small width?

Source example

$(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    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
                    }
                ]
            });
        });
Alexander Popov
Telerik team
 answered on 23 Nov 2016
3 answers
432 views

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

Boyan Dimitrov
Telerik team
 answered on 23 Nov 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?