How to bind ModelState Error to Sync Fusion Grid for inline Editing/Updating ?

[Aaron]

We have a requirement  that all validation must be done server side.     This means that all of our grid controls must first submit to the    controller and then  display the errors for the attempted add/update   to the grid. 

Is this possible with the Syncfusion grid ?

 @(Html.EJ().Grid<RuleViewModel>("Rules")

                                .Datasource(ds => ds.Json(Model.Rules)

                                         .InsertURL(@Url.Action("AddEditRule", "Admin"))

                                         .UpdateURL(@Url.Action("AddEditRule", "Admin"))

                                     .Adaptor(AdaptorType.RemoteSaveAdaptor))

                                .AllowSorting()

                                .EditSettings(edit =>

                                {

                                    edit.AllowAdding()

                                        .AllowEditing()

                                        .AllowDeleting()

                                    .ShowDeleteConfirmDialog(true);

                                })

        .ToolbarSettings(toolbar =>

        {

            toolbar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

            });

        })

..... columns declared

[Sellappandi Ramu]

Hi Aaron,

Thanks for using Syncfusion products.

Based on your request we have created a sample by using model state error message to grid editing. The sample can be downloaded from following link:

Sample Link: http://www.syncfusion.com/downloads/support/forum/118649/EJGrid1388402132.zip

In the above sample we have used actionBegin event to get the error list from controller by using AJAX method and show that error message in ejDialog box. Please refer the following code snippet.

[Index]

@(Html.EJ().Grid<EJGrid.Models.EmployeeView>("Editing")

.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.parentData).UpdateURL("/Home/Update").InsertURL("/Home/Add").RemoveURL("/Home/Remove").Adaptor("remoteSaveAdaptor"))

.AllowPaging()

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

.PageSettings(pagee => pagee.PageSize(5))

.Columns(col =>

{

col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

col.Field("FirstName").HeaderText("First Name").Width(100).Add();

col.Field("Title").Width(120).Add();

col.Field("City").Width(100).Add();

col.Field("Country").Width(100).Add();

})

.ClientSideEvents(eve => { eve.ActionBegin("save"); })

)

@(Html.EJ().Dialog("ErrorList").ShowOnInit(false).Title("Error List"))

<script type="text/javascript">

var flag = true;

function save(args) {

if (args.requestType == "save" && flag) {

flag = true;

var record = args.data;

args.cancel = true;

$.ajax({

url: "/Home/Validate",

type: "POST",

data: record,

success: function (data) {

var errorlist = JSON.parse(data);

var i;

if (errorlist.length) {

args.cancel = true;

var str = "";

$.each(errorlist, function (index, error) {

str += "<tr><td>" + error + "</td></tr>";

});

$("#ErrorList").html("<table>" + str + "</table>");

$("#ErrorList").ejDialog("open");

}

else {

var gridobj = $("#Editing").data("ejGrid");

gridobj.endEdit();

flag = false;

}

},

error: function (e) {

args.cancel = true;

}

});

}

if (flag == false)

flag = true;

}

</script>

[controller]

public ActionResult Validate(EditableOrder order)

{

if (!ModelState.IsValid)

{

List<string> errorlist = new List<string>();

foreach (ModelState modelState in ModelState.Values)

{

foreach (ModelError error in modelState.Errors)

{

errorlist.Add(error.ErrorMessage);

}

}

return Content(new JavaScriptSerializer().Serialize(errorlist));

}

return Content("true");

}

Please try the above sample and get back to us if you have any concern.

Regards,

Sellappandi R

[Aaron]

the javascript lines

var gridobj = $("#Editing").data("ejGrid");

gridobj.endEdit();

flag = false;

give me an error while trying to process gridobj.endEdit();     the error is 


Uncaught TypeError: Cannot read property 'lastChild' of nullej.web.all.min.js:10 t.widget.sendDataRenderingRequestej.web.all.min.js:10 t.gridFeatures.common._processDataej.web.all.min.js:10 (anonymous function)jquery-2.1.3.js:3094 jQuery.Callbacks.firejquery-2.1.3.js:3206 jQuery.Callbacks.self.fireWithej.web.all.min.js:10 (anonymous function)

