I tried to hide the content with absolute position outside the screen.  But the A4 size pdf has no content.  I have tried dojo with this example and also nothing is printed.  What have I missed?  PDF has content only when it is not off screen.  Thanks.

<div id="content"  style="position: absolute;left: -100000px;top:0;width:800px;">
        This is <a href="a'>http://www.telerik.com">a non-clickable link</a>.
    </div>
    <script>
        var draw = kendo.drawing;
        draw.drawDOM($("#content"), {
            avoidLinks: true,
            paperSize: "A4"
        })
        .then(function(root) {
            return draw.exportPDF(root);
        })
        .done(function(data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "avoid-links.pdf"
            });
        });
    </script>

Hello, I'm having trouble binding my JSON data to my grid when using the transport / schema method.  I am able to bind my data to the grid when doing a JSON.parse (data) and manually selecting the datasource.data = data in my grid.

The code I am having trouble with is:

function listView(card) {
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Personnel/GetPersonnel",
                dataType: "json",
                type: "GET",
                contentType: "application/json"
            }
        },
        schema: {
            model: {
                id: "id",
                fields: {
                    firstName: { editable: false },
                    lastName: { editable: true }
                }
            }
        }
    });
    $(card).find('.kendo-grid').kendoGrid({
        dataSource: dataSource
    });
    dataSource.read();
}

I have been successful with the following implementation:

function kendoDataAsync(card) {
    $(card).find('.kendo-grid').each(function (i, ele) {
        var route = "/Personnel/GetPersonnel";

        $.getJSON(route).done(function (json) {
            var datas = new kendo.data.DataSource({ data: JSON.parse(json) });
            var grid = $(ele).data('kendoGrid');
            datas.read();
            grid.setDataSource(datas);
        });
    });
}

My JSON data looks like this BEFORE I do JSON.parse, which is where I believe my issue may lie:

"[{\"firstName\":\"Ron\",\"lastName\":\"Roles\",\"id\":\"1\"}]

AFTER a JSON.parse my data is a bit more familiar:

[ {

"firstName":"Ron",
"lastName":"Roles",
"id":1

} ]

Is my schema wrong?  Am I not binding correctly?

I am using Kendo Grid MVC and I need to be able to hook into the Read, Create, Update and Destroy events so that if my controller code returns an error of some sort, I can redirect to another page to handle the error. Are there any examples of the JavaScript and Controller code I need to have in place to do this?

Thanks very much!

Loading a spreadsheet using the method fromJSON

spreadsheet.fromJSON({

                sheets: sheet
            });

throws the error Uncaught RangeError: Maximum call stack size exceeded

Its a spreadsheet with 830 rows and 22 columns.

Is this error caused by to many cells or caused by to many formulars in the cells ? or perhaps some formular error ?

Hello, I'm trying to add an kendo AutoComplete into a kendo DropDownList (and a lot more, but for simplification I'll only talk about AutoComplete since everything else I want to do works). I've tried straight up injecting the HTML and I've tried putting it in a headerTemplate. Some kendo components work this way, like adding another DropDownList. While others like AutoComplete do not. Some (MulitSelect) behave very slowly, but still work. I made a small example of this in a dojo http://dojo.telerik.com/ovEJe/4 .

Could you help me out with a solution to get AutoComplete to work in a DropDownList? Or point me to some way to use a kendo DropDown that allows the developer to put whatever they want in it without having to use a DropDownList, pass it no data, and use headerTemplate or JQuery to inject custom HTML.

Thanks

Hi,

From the Kendo documentation look at this dojo which demonstrates 100% height, and open in IE with a window height small enough to generate the grid scroll bar.  You get 2 vertical scroll bars when you only get one in other browsers, e.g. Edge.

http://dojo.telerik.com/iHugEV

Is something wrong?

--

Scott

