So I've got the following piece of code working server side using Kendo Grid. However, I am confused on the next step.
How do I set the grid to initially group by Income_Party? Also is it possible to add in a total amount per grouping?
#(Html.Kendo().Grid(Model.IncomeView)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.INC_INCOME_DESCRIPTION);
columns.Bound(item => item.INC_INCOME_AMOUNT);
columns.Bound(item => item.INC_INCOME_PARTY);
columns.Template(#<text>
#Html.ActionLink("Edit", "Edit", "MyLink" + item.VIEW_TYPE, new { id = item.GID, ReturnAction = "IncomeAndExpenses" }, null)
</text>)
.ClientTemplate("<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>")
.Title("");
})
)
You can set the initial groups and aggregates like this:
#(Html.Kendo().Grid(Model.IncomeView)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.INC_INCOME_DESCRIPTION);
columns.Bound(item => item.INC_INCOME_AMOUNT).GroupFooterTemplate(#<text>
Total: #item.Sum
</text>);
columns.Bound(item => item.INC_INCOME_PARTY);
columns.Template(#<text>
#Html.ActionLink("Edit", "Edit", "MyLink" + item.VIEW_TYPE, new { id = item.GID, ReturnAction = "IncomeAndExpenses" }, null)
</text>)
.ClientTemplate("<a href='/brunch/statistics/brunchid=#= BrunchCode#'>#=BrunchCode#</a>")
.Title("");
})
.DataSource(dataSource => dataSource
.Server()
.Aggregates(aggregates =>
{
aggregates.Add(p => p.INC_INCOME_AMOUNT).Sum();
})
.Group(groups => groups.Add(p => p.INC_INCOME_PARTY))
)
Related
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.
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) {
}
}
I'm trying to limit the dropdowns in my kendo grid to only contain Products that have been previously mapped to the company chosen in another cell in the row.
I've used a dynamic drop down editor template approach.
However, the ID passed to getCompanyId() is always null and therefore my dropdowns are always null.
View:
#(Html.Kendo().Grid<XXXAppXXX.Models.WeeklyRailPlan>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.WeekNumber);
columns.Bound(c => c.Company).ClientTemplate("#=(data.Company) ? Company.Name : 'Select Company...'#");
columns.Bound(c => c.ServiceCode);
columns.Bound(o => o.Product)
.ClientTemplate("#= (data.Product) ? Product.Name : 'Select Product'#")
.EditorTemplateName("DynamicDropDownList");
//etc
})
.ToolBar(toolbar => {
toolbar.Create();
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Filterable()
.Events(ev => ev
.Remove(#"function(e){setTimeout(function(){$('#grid').data('kendoGrid').dataSource.sync()})}")
)
.Sortable(sortable => {
sortable.SortMode(GridSortMode.SingleColumn);
})
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Sort(p => { p.Add("WeekNumber").Descending(); })
.Model(model => model.Id(p => p.ID))
.Read(read => read.Action("WeeklyRailPlans_Read", "WeeklyRailPlanGrid"))
.Create(create => create.Action("WeeklyRailPlans_Create", "WeeklyRailPlanGrid"))
.Update(update => update.Action("WeeklyRailPlans_Update", "WeeklyRailPlanGrid"))
.Destroy(destroy => destroy.Action("WeeklyRailPlans_Destroy", "WeeklyRailPlanGrid"))
)
)
EditorTemplate called DynamicDropDownList.cshtml
<script type="text/javascript">
function getCompanyId() {
return { CompanyID: '#=ID#' };
}
</script>
#(Html.Kendo().DropDownList()
.Name("Product")
.DataValueField("ID")
.DataTextField("Name")
.DataSource(ds => ds
.Read(read => read.Action("GetProductsForCompany", "Products").Data("getCompanyId")))
)
Controller method GetProductsForCompany (this is always receiving null)
public ActionResult GetProductsForCompany(int CompanyID)
{
return Json(db.Products.Where(e => e.Companies.Any(t =>t.ID == CompanyID)), JsonRequestBehavior.AllowGet);
}
I use code like this:
<script type="text/javascript">
function getCompanyId() {
var gview = $('#grid').data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
return { CompanyID: selectedItem.ID };
}
</script>
This solution required was:
function getCompanyId() {
var grid = $('#grid').data('kendoGrid');
var dataItem = grid.dataItem(grid.table.find('.k-edit-cell').parents('tr'))
return { CompanyID: dataItem.Company.ID };
}
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();
}
}
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);
})