Kendo grid does not update data with custom dropdown - asp.net-mvc

I'm trying to use a Kendo grid with inline editing but my data does not change on pressing update. Other columns have no problem, but the drop down data is not updated.
My model class is:
public class Validation
{
public string ParentParameterName { get; set; }
public string ParameterName { get; set; }
public string ParameterTitle { get; set; }
[UIHint("DataTypeList")]
public string DataType { get; set; }
[UIHint("EvetHyir")]
public string Required { get; set; }
public List<Validation> Value { get; set; }
}
My grid is:
#(Html.Kendo().Grid<Validation>()
.Name("keyJsonGrid")
.Columns(columns =>
{
columns.Bound(model => model.ParentParameterName).Title("Ana parametre ünvanı");
columns.Bound(model => model.ParameterTitle).Title("Parametre ünvanı");
columns.Bound(model => model.ParameterName).Title("Parametre Adı");
//columns.Bound(foo => foo.DataType).Title("TİP").EditorTemplateName("DataType").Sortable(false);
columns.Bound(p => p.DataType).Sortable(false).Width(180).EditorTemplateName("DataTypeList");
columns.Command(command => { command.Edit().Text("Düzenle"); command.Destroy().Text("Sil"); }).Width(250);
})
.Resizable(builder => builder.Columns(true))
.ToolBar(toolbar => toolbar.Create().Text("Yeni Ekle"))
.Editable(editable => editable
.Mode(GridEditMode.InLine)
.ConfirmDelete("Silinmesine emin misiniz?")
.DisplayDeleteConfirmation("Silinmesine emin misiniz?")
)
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(new int[] { 10, 25, 50, 75, 100 })
)
.Sortable(x => x.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetJsonKeyList", "Key", new { KeyId = Model }))
.PageSize(25)
)
)
My dropdown is populated from an enum:
#(Html.Kendo().DropDownList()
// The name of the widget has to be the same as the name of the property.
.Name("DataType")
// The value of the drop-down is taken from the EmployeeID property.
.DataValueField("Text")
.DataTextField("Text")
.AutoBind(true)
// The text of the items is taken from the EmployeeName property.
.ValuePrimitive(true)
// A list of all employees which is populated in the controller.
.BindTo((System.Collections.IEnumerable)ViewData["DataTypes"])
)
Dropdown data population code:
KeyJsonDTO.DataType x = KeyJsonDTO.DataType.Integer;
ViewData["DataTypes"] = EnumToSelectList(x.GetType());
static List<SelectListItem> EnumToSelectList(Type enumType)
{
return Enum.GetValues(enumType)
.Cast<int>()
.Select(i => new SelectListItem
{
Value = i.ToString(),
Text = Enum.GetName(enumType, i),
})
.ToList();
}
When I press the "Edit" button, the dropdown does not show correct data, and when I press update data, it does not update.

I doubt you are actually using the dropdown you created. "DataType" is not the name of the field. It is the name of the editor template you save in the file system. You can use controls on page but as far as i know, only if it's a javascript grid. You need to make an editor template in the appropriate folder and change the definition of the control to be an dropdownfor(m => m). Then you don't have to name it.

Related

Bind editable kendo grid items when click save button

I have the following model
public class CreateUserModel : DetailLayoutModel
{
public string UserName { get; set; }
public string Email { get; set; }
public List<UserSettingModel> Settings { get; set; }
}
public class UserSettingModel : BaseModel
{
public string Name { get; set; }
public int MaxPercentage { get; set; }
public int MaxValue { get; set; }
public int MinPercentage { get; set; }
public int MinValue { get; set; }
}
I have use for user settings editable kendo grid like the following:
the problem that when i press to create list the user setting list is null!
I want method to bind the kendo grid when I click save button.
I use Bind["models"] but not work
in my case I want to bind user setting list that exist in user model.
Edit 1:
the kendo grid in view ,
note: the kendo grid is filled when open. its bind the user settings to grid
My problem is :
1- when user fill values in grid and sort it or paginate the values is reset
2- when user click to submit button the the settings list not filled when received to action create , only the user name and email filled
#(Html.Kendo().Grid<UserSettingModel>(Model.Settings).Name("settings")
.Resizable(resize => resize.Columns(true))
.Pageable(a => a.ButtonCount(5).Numeric(false).Input(true))
.Scrollable(a => a.Enabled(true))
.Sortable(a => a.SortMode(GridSortMode.MultipleColumn))
.Selectable(a => a.Mode(GridSelectionMode.Single))
.Filterable(a => a.Extra(true))
.Editable(x=>x.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource.Ajax()
.PageSize(5)
.ServerOperation(false)
.Read(read => read.Action("GetSettings", "User"))
.Model(model =>
{
model.Id(o => o.Id);
model.Field(p => p.Name).Editable(false);
}))
.BindTo(Model.Settings)
.Columns(columns =>
{
columns.Bound(p => p.Name).Title(GlobalResources.Name);
columns.Bound(p => p.MinValue);
columns.Bound(p => p.MinPercentage);
columns.Bound(p => p.MaxValue);
columns.Bound(p => p.MaxPercentage);
})))

