I have a grid where first 2 columns are bound with ForeignKey (Category and Product). The value of the first dropdown dictates the value of the second. How can I reload the values of the second dropdown after the first dropdown value changes?
#(Html.Telerik().Grid<Order>().HtmlAttributes(new { style = "width: 700px" })
.Name("grdOrders")
.ToolBar(tb => tb.Insert())
.DataBinding(binding => binding.Ajax()
.Select("GetOrders", "Home")
.Update("UpdateOrder", "Home")
.Insert("InsertOrder", "Home")
.Delete("DeleteOrder", "Home"))
.DataKeys(keys => keys.Add(o => o.OrderID))
.Columns(cols =>
{
cols.Bound(c => c.OrderID).Width(100).ReadOnly();
cols.Bound(c => c.Name);
cols.ForeignKey(c => c.ItemCategoryID, (System.Collections.IEnumerable)ViewData["Categories"],
"ItemCategoryID", "CategoryName").Title("dbCategory").Width(300);
cols.ForeignKey(c => c.ItemID, (System.Collections.IEnumerable)ViewData["dbItems"],
"ItemID", "ItemName").Width(200).Title("Item");
cols.Command(cmd =>
{
cmd.Edit().ButtonType(GridButtonType.Image);
cmd.Delete().ButtonType(GridButtonType.Image);
}).Title("Commands").Width(100);
})
Having the same problem, i found this:
"Dependent Drop Down in Grid"
http://www.telerik.com/community/forums/aspnet-mvc/grid/dependent-drop-down-in-grid.aspx
There is a full explanation for PopUp mode, however only a description of the solution for Inline mode (which, unfortunately, is too difficult for me to follow).
Related
Kendo UI edit option showing some unexpected behaviour, as you can see in the image there is a text box below Server column and 2 below ServerIP column all containing the id of server "SQL" i selected. Problem is when ever i want to show Server IP column this behaviour occurs, both server and server IP are from the same table.
#(Html.Kendo().Grid<EnvironmentPOCO>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(d => d.EnvironmentName).Width(200).Title("EnvirontmentName");
columns.ForeignKey(d => d.EnvironmentTypeID, (List<EnvironmentTypePOCO>)ViewData["EnvironmentType"], "EnvironmentTypeID", "EnvironmentTypeCode").Width(150).Title("EnvironmentCode").EditorTemplateName("_EnvironmentCodeDropDown");
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerName").Width(200).Title("Server").EditorTemplateName("_ServerDropDown");
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerIP").Width(200).Title("ServerIP");
columns.ForeignKey(d => d.ProjectID, (List<ProjectPOCO>)ViewData["Projects"], "ProjectID", "ProjectName").Width(200).Title("ProjectName").EditorTemplateName("_ProjectNameDropDown");
// columns.ForeignKey(d => d.ProjectID, (List<ProjectPOCO>)ViewData["Projects"], "ProjectID", "ProjectDescription").Width(200).Title("ProjectDescription")/*.EditorTemplateName("_ProjectDescription")*/;
columns.Command(d =>
{
d.Edit();
d.Destroy();
}).Width(200).Title("Action");
})
.ToolBar(tools => tools.Create())
.Sortable()
.Pageable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.EnvironmentID);
model.Field(m => m.EnvironmentName);
model.Field(m => m.EnvironmentTypeID);
model.Field(m => m.ProjectID);
model.Field(m => m.ServerID);
})
.Read(read => read.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Get))
.Create(create => create.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Post))
.Update(update => update.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Put))
.Destroy(destroy => destroy.Url(ViewBag.ApiBaseUrl).Type(HttpVerbs.Delete))
)
)
I found a solution to this, actually if you want to show 2 fields of the foriegn key, You can make a property in your class.
public string ServerDetailsProperty
{
get
{
return string.Format(" Name: {0} || IP: {1}", ServerName, ServerIP);
}
}
then call it in your csHTML file like this.
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "**ServerDetailsProperty**").Width(200).Title("ServerIP");
Now if you press Edit you want see the unexpected behiour as in the diagram.
Try Changing the id and name attribute of the Server IP columns as the Grid is not able to differentiate between the Server Column and Server IP column on Edit.
For your reference I have tried below:
columns.ForeignKey(d => d.ServerID, (List<ServerPOCO>)ViewData["ServerDetails"], "ServerID", "ServerIP").Width(200).Title("ServerIP").HtmlAttributes(new { #id="ServerIP_#=ServerIP#", #name="ServerIP_#=ServerIP#" })
Let me know if this doesn't solve your issue.
EDIT:
You can add the dropdown in client template as below:
columns.Bound(s => s.ServerID).ClientTemplate((#Html.Kendo().DropDownList()
.BindTo((List<ServerPOCO>)ViewData["ServerDetails"])
.Name("ServerIP#=ServerIP#")
.DataTextField("ServerIP")
.DataValueField("ServerID")
.ToClientTemplate()).ToHtmlString());
On Grid DataBound event set the grid scripts to load with document as below:
function onGridDataBound(e) {
$('#GridName script').appendTo(document.body);
}
Finally set the field to readonly in model meta:
model.Field(s => s.SensorID).Editable(false);
For further information have a look at the explaination: Dropdown in Column Client Template
I want to show radio button in kendo Grid column. I have tried so many methods. Its showing only header in row not showing radio button. I am working in MVC4
My code :
#(Html.Kendo().Grid<razor.Core.BOL.TRD_OrderItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(item => item.OrderId).Hidden(true);
columns.Template(item => #Html.RadioButton("Approve", true, false, new { #id = "Approve" })).Title("Approve");
columns.Bound(m => m.MatchType).Title("Match Type");
columns.Bound(item => item.OrderDate).Format("{0:MM/dd/yyyy}").Title("Date");
columns.Bound(item => item.OrderType).Title("Sell");
columns.Bound(item => item.Description).Title("Ask");
columns.Bound(item => item.OrderAmount).Title("Total");
columns.Bound(item => item.OrderStatus).Title("Status");
})
.Pageable()
.Sortable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(m => m.OrderId);
})
.Read(read => read.Action("GetOrderOption", "Order", new { OrderId = ViewBag.OrderId}))
))
Thanks,
S Somu
In my case the radio button was bound to the model, so you should add a field to save the radiobutton value (Approved), so following your example I added my radio button column with:
columns.Bound(item => item.Approved).Template(#<text></text>).ClientTemplate("<input type='radio' name='ItemList[#= index(data)#].Approved' value='true' />").Title("Approve");
Where ItemList is the name of your List of TRD_OrderItem in your model.
Also you will need to add this javascript function that is used to get the index for the radiobutton name field:
function index(dataItem) {
var data = $("#Grid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
I have bound data to Telerik MVC Grid. Following is the code given in cshtml :
#( Html.Telerik().Grid(Model.UserInfo)
.Name("User")
.Columns
(
columns =>
{
columns.Bound(col => col).Title("Name");
columns.Bound(col => col.Email);
columns.Bound(col => col.EYLoginID).Title("Windows User Name");
columns.Bound(col => col.Title);
columns.Bound(col => col.Phone);
columns.Bound(Model.CompanyDefinitionName).Title("Location");
columns.Bound(col => col.IsExternalContact).Title("External");
}
)
.DataBinding(dataBinding => dataBinding.Server())
.Sortable()
)
Here Model.CompanyDefinitionName is a string which I need to display along with other columns. But I am getting an error since Model.CompanyDefinitionName is not part of the entity. How will I display this as column ?
Use a template column:
columns.Template(#<text>
#Model.CompanyDefinitionName
</text>).Title("Location");
Hi i am new in asp.net mvc and telerik controls. How can i get o.Id value when i click on row?
<%= Html.Telerik().Grid(Model)
.Name("RolesGrid")
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
.Pageable()
.ClientEvents(events => events
.OnRowSelect("onRowSelect"))
%>
in js code:
function onRowSelect(e) {
var ordersGrid = $('#RolesGrid').data('tGrid');
var row = e.row;
var dataItem = ordersGrid.dataItem(row);
alert(dataItem);
}
But dataItem is null and there is no id value in generated html file. Thanks and sorry for my bad english
So after all i have the best way to get id is:
bind onRowSelect function to your grid
write next code in onRowSelect
var dataItem = jQuery('#MyGridId').data('tGrid').dataItem(e.row);
alert(dataItem['Id']);
dataItem is a map witch have all properties of grid model so you get all you want
Thats all, thanks
From telerik grid demo.
You have to put the Id in the telerik grid as a hidden column.
// ...
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
// ...
.ClientEvents(events => events.OnRowSelect("onRowSelect"))
It will render a
<td style="display: none; ...">...</td>
And then you get it like this:
function onRowSelect(e) {
var id = e.row.cells[0].innerHTML;
// ...
}
Notes:
I know, it's ugly.
I don't know why the telerik forces you to call the .DataKeys(...) method if there's no documented way to get the value for the key defined.
If you use grouping or some other feature it gets trickier, as the hidden column position varies depending on the grouping arrangement.
I found a slightly more elegant way to do this that borrows off of mmutilva's answer.
Start by putting in the hidden column and the change event in the same way:
.DataKeys(keys => keys.Add(o => o.Id))
.Selectable()
.Columns(columns =>
{
columns.Bound(o => o.Id).Hidden();
columns.Bound(o => o.Name);
columns.Bound(o => o.Description);
})
.ClientEvents(events => events.OnRowSelect("onRowSelect"))
But then in the javascript function, there is a better way to actually select the object and then the hidden row:
function onRowSelect(e) {
var grid = e.sender;
var currentitem = grid.dataItem(this.select());
var Id = currentitem.Id;
//then do whatever with the ID variable
}
Source
Change the function onRowSelect to this:
function onRowSelect(sender, args){...}
The sender will be the grid, and from the args you can determine which item was selected.
Look to the Telerik help site for detailed info on how to get the data using the Client Side API:
http://www.telerik.com/help
I could create a grid with telerik mvc
<% Html.Telerik().Grid(Model)
.Name("ProductGrid")
.Columns(columns => {
columns.Bound(h => h.ProductName).Width("34%");
columns.Bound(h => h.Description).Width("60%");
columns.Bound(h => h.ProductID).Format(Html.ImageLink("Edit", "Products", new { Id = "{0}" }, "/Content/images/icon_edit.gif", "", new { Id = "edit{0}" }, null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
columns.Bound(h => h.ProductID).Format(Html.ImageLink("Delete", "Products", new { Id = "{0}" }, "/Content/images/icon_delete.gif", "", new { onclick = string.Format("return confirm('Are you sure to delete this add on?');") },null).ToString()).Encoded(false).Title("").Sortable(false).Width("3%");
})
.EnableCustomBinding(true)
.DataBinding(databinding => databinding.Ajax().Select("_Index", "ProductGrid"))
.Pageable(settings => settings.Total((int)ViewData["TotalPages"])
.PageSize(10))
.Sortable()
.Render(); %>
but I need to add a serial number column in telerik grid.How can i do this?
I think the best way is to use template column like this.
<%
var sn = 0;
Html.Telerik().Grid(Model).Name("Grid").HtmlAttributes(new { style = "width:auto" })
.EnableCustomBinding(true)
.Columns(columns =>
{
columns.Template(c=> {%> <%: ++sn %> <% }).Title("S/N");
columns.Bound(c => c.CustomerNumber);
columns.Bound(c => c.Narration);
})
.Render(); %>
This way you don't have to be adding serial number property to your view models.
Hope this help?
I think the best way to do this is to add a SerialNumber column to your Product class which is your model and than just add another bound column to the grid like this:
columns.Bound(h => h.SerialNumber)
If you pass a List of Products you can populate the SerialNumber column like this:
List<Product> products = GetList(); // Your method to get data here
int counter = 1;
products.ForEach(x => x.SerialNumber = counter++);
If you want to support consistent numbers with paging you have to calculate yourself the initial value of the counter valuable. For this purpose you must have the current page and page size.
In MVC Web Grid
use this calculation
grid.Column(header: "#",
format: item => item.WebGrid.Rows.IndexOf(item) + 1 + Math.Round(Convert.ToDouble(grid.TotalRowCount / grid.PageCount) / grid.RowsPerPage) * grid.RowsPerPage * grid.PageIndex),