Kendo MVC grid with ClientGroupHeaderTemplate with ClientTemplate checkboxes validation - kendo-ui

I am using Kendo MVC grid with ClientGroupHeaderTemplate with ClientTemplate checkboxes as one of the column. Under each group there are check boxes, At least one check box should be selected under each group. How do I loop through each groups and validate if check box is checked or not. Please help.
#(Html.Kendo().Grid<Arthama.Web.GlobalvaluesModels.Model.Model>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Type).Title("Type").ClientGroupHeaderTemplate("#= items[0].Type#").Hidden(true);
columns.Bound(p => p.Text).Visible(true).Width(50).Title("SubType").Filterable(x => x.Cell(y => y.Template("template").ShowOperators(false).Operator("contains")));
columns.Bound(p => p.Value).Visible(false).Width(50).Title("Value");
columns.Bound(c => c.Check).Width(40).Title("Check").ClientTemplate("<input name='Check' type='checkbox' #= Check? checked='checked': '' # class='chk_row' />").HtmlAttributes(new { style = "text-align: center" }).Filterable(false).HeaderHtmlAttributes(new { style = "text-align:center" }).Filterable(false).Sortable(false);
})
.HtmlAttributes(new { #style = "height:390px;" })
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.Sort(x => x.Add("Check").Descending())
.Group(group => group.Add(p => p.Type))
.Batch(true)
.ServerOperation(false)
.PageSize(1000)
.Read(read => read.Action("Action", "Controller").Data("param"))
)
.Pageable()
.Sortable()
.Events(e => e.DataBound("DBound"))
.Scrollable()
.Resizable(resize => resize.Columns(true))
)
This is what I am trying, but this won't loop through groups
var len = $("#grid").data("kendoGrid").dataSource.data().length;
var data = $("#grid").data("kendoGrid").dataSource.data();
for (i = 0; i < len; i++) {
if (data[i].Check=== true) {
}
}

Related

Invalid Tempate error on nested grids inside editorTemplate popup of ASP.NET Core Kendo Grid