Kendo ui MVC Grid Popup Editor Template DropDownListFor not working

I am using Kendo UI for ASP.MVC with Razor view and in Grid editing popup mode, EditorTemplate does not display value from Grid in DropDownListFor. What am I missing?
View:
#(Html.Kendo().Grid<CustomerLeadViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.CustomerName).Width(200);
columns.Bound(c => c.CustomerGroup);
columns.Bound(c => c.CustomerActivityField);
columns.Bound(c => c.AgentName);
columns.Command(command =>
{
command.Edit().Text("Edit");
command.Destroy().Text("Delete");
}).Width(250);
})
.HtmlAttributes(new { style = "height: 480px;" })
.Editable(editable => editable.Mode(GridEditMode.PopUp)).TemplateName("_CustomerEdit"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Customers_Read", "CustomerLead", new { model = Model }))
.Update(update => update.Action("Customers_Update", "CustomerLead"))
.Destroy(delete => delete.Action("Customers_Destroy", "CustomerLead"))
)
)
and EditorTemplate/_CustomerEdit:
#model CustomerLeadViewModel
#Html.HiddenFor(model => model.Id)
#Html.Kendo().TextBoxFor(model => model.CustomerName)
#(
Html.Kendo().DropDownListFor(model=>model.CustomerGroupId)
.Name("CustomerGroup") //This name has to be the same as the Title on the main grid page
.DataTextField("GroupName")
.DataValueField("Id")
.DataSource(source =>
{
source.Read(read => { read.Action("GetCustomerGroups", "CustomerLead"); });
})
.OptionLabel("Select a group ...")
)
Controller:
public ActionResult Customers_Read([DataSourceRequest]DataSourceRequest request, CustomerLeadSearchViewModel model)
{
var customers = customerLeadRepository.Get(includeProperties: "CustomerSubGroup.CustomerGroup, CustomerActivityField");
if (model.CustomerName != null)
{
customers = customers.Where(c => c.CustomerName.Contains(model.CustomerName));
}
var customersViewModel = customers.Select(customer => new CustomerLeadViewModel
{
Id = customer.Id,
CustomerGroupId = customer.CustomerGroupId,
CustomerGroup = customer.CustomerSubGroup.CustomerGroup.GroupName,
CustomerName = customer.CustomerName,
CustomerActivityField = customer.CustomerActivityField.ActivityName,
AgentName = customer.AgentName,
Phone1 = customer.Phone1,
Mobile = customer.Mobile
});
return Json(customersViewModel.ToDataSourceResult(request));
}
public JsonResult GetCustomerGroups()
{
var customerGroups = customerGroupRepository.GetAll();
return Json(customerGroups.Select(c => new { Id = c.Id, GroupName = c.GroupName }), JsonRequestBehavior.AllowGet);
}
Model:
public class CustomerLeadViewModel
{
[ScaffoldColumn(false)]
public int Id { get; set; }
public string CustomerName { get; set; }
public string AgentName { get; set; }
public string Post { get; set; }
public string CustomerActivityField { get; set; }
public int CustomerGroupId { get; set; }
public string CustomerGroup { get; set; }
}
Change your _CustomerEditor template model field from
#(Html.Kendo().DropDownListFor(model=>model.CustomerGroupId)
to
#(Html.Kendo().DropDownListFor(model=>model.CustomerGroup)
Just as the comment says, "This name has to be the same as the Title on the main grid page"
The field that the DropDownListFor is binding to needs to be the same. Or, depending on your model, change them all to CustomerGroupId. Either way, they need to match.

