How can I refresh my grids after update

[FranckSix]

I using this post to do my update : Save all changes with one request

It worked great but at on exception... how can I refresh my grid on postback ?

I using on my controller this signature :

[HttpPost]
public ActionResult Save(
   [DataSourceRequest] DataSourceRequest request,
   int idClient,
   [Bind(Prefix = "updated")] IEnumerable<MyViewModel> updatedModels,
   [Bind(Prefix = "new")] IEnumerable<MyViewModel> newModels,
   [Bind(Prefix = "deleted")] IEnumerable<MyViewModel> deletedModels)
{
   //Doing update and manage ModelState for errors

   var result = entities.ToDataSourceResult(request, ModelState, MyViewModel.FromEntite);
   return Json(result);
}

 

 

I want for each row:

• Keep dirty mode on errors ones
• Update Id for created ones
• Remove dirty status css on the success ones

I keep the javascript post and return same as the code in example help.

Thank you very much!

[FranckSix]

Just to clarify my request ...

I use the one-call update to avoid duplicates detections errors. My user enters duplicate data and we return the error. Until then everything is ok. Then my user deletes the duplicate entry (but he chooses the one that is in the DB). Save again. The duplicate detection blocks the update again. (The user does not understand because he has deleted the duplicate data).

The problem is that with the Kendo grid the updates are done in the following order
1 - Creations
2 - Updates
3 - Delete

Then the already existing data will interfere with the data to be created. To avoid this in our systems, we always do our deletes before any update. So new entries do not conflict with existing data.

To summarize if there is a way to change the order of processing records in the grid, I am open to suggestions.

[FranckSix]

If on the ajax return I do :
    grid.dataSource.read();

It works well overall, except that I want to keep the rows that failed to save. Ideally I would like the rows in error to keep their dirty state.

[Nikolay]

Hello Francis,

I suggest you enable the built-in Batch editing in your application which will not only enable saving all changes with one request but this way if even one row fails the server validation the whole transaction will be cancelled.

• https://demos.telerik.com/aspnet-mvc/grid/editing
• https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/editing/batch

Additionally, there is a project example demonstrating how server errors can be handled in the Grid.

• https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-handle-server-error

Let me know if further assistance is needed.

Regards,
Nikolay
Progress Telerik

[FranckSix]

Fine but my initial problem still intact. Duplicate will always be detected if I dont delete the duplicate record before I create the new one.

That is no possibility to ensure that delete records perform before any other updates ?

[Nikolay]

Hello Francis,

If you wish to invoke dataSource.read() in the ajax request I can suggest saving the ModelState and passing it back to the Read request. This way the dirty indicator will be retained. For example:

// Update Action Method
public ActionResult Orders_Update([DataSourceRequest] DataSourceRequest request, OrderViewModel order)
        {
            bool isValid = false;

            if (!isValid)
            {
                ModelState.AddModelError("'" + order.OrderID + "'", "This is my server error!");
            }
            TempData["state"] = ModelState;

            return Json(new[] { order }.ToDataSourceResult(request, ModelState));
        }

// ReadAction Method
public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request)
        {
            var result = Enumerable.Range(1, 50).Select(i => new OrderViewModel
            {
                .....
            });
            var modelState = (ModelStateDictionary)TempData["state"];

            return Json(result.ToDataSourceResult(request, modelState));
        }

Keep in mind that the above will require the clear the ModelState in case the data has been successfully updated so dirty indicators disappear.

Alternatively, I can suggest another approach: to use the built-in submit approach and modify the order the requests are executed.

.DataSource(dataSource => dataSource
     .Custom() // instead of Ajax()
     .Schema(schema =>
     {
         schema.Model(m => m.Id(p => p.ProductID)); // needed for editing
         schema.Data("Data"); // needed in order to read the data items from the action method using ToDataSourceResult()
         schema.Total("Total");
         schema.Errors("Errors");
     })
     .Batch(true) // required for InCell editing and for the Submit feature
    .Transport(transport =>
    {
        transport.Read(read =>
        {
            read.Url("/Grid/Editing_Read"); // specify where to read the data from
            read.Type(HttpVerbs.Post);
        });
        transport.Submit("onSubmit"); // specify client-side submit handler name
    }))

<script type="text/javascript">
    function onSubmit(e) {
         var data = e.data;
          console.log(data);
         // send batch update to desired URL, then notify success/error
 
        // updated, created and destroyed below should be arrays of the successfully modified data items. The Grid uses them to refresh its       state. Note that it is recommended to return them from the server, especially the created ones because the Grid needs to know their server-generated IDs for subsequent updates
  e.success(updated,"update");
  e.success(created,"create");
  e.success(destroyed,"destroy");
  e.error(null, "customerror", "custom error");
    }
</script>

Regards,
Nikolay
Progress Telerik

[FranckSix]

To date, it seems to be exactly what I need. I have however some questions about the update.

 

1 - I would like to be able to make onSubmit a common function. But the received object is a collection of modified datasets. Would it be possible to pass additional parameters to onUpdate to be able to build the AjaxSubmit.

2- How do you suggest to call controller for update. Is it line by line. Or by batch depending on the operation?

3- Is the collections to pass to success method contain data values directly from the grid ?

I searched for a complete example of implementing a custom dataSource with a transport submit but couldn't find anything. I think am really not far from the solution.

Thank you very much for your help!

[Eyup]

Hello,

 

To assist you further with this case, could you prepare an isolated runnable version of your project and open a formal support thread to send it back to us?

Then, we will be able to better figure out your exact scenario and provide more accurate and precise suggestions.

You can also mention this ticket or forum link in the new thread for better visibility.

 

Regards,
Eyup
Progress Telerik

[FranckSix]

Hi Eyup,

Thank you very much for your help!

I join you a demo of what I want to do. Th example compile but it missing calls to complete the save and return (where I have somes interrogations)

Not necessary to have a working app. I dont Know if my memory container work well... (its here only for help comprehension of What I want to do)

You can, if you want, share the final demo for furter use for other users.

Your help is very apreciated!

[Nikolay]

Hello Francis,

Thank you for the shared demo project.

Unfortunately, I was not able to build and run it. Nevertheless, I will try to answer your questions.

 Additional parameters can be sent to the Update.Data() method. This has been demonstrated in the following forum post

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.update#transportupdatedata

Since the preferred inline mode is incell I would recommend enabling the Batch() editing and group all operations in one.

 If you need more help with the JavaScript function that can perform a submit as a single operation, you can check this forum post:

• https://www.telerik.com/forums/datasource-transport-submit-handler-using-initialization-syntax#TSCeWhC8k0GU5nqY-4q_Fg

As well as the JavaScript API:

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/transport.submit

I hope this helps.

Regards,
Nikolay
Progress Telerik