I have a ASP.NET Core Kendo grid which display's list of Users. The grid has pouup mode editor template. The Kendo Grid code looks like this.
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.UserViewModel>()
.Name("UserGrid")
.Columns(columns =>
{
columns.Command(command =>
{
if (UserAccessService.CanEdit("User"))
{
command.Edit().UpdateText("Submit").Text(" ");
command.Custom("Clear").Text(" ").IconClass("k-icon k-i-clear-css k-grid-features").HtmlAttributes(new { title = "Clear User", #class = "k-grid-custom" }).Click("User_clearUser");
command.Custom("Email").Text(" ").IconClass("k-icon k-i-envelop").HtmlAttributes(new { title = "Send Welcome Email", #class = "k-grid-custom" }).Click("User_sendWelcomeEmail");
command.Custom("Unlock").Text(" ").IconClass("k-icon k-i-unlock").Visible("function (e) { return (!e.IsLockedOut); }").HtmlAttributes(new { title = "Disable User", #class = "k-grid-custom" }).Click("User_disableUser");
command.Custom("Lock").Text(" ").IconClass("k-icon k-i-lock").Visible("function (e) { return (e.IsLockedOut); }").HtmlAttributes(new { title = "Enable User", #class = "k-grid-custom" }).Click("User_enableUser");
command.Custom("UserFile").Text(" ").IconClass("k-icon k-i-file").HtmlAttributes(new { title = "User Profile File", #class = "k-grid-custom" }).Click("User_openFilePopup");
}
}).Width(75);
columns.Bound(p => p.UserId).Hidden(true);
columns.Bound(p => p.UserName).MinResizableWidth(100);
columns.Bound(p => p.Prefix).MinResizableWidth(50);
columns.Bound(p => p.FirstName).MinResizableWidth(50);
columns.Bound(p => p.LastName).MinResizableWidth(50);
columns.Bound(p => p.Suffix).MinResizableWidth(50);
columns.Bound(p => p.Email).MinResizableWidth(100);
columns.Bound(p => p.PhoneNumber).MinResizableWidth(60);
})
.ToolBar(toolbar =>
{
toolbar.Custom().Text("Reset Filters").HtmlAttributes(new { id = "resetAllGridFilters", #class = "btn-grid-toolbar", onclick = "ResetGridFilter(\"UserGrid\")" });
if (UserAccessService.CanAdd("User"))
{
toolbar.Create().Text("Add New User").HtmlAttributes(new { #class = "btn-grid-toolbar" });
}
if (UserAccessService.IsAnjuAdmin)
{
toolbar.Custom().Text("Flag Reset Security").HtmlAttributes(new { id = "flagResetSecurity",#class = "btn-grid-toolbar", onclick = "User_flagResetSecurity()" });
toolbar.Custom().Text("Unflag Reset Security").HtmlAttributes(new { id = "unFlagResetSecurity",#class = "btn-grid-toolbar", onclick = "User_unFlagResetSecurity()" });
}
toolbar.Custom().Text("Show Disabled Users").HtmlAttributes(new { id = "showHideDisabledUsers", #class = "btn-grid-toolbar", onclick = "showHideDisabledUsers()" });
})
.Pageable(pageable => pageable
.Refresh(true)
.Responsive(false)
.PageSizes(Constants.PageSizes)
.ButtonCount(5))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Filterable()
.Events(e => e.DataBound("gridDataBoundAutoFit"))
.Events(e => e.Edit("User_AddEditUser"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(UserAccessService.PageSize)
.ServerOperation(true)
.Events(e => e.RequestEnd("User_AddProductDetails"))
.Events(events => events.Error("onGridError"))
.Model(model => model.Id(p => p.UserId))
.Read(read => read.Action("GetUserList", "User").Data("getUserDetailsOptions"))
.Create(create => create.Action("AddUser", "User"))
.Update(update => update.Action("UpdateUser", "User")))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("User").Window(w => w.Height(670).Width(600)))
)
The Editor template is having tab strips and one of tab is having nested Kendo grid.
The Code for the ASP.NET Core Kendo Grid is as follows :
<script id="UserProductSegmentTemplate" type="text/kendo">
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.SegmentViewModel>()
.Name("UserProductSegmentGrid#=ProductId#")
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(c => c.SegmentId).Width(0).Hidden();
columns.Bound(c => c.Name).Title("Segment Name").Width(100);
})
.Sortable()
.Scrollable()
.PersistSelection()
.NoRecords(records => records.Template("No Records."))
.DataSource(dc => dc.Ajax()
.ServerOperation(true)
.Model(model => model.Id(p => p.SegmentId))
.Read(read => read.Action("GetSegmentList", "Segment", new { productId = 1 }))
)
.ToClientTemplate()
)
</script>
<div class="row">
#(Html.Kendo().Grid<Anju.PubSTRAT.Web.Areas.Admin.Models.ProductViewModel>()
.Name("ProductGrid")
.Columns(columns =>
{
columns.Select().Width(50);
columns.Bound(p => p.ProductId).Hidden(true);
columns.Bound(p => p.Name).MinResizableWidth(200);
columns.Bound(p => p.Identifier).MinResizableWidth(150);
columns.Bound(p => p.GenericName).MinResizableWidth(150);
})
.Pageable(pageable => pageable
.Refresh(true)
.Responsive(true)
.PageSizes(Constants.PageSizes)
.ButtonCount(5))
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Filterable()
.PersistSelection()
.Events(e => e.Change("onUserProductGridChange"))
.Events(e => e.DataBound("onUserProductDataBound"))
.ClientDetailTemplateId("UserProductSegmentTemplate")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(UserAccessService.PageSize)
.ServerOperation(true)
.Model(model => model.Id(p => p.ProductId))
.Read(read => read.Action("GetProductList", "Product")))
.ToClientTemplate()
)
</div>
When I click on "Add New User" toolbar button the editor popup opens but grid is not getting rendered and getting "Invalid template" in browser console.

How to change the default value of Grid page size in Kendo UI?

I am new to Kendo UI. i have my code as follows.
#(Html.Kendo().Grid<ETS.Model.CompanyList>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.CompanyID).Title("Name").Template(#<text>#Html.ActionLink(#item.Name, "Company", "Companies", new { #id = #item.CompanyID }, new { #style = "color:black; text-decoration: none;" })</text>);
columns.Bound(p => p.City).Title("Billing City");
columns.Bound(p => p.SalesRep).Title("Sales Rep");
columns.Bound(p => p.Phone).Title("Company Name");
})
.Pageable(pageable => pageable
.PageSizes(true)
.ButtonCount(5)
.Refresh(true)
)
.Sortable()
.HtmlAttributes(new { style = "height: auto;" })
.BindTo(Model.Companies)
)
By default the there are 5 items displayed on the grid. Is there any way i can change that default value to 20 ?
Generally you would set the using the PageSize() function on your DataSource :
#(Html.Kendo().Grid<Product>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Home"))
.PageSize(20)
)
)
or you could try limiting the available PageSizes() to just 20 :
.Pageable(pageable => pageable.PageSizes(new int[] {20}) ...)
Additionally, it can be set through the Javascript API via :
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(20);
grid.refresh();

Child grid custom command button

I have a question based on my current situation, I have a grid with ClientDetail / Child grid inside of it. In my parent grid there is a custom command button, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showEdit"); command.Destroy();
}).Width(160);"
and also i had my custom command button as well in my child grid, let say...
"columns.Command(
command => { command.Custom("Edit").Click("showSubEdit"); command.Destroy();
}).Width(160);"
Those 2 custom command should call different function which is "showEdit" & "showSubEdit". The problem is, every time custom command in child grid triggered, it always calls its parent's function which is "showEdit", however the child grid should call "showSubEdit".
Is there something i missed ?
NB :
function showEdit(e) {
...
}
function showSubEdit(e) {
...
}
Grid Code :
<div>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridActivity")
.Columns(columns =>
{
//columns.Template(t => { }).Title("No").ClientTemplate("#= renderNumber(data) #").Width(50);
columns.Bound(c => c._id).Visible(false);
columns.Bound(c => c.ActivityType.TypeTitle).Title("Type").Width(80);
columns.Bound(c => c.ActivityTitle).Title("Title").Width(120);
columns.Bound(c => c.DependenciesStr).Title("Dependencies").Width(120);
columns.Bound(c => c.ResourcesStr).Title("Resources").Width(120);
columns.Bound(c => c.FromStr).Title("From");
columns.Bound(c => c.ToStr).Title("To");
columns.Bound(c => c.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(c => c.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEdit"); command.Destroy(); }).Width(160);
})
.HtmlAttributes(new { style = "height: 290px;" })
.Groupable()
.Scrollable()
.Sortable()
.Filterable()
.ClientDetailTemplateId("template")
.Pageable(x => x.PageSizes(new int[] { 10, 20 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(c => c.Id(p => p._id))
.Read(read => read.Action("ProjectActivities_Read", "Project", new { projectId = ViewBag.ProjectId }))
.Destroy(destroy => destroy.Action("ProjectActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId }))
)
.Events(x => x.DataBound("resetRowNumber"))
)
</div>
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().TabStrip()
.Name("TabStrip_#=_id#")
.SelectedIndex(0)
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Sub Activity").Content(#<text>
#(Html.Kendo().Grid<ActivityModel>()
.Name("GridChild_#=_id#")
.Columns(columns =>
{
columns.Bound(x => x._id).Visible(false);
columns.Bound(x => x.ActivityType.TypeTitle).Title("Type");
columns.Bound(x => x.ActivityTitle).Title("Title").Width(150);
columns.Bound(x => x.DependenciesStr).Title("Dependencies").Width(150);
columns.Bound(x => x.ResourcesStr).Title("Resources").Width(150);
columns.Bound(x => x.FromStr).Title("From");
columns.Bound(x => x.ToStr).Title("To");
columns.Bound(x => x.Status).Title("Status").Width(90).Format("{0:0.00} %").Width(85);
columns.Bound(x => x.Weight).Title("Weight").Format("{0:0.00} %").Width(85);
columns.Command(command => { command.Custom("Edit").Click("showEditSub"); command.Destroy(); }).Width(160);
})
.Pageable(x => x.PageSizes(new int[] { 5, 10 }).Refresh(true))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Model(x => x.Id(y => y._id))
.Read(read => read.Action("ProjectSubActivities_Read", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
.Destroy(destroy => destroy.Action("ProjectSubActivities_Destroy", "Project", new { projectId = ViewBag.ProjectId, activityId = "#=_id#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate())
</text>
);
}).ToClientTemplate())
</script>
I got around the bubbling by checking if the element shown by the first command event is visible:
function showDetailsLevel(e) {
e.preventDefault();
originatingId = this.dataItem($(e.currentTarget).closest("tr")).Id
var wnd = $("#Details").data("kendoWindow");
if (!$("#Details").is(":visible")) {
wnd.center();
wnd.open();
var grid = $("#DetailGrid").data("kendoGrid");
grid.dataSource.read();
}
}

Getting the value of a column in a child grid in a kendo grid hierarchy

I have a Kendo grid hierarchy and was wondering how to go about getting the value of a column in the child grid so I can pass that value to a function in the controller. The data in the parent grid is being pulled from one db table which is a quote entry and the child grid is pulling from another table which contains line item versions of the quote. In the child grid, I click the edit button to pass a value to a controller. I get an error saying that VersionID is undefined. How do I go about getting the value from the VersionID column in the child grid?
Here is code for the parent grid:
#(Html.Kendo().Grid<myWilmer.Models.QuotesSearchViewModel>()
.Name("quotesSearchGrid")
.Columns(columns =>
{
columns.Bound(c => c.AccountNumber);
columns.Bound(c => c.QuoteNumber);
columns.Bound(c => c.CustomerName);
columns.Template(c => { }).ClientTemplate(
Html.ActionLink("Create Version", "CreateQuoteVersion", new { id = "#= QuoteNumber #" }, new { #class = "k-button" }).ToHtmlString());
})
.ToolBar(toolbar => toolbar.Custom().Text("Create New Quote").Action("Index", "Quotes"))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.Sortable()
.ClientDetailTemplateId("template")
.Events(events => events.DataBound("onDataBound"))
.Pageable(pageable => pageable
.ButtonCount(5)
.PageSizes(new int[] { 10, 20, 30 }))
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Model(model =>
{
model.Id(m => m.QuoteNumber);
model.Field(m => m.AccountNumber).Editable(false);
model.Field(m => m.QuoteNumber).Editable(false);
model.Field(m => m.CustomerName).Editable(false);
})
.Read(read => read.Action("Quotes_Read", "Quotes").Data("filters"))
.Events(e => e.Error("ShowAjaxError"))
.Create(update => update.Action("EditingInline_Create", "Quotes"))
)
)
And here is code for the child grid:
<script id="template" type="text/kendo-templ">
#(Html.Kendo().Grid<myWilmer.Models.QuoteVersionViewModel>()
.Name("quoteDetailsGrid_#=QuoteNumber#")
.Columns(columns =>
{
columns.Bound(c => c.VersionID);
columns.Bound(c => c.JobType);
columns.Bound(c => c.ProductType);
columns.Bound(c => c.RepName);
columns.Bound(c => c.TimeIn).Format("{0:hh:mm:ss tt}");
columns.Bound(c => c.DateIn).Format("{0:MM/dd/yyyy}");
columns.Template(c => { }).ClientTemplate(
Html.ActionLink("Edit", "Edit", new { id = "#= QuoteNumber #", itemID = "#= VersionID #" }, new { #class = "k-button" }).ToHtmlString());
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("Versions_Read", "Quotes", new { quoteNumber = "#=QuoteNumber#" }))
.Model(model => {
model.Id(m => m.VersionID);
model.Field(m => m.VersionID).Editable(false);
model.Field(m => m.JobType).Editable(false);
model.Field(m => m.ProductType).Editable(false);
model.Field(m => m.RepName).Editable(false);
model.Field(m => m.TimeIn).Editable(false);
model.Field(m => m.DateIn).Editable(false);
})
)
.Pageable(pageable => pageable
.ButtonCount(5)
.PageSizes(new int[] { 10, 20, 30 }))
.Sortable()
.ToClientTemplate()
)
Here is the controller method
public ActionResult Edit(string id, int itemID)
{
//Functionality
}
Thanks in advance - Shaun
You should use:
\\#= VersionID\\#
in the child grid.
Here is the solution we came up with. In the view model, we created a property called "EditButton" and set it to a string with HTML markup:
QuoteVersionViewModel qvvm = new QuoteVersionViewModel()
{
QuoteNumber = deet.QuoteNum,
VersionID = deet.VersionID,
ProductType = deet.ProductType,
JobType = deet.JobType,
RepName = deet.RepName,
TimeIn = deet.TimeIn,
DateIn = deet.DateIn,
EditButton = "<a href='" +u.Action("Edit", "Quotes", new { id = deet.QuoteNum, versionID = deet.VersionID }) + "' class='k-button'>Edit</a>"
};
And our Kendo grid columns looks like this:
.Columns(columns =>
{
columns.Bound(c => c.QuoteNumber);
columns.Bound(c => c.VersionID);
columns.Bound(c => c.JobType);
columns.Bound(c => c.ProductType);
columns.Bound(c => c.RepName);
columns.Bound(c => c.TimeIn).Format("{0:hh:mm:ss tt}");
columns.Bound(c => c.DateIn).Format("{0:MM/dd/yyyy}");
columns.Bound(c => c.EditButton).Encoded(false);
})

How can I insert a ActionLink into a Kendo grid?

I am trying to get the action link working in this code. Afraid I am an absolute novice so need help desperately.
The link simply has to call a small managing window linked to the UnderwriterID which would be the UserName.
#(Html.Kendo().Grid<QMS.ViewModels.UnderwriterVM>()
.Name("Grid1")
.Columns(columns =>
{
columns.Bound(p => p.PortfolioID).Width(100);
columns.Bound(p => p.UnderwriterID).Width(100);
columns.Bound(p => p.UWName).Width(100);
columns.Bound(p => p.UWLastName).Width(100);
columns.Bound(p => p.PremiumAuthority).Width(100);
columns.Bound(p => p.DiscountAuthority).Width(100);
columns.Bound(p => p.UW_ShortID).Width(100);
columns.Bound(p => p.MaxDiscount).Width(100);
columns.Template(p => #Html.ActionLink("Manage", "ManageUW", new { pfid = ViewBag.PF, uwid = Model.FirstOrDefault().UserName }));
columns.Command(command => { command.Destroy(); }).Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
})
//.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Create("Underwriters_Create", "Grid")
.Update("Underwriters_Update", "Grid")
.Destroy("Underwriters_Destroy", "Grid")
.Read("Read_Underwriters", "Grid", new { vPortId = ViewBag.PF} )
.Model(model =>
{
model.Id(p => p.UnderwriterID);
model.Field(p => p.PortfolioID).DefaultValue(ViewBag.PF);
model.Field(p => p.UWName).Editable(true);
model.Field(p => p.UWLastName).Editable(true);
model.Field(p => p.PremiumAuthority).Editable(true);
model.Field(p => p.DiscountAuthority).Editable(true);
}))
)
Here is what my column client templates look like:
columns
.Bound(p => p.UserName)
.Title("")
.Filterable(false)
.Sortable(false)
.Width(103)
.ClientTemplate(Html.ActionLink("<span class=\"k-icon k-i-pencil\"></span>Manage", "ManageUW", "YourController", new { pfid = ViewBag.PF, uwid = "#=UserName#" }, new { #class = "k-button k-button-icontext" }).ToHtmlString());
Try something like this
VB code:
.ClientTemplate(Html.ActionLink("Roles", "UserRolesManage", New With {.UserId = "#=UserId#", .UserLogin = "#=UserLogin#"}).ToHtmlString()
C# code:
.ClientTemplate(#Html.ActionLink("Roles", "UserRolesManage", New {UserId = "#=UserId#", UserLogin = "#=UserLogin#"}).ToHtmlString()

Resources