kendo crud listview change model value after insert - kendo-ui

Question

Here is my code.
$(document).ready(function() {
var kendoWindow_room = $("#window_room");
kendoWindow_room.hide();
$("#roombut").on(
'click',
function()
{
home_id = $("#home_id").val();
if (home_id) {
kendoWindow_room.data("kendoWindow").open();
$('.k-window').css({'marginLeft': -$('.k-window').width() / 2});
dataSource.read();
$("#room_listview_pager .k-link:first").hide();
$("#room_listview_pager .k-link:last").hide();
$("#room_listview_pager a.k-link").each(function(index) {
$(this).addClass("pager_new_icons");
$(this).addClass("mortgage");
});
}
}
);
home_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'user/get_edit_home_name' ?>",
dataType: "json"
}
}
});
room_datasource = new kendo.data.DataSource({
transport: {
read: {
url: "<?php echo BASE_URL . 'common/get_dropdown_entries' ?>",
dataType: "json",
data: {thisisfor: "floortype"}
}
}
});
var crudServiceBaseUrl = "<?php echo BASE_URL . 'user/room_crud_listview_' ?>",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: function() {
return crudServiceBaseUrl + "read?home_id=" + $("#home_id").val()
},
dataType: "json",
contentType: "application/json"
},
update: {
url: crudServiceBaseUrl + "update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "create",
dataType: "json",
type: "POST"
}
},
batch: true,
pageSize: 1,
schema: {
model: {
id: "id",
fields: {
rd_home_id: "rd_home_id",
homename: "homename",
nickname: "nickname",
type: "type",
wallcolor: "wallcolor",
trimcolor: "trimcolor",
floorcolor: "floorcolor",
floortype: "floortype",
windows: "windows"
}
}
}
});
$("#room_listview_pager").kendoPager({
dataSource: dataSource,
info: false,
numeric: false
});
var room_listview = $("#room_listview").kendoListView({
dataSource: dataSource,
template: kendo.template($("#room_listview_template").html()),
editTemplate: kendo.template($("#room_editview_template").html())
}).data("kendoListView");
// Add Row
$("#room_add_row").on("click", function(event) {
event.preventDefault();
room_listview.add();
});
// Delete Row
$("#room_delete_row").on("click", function(event) {
event.preventDefault();
room_listview.remove(room_listview.element.children().first());
if (dataSource.total() < 1) {
room_listview.add();
} else {
dataSource.read();
}
});
// edit row
$("#room_edit_row").on("click", function(event) {
event.preventDefault();
room_listview.edit(room_listview.element.children().first());
});
// save row
$("#room_save_row").on("click", function(event) {
event.preventDefault();
room_listview.save();
});
if (!kendoWindow_room.data("kendoWindow")) {
kendoWindow_room.kendoWindow({
width: "520px",
title: "Room Designer"
});
}
});
<div style="background-color: #FFFFFF; border: 0; max-width: 90px; float: left;" id="room_listview_pager"></div>
<span style="float: right; margin-top: 4px;">
<a id="room_add_row" class="k-add" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon7.png" alt="" height="36" width="37"></a>
<a id="room_delete_row" class="k-delete" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon8.png" alt="" height="36" width="37"></a>
<a id="room_edit_row" class="k-edit" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon9.png" alt="" height="36" width="37"></a>
<a id="room_save_row" class="k-insert" href="#"><img src="<?php echo STATIC_DIR; ?>images/icon10.png" alt="" height="36" width="37"></a>
</span><div class="clear"></div>
This is the kendo template with id - "room_listview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>#:homename#</dd>
<dt>Nickname</dt>
<dd>#:nickname#</dd>
<dt>Type</dt>
<dd>#:type#</dd>
<dt>Wall Color</dt>
<dd>#:wallcolor#</dd>
<dt>Trim Color</dt>
<dd>#:trimcolor#</dd>
<dt>Floor Color</dt>
<dd>#:floorcolor#</dd>
<dt>Floor Type</dt>
<dd>#:floortype#</dd>
<dt>Windows</dt>
<dd>#:windows#</dd>
</dl>
</div>
This is the kendo template with id - "room_editview_template"
<div class="product-view k-widget">
<dl>
<dt>Home</dt>
<dd>
<select id="home"
data-role="dropdownlist"
data-text-field="nickname"
data-value-field="id"
data-source="home_datasource"
data-bind="value:rd_home_id"
name="rd_home_id"
required="required"
validationMessage="required">
</select>
<span data-for="rd_home_id" class="k-invalid-msg"></span>
</dd>
<dt>Nickname</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:nickname" name="nickname" required="required" validationMessage="required" />
<span data-for="nickname" class="k-invalid-msg"></span>
</dd>
<dt>Type</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:type" name="type" required="required" min="1" validationMessage="required" />
<span data-for="type" class="k-invalid-msg"></span>
</dd>
<dt>Wall Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:wallcolor" name="wallcolor" required="required" validationMessage="required" />
<span data-for="wallcolor" class="k-invalid-msg"></span>
</dd>
<dt>Trim Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:trimcolor" name="trimcolor" required="required" validationMessage="required" />
<span data-for="trimcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Color</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:floorcolor" name="floorcolor" required="required" validationMessage="required" />
<span data-for="floorcolor" class="k-invalid-msg"></span>
</dd>
<dt>Floor Type</dt>
<dd>
<select
data-role="dropdownlist"
data-text-field="name"
data-value-field="value"
data-source="room_datasource"
data-bind="value:floortype"
name="floortype"
required="required"
validationMessage="required">
</select>
<span data-for="floortype" class="k-invalid-msg"></span>
</dd>
<dt>Windows</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:windows" name="windows" required="required" validationMessage="required" />
<span data-for="windows" class="k-invalid-msg"></span>
</dd>
</dl>
</div>
I have a listview inside a kendowindow with options to create, read, update and delete.
It uses one template to list the records and another template to edit.
In the fields, I have a dropdown list, with the field name "rd_home_id" its data-text-field and data-value-field are different. It displays home name in as the option and each option has its integer value.
The insert, and update is working fine, I get the integer value in the server side.
While reading, obviously I would like to display the home name - so, I have the field name "homename" - and from the server, I pass this value and I am able to see it in the listing template - which works perfectly fine.
The only problem remaining is - after I insert a record, the "homename" is not showing up - its null - all the other values are showing up and is correct.
How could I show the value "homename" right after the insert?
I know I can call the call the read function of the datasource in the room_save_row's onclick right after calling the save function of the listview - which would fix the issue, but doing that would make the validation not work.
Is there any way to change the value of the fields which is rendered in the template?
Thank you
Just solved the problem
If the inserted record is sent as a response from the server ( from the create URL ) - it would get updated - and the value would be reflected in the listing template - before I was not sending anything from the server. that was the problem.