Telerik: Grid-Display Success/Failure Notification

Please see my other Telerik articles.

Providing feedback to users upon submitting a grid

In this article I will demonstrate how to use Telerik’s Notification control to display a Success or Failure message to the user after a submit operation, providing them feedback whether or not it worked.

I’ll start with a common grid with CRUD functionality.

Within the grid’s DataSource property, I’ll add an event to call my onRequestEnd() JavaScript function.

.Events(e => e.RequestEnd(“onRequestEnd”))

The contents of onRequestEnd() are defined later.

Within my controller’s CRUD logic, if an error is caused preventing success, I’ll add the error to the errors collection in the model, which I’ll pass when returning to the grid.

ModelState.AddModelError(“Delete() error”, “Delete() error”);

return Json(bills.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

At the bottom of the View I defined the notification control and its templates (styled later). You’ll notice I auto-hide the control after 5 seconds, add an OnShow() JavaScript event, and configure two templates.

In my page’s external JavaScript file, I defined the function to be called, and began it with message variables and a variable stuffed with the notification control in the page.

Within the file, I define a function I’ll use within my if…else logic to configure the current notification.

Then, I’ve added to onRequestEnd() a series of if…else statements to configure the notification based on whether or not the current grid action is create, edit (update), or delete (destroy), and whether the operation was a success or not.

Notice the check for e.reponse.Errors corresponds to any errors I added to the model in my controller (above).