<button onclick="rowRefresh()" style="margin-bottom:5px">Refresh Row</button>
<script>
function rowRefresh() {
var treeObj = $("#TreeGridContainer").data("ejTreeGrid"),
selectedItem = treeObj.model.selectedItem;
//to refresh the selected row
if (selectedItem && selectedItem.index == 6) {
var item = selectedItem.item,
modifiedItem = {
taskName: "Update Task",
};
item = modifiedItem;
selectedItem.taskName = item.taskName;
treeObj.refreshRow(selectedItem.index);
}
}
</script> |
<div id="Grid"></div>
<script type="text/javascript">
$(function () {
var jsonData = @Html.Raw(Json.Encode(ViewBag.dataSource));
$("#Grid").ejGrid({
dataSource: ej.DataManager({
json: jsonData,
insertUrl: "/Home/Insert",
updateUrl: "/Home/Update",
removeUrl: "/Home/Delete",
adaptor: "remoteSaveAdaptor"
}),
. ..
. . .
});
});
</script>
public ActionResult Index(){
ViewBag.dataSource = OrderRepository.GetAllRecords().ToList();
return View();
}
public ActionResult Update(EditableOrder value)
{
OrderRepository.Update(value);
return Json(value, JsonRequestBehavior.AllowGet);
}
public ActionResult Insert(EditableOrder value)
{
OrderRepository.Add(value);
return Json(value, JsonRequestBehavior.AllowGet);
} |
Record Collection |
Virtualization Mode[enableVirtualization: true] |
Non-virtualization Mode
[enableVirtualization: false] |
currentViewData |
Records in current view only present in the records collection |
All the records will be available in the record collection |
updatedRecords |
All the records present in the record collection.
During collapse action, the visible records only will be available in this collection so record index may vary as per the records collection |
All the records will be available in the record collection |
Index<input type="text" id="indexSelected" style="margin-left:8px;margin-bottom:10px" />
New TaskName<input type="text" id="refreshedTaskName" style="margin-left:7px;margin-bottom:10px" />
<br />
<button onclick="rowRefresh()" style="margin-bottom:5px">Refresh Row</button>
<script>
function rowRefresh() {
//To get the value entered in TextBox
var textName = $('#refreshedTaskName').val(),
textIndex = $('#indexSelected').val(),
treeObj = $("#TreeGridContainer").data("ejTreeGrid"),
updatedRecords = treeObj.model.updatedRecords;
//To retrieve the required row from updated records
itemToUpdate = updatedRecords[textIndex];
if (itemToUpdate) {
//To refresh the required record
itemToUpdate.taskName = itemToUpdate.item.taskName = textName;
treeObj.refreshRow(itemToUpdate.index);
}
else {
alert("Enter the valid Index");
}
}
</script> |