focus does not return to edited line with error

[lawrence greenberg]

In the grid, if the row is being editted and the user clicks on a different row, the update takes effect.  We like this feature instead of clicking the update icon.  If an error is detected in the stored procedure, we raise an error and then show the error in an alert.  This works nicely.  Unfortunately, if the user clicked another row, the focus is on the new row instead of the row where the error occurred.  Is it possible to keep the focus on the row being editted?  My code is below.  Please let me know if you need anything else.

Attachment: EventTypesView_9dafd2bf.zip

[Thavasianand Sankaranarayanan]

Hi Lawrence, 

Thanks for contacting Syncfusion support. 

Query: If the user clicked another row, the focus is on the new row instead of the row where the error occurred in the edit form.  Is it possible to keep the focus on the row being edited? 

 

We have analyzed your query and we suspect that you want to focus on the row, which show the validation error in the grid while clicking another row in grid. 

 

We have achieved your requirement using the keypress, keydown, click event of jquery. 

 

Refer the below code example. 

 

 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 

 

        ------------- 

 

       .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add(); 

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add(); 

           col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Format("{0:C}").ValidationRules(v => v.AddRule("range", "[0,1000]")).Format("{0:C}").Add(); 

             

        })) 

</div> 

 

<script type="text/javascript"> 

 

    $("#FlatGrid").on("keydown keypress click", function (args) { 

 

        var gridObj = $("#FlatGrid").ejGrid("instance");//create a grid instance 

 

        if ($("#FlatGridEditForm").length > 0 && gridObj.editFormValidate() == false) // editformvalidate method returns false when the validation error message throws 

 

            $("#FlatGridEditForm .e-error").eq(0).closest('td').find('input').focus();// get focusing the input element which is in the edit form  

 

    }); 

 

</script> 

 

 

We have prepared a sample and it can be downloadable from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/129840/ze/SyncfusionMvcApplication14-1066494431 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/editing#column-validation 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:editformvalidate 

Regards, 

Thavasianand S.