
I have an existing dropdownlist which gets its data via ajax from api.
Now, I want to add an item "Add New" (just under the existing optionlabel) , which when clicked will open a kendo window.
Questions:
1. First of all, is there any easy/direct way to do this?
2. One option that I could think of - and I am trying to get that working - is to add an item after the initial ajax data is loaded, and use onSelect to check if the option selected is "Add New" and open a window
However, I am not able to implement this. I am stuck at trying to add an additional item to the existing options (which as I mentioned is retrieved via ajax). How to do this? Please note that I already have a optionlabel which I want to retain (based on clients insistence).
Any idea how to achieve this?
PS: i cannot add this from server side api as that code is not in my control.
We have a Kendo grid that can display anywhere from 10 to thousands of rows. We want to be able to set the grid page size to several values, including ALL.
What we have now - without ALL works:
.Pageable(p => p
.PageSizes(new[] { 100, 200, 500, 1000, 2000 })
When we run this - we see the correct values in the "Items per page" dropdown.
We want to add the "All" option to this dropdown, but the following is not working (compile error)
.Pageable(p => p
.PageSizes(new[] { 100, 200, 500, 1000, 2000, "All" })
How do we include All along with other values in the Items per page?
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)