We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

118649 Mar 27,2015 08:56 PM UTC Apr 3,2015 09:25 AM UTC ASP.NET MVC 10
loading
Tags: Grid
Aaron
Asked On March 27, 2015 08:56 PM UTC



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 [Syncfusion]
Replied On March 30, 2015 02:19 PM UTC

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
Replied On March 30, 2015 09:18 PM UTC

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 [Syncfusion]
Replied On March 31, 2015 01:41 PM UTC

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
Replied On March 31, 2015 06:50 PM UTC

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 [Syncfusion]
Replied On April 1, 2015 12:11 PM UTC

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
Replied On April 1, 2015 02:31 PM UTC

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
Replied On April 1, 2015 04:02 PM UTC

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 [Syncfusion]
Replied On April 2, 2015 02:00 PM UTC

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
Replied On April 2, 2015 03:42 PM UTC

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 [Syncfusion]
Replied On April 3, 2015 09:25 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;