HTML code -
@(Html.EJ().Grid<CRM.ViewModel.CityVM>("CityGrid")
.Datasource((IEnumerable<object>)CityList)
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.AllowSorting()
.AllowPaging().PageSettings(p => { p.PageSize(15); })
// .ShowColumnChooser()
.AllowFiltering()
.FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
.AllowSearching()
.AllowSelection()
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
});
})
.Columns(col =>
{
col.Field("Id").HeaderText("Id").Visible(false).IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();
col.Field("Country.Name").HeaderText("Country").Width(90).AllowEditing(true).EditType(EditingType.Dropdown).DataSource((List<object>)CountryList).Add();
col.Field("State.Name").HeaderText("State").Width(90).AllowEditing(true).EditType(EditingType.Dropdown).DataSource((List<object>)ViewBag.States).Add();
col.Field("Name").HeaderText("Name").Width(90).ValidationRules(v => v.AddRule("required", true).AddRule("minlength", 3)).Add();
})
.ClientSideEvents(eve => { eve.ActionComplete("complete").ActionBegin("citybegin").EndEdit("cityEdit").EndAdd("cityAdd").EndDelete("cityDelete").DataBound("dataBound");; })
)
Controller Code for passing list of state according to country Id -
public JsonResult GetStates(string countryId)
{
StateService StateService = new StateService();
var states = StateService.GetAll().Where(x => x.CountryId == Convert.ToInt32(countryId)).ToList();
return Json(states, JsonRequestBehavior.AllowGet);
}
Jquery code-
function complete(args) {
if (args.requestType == "beginedit" || args.requestType == "add") {
$("#CityGridCountry_Name").ejDropDownList({ change: "ValChange" });
}
}
function ValChange(args) {
var countryId;
var col = @(Html.Raw(Json.Encode(ViewBag.Countries)))
console.log(col)
for (var i = 0; i < col.length; i++) {
console.log(args.model.selectedItemIndex)
console.log(i)
if (i == args.model.selectedItemIndex) {
countryId = col[i].Id;
}
}
if (countryId != null)
{
args.cancel = true;
$.ajax({
url: "/City/GetStates",
type: "POST",
data: { countryId: countryId },
success: function (data) {
var refreshDataSource = []; //New data source dropdownlist
for (i = 0; i < data.length; i++) {
var state = {
"text": data[i].Name,
"value": data[i].Name,
"Id": data[i].Id
};
refreshDataSource.push(state);
}
var gridObj = $("#CityGrid").data("ejGrid");
console.log(gridObj.model)
for (var i = 0; i < gridObj.model.columns.length; i++)
{
if (gridObj.model.columns[i].field == "State.Name")
{
gridObj.model.columns[i].dataSource = refreshDataSource; //here I getting list of states according to selected country but not bind to state column
gridObj.columns(gridObj.model.columns[i], "update");
break;
}
}
}
});
}
}
I getting list of states according to selected country but not bind to state column .It shows initially loaded list of state.