[Sellappandi Ramu]

Hi Aaron,

Could you please share the following information to us to sort out the cause of the issue and provide you the solution as early as possible?

1. Share the scenario of the issue and the version of the Essential Studio which you have currently using.

2. Please provide the complete grid code to us for sort out the cause of the issue.

3. Share the issue reproducing sample or reproduce the issue in attached sample which is updated in our previous update of this incident.

Please get back to us with the mentioned details.

Regards,

Sellappandi R

[Aaron]

I'm using Syncfusion  Version 12.4.0.24

I cannot open and run your sample due to me not having the    .....34  version assemblies of SyncFusion.

The error comes from  javascript line    gridobj.endEdit();

in the following function from the AJAX request 

I display the error messages coming from the validation but I cannot get the grid to exit the edit mode.

if (errorlist.length) {

args.cancel = true;

var str = "";

$.each(errorlist, function (index, error) {

str += "<tr><td>" + error + "</td></tr>";

});

$("#ErrorList").html("<table>" + str + "</table>");

$("#ErrorList").ejDialog("open");

}

else {

var gridobj = $("#Editing").data("ejGrid");

gridobj.endEdit();

flag = false;

}

},

[Sellappandi Ramu]

Hi Aaron,

Thanks for the update.

We have created a sample in the Essential Studio 12.4.0.24 version but we were unable to reproduce the issue at our end. Please download the sample from the following location:

Sample Link: http://www.syncfusion.com/downloads/support/forum/118649/EJGrid-218772014.zip

Could you please share the data that you have returned in the controller? That will help us to sort out the cause of the issue and provide you the solution as early as possible.

Please try the above sample and get back to us with mentioned details.

Regards,

Sellappandi R

[Aaron]

thanks for the example.   It works on my end as well and I'll work to see what is different in the two environments  and if I can get the bug in the example project.

[Aaron]

The Controller Is testing and you can hit the page with the errors when trying to save  by going to 

/Testing/Index

I have cut out all the unimportant details as well.    I can get the validation messages but I cannot get the Grid to exit out of Edit Mode after validating.

Attachment: EJGridWithError_859e7d67.zip

[Sellappandi Ramu]

Hi Aaron,

Thanks for the update and provided the sample.

We have tested the provided sample in our end. The reported issue is reproduced due to mismatching format of BonusPercentage column. In that sample, you have declared the BonusPercentage as double format and BonusAmount as decimal format in GoalViewModel but the same BonusPercentage, BonusAmount columns have been added as date format in grid sample. Please refer the following modified code snippet.

if (Model.Goal.RuleType == (int)eRuleType.Total)

{

col.Field(Html.NameFor(m => m.Rules.First().BonusAmount).ToString())

.HeaderText(Html.DisplayNameFor(m => m.Rules.First().BonusAmount).ToString())

.Format("{0:D}")

.Add();

}

else

{

col.Field(Html.NameFor(m => m.Rules.First().BonusPercentage).ToString())

.HeaderText(Html.DisplayNameFor(m => m.Rules.First().BonusPercentage).ToString())

.Format("{0:P}")

.Add();

}

We have attached output screen shot for your provided sample and also attached modified sample the sample can be downloaded from following link:

Sample Link: http://www.syncfusion.com/downloads/support/forum/118649/EJGrid1713117275.zip

Please try the above sample and get back to us if you need any further assistance.

Regards,

Sellappandi R

[Aaron]

Oh goodness how embarrassing.  

That fixed my issue,   are there any methods to debug these issues,  as currently I'm relying on the javascript debugger  which doesnt give me any useful information  on these types of errors.

[Sellappandi Ramu]

Hi Aaron,

Thanks for the update and your feedback.

We have analyzed your provided sample and found the issue by manually. In that provided sample we found the BonusPercentage column as date format. Based on that we have searched the BonusPercentage property in model in that you have declared BonusPercentage as double, so we suggest that solution.

Please get back to us if you need any further assistance we are happy to assist you.

Regards,

Sellappandi R