It works:

$(function() {
    $("#dropdownlist").kendoDropDownList({
    dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Todos", value: 0 },
{ text: "Valor 1", value: 1 },
{ text: "Valor 2", value: 2 }
]
 
            });
var valor = $("#dropdownlist").data("kendoDropDownList");


function loadGrid(){
$("#grid").kendoGrid({
dataSource:{
transport:{
read: {url:"http://localhost/php/lerdados.php", dataType:"json", data:{"Ordem": valor.value()}, type: "post"}
},
schema:{
type: "json",
data: "xData"
}
}, 
columns: [
                    { field: "Ordem", title: "Ordem"},
{ field: "Data", title: "Data", width: "100px" },
                    { field: "Total", title: "Total", format: "{0:c}", width: "100px" }
],

})};



$("#getValue").click(function() {
               loadGrid();
  

});
    });

when i declare datasource as variable doesn't work.

$(function() {
    
$("#dropdownlist").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Todos", value: 0 },
{ text: "Valor 1", value: 1 },
{ text: "Valor 2", value: 2 }
]
 
            });
var valor = $("#dropdownlist").data("kendoDropDownList");



var mdataSource = new kendo.data.DataSource({
transport:{
read: {url:"http://localhost/php/lerdados.php",  dataType:"json", data:{"Ordem": valor.value()}, type: "post"}

},
schema:{
type: "json",
data: "xData"
}
        });

function loadGrid(){

$("#grid").kendoGrid({
dataSource: mdataSource,

columns: [
{ field: "Ordem", title: "Ordem"},
{ field: "Data", title: "Data", width: "100px" },
{ field: "Total", title: "Total", format: "{0:c}", width: "100px" }
],


})
};





$("#getValue").click(function() {
               
   loadGrid();
  

});
    });

Hi,

We upgraded our kendo ui version to v2018.1.117.

Since then, when the screen is smaller than 1024*768 resolution, the pager in the grid is shown as a dropDown control in vertical mode,
instead of horizontal - as it always was.

How can we remain the old behavior - that the pager of the grid will be shown horizontally?

Thanks,

Yael

The k-loading-mask div is now inside the k-content div.

This causes a few issues when it comes to the layout whilst loading.
 - The grid is still scrollable
 - The loading mask moves up and down whilst scrolling.

Please see the attached gif where i did the following to highlight the issue;
 - Used chromes browser throttling mode to emulate a very slow network connection
 - Added `background: red` to `.k-loading-mask`

In older versions the loading mask covered the entire grid div and prevent this issue from happening.
Example;
http://jsfiddle.net/dimodi/dYcHg/

We have a cell with validation (it is a dropdown type validation).

When the users copy the value from another cell to this cell, I used the clipboard.paste.prototype method to override the default behaivour and retain the pasteRef cells formatting (background, font colour, validation values etc), but after the paste, the cell may (or may not) be invalid.

Is there a way to then manually check the validation and if it fails, fire the validation fail event (which shows a popup)?

Thanks!

I have a grid that is attached to a datasource. When it reads data, the server responses with no-content (when there is no data in the database). 

So the returned data is undefined. But the datasource is still trying to read the total which gives an exception. 

This line throws the error in kendo.all.js file 

  total: function (data) {
                return data.length;
            },

I was under the impression that the dataSource ignores any further processing if it does not get any valid data form the server. 

Hi, 

I have a "table" and labels inside table's td.I applied kendoDraggable to all labels in tds. And the all tds also droppable. Briefly, i want to move elements (which insde table cell) to another cell. 

Everything seems ok, i can drag and drop but when i drag element to not droppable area, element disappeared, not reverting with animation. And some laggy behaviour when dragging. Am i missing a point ?

Here is my implementation

$("#itemTable label.item-label").kendoDraggable({
                hint: function (element) {
                    var clone = $(element).clone();
                    $(clone).css('border', "1px solid black");
                    $(clone).css('width', 'auto');
                    $(clone).css('background-color', '#ffffff');
                    return clone;
                },
                dragstart: draggableOnDragStart,
                drag: draggableOnDrag,
                dragend: draggableOnDragEnd,
                dragcancel: draggableOnCancel
            });

            $("#itemTable tbody tr td").kendoDropTarget({
                dragenter: droptargetOnDragEnter,
                dragleave: droptargetOnDragLeave,
                drop: droptargetOnDrop
            });

            function droptargetOnDrop(e) {
                console.log("drop");
                console.log(e);
                $(e.draggable.currentTarget).appendTo($(e.dropTarget[0]));
            }



Thanks   

Hello,

I have noticed a bad performance issue with the export mechanism of a SpreadSheet, more precisely with the ".toJSON()" function.

If I have, for example, a Workbook with 1 Sheet which has 5000 rows and 5000 columns, and you call ".toJSON()" on that sheet, it will take around 1 minute to process it, even if the sheet is empty (for 10000 rows and 10000 columns it takes around 4 minutes). The main issue is that when data is collected to be exported it iterates over all columns and rows even if they do not have any data.

Can there be made a fix in which the iteration is only made over the cells / property bags that actually have any data?

Here is an example with 5000 rows and columns which it will take around 1 minute to export the data: https://dojo.telerik.com/iYenOJoq/2

Thank you!

Hi i am using kendo jquery editor in my angular 4 application, but output is not as expected. following is my code and output file screenshot is attached below

*app.module.ts*

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FilterPipe} from './filter.pipe';
import { Pipe, PipeTransform } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';
import '@progress/kendo-ui';

import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent,
FilterPipe
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

*app.component.ts*

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

declare var kendo: any;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit{

@ViewChild('editor') htmlEditor: ElementRef;
encodedStr: any;

ngOnInit() {}

ngAfterViewInit() {
kendo
.jQuery(this.htmlEditor.nativeElement)
.kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
}
}

*app.component.html*

<div id="example">
<textarea #editor rows="10" cols="30" style="height:440px;widhth 100%" aria-label="editor" >
&lt;p&gt;&lt;img src=&quot;../content/web/editor/kendo-ui-web.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt;
&lt;p&gt;
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
accessibility standards and provides API for content manipulation.
&lt;/p&gt;
&lt;p&gt;Features include:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Text formatting &amp; alignment&lt;/li&gt;
&lt;li&gt;Bulleted and numbered lists&lt;/li&gt;
&lt;li&gt;Hyperlink and image dialogs&lt;/li&gt;
&lt;li&gt;Cross-browser support&lt;/li&gt;
&lt;li&gt;Identical HTML output across browsers&lt;/li&gt;
&lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;
Read &lt;a href=&quot;http://docs.telerik.com/kendo-ui&quot;&gt;more details&lt;/a&gt; or send us your
&lt;a href=&quot;http://www.telerik.com/forums/&quot;&gt;feedback&lt;/a&gt;!
&lt;/p&gt;
</textarea>

<button (click)="getData(editor.value)">GetData</button>

</div>