Telerik Grid (Error Handling + MasterView)

[Carlos]

Hi,

I have a a form with a couple of fields and a kendo grid , and im implementing my own custom navigations using the enter and tabe keys.

I got the navigation inside of the form working perfectly, however im having some problems tso i would like to get some assistance to help me acomplish a few things, namely :

1 -Open grid on focus : If the cursor is on the last field on my form (the field just before the grid), and i press tab, i would like to open the last line on the grid on edit mode. However i cannot catch the focus event on the grid.

2 -If a row on the grid is selected, i cannot put that row on edit mode by pressing the enter key. I have already figured out how to catch the keydow event, but as it stands the grid only catches the keydown event when its already in edit mode. 

3 -I have the navigation inside the grid partially sorted out, the problem emerges when i get to the last column. When i'm exiting the last cell/colum on a row, i want to save the row and then add a new row to the grid. The complicated bit is that i only want the new row to be added if the current row is saved sucessfully.
In my code if the row is valid i call the save row method.

if( grid.editable && grid.editable.validatable.validate()){

grid.saveRow();

// follow up logic

}

However dispite of the row validation returning true, sometimes the validations on the server side still fail. So far I have no problem displaying the errors returned by the ModelState inside the grid on the respective fields. I want the grid to keep that row, selected, open, and in edit mode displaying the validations errors when the model state is not valid. But if there are not any erros i would like to close the current row ro be close and a new row to be added.

The issue here is that the error even is part of the datasource and not part of the grid, so i don't really know here to put that logic; especially because i also do not know how to check if the saveRow() method returned any errors (from the server side) or executed sucessfully.

<p>Eg : <br>if(grid.dataSource.saveRow(()){    <br>//current row is saved + new row is added. <br> } <br>//else will be handled by the grid error handler</p><p><div class="reCodeBlock" style="border:solid 1px #7f9db9;width:;height:;overflow-y:auto;"><div style=" background-color: #fff;"></div></div></p>

Or check if the error handler executed, and do not do anything, but if the error handler did not execute do X, Y and Z?

 

4 - As i said before my grid is part of a master form, and it is required that the grid is submited at once with the form, therefore i do not want the grids to immediatly propagate the changes to a remote location in case of insert, update or delete. But at the same time i do not want the changes teh users make on the grid to be reverted in case of a datasource.read() or grid.cancelChanges(). So i would like to have the data saved on the grid, just do not want it to be saved to the db before the data on the form is saved.


Thanks in advance for your assistance.

[Stefan]

Hello Carlos,

Regarding the questions:

Question 1 and 2 are related. As the Grid does not have tabindex the focus and the keydown event will not be triggered. I can suggest manually adding the tabindex attribute to the Grid table element, and the desired events will be fired. 

3) I can suggest checking this example for adding new rows when tabbing out of the last one. As adding a new row is a client operation it will be compleated faster than the response from the server, so you should add custom loading animation until the response from the server is received. The adding of the new row can be executed on the Ajax success function:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/add-row-when-tabbed-out-of-last-row

4) When a specific method does not have to be fired you can use the preventDefault() method. Still, when the read methods is called, the Grid will re-render with the new data from the server and any unsaved changes will be cleared. The options in this scenario the prevent the default read behaviour, save the current data of the Grid on the client, manually call the server for the new data, and populate the Grid with the combination of the old and new data. To retrieve the Grid' data and then set the new one, I can suggest the data method of the DataSource:

http://api.jquery.com/event.preventDefault/

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-data

As the scenario is very specific and it is based on custom implementation, it is not officially supported by the Kendo UI Grid and its DataSource instance.

In case you would like to benefit from our technical assistance for the implementation, I can recommend our Professional Services - they can provide development consulting, tailored solutions and custom features, which are normally not supported and are specific to your needs:

http://www.telerik.com/professional-services

Regards,
Stefan
Telerik by Progress