Kendo UI - AngularJS: How to bind a grid to an object on $scope?

6 posts, 0 answers
  1. Umair
    Umair avatar
    6 posts
    Member since:
    Feb 2016

    Posted 07 Mar Link to this post

    Hi, 

    I am in a bit of a trouble and need help

    I am trying to bind a Kendo UI Grid to an object on $scope instead of to kendo.data.dataSource. The grid shows the data (which is in the object) but if I change the data or add new row, the changes are not reflected in the $scope object. Why is that?

    My real problem is, I want to show two grids top & bottom and when the user selects a row from top grid, the bottom grid should be populated with the details. However, these details are already fetched and kept in the DataSource of the top grid (hence no transport section for bottom grid) because I want to be able to save any changes in batches.

    This is how I am binding my grids

    Top Grid

    <div
        kendo-grid="mainGrid"
      k-sortable="true"
      k-editable="true"
      k-selectable="'row'"
      k-filterable="true"
      k-resizable="true"
      k-scrollable='{ "virtual":true }'
      k-on-change="selected = dataItem"
      k-options="mainGridOptions"
      k-height="165">
    </div>

    Bottom Grid

    <div
      kendo-grid="detailGrid"
      k-editable="true"
      k-selectable="'row'"
      k-options="detailGridOptions"
      k-data-source="selected.Details"
      k-height="125">
    </div>

     

    This is how I add record to bottom grid

    $scope.detailGrid.dataSource.add();

     

    Can you help me with this?

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Mar Link to this post

    Hello Umair,

     

    Please refer to the Get Instances in Controller: Tag Directive article that shows how to use the  k-scope-field in order to reference a widget from the controller code. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Umair
    Umair avatar
    6 posts
    Member since:
    Feb 2016

    Posted 09 Mar in reply to Boyan Dimitrov Link to this post

    I am not trying to access grid from controller. I am trying to bind grid to an object in controller. Please read my question again. I am not sure how to further clarify what I have asked. 
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 10 Mar Link to this post

    Hello Umair,

     

    Indeed by using the approach described in the article you are able to bind/store the Kendo UI widget to $scope object. Please refer to the examples in the article that demonstrates this in action. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Umair
    Umair avatar
    6 posts
    Member since:
    Feb 2016

    Posted 11 Mar in reply to Boyan Dimitrov Link to this post

    It feels like I am asking for Apples and you are answering Bananas.

     

    I don't want to access grid widget from Controller. I want to use an object on $scope as data source for the grid. 

  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 14 Mar Link to this post

    Hello Umair,

     

    It seems that there was a misunderstand in our communication. Please refer to the http://dojo.telerik.com/ofADe example that shows how to attach the data source object to the scope and use it in the Kendo UI Grid configuration. 

     

    Regards,
    Boyan Dimitrov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET AJAX banner