I'm working with Kendo UI Grid and I want to know if it is possible to have both column and row headers, like this:

                      colHeader1    colHeader2    colHeader3

rowHeader1

rowHeader2

rowHeader3

My grid:

$("#dataGrid").kendoGrid({

    editable: true,

   columns: [{ field: "name", title: "Name" },{ field: "age", title: "Age" }],

   dataSource: _dataSource()});

var _dataSource = function () {

   return new kendo.data.DataSource({

                transport: { read: { type: "GET", crossDomain: true, url: url + "person", dataType: "json"}},

                 schema: { data: "data", total: "total"}});};

My grid datasource will always have 30 records (fixed).

Hello everyone!

Is it possible to bind some of the fields in the grid´s datasource to a marker layer on a map?

For example:

For every registry in my grid, take "Text", "longitude" and "latitude" fields and bind them to a markers layer on a map, "text" being the marker's title, and ["longitude", "latitude"] being the marker's latlng.

Thank you in advance for your help.

Hi,

Scrolling with the finger does not work with the latest release for us (it did before); although scrolling with a pen still does work.

We're using Kendo UI mobile angular, on Win10 tablets running MS Edge in tablet-mode.

We had exact the same issue with a previous Kendo UI version. Then came a version where finger-scrolling *did* work. With the latest release (Kendo UI Q1 2016) finger-scrolling does not work for us again.

Does someone have the same issue or can help?

Regards

Kasimier Buchcik

Hi, how can i export grid to pdf with multiple pages without setting pageSize. My grid has 400 rows.

