I have an Angular JS app.  When I browse to a new page and go back to the page with the grid, I receive the following error:

"Uncaught Error: Cannot call method 'value' of kendoDropDownList before it is initialized"

Datasource:
app.factory('giftService', ['coreSettings', function (coreSettings) { 
    var giftServiceFactory = {};
    var crudServiceBaseUrl = coreSettings.apiServiceBaseUri + "odata/Order";
    var ds = new kendo.data.DataSource({     
        type: "odata",
        transport: {
            read: {
                url: crudServiceBaseUrl,
                dataType: "json"
            }
        },
        batch: false,
        serverPaging: true,
        pageSize:10,
        serverSorting: true,
        serverFiltering: true,
        aggregate: [
               { field: "Amount", aggregate: "sum" }
        ],
        schema: {
            errors: function (response) {
                if (response.Errors) {
                    return (response.Errors);
                    this.cancelChanges();
                }
            },
            data: function (data) { return data.value; },
            total: function (data) { return data["odata.count"]; },
            model: {
                fields: {
               ​...
                }
            }
          
        },
        error: function (e) {
            return (e.xhr.responseText);
            this.cancelChanges();
        },
        success: function (e) {
            alert('Success!');
        }
    })

    giftServiceFactory.ds = ds;
    return giftServiceFactory;

}]);

Angular Controller:

 $scope.gifts = salesService.GetAllGifts();

    $scope.gridOptions = {
        toolbar:  ["excel"],
        excel: {
            fileName: "Exclusively Gifted Sales.xlsx",          
            filterable: true,
            allPages: true
        },
        sortable: true,
        selectable: true,
        reorderable: true,
        groupable: true,
        columnmenu: true,      
        pageable: {
            refresh: true,
            pageSizes: true,
            pageSize: 10,
            messages: {
                refresh: "Refresh the grid"
            }
        },
        filterable: true ,
        dataSource: $scope.gifts,
        columns: [
            { field: "PurchaserName", title: "Purchaser" },
            { field: "SendMethodPurchaser", title: "Purchaser Email" },
            { field: "RecipientName", title: "Recipient" },
            {
                field: "Amount", format: "{0:c}", aggregates: ["sum"],
                footerTemplate: "Total Amount: #= kendo.toString(sum, 'C') #",
                groupFooterTemplate: "Total : #= kendo.toString(sum, 'C') #"               
            },
            { field: "PurchaseDate", title: "Purchased", format: "{0:yyyy-MM-dd}" },
            { field: "SendDate", title: "Sent", format: "{0:yyyy-MM-dd}" },
            { field: "RedeemedDate", title: "Redeemed", format: "{0:yyyy-MM-dd}" }
        ]
    };


Do you have any suggestions as to what can be causing this behavior? When I remove the paging the issue does not occur.  Many thanks,

 

Jayme

​

 

I have a ListView, DataSource and Pager.  The DataSource queries the data from a remote source and there is a total function in the schema for the pager which works fine for the remote query.  The problem I'm having is if I apply a filter to the DataSource client-side, the pager is not updating to the new filtered total and is still using the full dataset total.  The ListView is displaying the filtered results and if I click next on the pager, it exceeds the end of the filtered set and crashes.

relayDataSource.filter = { field: "MakeModelID", operator: "equals", value: this.value() };

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

Is there a way to get the pager to work with client-side filtering on a remote dataSource?  Pager.refresh() doesn't get a filtered total and I prefer to limit the hits on the server by filtering client-side.

Thanks.

I am trying to change selection mode on button click. This code works for grid, but not for TreeList.

 

 that.treelist.options.selectable is changed, but behaviour in treelist is not.

I am working with AppBuilder.  Created a new app using the Kendo UI drawer navigation template.

I have a JSON file (originally in data folder but now at root) that looks like this:

app.js contains models for each of the views.  I am working on the agenda view:

agenda.html should display these items, but does not

I have defined the datasource about 10 different ways, based on posts in this and other forums.

I have plugged the JSON directly into the model, and that does display correctly, but is not suitable.

 What am I missing?

Thanks,
Scott

 

 

I am using SPA.  I want to have different theme for different controls e.g silver Grid, metro Tabstrip.  How can I do that?

Thanks.

Hi,

I have a problem with Filter Multi Checkboxes in the grid, as can be seen in the example below:

 http://dojo.telerik.com/Evuvu​

​When clicking on the header of the first column, the text of the checkbox is shown as a string,  instead of being treated as HTML. How can I avoid this behaviour?

Thanks in advance for any ideas.

Full error to post with code snippet:
Unhandled exception at line 53, column 10735 in http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'loaded' of undefined or null reference

kendo.all.min.js method throwing error: var i=e.loaded()



Code Snippet:  error is thrown when line 12 is called:  treelist.expand(row[i]);  TreeList has over 24 rows with child rows of data.

TreeListCollapseExpandChildRows: function(treeListName, expandType, direction)
{
    var treelist = $('#' + treeListName).data('kendoTreeList');
    // single row...
    if (expandType == "single")
    {
        var row = treelist.content.find('tr.k-treelist-group');
        for (var i = 0; i < row.length; i++) {
            switch (direction)
            {
                case "expand":
                    treelist.expand(row[i]);
                    break;
                case "collapse":
                    treelist.collapse(row[i]);
                    break;
            }
        }
   }
    else
    {
        // all rows and all their nested subrows ...
        var rows = treelist.content.find('tr.k-treelist-group', treelist.tbody);
        $.each(rows, function (idx, row) {
            switch (direction) {
                case "expand":
                    treelist.expand(row);
                    break;
                case "collapse":
                    treelist.collapse(row);
                    break;
            }
        });
    }
}

Hi!

I have a problem with combobox keyboard navigation, since up and down arrow keys trigger both the change and select event of the combobox and the desired functionality is for that to happen only if the selection is made by left mouse button down or Enter key. I've tried catching the keydown event in both the change and select events of the combobox but the keycode values aren't part of the values passed by the event.

Hi,

 Just new in Kendo UI Grid and have been working on SharePoint 2013 JSOM model for a while based on AngularJS SPA. I found out that the OOTB sample of Kendo UI leveraged a lot of REST API/OData as the data source. Although SP2013 has _api for REST support, I just wondering what would be the best approach if I would like to use SharePoint 2013 JSOM library.

I am currently evaluating this control and try to achieve a basic inline edit/delete function inside Kendo grid. can anyone point me an sample for leveraging SharePoint JSOM instead of REST api?

Thanks

Frank Chen

Hello,

 I would like to initialize the Kendo-Grid from an existing table, while using Filter Multi Checkboxes. So far, I can't find a way to do this. Is this possible or must we use a datasource?

Thanks in advance.