Grid in AngularJS

[James]

I have an AngularJS app and am currently trying to insert a Kendo Grid.  I have a couple of questions about how to make this work.

1. I have a dropdown on the page that based on the selected value in that list, the grid should be updated for the information retrieved from the server for the selection.  I have tried to make my dataSource: data be an object in my model but do not get any results for that.  I have been able to use the following code to get my initial results but nothing when the selection changes.

       transport: {
                    read: function(e) {
                        waiverService.getCustomers($scope.model.customer.CustomerID)
                            .success(function(data, status, headers, config) {
                            e.success(data);
                        });
                    }
                }

  2. My second issue is I have several dropdown boxes on each row of the grid.  I have tried to use the information found in this example but I am getting a ReferenceError: getCategoryName is not defined.

 Can anyone provide help with either of these issues?

[Boyan Dimitrov]

Hello James,

 

 

Straight to the questions: 

 

   1. The reason for this behavior is that the Kendo UI Grid does not know that it should read its data when the DropDownList selection is changed. In this case you can call the read method of the DataSource when the selection is changed. 

 

   2. Please refer to the Kendo Grid custom editor with Angular JS "How to" article that demonstrates how to create custom editor in Kendo Grid using AngularJS. 

 

Regards,
Boyan Dimitrov
Telerik

 

 

[James]

I was able to use the read as you described by adding a watch to the field that is changing.

I was also finally able to get some of the dropdowns working by using the following format in my call

columns: [
                {
                    field: "CarrierID",
                    title: "Carrier",
                    editor: "<input kendo-drop-down-list k-data-text-field=\"'Value'\" k-data-value-field=\"'Key'\" k-data-source=\"model.Carriers\" ng-model=\"dataItem.CarrierID\"/>",
                    template: "#=getCarrierName(CarrierID)#",
}]

getCarrierName = function (key) {
            for (var idx = 0, length = $scope.model.Carriers.length; idx < length; idx++) {
                if ($scope.model.Carriers[idx].Key === key) {
                    return $scope.model.Carriers[idx].Value;
                }
            }
            return "";
        };

Instead of 

function getCarrierName(key) {
           for (var idx = 0, length = $scope.model.Carriers.length; idx < length; idx++) {
               if ($scope.model.Carriers[idx].Key === key) {
                   return $scope.model.Carriers[idx].Value;
               }
           }
           return "";
       };

Now I am having trouble with lists that are in the current dataItem being displayed.  Below are sample calls of what I am trying to do in my column definition but I get an error saying dataItem is undefined.

 

{
                    field: "RateGroupID",
                    title: "Rate Group",
                    editor: "<input kendo-drop-down-list k-data-text-field=\"'Name'\" k-data-value-field=\"'Id'\" k-data-source=\"dataItem.RateGroups\" ng-model=\"dataItem.RateGroupID\"/>",
                    template: function(RateGroupID, dataItem) {
                        return getRateGroupName(RateGroupID, dataItem);
                    },//"#=getRateGroupName(RateGroupID, dataItem.RateGroups)#"
                    filterable: false,
                },

How do I access an the dataItem in the template call?

[Boyan Dimitrov]

Hello James,

The function for the template does accept one parameter and this is the dataItem object. Please refer to the http://dojo.telerik.com/esEHE example. Please review the template function for the Category field. 

Regards,
Boyan Dimitrov
Telerik