Kendo ListView: Add/Create not reflected until browser session is refreshed
I'm using MVC and a Kendo (UI v2018.3.1017) ListView to manage a list I refer to as 'MaximoList'. To make the list available to multiple controllers, I'm leveraging the MVC provided "TempData" object. On Create (and Destroy), I see that the MaximoList object is properly reflecting changes. But to reflect the change in the UI, I have to refresh (F5) the (Chrome) browser.
CSHTML reference to the control is fairly straightforward:
<div class="col-md-3">
<div class="form-group">
<label style="white-space: nowrap;">Maximo Id's</label>
<a id="btnAddMaximoEntry" onclick=window.allIsos.addMaximoEntry() href="#" title='Add Maximo' style='margin-left: 8px'><i class='fa fa-upload'></i></a>
<div class="" id="divMaximoList">
</div>
</div>
</div>
The JS definition for the control is:
function addMaximoListView(isoId, outageId) {
maximoListDataSource = new kendo.data.DataSource({
transport: {
read: { url: "/request/GetMaximoList", type: "GET", dataType: "json", cache: false },
create: { url: "/request/AddMaximoEntry", type: "Post", dataType: "json", cache: false },
destroy: { url: "/request/DeleteMaximoEntry", type: "POST", dataType: "json", cache: false },
update: {},
parameterMap: function (data, type) {
if (type == "read") { return { IsoId: isoId, OutageId: outageId }; }
if (type == "create") { return { MaximoId: data.MaximoId }; }
if (type == "destroy") { return { id: data.Id }; }
},
sortable: true,
pageable: true,
},
requestEnd: function (e) {
console.log(e.type);
console.log(e.response);
},
columns: [
{ field: "Id", Title: "Id", width: "0px" },
{ field: "MaximoId", Title: "MaximoId", width: "50px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
autoSync: false,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
MaximoId: { editable: true, type: "string" },
}
},
},
});
var getTemplate = ""
+ "<div>"
+ " <a onclick=window.allIsos.deleteMaximo(#:Id#) href='\\#'><i class='fa fa-trash'></i></a>"
+ '#:MaximoId#</div>';
var editTemplate = ""
+ "<div>"
+ " <input type='text' data-bind='value: MaximoId' name='MaximoId' required='required' />"
+ " <div>"
+ " <a class='k-button k-update-button' href='\\#'><span class='k-icon k-i-check'></span></a>"
+ " <a class='k-button k-cancel-button' href='\\#'><span class='k-icon k-i-cancel'></span></a>"
+ " </div>"
+ "</div>";
$("#divMaximoList").kendoListView({
template: kendo.template(getTemplate),
editTemplate: kendo.template(editTemplate),
dataSource: maximoListDataSource,
pageSize: 5,
dataBound: function (e) {
console.log("ListView is bound and ready to render.");
}
});
};
The JS definition to Add items to the list is:
var addMaximoEntry = function () {
var listView = $("#divMaximoList").data("kendoListView");
listView.add();
};
Debugging the local app with a fresh restart, here is the control exposing testing data from the API/Database:
I've clicked my ADD button, and before accepting the entry, please note the value entering as 'NotWorking' for my new MaximoId:
After accepting the input, note that the control has added a new entry but, it's a ghost of one of the original items:
However after refreshing the page (F5), note when the GET fires pulling from server-side TempData object, the actual 'NotWorking' item was properly received by the server, and that updated TempData object is passed to the UI (which includes the new entry):
The API method for the Create/Add is as follows - I'm returning to the UI, the JSON representation of the updated MaximoList object and using that updated object, am refreshing to TempData["MaximoList"]:
[HttpPost, Route("AddMaximoEntry")]
public ActionResult AddMaximoEntry(string MaximoId)
{
var ignoreCase = StringComparison.InvariantCultureIgnoreCase;
try
{
List<MaximoEntry> maximoList = TempData["MaximoList"] != null ? TempData["MaximoList"] as List<MaximoEntry> : new List<MaximoEntry>();
var maximoId = MaximoId;// unnecessary variable, but used for testing against multiple method confgurations
var maximoEntry = new MaximoEntry();
maximoEntry.MaximoId = maximoId;
if (maximoList.Where(s => s.MaximoId.Equals(maximoEntry.MaximoId, ignoreCase)).FirstOrDefault() == null)
maximoList.Add(maximoEntry);
TempData["MaximoList"] = maximoList as List<MaximoEntry>;
return Json(maximoList, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
var msg = $"Excepton: {ex.Message}. Inner Expection: {(ex.InnerException == null ? "N/A" : ex.InnerException.ToString())}";
return new JsonResult
{
Data = new
{
id = 0,
Success = false,
Msg = "Something went wrong while adding to the Maximo List. Please contact system support!"
}
};
}
}
And the API GET is as follow:
[HttpGet, Route("GetMaximoList")]
public ActionResult GetMaximoList(int IsoId, int OutageId)
{
try
{
List<MaximoEntry> maximoList = ODataGetMaximoList(IsoId, OutageId);
return Json(maximoList, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
var msg = $"Excepton: {ex.Message}. Inner Expection: {(ex.InnerException == null ? "N/A" : ex.InnerException.ToString())}";
return new JsonResult
{
Data = new
{
id = 0,
Success = false,
Msg = "Something went wrong while getting Maximo List. Please contact system support!"
}
};
}
}
Originally, the API method for ADD(CREATE) passed back the entire List (JSON Array) of Maximo entries.
Solution is to pass back only the updated version of the model object initially passed to the ADD(CREATE) method, including the newly assigned "id" value. Newly created entries will have a negative index value which I'll later use at the DB level within a MERGE statement (ie negative values for the primary key shouldn't exist in the DB table) to sync the DB.
If not already clear, I'm using the TempData["MaximoList"] object to maintain the state of the Kendo ListView Control across API controllers. Saving the control state to the DB (leveraging the TempData object) will occur in a more generic controller method which doesn't manage state (adds/deletes/etc.) to the TempData object.
I've also reworked the DESTROY (Delete) components to remove deleted items from the (UI) list only on a successful API call, and have cleaned up the JS by removing a number of unnecessary sets to the control not required to reflect the state of TempData object.
My API Method for ADD method is now:
[HttpPost, Route("AddMaximoEntry")]
public JsonResult AddMaximoEntry(MaximoEntry model)
{
var ignoreCase = StringComparison.InvariantCultureIgnoreCase;
try
{
List<MaximoEntry> maximoList = TempData["MaximoList"] != null ? TempData["MaximoList"] as List<MaximoEntry> : new List<MaximoEntry>();
var minId = maximoList.Where(w => w.id <= 0);
model.id = minId.Count() == 0 ? -1 : minId.Select(s => s.id).Min() - 1;
if (maximoList.Where(s => s.maximoId.Equals(model.maximoId, ignoreCase)).FirstOrDefault() == null)
maximoList.Add(model);
TempData["MaximoList"] = maximoList as List<MaximoEntry>;
return Json(model, JsonRequestBehavior.AllowGet);
}
catch (Exception ex)
{
var msg = $"Excepton: {ex.Message}. Inner Expection: {(ex.InnerException == null ? "N/A" : ex.InnerException.ToString())}";
return new JsonResult
{
Data = new
{
Success = false,
Msg = "Something went wrong while adding to the Maximo List. Please contact system support!"
}
};
}
}
I've also updated my DELETE method, as an HTTPDELETE method, and returning a status indicator to alert the calling JS of operation outcome:
[HttpDelete, Route("DeleteMaximoEntry")]
public JsonResult DeleteMaximoEntry(int id)
{
try
{
List<MaximoEntry> maximoList = TempData["MaximoList"] != null ? TempData["MaximoList"] as List<MaximoEntry> : new List<MaximoEntry>();
var itemToRemove = maximoList.SingleOrDefault(r => r.id == id);
if (itemToRemove != null)
maximoList.Remove(itemToRemove);
TempData["MaximoList"] = maximoList as List<MaximoEntry>;
return Json(new { success = true, responseText = $"id {id} deleted from TempData object" });
}
catch (Exception ex)
{
var msg = $"Excepton: {ex.Message}. Inner Expection: {(ex.InnerException == null ? "N/A" : ex.InnerException.ToString())}";
return new JsonResult
{
Data = new
{
Success = false,
Msg = $"Something went wrong while deleteing Maximo Entry (id {id}). Please contact system support!"
}
};
}
}
The JS control definition for SELECT (READ) and CREATE(Add) is:
function addMaximoListView(isoId, outageId) {
maximoListDataSource = new kendo.data.DataSource({
transport: {
batch: false,//default is false
read: { dataType: "json", cache: false, type: "GET", url: "/request/GetMaximoList" },
create: { dataType: "json", cache: false, type: "POST", url: "/request/AddMaximoEntry" },
parameterMap: function (data, type) {
if (type == "read") { return { IsoId: isoId, OutageId: outageId }; }
if (type == "create") { return { model: data }; }
},
},
requestEnd: function (e) {
console.log(e.type);
console.log(e.response);
},
autoSync: false,
serverFiltering: true,
schema: {
model: {
id: "id",
fields: {
maximoId: { editable: true, type: "string" },
}
},
},
});
var getTemplate = ""
+ "<div>"
+ " <a onclick=window.allIsos.deleteMaximo(#:id#) href='\\#'><i class='fa fa-trash'></i></a>"
+ " #:maximoId#"
+ "</div > ";
var editTemplate = ""
+ "<div>"
+ " <input type='text' data-bind='value: maximoId' name='MaximoId' required='required' />"
+ " <div>"
+ " <a class='k-button k-update-button' href='\\#'><span class='k-icon k-i-check'></span></a>"
+ " <a class='k-button k-cancel-button' href='\\#'><span class='k-icon k-i-cancel'></span></a>"
+ " </div>"
+ "</div>";
$("#divMaximoList").kendoListView({
template: kendo.template(getTemplate),
editTemplate: kendo.template(editTemplate),
dataSource: maximoListDataSource,
dataBound: function (e) {
console.log("ListView is bound and ready to render.");
}
});
};
For DESTROY (DELETE), I've added these JS methods (hope to embed these elements into the control defintion):
var deleteMaximo = function (id) {
executeDeleteMaximo(id, "Are you sure you want to delete this Maximo entry?");
}
function executeDeleteMaximo(id, confirmMsg) {
common.LoadingGif("#mainView", false);
common.ConfirmDialog(true, confirmMsg,
function (reason) {
if (reason == "NO") {
common.LoadingGif("#mainView", true);
return false;
}
$.ajax({
type: "DELETE",
data: { id: id },
url: "/request/DeleteMaximoEntry",
success: function (response) {
var data = response;
if (data.success) {
var myDataSource = $("#divMaximoList").data().kendoListView.dataSource;
var item = myDataSource.get(id);//need a check before attempting remove
myDataSource.remove(item);
}
common.LoadingGif("#mainView", true);
window.scrollTo(0, 0);
},
error: function (jqXHR, textStatus, errorThrown) {
var e = errorThrown;
}
});
});
}
- .Net Framework You must add a reference to assembly mscorlib, Version=4.0.0.0
- Is there a better way to get Non-friends to appear in "People you may know" Section?
- Remove checkbox from parent node in TreeView from
- string.Format with variable names instead of numbers
- RouteValueDictionary ignores empty values
- Where should be the validation in a ASP.Net MVC scenario having Repository, Service Layer and using Model Binder?
- How and where to define an environment variable on Azure
- Setting Base Path using ConfigurationBuilder
- ArgumentException: An item with the same key has already been added
- Application_Start not firing?
- ASP Versioning, UrlSegmentApiVersionReader, routes match nonsense version numbers
- The model item passed into the dictionary is of type .. but this dictionary requires a model item of type
- The default XML namespace of the project must be the MSBuild XML namespace
- MVC with Bootstrap Navbar - Set Selected Item to Active
- Fluent Validation vs. Data Annotations
- kendo scrollview as clientTemplate doesnt work when providing it a template
- How to cache data in a MVC application
- Pass data to controller with fetch in ASP NET
- What is the Index method inside of a controller?
- Javascript validation for email address in ASP.NET MVC 5 throws a Parser Error
- How do you turn off Razor highlighting in VS 2013?
- Convert a Dictionary to string of url parameters?
- MVC3 Views unable to find added referenced class
- Unable to create a 'DbContext' of type NULL. The exception 'Object reference not set to an instance of an object.'
- BuildRenderTree is not called in a razor page that inherits of my custom component
- Unable to update database to match the current model because there are pending changes
- Avoid or control circular references in Entity Framework Core
- A Possible Object Cycle was detected error
- Which performs best: Classic ASP, ASP.NET WebForms or ASP.NET MVC?
- Why wont my VS html editor recognise my Kendo code and auto-complete it?