or
@Html.Kendo().Grid(Model).Name("GridLocations").Columns(columns => { columns.Bound(l => l.Name).Title("Name"); columns.Command(command => { command.Edit().Text("Edit"); command.Destroy().Text("Delete"); }).HeaderTemplate("Manage"); }).ToolBar(toolbar => toolbar.Create().Text("Create")).DataSource(dataSource => dataSource .Server() .Model(model => model.Id(l => l.Id)) // Configure CRUD --> .Create(create => create.Action("Create", "Locations")) .Read(read => read.Action("Index", "Locations")) .Update(update => update.Action("Update", "Locations")) .Destroy(destroy => destroy.Action("Delete", "Locations")) // <-- Configure CRUD ).Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditLocations")){ "results": [{ "title": "My entry", "description: "My description"},{ "title": "Another entry", "description: "Another description"},]}
Code Kendo UI Fluent
@(Html.Kendo().Chart() .Name("Chart").DataSource(ds => ds.Read(read => read.Action("ActionName", "ControllerName").Data("filterFunction")))
Code JavaScript
jQuery(document).ready(function($) { $("#chart").kendoChart({ dataSource: { transport: { read: "ControllerName/ActionName", parameterMap: filterFunction }},@(Html.Kendo().DropDownListFor(model => model.Project) .Name("Project") .DataTextField("ProjectCode") .DataValueField("ProjectCode") .DataSource(source => { source.Read(read => { read.Action("GetProjects", "NewTimesheet"); }); }) .Events(e => e.Select("projectChange")) .SelectedIndex(0) )var MyModel = kendo.data.Model.extend();
var MyDataSource = kendo.data.DataSource.extend({
options: {
transport: {
create: {
url: 'dummy.json',
type: 'GET',
dataType: 'json'
},
read: {
url: 'dummy.json',
type: 'GET',
dataType: 'json'
},
update: {
url: 'dummy.json',
type: 'GET',
dataType: 'json'
},
destroy: {
url: 'dummy.json',
type: 'GET',
dataType: 'json'
}
},
schema: {
model: MyModel,
data: 'data',
total: 'total'
}
}
});
var myDataSource = new MyDataSource();
var myModel = new MyModel({
ding: 'dong',
ping: 'pong'
});
myDataSource.add(myModel);
myDataSource.sync();
columns: [ { field: "Choices", title: "My Choices", width: "150px", editor: function(container, options) { $('<input data-text-field="Name" data-value-field="Value" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({ dataSource: { data: myChoicesArray }, dataValueField: "Value", dataTextField: "Name", autobind: true }); } }, { command: ["edit", "destroy"], title: " ", width: "210px" }],data-value-field="Value", I get the value (incorrectly) appearing in the grid and the viewModel correctly gets the value. On the otherhand, if I set data-value-field="Name", I get the text correctly appearing in the grid but then the viewModel incorrectly gets the text too. I would like to have the text of the DropDownList choice appear in grid and the value of the choice stored in the viewModel. How can I do this?