Hi all,

These is an error when I'm trying to Ioad my Kendo Grid, with dynamic data, so i'm doing something very wrong!? - i'm getting a invalid "template Error" (I'm not using templates as i see it?)

 Error: Invalid template:'
<tr data-uid="#=data.uid#" role='row'>
<td  role='gridcell'>#:data.Code==null?'':data.Code#</td>
<td  role='gridcell'>#:data.Name==null?'':data.Name#</td>
<td  role='gridcell'>#:data.319==null?'':data.319#</td>
<td  role='gridcell'>#:data.383==null?'':data.383#</td>
<td  role='gridcell'>#:data.394==null?'':data.394#</td>
<td  role='gridcell'>#:data.396==null?'':data.396#</td>
<td  role='gridcell'>#:data.398==null?'':data.398#</td>
<td  role='gridcell'>#:data.466==null?'':data.466#</td>
<td  role='gridcell'>#:data.147==null?'':data.147#</td>
<td  role='gridcell'>#:data.149==null?'':data.149#</td>
<td  role='gridcell'>#:data.150==null?'':data.150#</td>
<td  role='gridcell'>#:data.148==null?'':data.148#</td>
<td  role='gridcell'>#:data.143==null?'':data.143#</td>
<td  role='gridcell'>#:data.421==null?'':data.421#</td>
</tr>

' Generated code:'var o,e=kendo.htmlEncode;with(data){o='
<tr data-uid="'+(data.uid)+'" role=\'row\'>
<td  role=\'gridcell\'>'+e(data.Code==null?'':data.Code)+'</td>
<td  role=\'gridcell\'>'+e(data.Name==null?'':data.Name)+'</td>
<td  role=\'gridcell\'>'+e(data.319==null?'':data.319)+'</td>
<td  role=\'gridcell\'>'+e(data.383==null?'':data.383)+'</td>
<td  role=\'gridcell\'>'+e(data.394==null?'':data.394)+'</td>
<td  role=\'gridcell\'>'+e(data.396==null?'':data.396)+'</td>
<td  role=\'gridcell\'>'+e(data.398==null?'':data.398)+'</td>
<td  role=\'gridcell\'>'+e(data.466==null?'':data.466)+'</td>
<td  role=\'gridcell\'>'+e(data.147==null?'':data.147)+'</td>
<td  role=\'gridcell\'>'+e(data.149==null?'':data.149)+'</td>
<td  role=\'gridcell\'>'+e(data.150==null?'':data.150)+'</td>
<td  role=\'gridcell\'>'+e(data.148==null?'':data.148)+'</td>
<td  role=\'gridcell\'>'+e(data.143==null?'':data.143)+'</td>
<td  role=\'gridcell\'>'+e(data.421==null?'':data.421)+'</td>
</tr>
';}return o;'

 I have tryed to simplify my grid, but still same error.., -The key elements of the code looks like this:
in script;
      kendo.destroy($('#objects_search_grid'));
            $('#objects_search_grid').kendoGrid({
                dataSource: new kendo.data.DataSource(gridListJson),
                groupable: true,              
                columnMenu: true,
                filterable: true,
                columns: col,        
            });

var gridListJson = JSON.stringify(objlist); 
gridListJson =
[{"143":"test 23","147":"I60","148":"A1","149":"","150":"s2","319":"","383":"","394":"","396":"","398":"","421":"","466":"","Code":"TEST","Name":"TEST"},{"143":"","147":"","148":"","149":"","150":"","319":"","383":"","394":"","396":"","398":"10.000","421":"","466":"","Code":"TEST","Name":"TEST"},{"143":"","147":"","148":"","149":"","150":"","319":"","383":"","394":"CCS Del af produkt","396":"2","398":"","421":"Projectspine.com her finder du også et link bips.dk","466":"Primære bygningsdele","Code":"TEST","Name":"TEST"}] 

This is how I make my Columns(col) dynamic -> I use id as 'field' and name as 'title'  -> The grid shows the column titles correct before failure. So the grid only shows the titles after loading the page.

// First 2 columns are hardcoded - then rest is looped into column objects
var col = [{ field: "Code", title: "Code", hidden: false }, { field: "Name", title: "Name", hidden: false }];
            for (var i = 0; i < data.propertyItems.length; i++) {
                var coldata = {};
                
                coldata["field"] = data.propertyItems[i].Key;
                coldata["title"] = data.propNames[data.propertyItems[i].Key].trim();
                coldata["hidden"] = false;
                          
                col.push(coldata);
            }

Any help is appreciated thanks.

Cheers
/Martin

Hi,

Attached is a file called Unresponsive grid, which shows the result of the code below. As you can see, the text in the Fp column is too long for that column and runs off the screen. Is there a way to make the grid more responsive, for example, locking the first column so that a horizontal scroll bar appears to scroll across the subsequent columns like in the file, responsive grid.

 <div class="row " style="max-width: 98%">
    <div class="columns">
        <div class="full-width">
            @(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>()
                .Name("grid")
                .HtmlAttributes(new { style = "table-layout: fixed, height: 550px;" })
                .Columns(columns =>
                {
                    columns.Bound(c => c.Id).Width(1000);
                    columns.Bound(c => c.Name).Width(2000);
                    columns.Bound(c => c.Email).Width(5000);
                    columns.Bound(c => c.Ap).Width(5000);
                    columns.Bound(c => c.Bp).Width(5000);
                    columns.Bound(c => c.Cp).Width(5000);
                    columns.Bound(c => c.Dp).Width(5000);
                    columns.Bound(c => c.Ep).Width(5000);
                    columns.Bound(c => c.Fp).Width(200);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("T_Read", "Test"))
                )
                //.Groupable()
                .Sortable()
           )
        </div>
    </div>
</div>

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