this is what i am using now

  function exportPDF() {         var grid = $("#MainGrid").data("kendoGrid");         var progress = $.Deferred();         grid.dataSource.pageSize(32);         grid._drawPDF(progress)             .then(function(root) {                 return kendo.drawing.exportPDF(root, {                     multiPage: true                 });             })             .done(function(dataURI) {                 kendo.saveAs({                     fileName: "SP Orders_" + getCurrentDate() + ".pdf",                     dataURI: dataURI                 });                 progress.resolve();             });

        globControls.btnPdf.kendoButton({             click: function (e) {                 if (rowCount > 0) {                     exportPDF();                     //set back pageSize//                    var dataSource = $(".k-grid").data("kendoGrid").dataSource;//                    dataSource.pageSize(dataSource.total());                     // globControls.mainGrid.data("kendoGrid").saveAsPDF();                 } else {                     e.preventDefault();                 }             }         });

I have a detail page with an edit button that will load a modal for editing the content. I have thought of 3 ways to handle this and am looking for the best solution. 

The view returns the object and so right now I have: 

@Html.TextboxFor(m => m.ContactName, new { @data_bind = "value: contactName"})

In the javascript I have:

 var contactViewModel = kendo.observable({
    contactName = $('#ContactName').val()

}

My question is: What is the best way to load a page using MVVM. Or what is the preferred pattern:

1. Just like I have above. am passing the model to the view from the action and using the html wrappers. I then set the values of the viewmodel to the same input (this seems like it could cause recursive issues?)

2. i create hidden form fields for the initial value and then use an init function I would call on page load that loads the elements. 

@Html.HiddenFor(m => m.ContactName)

<input data-bind="value: contactNmae" />

  var contactViewModel = kendo.observable({
    contactName = null,

    init = function() {

         contactViewModel.set("contactName", $('#ContactName').val();

    }
}

3. I would just return an empty view and then use an ajax call to load the viewmodel:

<input data-bind="value: contactName" />
  var contactViewModel = kendo.observable({
    contactName = null,
    init = function() {

         $.ajax(options).done(function (data) {
                if (data.success === true) {
                    contactViewModel.set("contactName", data.contactName;
            });
         
    }
}

I know all 3 of these are valid options. I guess my question is really what is the preferred way or recommended way of loading a page and using the mvvm pattern with the Kendo library? 

I'm fairly certain nobody will be able to help with this bug, but since we're all pretty much out of ideas about what could be causing this here, figured we'd give it a shot.

 We have four different environments here--Dev, Alpha, Beta, and Production.  The strange behavior in question is that the optionLabel's are not showing up in Alpha environment, but we cannot reproduce this in Dev--they work properly in Dev.  In Alpha, the select element has all the correct <option> tags included, including the optionLabel, but is missing the element that Kendo creates for the optionLabel in the DOM:

Dev kendoDropDownList config:

 __kendo_devtools_id: 29
_arrow: kendoJQuery.fn.init[1]
_busy: null
_cascadeTriggered: true
_errorHandler: ()
_events: Object
_focusInputHandler: ()
_focused: kendoJQuery.fn.init[1]
_initial: null
_initialIndex: null
_inputWrapper: kendoJQuery.fn.init[1]
_isSelect: true
_old: ""
_oldIndex: 0
_open: false
_presetValue: false
_prev: ""
_request: false
_requestEndHandler: ()
_requestStartHandler: ()
_text: anonymous(d /**/)
_value: anonymous(d /**/)
_word: ""
dataSource: kendo.data.DataSource.extend.init
element: kendoJQuery.fn.init[1]
list: kendoJQuery.fn.init[1]
listView: kendo.ui.DataBoundWidget.extend.init
ns: ".kendoDropDownList"
optionLabel: kendoJQuery.fn.init[1]
optionLabelTemplate: anonymous(data /**/)
options: Object
popup: Widget.extend.init
selectedIndex: 0
span: kendoJQuery.fn.init[1]
ul: kendoJQuery.fn.init[1]
valueTemplate: ()
wrapper: kendoJQuery.fn.init[1]
__proto__: base

Alpha kendoDropDownList config (Uses Kendo minified script):

__kendo_devtools_id: 1063
_arrow: I.fn.init[1]
_busy: null
_cascadeTriggered: true
_errorHandler: ()
_events: Object
_focusInputHandler: ()
_focused: I.fn.init[1]
_initial: null
_initialIndex: null
_inputWrapper: I.fn.init[1]
_isSelect: true
_old: "1967"
_oldIndex: 1
_open: false
_presetValue: false
_prev: ""
_prevent: true
_request: false
_requestEndHandler: ()
_requestStartHandler: ()
_text: anonymous(d /**/)
_value: anonymous(d /**/)
_word: ""
dataSource: i.data.DataSource.extend.init
element: I.fn.init[1]
list: I.fn.init[1]
listView: s.ui.DataBoundWidget.extend.init
ns: ".kendoDropDownList"
optionLabel: I.fn.init[0]
options: Object
popup: o.extend.init
selectedIndex: 1
span: I.fn.init[1]
typing: false
ul: I.fn.init[1]
valueTemplate: ()
wrapper: I.fn.init[1]
__proto__: i

As you can see, the optionLabel field outside of the options object, doesn't find the element it needs in Alpha, because it isn't there.  Both Dev/Alpha environments are on the 2016 release of Kendo; Production is on 2015, and the optionLabels are working correctly.  If anybody has any clues or inklings as to what would be causing this, it would be immensely helpful--thanks!

Here's the config for the kendoDropDownList:

Hi,

     I would like to check if there are any means that would allow me to draw lines on the tile layer? I was looking at this example 

http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location and would need lines to be drawn on top of the tile layer instead of them being drawn over the shape layer.

 Best Regards,

CH

Hey guys,

So I have this example where I bind an array to my datasource that contains 2 events:  http://dojo.telerik.com/omEHa

 When I doubleclick any of those 2 events in the scheduler and then press 'Cancel' they still appear in the scheduler window afterwards.

However, this is not the case with manually made events in the scheduler:

I make a new event manually (by double clicking somewhere empty), give it a title and then press save.Then I doubleclick that new event and press cancel in the edit form immediately. It will cause the new event to be removed. How do I prevent that?

I have a kendoGrid where I defined it like this:

 editable: {mode : 'popup', template: kendo.template($("#ID_OF_EDIT").html())},

It's works fine, but inside my template there is a field which I'd lke to use a kendoNumericTextBox.

The question is, how can I set this property?

In the examples I only find this way: $("#ID_FIELD").kendoNumericTextBox(), but I'm not able to use it with grid. How can I do it?