Kendo MVC Wrapper - Custom Editor if grid - asp.net-mvc

I'm trying to get a custom popup editor working in our Grid using MVC wrappers.
The MVC wrapper is
Html.Kendo().Grid(#Model.ReferralCommentsViewModel.ReferralComments)
.Name("gridComment")
.Columns(columns =>
{
columns.Bound(p => p.CommentValue).Title("Comment").Encoded(false).Width(450);
columns.Bound(p => p.CreatedBy).Title("Created By").ClientTemplate("#= kendo.toString(CreatedBy) #").Width(100);
columns.Bound(p => p.CreatedDate).Title("Create Date").ClientTemplate("#= kendo.toString(CreatedDate, \"MM/dd/yyyy\") #").Width(70);
columns.Command(command => { command.Edit().Text(" "); }).Title("Edit").Width(20);
columns.Command(command => { command.Destroy().Text(" "); }).Title("Delete").Width(20);
})
.ToolBar(toolbar => toolbar.Create().Text("Add new Comment"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("popupEditorTemplate").Window(w=>w.Title("Add/Edit Comment")))
.Resizable(resize => resize.Columns(true))
.Sortable()
.Selectable()
.HtmlAttributes(new { style = "height:165px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.AutoSync(false)
.Batch(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CommentID))
.Create(update => update.Action("EditingPopup_Create", "Referral"))
.Read(read => read.Action("EditingPopup_Read", "Referral"))
.Update(update => update.Action("EditingPopup_Update", "Referral"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Referral"))
)
The editor template is -
<script id="popupEditorTemplate" type="text/x-kendo-template">
<label for="Created Date">Created Date:</label><Input data-bind= "value: CreatedDate" readonly="true" />
<label for="Created By">CreatedBy:</label><Input data-bind= "value:CreatedBy" readonly="true" />
<label for="Created By">Comments:</label>
<textarea data-role="editor"
data-bind="value: CommentValue"
style="width: 280px"></textarea>
</script>
No matter what options I use, I cannot get the custom edit template to display in the popup. Only the default popup is displayed. Is there something obvious missing?
Project - VS2012, MVC4

TemplateName should specify the name of the view which is a cshtml in the EditorsTemplate folders which MVC searches automatically.
It should not be the name of a html element which holds a Kendo template (like you did). More info about MVC EditorTemplates can be found here.

Related

Kendo UI Hierarchical grid shows no header for child elements

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>

Create multiple nested Child grids in Kendo UI Grid using ASP.NET MVC

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.

Kendo UI MVC Grid Row Number with Server DataSource

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?

How to specify style in Kendo UI asp.net mvc grid editor

I'm working through some Kendo UI tutorials and have a problem with the look of my text boxes on the grid. The demo I'm following is http://demos.kendoui.com/web/grid/editing-inline.html.
I've figured out how to format the date in the grid and use a datepicker for the date in the editor. To do this I've used an Editor template.
I've added an editor template for the name column just so I could apply a css class and it looks better but it doesn't function correctly. When the editor opens up the value in the text box is empty (see image). Surely there must be an easier way to apply a css class.
Do I have to create an editor template for all text boxes in the grid? If so, how can I have it bring the value when editing?
Here's the code for the grid:
#(Html.Kendo().Grid<Product>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Name);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.Units).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Bound(p => p.Date).Width(100).Format("{0:d/M/yyyy}");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
Here's the code for the name editor template:
#using Kendo.Mvc.UI
#model KendoUiOne.Models.Product
#Html.TextBoxFor(x=>x.Name, new {#class = "k-input k-textbox"})
The issue is that model passed to the editor template is not the Product but just the string. This means that the model of the editor template is string.
And you should declare the TextBox helper to be for the model itself.
the Editor template should look like this:
#model string
#Html.TextBoxFor(x=>x, new {#class = "k-input k-textbox"})
Interesting, try to set the name of the widget to be "Name" instead of using the TextBoxFor helper.
e.g.
#Html.TextBox("Name", new {#class = "k-input k-textbox"})
Try:
#Html.TextBox("Name", Model.Name, new {#class = "k-input k-textbox"})
Or try with HTML first, to debug the issue then revert back to Html.TextBox helper:
<input type="text" id="Name" value="#Model.Name" class="k-input k-textbox"/>

Interacting with Kendo Ui Child Grid

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>

Resources