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>
Related
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>
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 implement Kendo widgets two level deep but the Razor engine keeps complaining: "Inline markup blocks (#Content) cannot be nested. Only one level of inline markup is allowed."
Is there a way for the Razor engine to render helpers two level deep?
My code example:
#(Html.Kendo().TabStrip()
.Name("tabStrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Strip1")
.Selected(true)
.Content(#<text>
#RenderPanelBar()
</text>);
tabstrip.Add().Text("Strip2")
.Content(#<text>
</text>);
})
)
#helper RenderPanelBar(){
#(Html.Kendo().PanelBar()
.Name("panelBar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add().Text("panel1")
.Expanded(true)
.Content(#<div>
<div>
#(Html.Kendo().Grid<GroupViewModel>()
.Name("GroupGrid")
.Columns(columns =>
{
columns.Bound(c => c.GroupID).Hidden();
columns.Bound(c => c.Name);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Template(#<text>
#RenderDropDown() //<-- here the error occurs
</text>);
}
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Group_Grid_Read", "Home"))
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.GroupID))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home"))
)
.Events(e => e.Change("onGroupGridChange").Save("GroupGrid_Save"))
)
</div>
</div>
</div>);
panelbar.Add().Text("panel2")
.Content(#<div>
//stuff abbreviated
</div>
);
})
)
}
#helper RenderDropDown(){
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
#(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "Grid");
})
)
</div>
}
I think you probably need to use razor helper at any level. In your case, you probably need to put the grid in another RenderGrid() as shown below:
#(Html.Kendo().TabStrip()
.Name("tabStrip")
.Items(tabstrip =>
{
tabstrip.Add().Text("Strip1")
.Selected(true)
.Content(#<text>
#RenderPanelBar()
</text>);
tabstrip.Add().Text("Strip2")
.Content(#<text>
</text>);
})
)
#helper RenderPanelBar()
{
#(Html.Kendo().PanelBar()
.Name("panelBar")
.ExpandMode(PanelBarExpandMode.Single)
.Items(panelbar =>
{
panelbar.Add().Text("panel1")
.Expanded(true)
.Content(#<text>
#RenderGrid()
</text>
);
panelbar.Add().Text("panel2")
.Content(#<div>
//stuff abbreviated
</div>
);
})
)
}
#helper RenderGrid()
{
#(Html.Kendo().Grid<UserModel>()
.Name("GroupGrid")
.Columns(columns =>
{
columns.Bound(c => c.GroupID).Hidden();
columns.Bound(c => c.Name);
columns.Command(command =>
{
command.Edit();
command.Destroy();
});
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Template(#<text>
#RenderDropDown()
</text>);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Scrollable(s => s.Enabled(false))
.Selectable(s => s.Enabled(true).Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource.Ajax()
.Read(read => read.Action("Group_Grid_Read", "Home"))
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.GroupID))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(update => update.Action("EditingInline_Destroy", "Home")))
.Events(e => e.Change("onGroupGridChange").Save("GroupGrid_Save"))
)
}
#helper RenderDropDown()
{
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
#(Html.Kendo().DropDownList()
.Name("categories")
.OptionLabel("All")
.DataTextField("CategoryName")
.DataValueField("CategoryID")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds => { ds.Read("ToolbarTemplate_Categories", "Grid"); })
)
</div>
}
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>