Different title and update button name for Add and Edit popup in Kendo UI Grid (Telerik 2018)

Question

Q1: As 'Add new record' and Edit pop up title are same "Edit" (Telerik demo url: https://demos.telerik.com/aspnet-mvc/grid/editing-popup ), tried below code to change the title.

$(".k-grid-edit").on("click", function () {
    $(".k-window-title").text("Edit");
    $(".k-grid-update").text("Update");
    console.log("Edit");
});
$(".k-grid-add").on("click", function () {
    $(".k-window-title").text("Create");
    $(".k-grid-update").text("Save");
    console.log("New");
});

The console logs corresponding text but it is not updating the text of title and Update button.

Q2: Add and Edit calls Web API. Even after the call is success the popup appears and it is not reloading the grid.

using (var client = new HttpClient())
{
    client.BaseAddress = new Uri(ConfigurationManager.AppSettings["KpiApiUrl"]);
    var postTask = client.PostAsJsonAsync("users", userAccess);
    postTask.Wait();

    var result = postTask.Result;
    if (result.IsSuccessStatusCode)
    {
        var readTask = result.Content.ReadAsStringAsync();
        readTask.Wait();
        if (readTask.Result.Trim('"').Equals("Success"))
        {
            RouteValueDictionary routeValues = this.GridRouteValues();
            return RedirectToAction("GetUsers", routeValues);
        }
    }
    return View("GetUsers", LoadUser());
}

Please advise me on these.

Version Info Telerik 2018.1.221.545 MVC 5.2 .NET 4.6

Answer 1

The easiest way to do this is to bind to the edit event of the grid and this will allow you to change the title with ease.

I have provided a dojo showing you how to do this. https://dojo.telerik.com/anoceSux

I have simply accessed the "model" of the item being edited and if it is considered new then changing the title to create or otherwise we know it is an item that exists and so just put edit with the product name in the title.

As for your API not reloading the grid with the new data, this is because you are returning a view from the looks of it and not the expected JSON object the grid is looking for either in the form of a DataRequestResult object or however you have mapped your data. Assuming you are sending/binding the DataSourceRequest object to the API controller then you should be returning something like this:

public JsonResult SomeAction([DataSourceRequest] DataSourceRequest request, T Model){
 ..do some things here....... 
 return Json(model.ToDataSourceResult(request, ModelState)); 

}

where T is your model of the item being updated/created

If anything is missing or needs expanding then let me know and I will update the answer accordingly.