I have specific fields that users can customize their events with, if they add these fields, they dynamically show up in the event creation/edit popup... however, I am needing kendo autocomplete widgets for any lookup fields. What I am doing now is grabbing my event editor template, getting the html string of it, appending each field the user specified to it, thus dynamically adding fields. This places the items in the editor...  however, I try to instantiate a kendo autocomplete in the scheduler edit event as well as in the function that adds the html dynamically, and it doesn't work. All I get is a white text box instead of a kendo auto complete box and it has no data in it or any events bound to it. It is as if it simply cannot find these dynamically added elements in the editor html, even though a print of the html to the console shows they are very much there.

If I add an input element to my editor template in the template script, THEN instantiate a kendo autocomplete in the scheduler edit event, it will turn the input into an auto complete with all its events bound and everything and work fine, it is just it cannot properly set the dynamic html elements even though they should be in the editor template....

I am wondering if anyone has an idea on how to setup kendo widgets for dynamic elements in the event create/edit window, specifically an autocomplete box. My code creating dynamic elements is as follows:

function dynamicEditorTemplateLoad(fieldMap){
                    /*Dynamically creating editor fields -> Title, Owner, Start, End, Invite, and Descrip I think should all always be included*/
                    var editorTemplateString = $('#editor_template').html();
                    console.log(fieldMap);
                    var extraString = '';
                    var dynamicComponent = '';
                    var optString = '';
                    for(var i = 0; i < fieldMap.length; i++){
                    if(fieldMap[i].fieldType == 'PICKLIST'){
                            extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
                            dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist">\n';
                            optString = '';
                            for(var k = 0; k < fieldMap[i].picklistVals.length; k++){
                                if(k == 0){
                                optString += '\t\t<option value="'+fieldMap[i].picklistVals[k]+'" selected>'+fieldMap[i].picklistVals[k]+'</option>\n';   
                                } else{
                                optString += '\t\t<option value="'+fieldMap[i].picklistVals[k]+'">'+fieldMap[i].picklistVals[k]+'</option>\n';   
                            }
                            }
                            optString += '\t</select>\n</div>\n\n';
                            dynamicComponent = dynamicComponent + optString;
                    }
                        if(fieldMap[i].fieldType == 'STRING'){
                            extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
                        dynamicComponent = '\t<input id="'+fieldMap[i].fieldName+'Input" type="text" class="k-input k-textbox"/>\n</div>\n\n';
                    }
                        if(fieldMap[i].fieldType == 'REFERENCE'){
                      extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
                            dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist" style="width: 120px;">\n';
                            optString = '';
                            for(var k = 0; k < fieldMap[i].referenceList.length; k++){
                                if(k == 0){
                                optString += '\t\t<option value="'+fieldMap[i].referenceList[k]+'" selected>'+fieldMap[i].referenceList[k]+'</option>\n';   
                                } else{
                                optString += '\t\t<option value="'+fieldMap[i].referenceList[k]+'">'+fieldMap[i].referenceList[k]+'</option>\n';   
                            }
                            }
                            optString += '\t</select>\n';
                            var inputString = '\t<input id="'+fieldMap[i].fieldName+'SearchInput" style="width: 275px;"/>\n</div>\n\n';
                            dynamicComponent = dynamicComponent + optString + inputString;
                            
                        }
                    
                    extraString += dynamicComponent;
                        //editorTemplateString += extraString;
                    $('#editor_template').append(extraString);
                        extraString = '';
                        dynamicComponent = '';
                    }
                    console.log($('#editor_template').html());
                }

I call this function right at the beginning of my $(document).ready() function, so it adds these elements to the editor template before the scheduler or its datasource are even created, yet it is still not properly initializing the autocomplete widgets.

is there a limitation on the amount of data that can be exported using spreadSheet.saveAsExcel() ? I have a spreadsheet with 100 columns and 3500 rows. When I run this method the browser crashes? I am using Chrome Version 56.0.2924.87 (64-bit).

Thanks