The grid in my detail template is not binding the data properly. If I expand one by one from top to bottom, it only binds the data for the first row and the grid inside all other rows are empty. If I expand them from bottom to top, it binds the data properly for all the rows. Any idea why it's doing this?
#(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("EmailInviteeGrid")
.Columns(columns =>
{
columns.Bound(e => e.EmailInviteID).Hidden(true);
columns.Bound(e => e.InvitationDate).Title("Invited On").Hidden(false);
columns.Bound(e => e.ClassDetails)
.Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")))
.Title("Class Details");
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInvitedEvents", "Controller", new { Model.EventID }))
)
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<EmailInvitationViewModel>()
.Name("grid_#=EmailInviteID#")
.Columns(columns =>
{
columns.Bound(o => o.GridInviteeEmail);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetAllInviteeEmailsByEvent", "DataSource", new { EventID = "#=EventID#", EmailInviteID = "#=EmailInviteID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
Related
I have an ASP.NET MVC application.
Here is my view code.
The problem that I am facing is that the kendo UI hierarchical grid does no show headers for child elements. Can you provide me any hint?
Here is the grid in the index file:
#section Scripts {
<script id="expandTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Portal.Web.Areas.Orders.Models.RegistroDetail>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(r => r.CodiceMateriale).Title("Codice Materiale");
columns.Bound(r => r.TestoBreve).Title("Testo Breve");
columns.Bound(r => r.MagazzinoLogicoPrecedente).Title("Magazzino logico precedente");
columns.Bound(r => r.Quantità).Title("Quantità");
columns.Bound(r => r.Resi).Title("Resi");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("RegistroDetail_Read", "RegistroRicondizionamento"))
)
.Pageable()
.Scrollable()
.ToClientTemplate()
)
</script>
}
<div class="position-detail-container">
<div class="table-container">
#(Html.Kendo().Grid<Portal.Web.Areas.Orders.Models.Registroheader>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(r => r.CodiceMateriale).Title("Codice Materiale");
columns.Bound(r => r.TestoBreve).Title("Testo Breve");
columns.Bound(r => r.UM).Title("UM");
columns.Bound(r => r.Quantità).Title("Quantità");
})
.Scrollable()
.ClientDetailTemplateId("expandTemplate")
.HtmlAttributes(new { style = "", id = "grid" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("RegistroHeader_Read", "RegistroRicondizionamento", Model))
)
.Deferred()
)
</div>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
</div>
can we implement multiple child nested grids in Kendo UI Grid using ASP.NET MVC i can implement 1 or 2 Child grids but how to implement 5-6 child grids inside one Parent kendo Grid
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(110);
columns.Bound(e => e.LastName).Width(110);
columns.Bound(e => e.Country).Width(110);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(70);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>
and sample or demo link will be much appreciated. Thanks in advance
Basically you should follow the same approach. The only thing that you should bother is that each Grid should have unique name.
Check the following demo, there are 3 levels of the hierarchy.
I'm trying to create a column to show row number using Kendo UI MVC with datasource from server. I've tried several ways, but the number column doesn't show anything, it's just plain empty
here is some of ways that i've tried
First Attempt, using databound
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(t => { }).ClientTemplate(#<text><span class="row-number"></span></text>).Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.Events(events => events.DataBound(
#<text>
function(e){
var rows = this.items();
$(rows).each(function(){
var index = $(this).index() + 1;
var rowLabel = $(this).find(".row-number");
$(rowLabel).html(index);
})
}
</text>
))
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
Second attempt using template
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(#<text>#counter #{#counter++;}).Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
</div>
Third Attempt, using client template
#{var counter = 1;}
<div id="roleContainer">
#(Html.Kendo().Grid(Model)
.Name("RoleGrid")
.Columns(columns =>
{
columns.Template(t => { }).ClientTemplate(" #= counter++ #").Title("No");
columns.Bound(p => p.RoleName).Title("User Role");
columns.Bound(p => p.RoleDescription).Title("Description");
columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group");
columns.Command(command =>
{
command.Custom("View Details").Click("showDetails");
command.Custom("Edit").Click("edit");
command.Destroy();
}).Title("Actions");
})
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>"))
.Pageable()
.Sortable()
.Filterable()
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(p => p.UserId))
.PageSize(20)
.Destroy(update => update.Action("Delete", "Role"))
.ServerOperation(false)
)
)
</div>
And not even one of them show something in html, it's empty
Any suggestions?
In sortable and pageable grid, row numbers kinda don't make sense. But if you insist, Kendo does not really have a way to do row-numbers. I've tried.
If you only need client-side display, you can do this with css and javascript.
May I ask you why do you need this?
I'm currently using the MVC Kendo Grid with Hierarchy view to display child accounts.
Here is my main grid (child below) For this grid I have set up the change event (also below). My question is, how do I set up the same change functionality with the child grid? Each will have a different ID so I'm not currently able to properly select it.
EDIT: I ONLY NEED THE ID OF THE ACCOUNT FROM THE SELECTED CHILD ROW
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.ClientDetailTemplateId("ChildAccounts")
.DataSource(dataSource => dataSource
.Ajax() // Specify that the data source is of ajax type
.Model(model => model.Id(a => a.ID))
.Events(events => events.Error("error"))
.Read(read => read.Action("ReadAccounts", "Accounts")) // Specify the action method and controller name
.Destroy(destroy => destroy.Action("DeleteAccount", "Accounts"))
.PageSize(50)
)
.Pageable()
.Filterable()
.Selectable()
.Scrollable()
.Sortable()
.Events(events => events.Change("gridChange"))
.Events(events => events.DataBound("dataBound"))
.ToolBar(toolbar => toolbar.Template(
#<text>
<div class="toolbar">
<select id="FilterCategory"></select>
<input type="search" id="Search" style="width: 230px" />
</div>
</text>
))
)
Child Grid:
<script id="ChildAccounts" type="text/kendo-tmpl">
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
</script>
function dataBound() {
// this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Here is the GridChange function (shortened for brevity)
function gridChange(e) {
//Enable all button -Prakash Date-07/27/2012
accountsButtons.button({ disabled: false });
$("#nodeList").html('');
$("#updateMessage").html('');
$("#noteMessage").html('');
$("#Note_Description").val('');
kdata = this;
You have absolutely no problem to declare the same event into the child Grid.
#(Html.Kendo().Grid<TRX.CRM.Dashboard.Entities.DashBoard.Accounts>()
.Name("SubAccounts_#=ID#")
.Columns(columns =>
{
columns.Bound(p => p.Acct_FName).Width(80);
columns.Bound(p => p.Acct_LName).Width(80);
columns.Bound(p => p.Acct_Type).Width(90);
columns.Bound(p => p.Acct_LastContact).Width(140);
columns.Bound(p => p.Acct_Zip).Hidden();
columns.Bound(p => p.ID).Hidden();
})
.Events(ev=>ev.Change("detailGridChange"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadSubAccounts", "Accounts", new { ID = "#=ID#" }))
)
.Pageable()
.Sortable()
.Selectable()
.ToClientTemplate()
)
<script>
function detailGridChange(e){
var parentDataItem = $('#Grid').data().kendoGrid.dataItem($(this.element).closest('.k-detail-row').prev('.k-master-row'));
alert(parentDataItem.ID);
}
</script>
I have a Kendo Grid in MVC4 that is working fine:
Html.Kendo().Grid<SearchUserResultViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserLoginId);
columns.Bound(p => p.AppUserName);
columns.Bound(p => p.AppUserStatus);
columns.Bound(p => p.AppUserGUID).ClientTemplate(
"Modify");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SearchUser_Read", "Search").Data("parentModel"))
)
.Pageable()
However, I wish to user to cause a Post, not a Get when the field AppUserGUID is clicked. Is that possible?
change column client template as following :
<form action="#Url.Action("EditUser", "Edit")">
Html.Kendo().Grid<SearchUserResultViewModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.UserLoginId);
columns.Bound(p => p.AppUserName);
columns.Bound(p => p.AppUserStatus);
columns.Bound(p => p.AppUserGUID).ClientTemplate(
"<input type="submit" value="Modify"/>");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("SearchUser_Read", "Search").Data("parentModel"))
)
.Pageable()
</form>
you must wrap the grid with a from tag as well.