Hello,
I'm working on the KendoUI Sample Grid Application for MVC.
This is my view file:
@using Kendo.Mvc.UI
@{
ViewBag.Title = "Grid";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Grid</h2>
<div id="dependents">
<div id="grid">
@(Html.Kendo().Grid<KendoUIApp1.Models.OrderViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Grid"))
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Bound(d => d.OrderID).Title("order_id");
columns.Bound(d => d.Freight).Title("Freight");
columns.Bound(d => d.OrderDate).Title("OrderDate");
columns.Bound(d => d.ShipName).Title("ShipName");
columns.Bound(d => d.ShipCity).Title("ShipCity");
})
.Pageable()
.Sortable()
.HtmlAttributes(new {style = "height: 400px;"})
)
</div>
</div>
And this is my GridController File
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using KendoUIApp1.Models;
namespace KendoUIApp1.Controllers
{
public partial class GridController : Controller
{
public ActionResult Orders_Read()
{
var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
{
OrderID = i,
Freight = i * 10,
OrderDate = DateTime.Now.AddDays(i),
ShipName = "ShipName " + i,
ShipCity = "ShipCity " + i
});
return Json(result, JsonRequestBehavior.AllowGet);
}
public ActionResult View_Orders()
{
return View();
}
}
}
When I run the Application, The Grid isn't binding the columns with the JSON result. It's simply returning the JSON in a new page. What should I do?
Thank you for your help!
I have an ASP.NET MVC project and one of the project's pages has a grid that includes two columns called "Company" and "Segment". The Segment column is a foreign key column that is bound to a list of possible values to convert the underlying ID that's stored in the database into a user-friendly drop-down list of names to pick from.
The problem I'm having is that the contents of the Segment foreign key drop-down should be filtered according to the value of the Company column and not quite sure how to get this working. The rows are edited using the inline edit mode in case that makes any difference.
To try and make this a bit more concrete, this is what the data bound to the segment foreign key column could look like:
CompanyID SegmentID SegmentName
1 1 One
1 2 Two
2 3 Three
2 4 Four
So on editing a row, the Segment column drop-down currently shows all four values, but it should only show the two items that are associated with the related company ID.
I've looked at using a remote data source on the foreign key column to determine whether I can use the option of providing additional arguments via the `Data` option, but the data source is only queried once, when the grid is first loaded rather than on each cell edit.
I've also looked at the `beforeEdit` and `edit` events but `beforeEdit` is documented as being fired before cell editors are created and `edit` only gives me information about the row that's being edited.
The ability to define a custom editor looks more promising, but this is an MVC project and so the only option there appears to be a custom editor template and I don't know how I would extract values from other parts of the row to provide to any remote data source URL.
Thanks in advance for any help or suggestions.
I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
I'm using dynamic properties for binding instead of the view model, all the references I've looked at are based on the view model.
Is there any way to accomplish the same with dynamic property binding?
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)
Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
.Name("Status")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)
Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@model AzranHawkins.Models.Lead
@(Html.Kendo().DropDownListFor(x => x.Status)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
I also tried
Html.Kendo().DropDownList().Name("Status") instead of Html.Kendo().DropDownListFor(x => x.Status)
I've seen examples in doing this in kendo ui
https://docs.telerik.com/kendo-ui/knowledge-base/use-nested-model-properties
but i can't figure out how in mvc. I have two nested fields that i need to force the grid to treat as dates.
I want to add a bar chart to the child grid view and use the same parameter that I passing from the parent grid.
Is that possible?
And how can I do it.
I've been searching, but didn't find anything.
Thanks