This is a migrated thread and some comments may be shown as answers.

Grid in AngularJS

3 Answers 65 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 23 Sep 2015, 02:26 PM

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?

3 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 25 Sep 2015, 07:44 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 25 Sep 2015, 02:23 PM

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?

0
Boyan Dimitrov
Telerik team
answered on 29 Sep 2015, 11:38 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
James
Top achievements
Rank 1
Share this question
or