Kendo UI Grid Foreign Key column empty

I have tried to follow an example to get a foreign key into a grid. I followed this example:
http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
I have altered it a little bit because I want to use a Popup Editor.
Here is the Grid implementation in the View.
#(Html.Kendo().Grid<Example.Web.UI.ViewModels.ExampleItem>()
.Name("ExampleGrid")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Bound(p => p.Label);
columns.Bound(p => p.Type);
columns.Bound(p => p.InputType);
columns.ForeignKey(p => p.ParentId, (System.Collections.IEnumerable)ViewData["items"], "Id", "Name").Title("Parent");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).DefaultValue(Guid.NewGuid());
model.Field(p => p.ParentId).DefaultValue(null);
})
.Create(update => update.Action("EditingPopup_Create", "Example"))
.Read(read => read.Action("EditingPopup_Read", "Example"))
.Update(update => update.Action("EditingPopup_Update", "Example"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Example"))
)
)
Here is the ExampeItem Model:
public class ExampleItem
{
[ScaffoldColumn(false)]
public Guid Id { get; set; }
public string Name { get; set; }
public string Label { get; set; }
public string Type { get; set; }
[DisplayName("Input Type")]
public string InputType { get; set; }
public ExampleItem Parent { get; set; }
public Guid ParentId { get; set; }
}
In my Controller I set the foreign key items like this:
ViewData["items"] = exampleItems; // This is a List<ExapleItem>
But for some reason the Parent column is empty when the Grid is loaded.
When I click on Edit a window pops up and shows me the Guid of the parent.
That Guid should be a drop down list of items. And the Parent column should show the name of the Parent item.
The idea of this grid is that you can add items to the grid, and when you do, you can choose any of the all ready added grid items as a parent item. Then creates an hierarchy in the Grid which can be sorted later on by the Parent.
Anyone know where I have gone wrong?
Not sure but as per my experience, you forgot to add editor template for the foreign key column.
As per your code you have to add default editor templates into your project.
For default editor template detail please check this for full code/demo.
You can also create your own editor template.
For ex:-
column definition for the Product
c.ForeignKey(x => x.ProductID, (List<Product>)ViewData["products"], "ID", "ProdName").EditorTemplateName("ProductIDEditor");
Here is the editor template for Product, ProductIDEditor.cshtml
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select a value...")
.DataTextField("ProdName")
.DataValueField("ID")
.DataSource(dataSource =>
{
dataSource.Read(read => read.Action("FilterProducts", "Home").Data("filterProducts"))
.ServerFiltering(true);
})
)
#Html.ValidationMessageFor(m => m)
Let me know if any concern.
So after trial and error I found the issue.
I changed my model to:
public class ProposalItem
{
[ScaffoldColumn(false)]
public int Id { get; set; }
public string Name { get; set; }
public string Label { get; set; }
public string Type { get; set; }
[DisplayName("Input Type")]
public string InputType { get; set; }
public ProposalItem Parent { get; set; }
[UIHint("GridForeignKey")]
public int? ParentId { get; set; }
}
So removed the Guid datatype from the Id. Also Decorated the ParentId with [UIHint("GridForeignKey")] which now gives me a DropdownList in the popup window.
It looks like there is a lack of Support for Guid's in KendoUI.
I will post another question as to why Guid's don't work.
Just add in :
.DataSource(source => source.Ajax()
.Model(model =>
{
model.Id(o => o.Id);
model.Field(o => o.Id).Editable(false);
model.Field(p => p.Id).DefaultValue(Guid.NewGuid());
model.Field(p => p.ParentId).DefaultValue(Guid.NewGuid());
**model.Field("ParentId", typeof(Guid));**
})
It has to do new Guid.

Telerik MVC Grid Master Detail Cascading Dropdowns

I am using a master-detail Telerik MVC Grid on two levels.
The first level contains a drop-down of Customers and some misc data.
The second level contains a drop-down of Cars that are linked to the customer on the first level and some misc data.
I am now using a foreign key column to show the dropdowns of cars and clients.
How can the second dropdown be filtered by the customer on the first level?
Code:
#(Html.Telerik().Grid<Models.ClientsModel>()
.Name("Grid")
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
.DataKeys(keys => keys.Add(c => c.ClientLineID))
.Columns(columns =>
{
columns.ForeignKey(o => o.ClientID, (System.Collections.IEnumerable)ViewBag.Client, "ClientID", "Name")
.Width(330)
.Title("Client");
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
}).Width(250);
})
.DetailView(car => car.ClientTemplate(
Html.Telerik().Grid<Delta.Models.CarModel>()
.Name("Car_<#= ClientID #>")
.DataKeys(keys => keys.Add(c => c.LineID))
.ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>" })
.Insert("_CarLineCreate", "Client", new { id = "<#= ClientID #>" })
.Update("_CarLineUpdate", "Client")
.Delete("_CarLineDelete", "Client");
})
.Columns(columns =>
{
columns.ForeignKey(o => o.CarID, (System.Collections.IEnumerable)ViewBag.Cars,
"CarID", "No")
.Width(500)
.Title("Car");
columns.Command(commands =>
{
commands.Edit().ButtonType(GridButtonType.ImageAndText);
commands.Delete().ButtonType(GridButtonType.ImageAndText);
}).Width(200);
})
.Editable(editing => editing => editing.Mode(GridEditMode.InLine))
.Scrollable(c => c.Height("auto"))
.Resizable(resizing => resizing.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.KeyboardNavigation()
.Footer(false)
.ToHtmlString()
))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_ClientIndex", "Client")
.Insert("_ClientCreate", "Client")
.Update("_ClientUpdate", "Client")
.Delete("_ClientDelete", "Client");
})
.Scrollable(c => c.Height("auto"))
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Pageable(o => o.PageSize(50))
.Filterable()
.KeyboardNavigation()
.Groupable())
I am thinking that the code might involve some javascript on the OnDetailViewExpand event, but I can't figure out what.
The only solution I have now is to split the grid into separate views and build cascasing comboboxes there.
Unfortunately I cannot comment on posts yet to clarify some facts about your question. I'll make some assumptions in my answer so that we can work out the exact nature of the problem. You have two model classes one for each grid ClientsModel and CarModel. You are filtering the CarModel (second)grid with fields from the ClientsModel (first)grid.
You are not restricted to just one(<= ClientID =>) parameter in your select binding. You can use other fields from the ClientsModel class the same way as ClientID.
Sample Code:
dataBinding.Ajax().Select("_CarLineIndex", "Client", new { id = "<#= ClientID #>", city = "<#= City #>" })
Here is a working example with mock data that illustrates the method mentioned above:
Client Class
public class Client
{
public int ClientId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string City { get; set; }
}
Car Class
public class Car
{
public string Make { get; set; }
public string Model { get; set; }
public int Year { get; set; }
public string Color { get; set; }
}
HomeController
[GridAction]
public ActionResult _Index()
{
Client c1 = new Client() { ClientId = 1, City = "Boston", FirstName = "Ted", LastName = "Boder" };
Client c2 = new Client() { ClientId = 2, City = "New York", FirstName = "Chris", LastName = "Tobb" };
Client[] clients = {c1, c2};
return View(new GridModel(clients));
}
[GridAction]
public ActionResult _Cars(int ClientId, string City)
{
Car c1 = new Car() { Color = "Yellow", Make = "Ford", Model = "Mustang", Year = 2012 };
Car c2 = new Car() { Color = "Black", Make = "Toyota", Model = "Camry", Year = 2010 };
Car[] cars = { c1, c2 };
return View(new GridModel(cars));
}
View
#(Html.Telerik().Grid<Client>()
.Name("Clients")
.Columns(columns =>
{
columns.Bound(o => o.FirstName);
columns.Bound(o => o.LastName);
columns.Bound(o => o.City);
})
.DetailView(clientDetailView => clientDetailView.ClientTemplate(
Html.Telerik().Grid<Car>()
.Name("ClientDetails_<#= ClientId #>")
.Columns(columns =>
{
columns.Bound(c => c.Make);
columns.Bound(c => c.Model);
columns.Bound(c => c.Year);
columns.Bound(c => c.Color);
})
.DataBinding(db2 => db2.Ajax().Select("_Cars", "Home", new { ClientID = "<#= ClientId #>", City = "<#= City #>" }))
.Pageable()
.Sortable()
.ToHtmlString()
))
.DataBinding(db1 => db1.Ajax().Select("_Index", "Home"))
.Pageable()
.Sortable()
.Filterable()
)
As you can see from the example I'm also passing a City parameter as well as a ClientId when binding the grid.
Let me know if I missed something.
You are correct that you will need to do this with javascript, and it is a matter of being able to filter cars by customers. Telerik allows you to add additional parameters using the "e.data" argument for most of their controls. So for example if you wanted to filter a city list based on a select state the CSHTML would look like this:
<td valign="top">
#(Html.Telerik().DropDownListFor(m => m.State)
.Name("State")
.ClientEvents(events => events.OnChange("State_Change"))
.BindTo(new SelectList(Model.GetStates()))
.HtmlAttributes(new { style = string.Format("width:{0}px", 160) })
)
</td>
<td valign="top">
#(Html.Telerik().AutoCompleteFor(m => m.City)
.Name("City")
.Encode(false)
.ClientEvents(events => {
events.OnDataBinding("City_AutoComplete");
})
.DataBinding(a => a.Ajax().Select("CityList", "Location"))
.AutoFill(true)
.HighlightFirstMatch(true)
.HtmlAttributes(new { style = string.Format("height: 17px; width:{0}px", 250) })
)
</td>
The javascript would look like this:
function City_AutoComplete(e) {
//pass state as an additional parameter here to filter
//this would be your customer for cars list
e.data = $.extend({}, e.data, { state: $("#State").val() });
}
function State_Change(e) {
//reset when the parent list selection changes
$('#City').data('tAutoComplete').text('');
$('#City').data('tAutoComplete').value('');
}
Nothing to complex, create client event onEdit, you can found sample on telerik demo, than after once created client write down dropedown selection change event code that will filter data for you car dropdown. to do this I would suggest you to call ajax and insert HTml for dropdown. If you have still doubt than let me know I will explain it in detail.
If you you really find this answer best or appropriate please vote it.. it will help...

