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

[Umair]

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?

[Boyan Dimitrov]

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

 

 

[Umair]

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. 

[Boyan Dimitrov]

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

 

 

[Umair]

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. 

[Boyan Dimitrov]

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

 

 

[Kieran]

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? 

[Kieran]

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

[Boyan Dimitrov]

Hello,

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

Regards,
Boyan Dimitrov
Progress Telerik

[Kieran]

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