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

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

    Posted 07 Mar 2016 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
    2062 posts

    Posted 08 Mar 2016 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. Umair
    Umair avatar
    6 posts
    Member since:
    Feb 2016

    Posted 09 Mar 2016 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. 
  4. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 10 Mar 2016 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!
     
  5. Umair
    Umair avatar
    6 posts
    Member since:
    Feb 2016

    Posted 11 Mar 2016 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. 

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 14 Mar 2016 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!
     
  7. Kieran
    Kieran avatar
    8 posts
    Member since:
    Apr 2018

    Posted 22 Oct 2018 in reply to Boyan Dimitrov Link to this post

    Hi,

    I am using an example like this one: http://dojo.telerik.com/ofADe and it works great. 

    I now want to reload the data in the grid based on clinking a button external to the grid. 

    I have tried: 

         mainGridOptions.dataSource2.read();
         mainGridOptions.dataSource2.refresh();

    but the grid does not refresh, can you provide an example of how to do this? 

  8. Kieran
    Kieran avatar
    8 posts
    Member since:
    Apr 2018

    Posted 22 Oct 2018 in reply to Kieran Link to this post

    Hi,

    Just to note, when I reload the data, I want to refresh the grid with a different/new set of data from the database (depending on a text value entered by the user in an input field) , each time the grid is refreshed. 

    Thanks

  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 24 Oct 2018 Link to this post

    Hello,

    Please review the following example that shows how to refresh the grid data by clicking on a button. 

    Regards,
    Boyan Dimitrov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Kieran
    Kieran avatar
    8 posts
    Member since:
    Apr 2018

    Posted 05 Nov 2018 in reply to Boyan Dimitrov Link to this post

    Hi Boyan,

    Thank you for your help.

    Your dojo helped as I needed the code 
     
     $scope.mygrid.refresh();

    to get my solution working

    Thanks again 

Back to Top