Are you using telerik grid control in your MVC3 application and you need to bind dropdown on edit dynamically based on the row selection, here is the example for you which displays a grid with customers and their states and on editing a customer we bring data of states based on customer id and show them in a drop down in the grid.
Controller: ~/Controller/HomeController.cs
public class HomeController
{
public ActionResult Customers()
{
return View();
}
[GridAction]
public ActionResult _GetCustomers()
{
// do your stuff here to get customer's data
return View(
new GridModel<testModel1>{
Data = db.GetCustomers()
}
);
}
[GridAction]
[HttpPost]
public ActionResult _UpdateCustomer(testModel1 objTest)
{
// update the customer
return View(
new GridModel<testModel1>
{
Data = db.GetCustomers()
}
);
}
public JsonResult GetStatesOnCustomer(int CustId)
{
var states = new SelectList(GetStates(CustId), "St_Id", "St_name");
return Json( states , JsonRequestBehavior.AllowGet);
}
}
Model class:
public class testModel1
{
public int CustId { get; set; }
public int StateId { get; set; }
// This is the key for grid to find out the name of display and editor templates
[UIHint("State"), Required]
public string State { get; set; }
}
public class States
{
public int St_Id { get; set; }
public string St_name { get; set; }
}
Telerik grid ~/Views/Customers.cshtml
function onSave(e) {
var selected = $(e.form).find('# ddState ').val();
if (selected == 0) {
alert("Please select a state");
return false;
}
}
function onEdit(e) {
//Get the customer id from the row selected
var custId = parseInt(e.dataItem['CustId']);
//get the dom instance of state drop down
statedd = $(e.form).find('#ddState').data('tDropDownList');
// make a ajax call to the controller with customer id as parameter to fetch states dynamically based on customer id
$.ajax({
type: "GET",
async: false,
cache: false,
url: '@Url.Action(" GetStatesOnCustomer ", "Home")',
dataType: 'json',
data: { CustId: custId },
success: function (states) {
var prop;
var propCount = 0;
for (prop in states )
propCount++;
if (propCount > 0) {
//bind the returned value to the state drop down
states .splice(0, 0, { Selected: false, Text: '--Select--', Value: 0 });
statedd .dataBind(suppliers);
statedd .reload();
statedd .select(function (dataItem) {
return dataItem.Value == e.dataItem['StateId'];
});
}
else {
$('a[class="t-button t-grid-cancel"]').click();
alert("States not found");
}
},
error: function () {
alert('Failed to retrieve states.');
}
});
}
@(Html.Telerik().Grid<testModel1>()
.Name("testGrid")
.DataKeys(keys =>
{
keys.Add(o => o.CustId);
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_GetCustomers", "Home")
.Update("_UpdateCustomer", "Home");
})
.Columns(columns =>
{
columns.Bound(o => o.CustId).Width(100);
columns.Bound(o => o.State).Width(230);
columns.Command(commands => commands.Edit()).Title("Edit").Width(200);
})
.ClientEvents(events=>events.OnSave("onSave").OnEdit("onEdit"))
.Pageable()
)
@Model.State
@(Html.Telerik().DropDownList() .Name("ddState").HtmlAttributes(new { width="100"}) )
Controller: ~/Controller/HomeController.cs
public class HomeController
{
public ActionResult Customers()
{
return View();
}
[GridAction]
public ActionResult _GetCustomers()
{
// do your stuff here to get customer's data
return View(
new GridModel<testModel1>{
Data = db.GetCustomers()
}
);
}
[GridAction]
[HttpPost]
public ActionResult _UpdateCustomer(testModel1 objTest)
{
// update the customer
return View(
new GridModel<testModel1>
{
Data = db.GetCustomers()
}
);
}
public JsonResult GetStatesOnCustomer(int CustId)
{
var states = new SelectList(GetStates(CustId), "St_Id", "St_name");
return Json( states , JsonRequestBehavior.AllowGet);
}
}
Model class:
public class testModel1
{
public int CustId { get; set; }
public int StateId { get; set; }
// This is the key for grid to find out the name of display and editor templates
[UIHint("State"), Required]
public string State { get; set; }
}
public class States
{
public int St_Id { get; set; }
public string St_name { get; set; }
}
Telerik grid ~/Views/Customers.cshtml
function onSave(e) {
var selected = $(e.form).find('# ddState ').val();
if (selected == 0) {
alert("Please select a state");
return false;
}
}
function onEdit(e) {
//Get the customer id from the row selected
var custId = parseInt(e.dataItem['CustId']);
//get the dom instance of state drop down
statedd = $(e.form).find('#ddState').data('tDropDownList');
// make a ajax call to the controller with customer id as parameter to fetch states dynamically based on customer id
$.ajax({
type: "GET",
async: false,
cache: false,
url: '@Url.Action(" GetStatesOnCustomer ", "Home")',
dataType: 'json',
data: { CustId: custId },
success: function (states) {
var prop;
var propCount = 0;
for (prop in states )
propCount++;
if (propCount > 0) {
//bind the returned value to the state drop down
states .splice(0, 0, { Selected: false, Text: '--Select--', Value: 0 });
statedd .dataBind(suppliers);
statedd .reload();
statedd .select(function (dataItem) {
return dataItem.Value == e.dataItem['StateId'];
});
}
else {
$('a[class="t-button t-grid-cancel"]').click();
alert("States not found");
}
},
error: function () {
alert('Failed to retrieve states.');
}
});
}
@(Html.Telerik().Grid<testModel1>()
.Name("testGrid")
.DataKeys(keys =>
{
keys.Add(o => o.CustId);
})
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_GetCustomers", "Home")
.Update("_UpdateCustomer", "Home");
})
.Columns(columns =>
{
columns.Bound(o => o.CustId).Width(100);
columns.Bound(o => o.State).Width(230);
columns.Command(commands => commands.Edit()).Title("Edit").Width(200);
})
.ClientEvents(events=>events.OnSave("onSave").OnEdit("onEdit"))
.Pageable()
)
Display Template: ~/Views/DisplayTemplates/State.cshtml
@model testModel1@Model.State
Editor Template: ~/Views/EditorTemplates/ State.cshtml
@using Telerik.Web.Mvc.UI@(Html.Telerik().DropDownList() .Name("ddState").HtmlAttributes(new { width="100"}) )
Things to remember:
1)Create display and editor templates in the folder structure as specified in bold
2)UIHint must be defined in the Model(as we did for State in testModel1.cs)
3)Finally specify all the telerik references that are required for the Grid(You can find it here)
Feel free to comment..
Great & useful Article
ReplyDeleteASP.NET MVC Training
Online MVC Training
Online MVC Training India
MVC 4 Training
MVC 5 Training
MVC 6 Training
Online MVC Training