grid detail template datasource angular

2 posts, 0 answers
  1. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 19 May 2015 Link to this post

    Using the kendo example for angular (http://demos.telerik.com/kendo-ui/grid/angular).

    I have a simple kendo ui grid setup (kendo ui and angularjs) with a detail template that retrieves the data properly for the detail template (can see the correct data returned in the browsers developer console, attached as screenshot ) ,

     <div>
        <div 
        kendo-grid
        options="homeGridOptions">  
            <div k-detail-template>
            <div kendo-grid options="detailGridOptions(dataItem)">
            </div>
            </div>  
        </div>
    </div>

     

    and in the angular controller

       $scope.homeGridOptions = {
            dataSource: $scope.userchartsDS,
            sortable: true,
            pageable: true,
            dataBound: function() {
                        this.expandRow(this.tbody.find("tr.k-master-row").first());
                    },
            columns: [
            { 
                field: "chartno",
                title: "Chart"
            }
            ]
        };

        $scope.chartsDS = new kendo.data.DataSource({
             transport: {
               read: {
                 url: "http://site.local/api/v1/index.php/user/home",
                 dataType: "json"
               }
             }
          });

        $scope.detailGridOptions = function(dataItem) {
                    return {
                        dataSource: {
                            type: "json",
                            transport: {
                                read: "http://site.local/api/v1/index.php/products/chart/" + dataItem.chartno + "/20100101/20150515"
                            },

                            filter: { field: "PRODUCT_NAME", operator: "eq", value: dataItem.chartno }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: true,
                        columns: [
                        { field: "PRODUCT_NAME", title:"chart", width: "56px" },
                        { field: "VERB_CODE", title:"verb code", width: "110px" },
                        { field: "PRODUCT_REF_EN", title:"product" },
                        { field: "VERB_NAME_EN", title: "Verb", width: "190px" }
                        ]
                    };
                };

    }]);

    but the detail template is not populating with the data.  I can see in batarang this information for the detail grids model

    { column:

    { encoded: true

    hidden: null

    field: PRODUCT_NAME title: Chart

    width: 56px

    template: #: data.PRODUCT_NAME  # } }

    Do I need to explicitly inject the detail template data source array value into the angular scope, it did not appear to be necessary  in the example?

     

  2. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 20 May 2015 in reply to Alex Link to this post

    Issue resolved by using http service for the detail template datasource:

     

        $scope.addChartsDS = function(dataItem) {
         $http.get("http://site.local/api/v1/index.php/products/chart/" + dataItem.chartno + "/20100101/20150515")
          .success(function(data) {
                  $scope.chartData = angular.fromJson(data);
              })
              .error(function(data,status) {
                  console.log(data);
              })
          ;
          return $scope.chartData;

    and

    for in the detailGridOptions:

     dataSource: $scope.addChartsDS(dataItem),

  3. Kendo UI is VS 2017 Ready
Back to Top