Within MVC Kendo can I have two thead rows? The first will span three tds in the second row. Below is a sample of what I am looking to do? the model is returning a list of theadViewModel.
Looking something like this using the model data?
Name
Columns1 Columns2 Columns3
ColumnsData ColumnsData ColumnsData
Model
public class theadViewModel
{
public string Name { get; set; }
public int Id { get; set; }
public List<DataViewModel> DataViewModel { get; set; }
}
public class DataViewModel
{
public string Columns1 { get; set; }
public string Columns2 { get; set; }
public string Columns3 { get; set; }
}
View
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Name);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
)
The Kendo Grid allows multi-column headers. You can find the documentation here.
Here is an example:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Group(group => group
.Title("Contact Info")
.Columns(info => {
info.Bound(x => x.ContactTitle).Width(200);
info.Bound(x => x.ContactName).Width(200);
})
);
})
.ColumnMenu()
.Resizable(resizable => resizable.Columns(true))
.Reorderable(reorderable => reorderable.Columns(true))
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("MultiColumn_Customers_Read", "Grid"))
)
)
Related
I have a kendo grid and need to get a querystring value. See below code.
Browser Url = http://blahblah/blah/36?EvaluationCriteriaGrid-mode=edit&chiefEvalCriteriaId=110
UI.cshtml
#(Html.Kendo().Grid(Model.ChiefEvaluationCriteriaList.AsEnumerable())
.Name("EvaluationCriteriaGrid")
.Columns(columns =>
{
columns.Bound(p => p.EvaluationCriteriaName);
columns.Bound(p => p.MinScore).Width(100).Title("Min Score").Format("{0:0}");
columns.Bound(p => p.MaxScoreDisplay).Width(100).Title("Max Score");
columns.Command(command => { command.Edit(); }).Width(180).Title("Action");
})
.CellAction(cell =>
{
if (cell.Column.Title == "Action")
{
if (cell.DataItem.EvaluationResultID ==
ServiceProxy.Model.DomainConstants.EVALUATION_RESULT_APPROVED)
{
cell.HtmlAttributes["style"] = "display:none;";
}
}
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(c => c.ChiefEvaluationCriteriaID))
.Read("EvaluationQuestionnaire", "EvaluationCriteria", new { area = "Proposal", Id = Model.SolicitationDetails.SolicitationID })
.Update("EditEvaluationCriteria", "EvaluationCriteria", new { area = "Proposal", Id = Model.SolicitationDetails.SolicitationID })
)
)
Controller.cs
[HttpPost]
public ActionResult EditEvaluationCriteria( int Id, int chiefEvalCriteriaId, int maxScoreDisplay, int minScoreDisplay = 0 )
{
if (ModelState.IsValid)
{
Do something
}
return view
}
Thank you for the support
I just started working with Telerik Grids and I don't know if this is the proper way to do it but my boss want to do edit the data inline in the same grid, and now I have a problem:
This is my Data Model:
public class InternVM
{
public int InternId { get; set; }
public Guid UserId { get; set; }
[Required]
[MaxLength(50)]
[Display(Name = "User ID")]
public string UserName { get; set; }
[Required]
[MaxLength(50)]
public string LastName { get; set; }
[Required]
[MaxLength(50)]
public string FirstName { get; set; }
[UIHint("Date")]
[Display(Name ="Certified")]
public DateTime? CertifiedDate { get; set; }
public string Status { get; set; }
[UIHint("InternSchedule")]
public List<InternScheduleVM> Schedules { get; set; }
[UIHint("InternAttorneyDDL")]
public List<AttorneyVM> Attorneys { get; set; }
}
I created a main grid like this:
#(Html.Kendo().Grid<InternVM>()
.Name("InternGrid")
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); command.Destroy().Text(" "); })
.Width(100).Locked(true).Lockable(false);
columns.Bound(c => c.InternId).Visible(false);
columns.Bound(c => c.UserName).Width(200);
columns.Bound(c => c.LastName).Width(200);
columns.Bound(c => c.FirstName).Width(200);
columns.Bound(c => c.Attorneys).ClientTemplate("#=DisplayAttorneys(Attorneys)#").Width(200);
columns.Bound(c => c.Status).Width(200);
columns.Bound(c => c.CertifiedDate).Format("{0:dd/MM/yyyy}").Width(200);
columns.Bound(c => c.Schedules).ClientTemplate("#=DisplaySchedules(Schedules)#").Width(700);
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => {
m.Id(c => c.InternId);
m.Field(c => c.UserId).DefaultValue(Guid.NewGuid());
m.Field(c => c.Attorneys).DefaultValue(new List<AttorneyVM>());
})
.Read(read => read.Action("Read", "Intern"))
.Destroy(destroy => destroy.Action("Destroy", "Intern"))
.Update(update => update.Action("Update", "Intern"))
.Create(create => create.Action("Create", "Intern"))
.Events(events => events.RequestEnd("onRequestEnd"))
)
.ToolBar(toolbar => { toolbar.Create().Text("Add"); })
.Editable(editable => editable.Mode(GridEditMode.InLine))
.HtmlAttributes(new { #style = "height:450px"})
.Events(e => e.BeforeEdit("onBeforeEdit"))
)
And one of the fields is using a EditorTemplateView which is another Grid (Schedules) like this:
#model IEnumerable<InternScheduleVM>
<script>
function onRequestEnd(e) {
if (e.type == "update" || e.type == "create" || e.type == "remove") {
$("#InternScheduleGrid").data("kendoGrid").dataSource.read();
}
}
function onRequestStart(e) {
if (e.type == "read")
//console.log("onRequestStart");
}
function getParentId() {
let parentId = $('#parentIdInput').val();
return {
internId: parentId
};
}
</script>
<p>
</p>
<div>
#(Html.Kendo().Grid(Model)
.Name("InternScheduleGrid")
.Columns(columns =>
{
columns.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); command.Destroy().Text(" "); }).Width(100);
columns.Bound(c => c.InternScheduleID).Visible(false);
columns.Bound(c => c.DayOfWeek);
columns.Bound(c => c.StartTime).Format("{0:HH:mm:ss}");
columns.Bound(c => c.EndTime).Format("{0:HH:mm:ss}");
})
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(m =>
{
m.Id(c => c.InternScheduleID);
})
.Read(read => read.Action("Read", "InternSchedule").Data("getParentId"))
.Destroy(destroy => destroy.Action("Destroy", "InternSchedule"))
.Update(update => update.Action("Update", "InternSchedule"))
.Create(create => create.Action("Create", "InternSchedule").Data("getParentId"))
.Events(events => { events.RequestEnd("onRequestEnd"); events.RequestStart("onRequestStart"); })
)
.ToolBar(toolbar => { toolbar.Create().Text("Add"); })
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Events(e => e.Edit("onEdit"))
)
</div>
The child grid is working fine and I bound it with the the Model but whenever I do a change in this Grid, it doesn't upload my Model InternVM.
Any ideas why?
I just used a grid detail template to pass parameters from the main view. Thanks
I Have two Kendo Grids (UI for Asp.Net MVC) on my page. The first grid gets results from database using an action method of a controller which is bound at grid initialization(I guess). The second grid should get the results of a column from first grid and pass as parameters to second grid which should pass these to action method of another controller bound to second grid. I tried to use autobind(false) but has no use. Please suggest.
Please try with the below code snippet.
VIEW
#(Html.Kendo().Grid<MvcApplication1.Models.TestModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(e => e.ID);
columns.Bound(e => e.Name);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetData", "Home"))
)
.Events(events => events.Change("onChange"))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
)
#(Html.Kendo().Grid<MvcApplication1.Models.ChildModel>()
.Name("ChildGrid")
.Columns(columns =>
{
columns.Bound(e => e.ChildID);
columns.Bound(e => e.ChildName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetChildData", "Home").Data("GetData"))
)
)
<script>
var ID = 0;
var Name = "";
function onChange(arg) {
ID = this.dataItem(this.select()).ID;
Name = this.dataItem(this.select()).Name;
$('#ChildGrid').data('kendoGrid').dataSource.read();
$('#ChildGrid').data('kendoGrid').refresh();
}
function GetData() {
return {
ID: ID,
Name: Name
};
}
</script>
CONTROLLER
public ActionResult GetChildData([DataSourceRequest] DataSourceRequest request, int ID, string Name)
{
List<ChildModel> lst = new List<ChildModel>();
if (ID == 0)
{
return Json(lst.ToDataSourceResult(request));
}
string str = ":" + ID + "_" + Name;
lst.Add(new ChildModel() { ChildID = 1, ChildName = "Name1" + str });
lst.Add(new ChildModel() { ChildID = 2, ChildName = "Name2" + str });
lst.Add(new ChildModel() { ChildID = 3, ChildName = "Name3" + str });
return Json(lst.ToDataSourceResult(request));
}
public ActionResult GetData([DataSourceRequest] DataSourceRequest request)
{
List<TestModel> lst = new List<TestModel>();
lst.Add(new TestModel() { ID = 1, Name = "Name1", MyDate = DateTime.Now });
lst.Add(new TestModel() { ID = 2, Name = "Name2", MyDate = DateTime.Now });
lst.Add(new TestModel() { ID = 3, Name = "Name3", MyDate = DateTime.Now });
return Json(lst.ToDataSourceResult(request));
}
MODEL
namespace MvcApplication1.Models
{
public class TestModel
{
public int ID { get; set; }
public string Name { get; set; }
[DataType(DataType.DateTime)]
public DateTime? MyDate { get; set; }
}
public class ChildModel
{
public int ChildID { get; set; }
public string ChildName { get; set; }
}
}
Let me know if any concern.
I have done something like that in my project. I've searched a lot and I finally realize that the solution is creating master and detail grids, the first gird will be the master and the second which get information from the first is detail, in my example is have two grid, one for Sport Branch and the other is for Federation. Federation get information from Sport Branch.
The Sport Branch grid:
<div >
#(Html.Kendo().Grid<SportBranchViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.SportBranchTitle).Title("Title").Width(120);
columns.Command(command => { command.Edit().Text("Edit").UpdateText("OK").CancelText("Cancel");
command.Destroy().Text("Delete");
})
.Width(172);
})
.ToolBar(toolbar => toolbar.Create().Text("Create"))
.Editable(editable =>
{
editable.Mode(GridEditMode.InLine);
editable.DisplayDeleteConfirmation("Are you sure you want to delete");
})
.Scrollable()
.Sortable(sortable => sortable.AllowUnsort(true))
.ClientDetailTemplateId("federationtemplate")
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model => model.Id(p => p.SportBranchID))
.Read(read => read.Action("SportBranch_Read", "BaseData"))
.Update(update => update.Action("SportBranch_Update", "BaseData"))
.Create(create => create.Action("SportBranch_Create", "BaseData"))
.Destroy(destroy => destroy.Action("DeleteSportBranch", "BaseData"))
)
.Events(events => events.DataBound("collapseGrid"))
.HtmlAttributes(new { style = "height:400px;" }))
</div>
the Federation grid:
<script id="federationtemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<SportBranchFederationViewModel>()
.Name("grid_#=SportBranchID#")
.Columns(columns =>
{
columns.Bound(p => p.FederationName).Title("Title").Width(200);
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("OK").CancelText("Cancel");
command.Destroy().Text("Delete");
})
;
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Create");
}
)
.Editable(editable =>
{
editable.Mode(GridEditMode.InLine);
editable.DisplayDeleteConfirmation("Are you sure you want to delete?");
})
.Scrollable()
.Sortable(sortable => sortable.AllowUnsort(true))
.Pageable()
.Events( e=> e.DataBound("onDataBoundFederation"))
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("onError"))
.Model(model => model.Id(p => p.FederationID))
.Read(read => read.Action("SportBranchFederation_Read", "BaseData", new { sportBranchID = "#=SportBranchID#" }))
.Create(create => create.Action("SportBranchFederation_Add", "BaseData", new { sportBranchID = "#=SportBranchID#" }))
.Update(update => update.Action("SportBranchFederation_Update", "BaseData", new { sportBranchID = "#=SportBranchID#" }))
.Destroy(destroy => destroy.Action("SportBranchFederation_Destroy", "BaseData", new { sportBranchID = "#=SportBranchID#" }))
.PageSize(7)
)
.HtmlAttributes(new { style = "height:250px;" })
.ToClientTemplate()
)
</script>
in the controller:
public ActionResult SportBranchFederation_Read(int sportBranchID , [DataSourceRequest] DataSourceRequest request)
{
var data = _bvaDataService.GetFederations(sportBranchID);
return Json(CreateSportBranchFederationsFromFederations(data.ToList()).ToDataSourceResult(request));
}
Here is the steps:
put the second grid in a script tag and specify an id for the script tag.
In the first grid use the ClientDetailTemplateId() and pass the id of script tag which enclose the second grid.
In the action of second grid which you want pass the value of a column of the first gird use the expression "#= [column's name of the first grid]#" (here is "#=SportBranchID#"). Note the "#= #" can use in grid to use a value of a field from the current grid or another. I send this field to my read action to get the corresponding result( look at my controller)
adding ToClientTemplate() to the second grid
read these samples too :
http://demos.telerik.com/kendo-ui/grid/detailtemplate ,
http://demos.telerik.com/aspnet-mvc/grid/detailtemplate
I have the following view.
#using BecomingAKendoUISamurai.ViewModels
<h2>Step 21 MVC Grid CRUD</h2>
<br/>
#(Html.Kendo().Grid<SamuraiViewModel>()
.Name("SamuraiGrid")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden();
columns.Bound(m => m.FirstName);
columns.Bound(m => m.LastName);
columns.Bound(m => m.RankId).ClientTemplate("#=Rank#");
columns.Bound(m => m.DateOfBirth).Width(125);
columns.Bound(m => m.DateOfDeath).Width(125);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.DataSource(source => source
.Ajax()
.Sort(s => s.Add(p => p.LastName).Ascending())
.PageSize(5)
.Model(model =>
{
model.Id(m => m.Id);
})
.Create(create => create.Action(MVC.Home.ActionNames.CreateSamuraiMvc, MVC.Home.Name))
.Read(read => read.Action(MVC.Home.ActionNames.ReadSamuraiMvc, MVC.Home.Name))
.Update(update => update.Action(MVC.Home.ActionNames.UpdateSamuraiMvc, MVC.Home.Name))
.Destroy(destroy => destroy.Action(MVC.Home.ActionNames.DestroySamuraiMvc, MVC.Home.Name))
)
.Editable(editable => editable.Mode(GridEditMode.InLine)) //PopUp and InCell
.Sortable()
.Pageable(p => p.PageSizes(new int[]{2,4,6}))
.Filterable()
.ToolBar(toolbar => toolbar.Create())
)
Using the following View Model
namespace BecomingAKendoUISamurai.ViewModels
{
public class SamuraiViewModel : IMappableViewModel<SamuraiViewModel, Samurai>
{
#region Properties
public int Id { get; set; }
[Required]
[DisplayName("First Name")]
public string FirstName { get; set; }
[Required]
[DisplayName("Last Name")]
public string LastName { get; set; }
[Required]
[DisplayName("Rank")]
[UIHint("Rank")]
public int RankId { get; set; }
public string Rank { get; set; }
public List<SelectListItem> Ranks { get; set; }
[DisplayName("Date of Birth")]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
[UIHint("DateOfBirthDate")]
public DateTime DateOfBirth { get; set; }
[DisplayName("Date of Death")]
[DisplayFormat(DataFormatString = "{0:MMMM dd yyyy}")]
[UIHint("DateOfDeathDate")]
public DateTime DateOfDeath { get; set; }
#endregion
#region Constructors
public SamuraiViewModel()
{
Ranks = new List<SelectListItem>();
}
public SamuraiViewModel(Samurai samurai)
{
FromEntity(samurai);
}
#endregion
#region IMappableViewModel
public void FromEntity(Samurai entity)
{
Mapper.CreateMap<Samurai, SamuraiViewModel>()
.ForMember(vm => vm.RankId, m => m.MapFrom(e => e.Rank))
.ForMember(vm => vm.Rank, m => m.MapFrom(e => e.Rank.ToString()));
Mapper.Map(entity, this);
}
public Samurai ToEntity()
{
var entity = new Samurai();
Mapper.CreateMap<SamuraiViewModel, Samurai>()
.ForMember(e => e.Rank, src => src.MapFrom(vm => vm.RankId));
Mapper.Map(this, entity);
return entity;
}
#endregion
public string JsonRanks
{
get { return Ranks.ConvertToJson(); }
}
}
}
Using the following editor template
#model DateTime?
#(Html.Kendo().DatePicker()
.Name("DateOfBirth")
.Format("MM/dd/yyyy")
.Value(Model == null ? DateTime.Now : #Model)
)
Calling the controller's read method
public virtual JsonResult ReadSamuraiMvc([DataSourceRequest] DataSourceRequest request)
{
return Json(GetSamuraiViewModels().ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
private List<SamuraiViewModel> GetSamuraiViewModels()
{
var viewModel = new List<SamuraiViewModel>();
var samurais = samuraiService.ReadSamurai().ToList();
if (samurais.Any())
{
samurais.ForEach(s => viewModel.Add(new SamuraiViewModel(s)));
}
return viewModel;
}
I can see all the data in the grid. For example row 1 has:
"Hatori" "Hanzo" "Grand Master" "03/15/1541" "April 16 1563" Edit Delete
When I click the Edit button, first name, last name and Rank all have the values defined in the row, but Date of Birth and Date of Death are both empty.
How do I fix this?
I have tried using inline and popup mode and get the same results.
Thanks in advance.
Try using DatePickerFor:
#model DateTime?
#(Html.Kendo().DatePickerFor(m => m)
.Format("MM/dd/yyyy")
)
I define my viewmodel called StockDataPoint and view like this,in the viewmodel I limit that the color's length is 5.In the grid,if I edit the color such as input the string 'green1' which length is larger than 5,and the grid show length no more than 5,but when I input the 'green',it should be OK,but the grid still show length no more than 5.I have update the new version such as kendo.all.min.js,jquery.min.js，but it still not work.THe project is here,and the picture is here
ViewModel:StockDataPoint
public class StockDataPoint
{
public DateTime Date { get; set; }
[StringLength(5, ErrorMessage = "length no more than 5")]
public string Color { get; set; }
public double Close { get; set; }
public int Volume { get; set; }
public double Open { get; set; }
public double High { get; set; }
public double Low { get; set; }
public string Symbol { get; set; }
}
View:grid to show and edit data
#(Html.Kendo().Grid<ChartServerGrouping.Models.StockDataPoint>()
.Name("DataGrid")
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Columns(columns =>
{
columns.Bound(p => p.Close).Groupable(false).Title("Close").Width(120);
columns.Bound(p => p.Color).Groupable(false).Title("Color").Width(120);
columns.Command(command =>
{
command.Edit().UpdateText("Save");
}).Width(160); })
.Selectable(selectable => selectable.Type(GridSelectionType.Cell))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetData", "Home"))
.Update(read => read.Action("GetData", "Home"))
.Model(model => model.Id(p => p.Date))
)
.AutoBind(true)
.Resizable(resize => resize.Columns(true)))
Yes,in the official web it is a bug.