I have a view with tabs and each tab has a kendo grid with inline edit and have dropdown inside the grid. Problem which i am facing is when i update the value of the drop down is not showing the updated value but when i refresh the page the updated value is showing. But if i refresh the problem here is if i update the value is the sceond tab it i do refresh it will go to second tab. Is there any way I can acheive this without refesh.
@model BHI.TESQ.Entities.Interfaces.Models.ILocationAdminModel
@if (TempData["Result"] == "Data Saved Successfully")
{
<script>
alert('Location Data Saved Successfully');
</script>
}
@using (Html.BeginForm("SaveLocationAdmin", "Administration", FormMethod.Post))
{
<div style="margin-top: 45px;height:400px">
<h5 class="page-header k-block k-primary" style="overflow: hidden; margin-left: 5px; max-width: 1133px;">@ViewBag.Title</h5>
<table style="width: 100%; margin-top: 0px">
<tr style="margin-top: 0px;">
<td>
@*<table style="width: 100%">
<tr>
<td>*@
@(Html.Kendo().Splitter()
.Name("vertical")
.HtmlAttributes(new { style = "min-height:400px" })
.Orientation(SplitterOrientation.Horizontal)
.Panes(verticalPanes =>
{
verticalPanes.Add()
.Size("150px")
.HtmlAttributes(new { style = "min-height:400px" })
.Scrollable(false)
.Resizable(false)
.Content(Html.Action("AdminLinks").ToString());
verticalPanes.Add()
.HtmlAttributes(new { id = "top-pane" })
.Scrollable(false)
.Collapsible(false)
.Content(
Html.Kendo().Splitter()
.Name("horizontal")
.HtmlAttributes(new { style = "min-height:400px" })
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.HtmlAttributes(new { id = "left-pane" })
.Size("300px")
.Collapsible(true)
.Resizable(false)
.Content(@<div class="pane-content">
<h6 class="header k-block">Create New Location</h6>
<table>
<tr>
<td class="td-style">Location Name<span class="asterisk_input"></span></td>
<td>
<input id="txtLocName" name="txtLocName" type="text" class="textbox" required />
</td>
</tr>
<tr>
<td class="td-style">Country<span class="asterisk_input"></span></td>
<td>
@(Html.Kendo().DropDownList()
.Name("ddCountry")
.HtmlAttributes(new { required = "required" })
//.BindTo(new List<string>() {
// "United States",
// "United Kingdom (UK)",
// })
.BindTo(@Model.Country)
.OptionLabel("--Select Country--")
.DataTextField("CountryName")
.DataValueField("CountryId")
.Events(e => e.Change("OnCountryChange"))
)
<input type="hidden" id="hddCountry" name="hddCountry" value="" />
</td>
</tr>
<tr>
<td class="td-style">State</td>
<td>
@(Html.Kendo().DropDownList()
.Name("ddState")
.OptionLabel("--Select State--")
.DataTextField("StateName")
.DataValueField("StateId")
.Events(e => e.Change("OnStateChange"))
//.BindTo(new List<string>() {
// "Texas",
// })
.DataSource(source =>
{
source.Read(read => { read.Action("GetStateList", "Administration").Data("filterState"); }).ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("ddCountry")
)
<script>
function filterState() {
return {
countryId: $("#ddCountry").val()
};
}
</script>
<input type="hidden" id="hddState" name="hddState" value="" />
</td>
</tr>
<tr>
<td class="td-style">Location Status<span class="asterisk_input"></span></td>
<td>
@*@(Html.Kendo().DropDownList()
.Name("ddLocStatus")
.BindTo(new List<string>() {
"Active",
"In-Active",
})
)*@
<input id="chkBoxStatus" type="checkbox" name="chkBoxStatus" value="true" />
</td>
</tr>
<tr>
<td align="right">
@(Html.Kendo().Button()
.Name("btnInsert")
.Events(ev => ev.Click("onClick"))
.HtmlAttributes(new { type = "submit", @class = "btn btn-primary button" })
.Content("Save"))
</td>
<td>
@(Html.Kendo().Button()
.Name("btnCancel")
.HtmlAttributes(new { type = "button", @class = "btn btn-primary button" })
.Content("Cancel"))
</td>
</tr>
</table>
</div>
);
horizontalPanes.Add()
.HtmlAttributes(new { id = "center-pane" })
.Scrollable(false)
.Content(@<div>
@(Html.Kendo().Grid(Model.Locations)
.Name("Grid")
.HtmlAttributes(new { style = "min-height:400px" })
.Columns(columns =>
{
columns.Command(command => { command.Edit().HtmlAttributes(new { type = "button", @class = "btn btn-primary button" }); }).Width(100);
columns.Bound(p => p.LocationId).Width(140).Hidden(true);
columns.Bound(p => p.LocationName).Width(140);
columns.Bound(p => p.CountryId).EditorTemplateName("CountryNames").Title("CountryName").ClientTemplate("#:CountryName#").Width(150);
columns.Bound(p => p.StateId).EditorTemplateName("StateNames").Title("StateName").ClientTemplate("#:StateName#").Width(150);
columns.Bound(p => p.IsActive).Width(100);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Navigatable()
.Sortable()
.Scrollable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Events(events => { events.Error("error_handler"); events.RequestEnd("onRequestEnd"); })
.Model(model => { model.Id(p => p.LocationId); model.Field(p => p.LocationId).Editable(false); })
.Update(update => update.Action("Update_Location", "Administration"))
)
)
</div>
);
}).ToHtmlString()
);
})
)
</td>
</tr>
</table>
@*</td>
</tr>
</table>
*@
</div>
}
<style scoped>
#vertical {
width: 95%;
}
.pane-content {
width: 300px;
}
div.k-grid-content {
min-height: 300px;
}
</style>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
var grid = $("#Grid").data("kendoGrid");
grid.cancelChanges();
}
}
$(document).ready(function () {
$('#btnCancel').click(function () {
$(':input').not(':button, :submit, :reset, :hidden').val('')
$('input:checkbox').removeAttr('checked')
var dropdownlist = $("#ddCountry").data("kendoDropDownList");
dropdownlist.select(0);
var dropdownlist = $("#ddState").data("kendoDropDownList");
dropdownlist.select(0);
});
});
function onClick(e) {
var locationName = $("#txtLocName").val();
if (locationName != "") {
var selectedText = $("#ddCountry").data("kendoDropDownList").text();
if (selectedText == "--Select Country--") {
alert('Please select country');
}
}
}
function OnCountryChange(e) {
var selectedText = $("#ddCountry").data("kendoDropDownList").text()
$("#hddCountry").val(selectedText);
}
function OnStateChange(e) {
var selectedText = $("#ddState").data("kendoDropDownList").text()
$("#hddState").val(selectedText);
}
function onRequestEnd(e) {
if (e.type == "create" || e.type == "update") {
if (e.response == null || e.response.Errors == null) {
alert("Location Data Updated Successfully");
}
}
}
</script>
