Hi,

We are currently evaluating the Kendo UI javascript Grid. We`d like  to bind it to a datasource populated from a remote rest service. The json returned will be similar to the json at the bottom of this post. We would like the grid to bind to the stock array but not the summary but would like the summary accessible from the datasource.

I`ve tried calling the rest service from jquery then populating the datasource using the array but this seems slower then binding the datasource to the rest service directly.

Below is an example of what we`d like to do

Many thanks

Darran

Example Json:

Hello

I've just upgraded from KendoUI v2017.3.913 to KendoUI v2018.1.221 and had some not nice visual changes in kendoDialog and kendoConfirm.

See attachment:
- KendoUI v2017_3_13.png : How it was and how I would like to have it again
- KendoUI v2018_1_221.png : Screwed up in latest KendoUI version

Two unwanted things in latest release:
1. Pressed button, ignoring content
2. Unwanted grey bar at the bottom of the dialog (same bar with title activated)

-> I have the exactly same problem in kendoDialog and kendoConfirm.

To point 1:
Of course it works in your widget samples, so I made a standalone sample (outside from my project). The button appears but is not fully visible. I have the fully working code here:

The fact the button is pressed in my project is a problem I have to find but I don't understand why the button is not centered/fully visible in the code above.

To point 2 (grey bar):

I've checked the API documentation of kendoDialog and kendoConfirm how to get rid off that grey bar but couldn't find something. If I wanted a grey bar I would place it by myself. So I don't understand why Telerik changed the layout that way

The question here is: How can I get rid off that unwanted grey bar at the bottom (probably same way as on top with active title).

Regards

Hello,

I have a use case where I want to change the event function (_dialogActionOK, _dialogInitOpen, _dialogOpen) called by the dialog window runtime.

What is the simplest way to change the functions called runtime?

$('#dialog').initOpen( function(e) { newMethod(); }) ?

Thanks for the help

I'm trying to implement a Kendo splitter pane with dynamically allocated number of panes in Angular 2. I have the kendo-splitter element in the parent component but unless I remove it the child component doesn't get rendered? 

Parent Splitter Component

Hi

I have issue selecting first tab, I read  in https://www.telerik.com/forums/can-t-programmatically-select-a-tab#8GpHjbXuJkyTYw-siBriCw that the issue can be because of the external dataSource. I use the example from http://demos.kendoui.com/web/tabstrip/images.html to create my json. here is part of my code. Any idea?

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/GetTabs/",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type) {
var result = {
val1: $("#val1").val(),
val2: $("#val2").val(),
}
return kendo.stringify(result);
}
},
});

$("#tabstrip").kendoTabStrip({               
dataTextField: "resId",
dataContentUrlField: "resName",
dataSource: dataSource
                
            });

function SelecTab() {    
var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
}

Kendo grids in our application are not sizing optimally with Chrome 65.  Our grid columns still size efficiently and as expected in Chrome 64, and the latest of Firefox, IE 11, and Edge. 

Attachment 1 shows one of our grids, rendered in Chrome 65.  Here you can see that the columns which would normally be wider, to accommodate wider text, are too thin, and columns which do not have a lot of text are too wide.

Attachment 2 shows the same grid as rendered in Firefox.  (Also renders this way in Chrome 64, IE 11 and Edge)

Attachment 3 shows that a forced redraw of the grid columns, by executing the following code, corrects the column sizing issues.  Perhaps Chrome has become faster, and exposed a timing issue around column width calculations after options.success is called following a transport.read?

                                                //The following is executed after the return of data from an external query made in
                                                //kendo.data.DataSource.transport.read
                                                //Attachment 1 is from just prior to this code's execution.
                                                //Attachment 2 is from after showColumn(3) is execcuted
                                                window.setTimeout(angular.bind(this,
                                                    () => {
                                                        $("#ehGrid").data("kendoGrid").hideColumn(3);
                                                        window.setTimeout(angular.bind(this,
                                                                () => {
                                                                    $("#ehGrid").data("kendoGrid").showColumn(3);
                                                                }),
                                                            100);
                                                        }),
                                                    300);

This issue is occurring in multiple grids in our app, so having to put this workaround into all our transport.read definitions is not a great solution for us.  Do you have any other suggestions or a fix? 

Kendo 2017.1.223, Angular v1.6.5, Typescript

Hello,

in this example http://dojo.telerik.com/aJUKiZuB I reproduced a problem with the dropdown. When you open it and directly close it (before its opened) by clicking i.e. below, there is a faulty animation, where the dropdown animation container jumps to a wrong position. With jQuery 1 its working fine. Same problem seems to be on multiselect (maybe also on other widgets?).

Regards

Jan

I would like to collapse all of the nodes in the treeview and then expand the treeview to a specific node. I have found that when i call the collapse function like treeview.collapse('.k-item') and then try to call treeview.expandTo(dataItem) the treeview closes and does not expand to the node. In order to get it to work I have to delay the expandTo by using setTimout. This is not ideal. Any help would be appreciated.

Dojo example: http://dojo.telerik.com/ATiXUbuC

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script></head>
  
<div id="example">

            <div class="demo-section k-content">
                <h4>Inline data (default settings)</h4>
                <div id="treeview-left"></div>
              <button onclick='expandTo()'>Expand To</button>
              <span><--works as expected</span><br/>
              <button onclick='find()'>Collapse then expand to node</button>
              <span><-- sometimes works on first time, but stops working</span><br/> 
              <button onclick='findWithDelay()'>Collapse then expand to node (with delay)</button>
              <span><-- works everytime
              
            </div>

            <script>
                var inlineDefault = new kendo.data.HierarchicalDataSource({
                    data: [
                        { text: "Furniture", items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ] },
                        { text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ] }
                    ]
                });

                $("#treeview-left").kendoTreeView({
                    dataSource: inlineDefault
                });
              
              
              //expandTo on its own works as expected
              function expandTo(){
                var treeView = $('#treeview-left').data('kendoTreeView');
                var node = treeView.findByText('Sofas');
                dataItem = treeView.dataItem(node);
                treeView.expandTo(dataItem);
              }
              
              //I want to close all the nodes and then expand the treeview to a specific node
              //but calling expandTo after calling collapse doesn't work
              function find(){
                var treeView = $('#treeview-left').data('kendoTreeView');
                treeView.collapse('.k-item');
                var node = treeView.findByText('Sofas');
                dataItem = treeView.dataItem(node);
                treeView.expandTo(dataItem);
              }
              
              //have to delay the expandTo call to make it work
              function findWithDelay(){
                var treeView = $('#treeview-left').data('kendoTreeView');
                treeView.collapse('.k-item');
                var node = treeView.findByText('Sofas');
                dataItem = treeView.dataItem(node);
                
                //delay the expandTo for half a second
                setTimeout(function(){treeView.expandTo(dataItem)}, 500);
              }
  </script>

            <style>
                #example {
                    text-align: center;
                }

                .demo-section {
                    display: inline-block;
                    vertical-align: top;
                    text-align: left;
                    margin: 0 2em;
                }
            </style>
        </div>
<body>
</body>
</html>