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

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

9 Answers 466 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Umair
Top achievements
Rank 1
Umair asked on 07 Mar 2016, 08:36 AM

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?

9 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Mar 2016, 04:22 PM

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!
 
0
Umair
Top achievements
Rank 1
answered on 09 Mar 2016, 07:26 AM
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. 
0
Boyan Dimitrov
Telerik team
answered on 10 Mar 2016, 03:13 PM

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!
 
0
Umair
Top achievements
Rank 1
answered on 11 Mar 2016, 06:03 AM

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. 

0
Boyan Dimitrov
Telerik team
answered on 14 Mar 2016, 02:54 PM

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!
 
0
Kieran
Top achievements
Rank 1
answered on 22 Oct 2018, 02:43 PM

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? 

0
Kieran
Top achievements
Rank 1
answered on 22 Oct 2018, 04:05 PM

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

0
Boyan Dimitrov
Telerik team
answered on 24 Oct 2018, 11:53 AM
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.
0
Kieran
Top achievements
Rank 1
answered on 05 Nov 2018, 12:32 PM

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 

Tags
Integration with other JS libraries
Asked by
Umair
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Umair
Top achievements
Rank 1
Kieran
Top achievements
Rank 1
Share this question
or