Grid CRUD Interface with Yii2 Backend

[Stephan Schrade]

Hi support,

as Yii2 does not support the OData Interface :-( I have to create my own interface in order to make CRUD operations possible.

While I can to this easily with a normal read request, I don't know how to make CREATE, DELETE etc. possible.

What actions with which parameters are necessary on the server side.

Here is my example of a normal read action on the server side:

public function actionIndex()

{

$searchModel = new AthletsSearch();

$request = Yii::$app->request->queryParams;

isset($request['$skip']) ? $skip = $request['$skip'] : $skip = 0;

isset($request['$top']) ? $top = $request['$top'] : $top = 1;

$page = intdiv($skip, $top);

// $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

$dataProvider = $searchModel->search([]);

$dataProvider->setSort(['defaultOrder' => ['birthyear' => SORT_DESC, 'gender' => SORT_ASC, 'lightweight' => SORT_DESC, 'surname' => SORT_DESC, 'name' => SORT_DESC]]);

$dataProvider->pagination = ['pageSize' => $top];

$dataProvider->pagination->page = $page;

$returnData['Items'] = $dataProvider->getModels();

$returnData['Count'] = $dataProvider->getTotalCount();

$response = Yii::$app->response;

$response->format = \yii\web\Response::FORMAT_JSON;

$response->data = $returnData;

return $response;

}

Can you please give me some links to a good documentation of the Data interface?

Unfortunately there is only on Data extension for Yii2 available but this dies not work very well.

Or would it be better to write my own adaptor?

Is there a REST adaptor for the Yii2 framework available?

TIA Stephan

[Thavasianand Sankaranarayanan]

Hi Stephan, 

Thanks for contacting Syncfusion support. 

From your query, we suspect that you want to handle EJ2-Grid CRUD action in Yii2 back-end (PHP framework). But unfortunately, our EJ2-DataManager does not have support in PHP framework. Also, we would like to inform that we will generate and pass the queryString (based on the Grid actions) from the Grid while perform the CRUD action with ODataV4Adaptor. So, you need to handle all the Grid actions by yourself based on this queryString in your backend. Please refer the below kb to know more details about how to use EJ2-controls in PHP, 

https://www.syncfusion.com/kb/10280 

While using ODataV4Adaptor you can get the request like as below screenshot, 

Editing: 

 

Adding: 

 

Deleting: 

 

 

 

If we misunderstood your query, please share more details about your requirement. This will help us to provide a better suggestion for your requirement as early as possible. 

Regards, 

Thavasianand S. 

[Stephan Schrade]

Thank you very much for your quick and detailed answer.

What responses I have to send back to the syncfusion framework after invoking the actions in my backend?

How does this work, if I use the local data store and change several records?

If I do edit several rows in the grid the rows (records) are getting 'dirty'.

What queries are invoked to update the data and/or to delete these records?

TIA Stephan

[Seeni Sakthi Kumar Seeni Raj]

Hi Stephan, 

Query #1: What responses I have to send back to the Syncfusion framework after invoking the actions in my backend? 

 

Initial render: At the initial Grid rendering, you need to return the result like ({result: [{..},{..}], count: total records count}) this format. 

Edit: While editing, you need to return edited object from controller to Grid. 

Add: While adding, you need to return newly added object from controller to Grid. 

Delete: No need to return any values while perform delete action. 

Query #2: How does this work, if I use the local data store and change several records? 

While using this custom binding concept, the grid expects an object from your service and the emitted value should be an object with properties result and count. 

 

At the initial Grid rendering please call your service within the load event of the Grid and return the result like as “{result: […], count: …}” format to Grid. If you want to perform any Grid actions (like CURD, sorting, filtering, paging, grouping) then we suggest to use Grid dataStateChange and dataSourceChanged events. For grid actions such as paging, grouping, sorting, etc., the dataStateChange event is invoked.  

The dataSourceChanged event is triggered to update the grid data. So, we suggest you to use this event to call your service while perform the CRUD actions in Grid. You can perform the CRUD operation by using this event and you can get the changed records details in this event arguments. Finally you need to call the Grid endEdit method to indicate the completion of save operation.  

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#load 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#datastatechange 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#datasourcechanged 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#endedit 

Query #3: If I do edit several rows in the grid the rows (records) are getting 'dirty'. 

If you want to perform edit the multiple row at same time, then we suggest you to use “Batch” edit mode to achieve this requirement. 

Demo: https://ej2.syncfusion.com/javascript/demos/#/material/grid/batch-editing.html 

Query #4: What queries are invoked to update the data and/or to delete these records? 

From this query, we suspect that you want to know which Grid events are invoke while perform update and delete action in Grid. If you have used “Normal” editing, then you can use actionBegin Grid event to get the edited records details. If you have used “Batch” editing, then you can use “beforeBacthSave”, “beforeBatchDelete” event to get the edited/deleted record details. 

If you have provide data a dataSource like ({result: […], count: …}) format, then you can use dataSourceChanged to get the edited records details. 

Refer the help documentation. 

Link: https://ej2.syncfusion.com/javascript/documentation/grid/edit/ 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforebatchsave 

Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#beforebatchdelete 

Regards, 

Seeni Sakthi Kumar S.