MVC 3 telerik grid edition mode

on one of my views i am using teleriks open source grid for MVC 3. i have 3 columns in the grid :
-Name
-Email
-Roles
the problem which ive got is: i want my Roles column as a dropdownlist, which is already editable when page load (so i dont want any Edit/Update buttons or stuff), so when admin change selected item in dropdownlist role of user gonna be updated.
Any idea how to make that?
View
#model IEnumerable<UserViewModel>
#(Html.Telerik().Grid(Model)
.Name("Grid").TableHtmlAttributes(new { width="800"})
.Columns(columns =>
{
//if (userIsInWhateverRole){
// columns.Template(o => Html.Action(GenerateYourLinkStuffHere));
//}
columns.Bound(o => o.Name).Width(150);
columns.Bound(o => o.Email).Width(120);
columns.Bound(o => o.Roles).Width(120);
})
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.Pageable(paging =>
paging.PageSize(5)
)
)
ViewModel
public class UserViewModel
{
public int Id { get; set; }
[Microsoft.Build.Framework.Required]
[Display(Name = "User name")]
public string Name { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
public string[] Roles { get; set; }
public string Email { get; set; }
public bool Admin { get; set; }
}
Control
public ActionResult ManageRoles()
{
var users = Membership.GetAllUsers().Cast<MembershipUser>().Select(x=> new UserViewModel{ Name = x.UserName, Email = x.Email, Roles = Roles.GetAllRoles()});
return View(users);
}
You need to use a template column and define the template as a dropdown list:
#(Html.Telerik().Grid(Model)
.Name("Grid").TableHtmlAttributes(new { width="800"})
.Columns(columns =>
{
//if (userIsInWhateverRole){
// columns.Template(o => Html.Action(GenerateYourLinkStuffHere));
//}
columns.Bound(o => o.Name).Width(150);
columns.Bound(o => o.Email).Width(120);
columns.Template (
#<text>
#Html.DropDownList("Roles", new SelectList(item.Roles))
</text>
).Width(120);
})
.Sortable()
.Scrollable()
.Groupable()
.Filterable()
.Pageable(paging => paging.PageSize(5))
)
I'm not able to test the code but it should be very close.
You want every item in the grid to be editable? Just use a template for a column that renders a textbox. See this demo: http://demos.telerik.com/aspnet-mvc/grid/templatesserverside

Resources