I'm trying to add a dropdownlist to a kendo grid by the help of this documentation
:
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
Actually I followed exactly the same way but no chance I'm wonder how the kendo grid understand it has to place a dropdownlist in the clientTemplate ?!
does clientTemplate has to be defined somewhere?
You have to define a clientTemplate by adding this to the Grid .ClientDetailTemplateId("template")
Then you can add DropDownList into the template
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().DropDownList()
//build the dropdownlist
.ToClientTemplate()
)
</script>
Demo: http://demos.telerik.com/aspnet-mvc/grid/detailtemplate
Just to add to the mix of answers, here is a late one...
Create a List in your ViewModel
Treat your Model.PropertyId as a ForeignKey
For example...
columns.ForeignKey(x => x.ChangeTypeId, Model.ChangeTypes, "Id",
"ChangeTypeName")
SAMPLE VIEW:
#(Html.Kendo().Grid<ChangeRequest>()
.Columns(columns =>
{
columns.Bound(x => x.Id)
.Visible(false);
columns.Bound(x => x.Description)
.Title("Description")
.Width(100);
columns.ForeignKey(x => x.ChangeTypeId, Model.ChangeTypes, "Id", "ChangeTypeName")
.Title("Data Type")
.Width(50);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(100);
})
.Name("gridChangeRequest")
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.BindTo(Model.RTUDeviceCustomRegisterModbuses)
.DataSource(dataSource => dataSource.Ajax()
.ServerOperation(true)
.PageSize(50)
.Model(model => { model.Id(m => m.Id); })
.Create(update => update.Action("Create", "ChangeRequest", new { Area = "Documents" }))
.Update(update => update.Action("Update", "ChangeRequest", new { Area = "Documents" }))
.Destroy(update => update.Action("Destroy", "ChangeRequest", new { Area = "Documents" }))
)
.HtmlAttributes(new { #class = "", #style = "height: 400px;" }))
SAMPLE VIEW MODEL:
public class ChangeRequestFormViewModel : ViewModelBase
{
#region <Constructors>
public ChangeRequestFormViewModel(IApplication application) : base(application)
{
InitializeCreateEmpty();
}
#endregion
#region <Properties>
public ChangeRequestDocument Entity { get; set; }
#region lookups
public List<ChangeType> ChangeTypes { get; set; }
#endregion
#endregion
#region <Methods>
private void InitializeCreateEmpty()
{
var builder = Application.ChangeRequestDocumentXmlDataSetBuilder; //<-- This object is specific to my (particular) application
var dataset = builder.CreateEmpty();
Entity = dataset.Form;
ChangeTypes = dataset.ChangeTypes;
}
#endregion
}
Related
I am trying to use Kendo MultiSelect in a Kendo Grid with ASP.NET MVC.
I don't specifically need the column with the MultiSelect to be visible in the grid, but I need to be able to edit it in popup view.
When the grid loads, the column with the MultiSelect has the value of [object Object] and when I click on edit to open the popup, the MultiSelect doesn't show in the popup at all.
When I change the edit mode of the grid to inline or incell and press edit, the MultiSelect appears in column with the correct preselected values for each object from the database as well as the correct bounded list of values from ViewData.
I can't figure out what I am doing wrong.
Here is my code:
The ViewModels:
public class QMKeyVM
{
[HiddenInput(DisplayValue = false)]
public int Id { get; set; }
[StringLength(100)]
public string Code { get; set; }
[StringLength(255)]
public string Title { get; set; }
[UIHint("Enum")]
public ScopeType Scope { get; set; }
[UIHint("InstituteTypes_MultiSelect")]
public List<InstituteTypeVM> InstituteTypes { get; set; }
}
public class InstituteTypeVM
{
public int Id { get; set; }
public string Name { get; set; }
}
The editor template file InstituteTypes_MultiSelect.cshtml for MultiSelect:
#(Html.Kendo().MultiSelect()
.Name("InstituteTypes")
.DataValueField("Id")
.DataTextField("Name")
.Filter("contains")
.HtmlAttributes(new { style = "width:250px;height:50px" })
.BindTo((IEnumerable<InstituteTypeVM>)ViewData["InstituteTypes"])
.HtmlAttributes(new { data_value_primitive = false })
)
The grid in the View:
#(Html.Kendo().Grid<QMKeyVM>()
.Name("QMKeysGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(p => p.Code);
columns.Bound(p => p.Title);
columns.Bound(p => p.Scope).EditorTemplateName("Enum");
columns.Bound(p => p.InstituteTypes).EditorTemplateName("InstituteTypes_MultiSelect");
})
.Pageable(p =>
{
p.Messages(m => m.Page("Page").Empty("No entries").ItemsPerPage("per page").Display("{0} to {1} from {2}"));
p.Refresh(true);
p.Input(true);
p.PageSizes(new int[] { 20, 50, 100, 200 });
})
.ClientDetailTemplateId("qmkeydetailtemplate")
.Sortable().Groupable(g => g.Messages(m => m.Empty("Grouping")))
.Scrollable(s => s.Height("auto"))
.Resizable(resize => resize.Columns(true))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
FileName("qmkeys.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
)
.ForDate(dr => dr.Clear().IsEqualTo("ForDate"))
).Messages(m => m.Filter("Apply Filter").Clear("Clear Filter").Info("")))
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add QMKey");
toolbar.Custom().Text("Add Section").HtmlAttributes(new { id = "addSectionsBtn" });
toolbar.Custom().Text("Add Subsection").HtmlAttributes(new { id = "addSectionGroupsBtn" });
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(w => w.Title("Edit").Resizable().Draggable(true).Width(700))
.DisplayDeleteConfirmation("Confirm Delete"))
.Events(e => e.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.PageSize(200)
.Read(read => read.Action("QMKeysRead", "QMKeys"))
.Create(create => create.Action("QMKeyCreate", "QMKeys"))
.Update(update => update.Action("QMKeyUpdate", "QMKeys"))
.Destroy(destroy => destroy.Action("QMKeyDelete", "QMKeys"))
.Events(events => events.Error("GridOnError").RequestEnd("QMKeysGrid_OnRequestEnd"))
.Model(model =>
{
model.Id(p => p.Id);
})
).AutoBind(true).Deferred())
Thanks a lot.
Try to put Datasource property to fetch Data From Database
Below code will help you:
#(Html.Kendo().MultiSelect()
.Name("multiselect")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Value(new[] { 2, 7 })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Products_Read", "Home");
})
.ServerFiltering(true);
})
)
I am using kendo ui grid with Inline editing and it works fine but when i change editor mode to PopUp, it does not display the Customeditor fields(i.e.PickUpLocation) in edit window and show only fields other then customeditor template from model. What I am doing wrong here?
Shipping.cshtml (Main View contains Grid)
#(Html.Kendo().Grid<Comanex.Models.ShippingInstructionViewModel>()
.Name("ShippingGrid")
.Columns(c =>{
c.Bound(m => m.Id).Hidden();
c.Bound(m => m.LocationViewModel)
.ClientTemplate("#=LocationViewModel.LocationName#")
.Title("Pickup Location");
c.Bound(m => m.UnitsShipped)
c.Command(p =>
{
p.Edit();
p.Destroy();
});
})
.ToolBar(toolbar =>{toolbar.Create().Text("").HtmlAttributes(new { #title = "Add" });})
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.Events(events =>{events.Edit("edit");events.Save("save");})
.DataSource(dataSource => dataSource
.Ajax()
.Create(create => create.Action("ShippingInstruction_Insert", "InHouseShipping"))
.Read(read => read.Action("ShippingInstruction_Read", "InHouseShipping"))
.Update(update => update.Action("ShippingInstruction_Update", "InHouseShipping"))
.Destroy(destroy => destroy.Action("ShippingInstruction_Delete", "InHouseShipping"))
.Model(m =>{m.Id(p => p.Id);
m.Field(p => p.LocationViewModel).DefaultValue(ViewData["DefaultPickUpLocation"] as Comanex.Models.LocationViewModel);
})
)
)
ShippingInstructionViewModel.cs (Model that display the data to grid)
public class ShippingInstructionViewModel
{
[ScaffoldColumn(false)]
public int Id { get; set; }
[Required]
[UIHint("PickUpLocationEditor")]
public LocationViewModel LocationViewModel { get; set; }
[Required]
[Display(Name = "Units Shipped")]
[DisplayFormat(DataFormatString = "{0:n0}")]
public Nullable<decimal> UnitsShipped { get; set; }
}
PickUpLocationEditor.cshtml (My Custom Editor DropDownListFor)
#model Comanex.Models.LocationViewModel
#(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select..")
.DataValueField("LocationId")
.DataTextField("LocationName")
.AutoBind(false)
.DataSource(d =>
{
d.Read(r => r.Action("GetShippingPickUpLocations", "ProductionZone"))
.ServerFiltering(true);
})
.Events(evnt=>evnt.Cascade("onCascade")) //Need to add this Event on Parent Drop Downs
)
#Html.ValidationMessageFor(m => m)
Here in edit window, only UnitShipped field is displayed and PickUpLocation dropdownlist is not showing. Why?
By default the MVC does not generate editor template for nested objects. You can try and do the same in a separate view where EditorForModel is used (the Grid uses exactly this). To customize the popup editor check this code library.
I am trying to implement the Grid in ASP.NET MVC 5 app. I have use table in razor to test code and is pulling data properly, however i am trying to do server binding using provided Kendo helper classes but i am struggling to pull data to view. I am using Repository pattern and UnitOfWork.... the code is below ...
my 2nd question is, which is the best way to use Multiple Models in Single View???? I have also ViewModel but i havn't use in following code.. can i use #(Html.Kendo().Grid() and #(Html.Kendo().Grid() in same view... many thanks in advanced...
Repository Class:
public IEnumerable<FeeScheme> GetAllFeeScheme()
{
return getAllFeeSchemeFromRepository();
}
UnitOfWork class
private IEnumerable<FeeScheme> getAllFeeSchemeFromRepository()
{
IEnumerable<FeeScheme> query = new List<FeeScheme>();
query = (from b in _FeeScheme_Repository.GetAll()
select b).ToList();
return query;
}
public IEnumerable<FeeScheme> GetAllFeeScheme()
{
return getAllFeeSchemeFromRepository();
}
Controller class
public JsonResult GetAllFeeScheme([DataSourceRequest]DataSourceRequest request)
{
return Json(FeeScheme_UOF.GetAllFeeScheme().ToDataSourceResult(request));
}
View (Kendo )
#(Html.Kendo().Grid<DatabaseLayer.TableMappings.FeeScheme>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.FeeSchemeID);
columns.Bound(c=>c.FeeSchemeDescription);
columns.Bound(c => c.Fee);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAllFeeScheme", "Qualification"))
.Model(model => model.Id(c=>c.FeeSchemeID))
)
)
The simple question first: To use multiple "view models" in a single view, you would do something like this:
public class TestViewModel
{
public List<Object1> Object1List { get; set; }
public List<Object2> Object2List { get; set; }
public TestViewModel()
{
Object1List = new List<Object1>();
Object2List = new List<Object2>();
}
}
and then use the TestViewModel as the model for the view.
As far as changing your grid to server binding, it would look something like this:
#(Html.Kendo().Grid<>(Model.Object1List)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.FeeSchemeID);
columns.Bound(c=>c.FeeSchemeDescription);
columns.Bound(c => c.Fee);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(c=>c.FeeSchemeID))
)
)
which is the best way to use Multiple Models in Single View
First you can use one model that contains lists that you want like:
public Model()
{
public Ilist < Model1 > Model1List
{
get;
set;
}
public IList < Model2 > Model2List
{
get;
set;
}
}
And second you can use Tuple
I'm trying to follow the docs on how to make my kendo mvc grid ajaxified and able to support some in cell editing.
The problem I have is on save, I'm seeing the grid make the following request which is apparently not available. I'm not familiar with the models prefix stuff but it looks like the object is modeled in the URL properly with each property prefixed with &models, then some hash, then the parameter name and then the value.
Why doesn't this URL map to my controller action method?
"NetworkError: 404 Not Found -
http://localhost/MySite/UI/Orders/Update
?models%5B0%5D%5BId%5D=18c12470-0ca3-4e9c-b6d7-af1d6120e03f
&models%5B0%5D%5BNumber%5D=231413+
&models%5B0%5D%5BMod%5D=8ccbf70a-f368-434c-8c05-2e2f5278215d
&models%5B0%5D%5BModName%5D=M6G+++++++++++++++++++++++++++++++++++++++++++++++
&models%5B0%5D%5BDescription%5D=M6G+LMU+TTU1200
&models%5B0%5D%5BPart%5D=105442
&models%5B0%5D%5BPartDescription%5D=M6H+TELEMATICS+CONTROL+UNIT
&models%5B0%5D%5BQuantity%5D=20
&models%5B0%5D%5BDeliveryDate%5D=Tue+Apr+30+2013+00%3A00%3A00+GMT-0400+(Eastern+Daylight+Time)&_=1366818145016"
The Update method sig in the controller looks like this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Update([Kendo.Mvc.UI.DataSourceRequest] Kendo.Mvc.UI.DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Order> order)
{
//do update
}
And the sample Order object looks like this
public class Order
{
public Guid Id { get; set; }
public string Number{ get; set; }
public Guid Mod{ get; set; }
public string ModName{ get; set; }
public string Description { get; set; }
public int Part{ get; set; }
public string PartDescription { get; set; } // View Model Purposes Only
[Required]
[UIHint("QuantityEditor")] //QuantityEditor is the name of the custom editor template
public int Quantity { get; set; }
public DateTime DeliveryDate{ get; set; }
}
Here's the grid code ala MVC:
#(Html.Kendo().Grid(Model)
.Name("my-grid")
.Columns(columns =>
{
columns.Bound(m => m.Id)
.Hidden(true)
.HtmlAttributes(new { #class = "some-class" });
columns.Bound(m => m.Mod)
.Hidden(true)
.HtmlAttributes(new { #class = "some-class" });
columns.Bound(m => m.ModName)
.Hidden(true)
.HtmlAttributes(new { #class = "some-class" });
columns.Bound(m => m.Description).HtmlAttributes(new { #class = "some-class" });
columns.Bound(m => m.Part).HtmlAttributes(new { #class = "part can-edit" });
columns.Bound(m => m.PartDescription).HtmlAttributes(new { #class = "can-edit" });
columns.Bound(m => m.DeliveryDate).Format("{0:yyyy-MM-dd}").HtmlAttributes(new { #class = "date can-edit" });
columns.Bound(m => m.Quantity).HtmlAttributes(new { #class = "quantity can-edit" }).FooterTemplate("Total:");
})
.Scrollable(s => s.Height("auto"))
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Update(update => update.Action("Update", "Orders"))
.Read(read => read.Action("GetAllOrders", "Orders").Data("getAdditionalData"))
.Aggregates(aggregates => { aggregates.Add(p => p.Quantity).Sum(); })
.Model(model =>
{
model.Id(m => m.Id);
model.Field(m => m.Id).Editable(false);
model.Field(m => m.Part).Editable(true);
model.Field(m => m.Quantity).Editable(true);
model.Field(m => m.DeliveryDate).Editable(true);
model.Field(m => m.PartDescription).Editable(true);
})
)
)
At 1st glance it would look like,
.Read(read => read.Action("GetAllOrders", "Controller").Data("getAdditionalData"))
Instead of Controller you need to put in the actual name of the Controller so for example "PersonController" would be "Person".
Edit- Ok from the looks of it then you've setup your Read from datasource but not your Update and instead tried to do it in events.
http://demos.kendoui.com/web/grid/editing-inline.html
I find it easier not to use inline edits and instead create a template button to redirect to an edit page thus keeping the kendo related code simple.
Looks like your grid is being called from within an MVC area. If you have Areas setup within your MVC application, it's always a good practice to reference those when making calls with Kendo UI Widgets.
Below assumes an Area called "UI":
.Update(update => update.Action("Update", "Orders", new { Area = "UI" }))
i have a telerik grid as follow:
Html.Telerik().Grid<MatchViewModel>().Name("Matches").Columns(cols =>
{
cols.Bound(e => e.Name);
cols.Bound(e => e.Date);
cols.Bound(e => e.GuestTeamId);
cols.Bound(e => e.HostTeamId);
cols.Bound(e => e.PostponedDate);
==> cols.Bound(e => e.RefereeId).EditorViewData(new { RefereeName = '' });
cols.Bound(e => e.StatusId);
})
in the column reffered by arrow i wanna send referee name as additional data for EditorTemplate.i inferred from the EditorViewData method name that it can help me doing this.but i can't get it working.can anyone help me with this?
thanks.
If you have a well defined Model for your page you should not ever need to use ViewBag or ViewData, they are sloppy. EditorViewData allows you to create ViewData on-the-fly to pass extra data to your EditorTemplate.
For example, say you want to have different DropDownList values in the EditorTemplate for each item in your grid, you will need to pass extra data to do this. With EditorViewData you can add additional values from your Model for exactly that purpose without having to resort to coding up any ViewBag or ViewData objects in your Controller.
The first place I used it was a People grid that allowed editing of defined Qualifications added to a Qualifications grid inside a nested TabStrip. The trick was I didn't want the DropDownList for each person to contain any of the qualifications they already had earned. Like this...
People Grid
#using Kendo.Mvc.UI
#model PeopleViewModel
#(Html.Kendo().Grid<PersonModel>()
.Name("PersonGrid")
.Columns(columns => {
columns.Bound(b => b.LastName).EditorTemplateName("_TextBox50");
columns.Bound(b => b.FirstName).EditorTemplateName("_TextBox50");
...
columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(180);
})
.ClientDetailTemplateId("personTemplate")
.ToolBar(toolbar => toolbar.Create())
.Selectable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(a => a.Id);
})
.Create(create => create.Action("CreatePerson", "People"))
.Read(read => read.Action("ReadPeople", "People"))
.Update(update => update.Action("UpdatePerson", "People"))
.Destroy(destroy => destroy.Action("DestroyPerson", "People"))
)
.Events(events => events.DataBound("dataBound"))
)
<script type="text/javascript">
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
<script id="personTemplate" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=Id#")
.Items(items =>
{
...
items.Add().Text("Edit Qualifications")
.LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
...
})
.ToClientTemplate()
)
</script>
PeopleViewModel
Ignore the inheritance stuff, it is beyond this discussion. But note that I use this same Model on all the sub Views related to this top level View.
public class PeopleViewModel : PageViewModel
{
public int PersonId { get; set; }
public PersonModel Person { get; set; }
public IList<QualificationModel> AllQualifications { get; set; }
...
public PeopleViewModel(BaseViewModel baseViewModel) : base(baseViewModel)
{}
}
PersonQualifications Controller
The data providers are injected elsewhere, but note the POCO to Model flattening - just a static method that applies a List to the Model constructor.
public ActionResult PersonQualifications(int personId)
{
SetBaseContext(HttpContext);
var model = new PeopleViewModel(BaseViewModel)
{
PersonId = personId,
AllQualifications = QualificationModel.FlattenToThis(_qualificationDataProvider.Read())
};
return View(model);
}
Nested Grid (View Loaded Inside TabStrip)
#using Kendo.Mvc.UI
#model PeopleViewModel
#{
Layout = null;
}
#(Html.Kendo().Grid<PersonQualificationModel>()
.Name("QualificationEditGrid_" + Model.PersonId)
.Columns(columns =>
{
columns.ForeignKey(f => f.QualificationId, Model.AllQualifications, "Id", "Display")
===> .EditorViewData(new {personId = Model.PersonId})
.EditorTemplateName("PersonQualificationDropDownList");
columns.Command(cmd =>
{
cmd.Edit();
cmd.Destroy();
}).Width(180);
})
.ToolBar(toolbar => toolbar.Create())
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => {
model.Id(a => a.Id);
})
.Create(create => create.Action("CreatePersonQualification", "People"))
.Read(read => read.Action("ReadPersonQualifications", "People", new {personId = Model.PersonId}))
.Destroy(destroy => destroy.Action("DestroyPersonQualification", "People"))
)
)
The EditorTemplate (Finally!)
Ignore the first ViewData reference that helps make this EditorTemplate shared. The one we are interested in is a little further down.
#using Kendo.Mvc.UI
#(Html.Kendo().DropDownList()
.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
.DataValueField("Id")
.DataTextField("Name")
.OptionLabel("Select...")
.DataSource(dataSource => dataSource
===> .Read(read => read.Action("ReadDdlQualifications", "People", new {personId = ViewData["personId"]}))
)
)
Controller Method (Just to be Thorough)
public JsonResult ReadDdlQualifications(int personId)
{
var qualification = _qualificationDataProvider.ReadAvailableToPerson(personId);
IList<IdNamePair> results = IdNamePair.FlattenToThis(qualification);
return Json(results, JsonRequestBehavior.AllowGet);
}
Obviously there is a lot of other stuff going on in this example (I hope I left enough code in for it to make sense), but it should get across the point of when it is needed - and it is REALLY needed.
Enjoy.
I ran into the same issue as Chad and as Trey mentioned, this cannot be done via passing information to EditorViewData. There is no way to pass the row data item, only page data.
As an alternative you can add this script to the editor template. Then you can access a field value from the grid row and pass it to the datasource call, filtering the dropdownlist based on each rows data.
<script type="text/javascript">
function getParentId() {
var row = $(event.srcElement).closest("tr");
var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
var dataItem = grid.dataItem(row);
return { EmployeeId: dataItem.EmployeeId };
}
</script>
And then add the data item to the read method on the data source.
#(Html.Kendo().DropDownList()
.Name("Product")
.DataValueField("ProductId")
.DataTextField("ProductName")
.DataSource(ds => ds
.Read(read => read.Action("ProductsRead", "Home")
.Data("getParentId")
))
)