hi, I have created a grid that works 'fine' and display one line as supposed,
@(Html.Kendo().Grid<ESACatalog.Models.tb_Part>()
.Name("gridPart")
.Columns(columns => {
columns.Bound(p => p.PartID).Width(150);
columns.Bound(p => p.ClassID);
columns.Bound(p => p.PartListPrice).Width(100).Title("List Price");
columns.Bound(p => p.PartDesc).Title("Description");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Get_Part", "Home").Data("getParameter")))
)
I need now to read the value of column ClassID to reuse it so i tried the following code
var grid = $("#gridPart").data("kendoGrid");
grid.bind("change", function(e) {
var dataItem = grid.dataSource.view()[0];
if (dataItem) {
var value = dataItem.columnName;
console.log(value);
}
});
but got a message as unassigned
I would really appreciate any help
thanks
Ray

Have a common scenario - a Grid that has an MVC controller method for its DataSource read action. Can someone confirm If Im understanding the capabilities correctly. I dont supposed I realized that if I used the features on the Grid - I dont need to manually provide UI elements to filter the grid :)
(1) Having Scrollable() enabled and using the DataSourceRequest with PageSize = N (not explicitly setting Pageable), I will get the capability to fetch only N records at a time and if using an IQueryable and calling something like myData.ToDataSourceResult(request), where myData is an IQueryable and request is the passed in DataSourceRequest - the result will be a query that is already updated before its actually executed? This is what I normally refer to as paging, but without any page numbers etc. Just fetching a limited number of records at a time, instead of the whole thing.
(2) If Filterable is ALSO enabled, I do not need seperate UI widgets to get values for filtering the data serverside by modifying a query before its executed, but rather the filters are embeded within the DataSourceRequest and just happens? I tested this and this seems to be the case. futher more, this all works with the above, eg getting only N records at a time.
Question
If I have 2 filters applied on my grid, one for a date and one for a name/string, along with PageSize = 50, how does this affect the actual query that gets executed? Is it applying WHERE conditions first then doing a Take(N) records, or does the Take happen first?
I declare a radio button group on the page inside a list-type control (or a @foreach loop). Radio button group is bound to a model property and needs to have its name prefixed with an index like so: "Model[0].PropOne". When I use @Html.Name helper with other controls like a checkbox it works right, but with radio buttons it produces a name like this - Model_0__PropOne. So, looks like it replaces brackets and dots with an underscore. What do I need to do to get it to work?
Hello,
I have kendo TabStrip contain 2 tabs, each tab has kendo Grid with 2 groups and details (layout below). Tab one is active and has layout with expand detail rows but when the tab two is active, the second group and detail rows not expand. Both tabs have the same setting. I want both tabs to expand detail rows when selected.
Grant Name: xxxx
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Grant Name: oooooo
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Item: ..........
Project Name: xxxxxx
My TabStrip coding
@(Html.Kendo().TabStrip()
.Name("ReimbusementDetails")
.Items(x =>
{
x.Add().Text("Submitted")
.Selected((AuthorizationService.AuthorizeAsync(User, "InternalUser")).Result.Succeeded)
.Content(
@<text>
@(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
.Name("ReimbursmentSubmitted")
.Columns(column =>
{
column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentSubmitted')#)").Hidden(true);
column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
.ClientTemplate("#if (MultipleCategory == 0)"
+ "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}else"
+ "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}#");
column.Bound(c => c.VendorName).Title("Vendor name");
column.Bound(c => c.InvoiceNumber).Title("Invoice #");
column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.BudgetCategory).Title("Budget Category");
column.Bound(c => c.ProcessedDate).Title("Submitted Date").Format("{0:d}").Width(130);
})
.Sortable()
.Scrollable(s => s.Height("auto"))
.ColumnMenu()
.Mobile()
.ToolBar(tool => tool.Excel())
.Excel(ex => ex
.AllPages(true)
.Filterable(true)
.FileName("Reimbursement Submitted.xlsx")
.ProxyURL(Url.Action("ValidationErrorExport", "Application"))
)
.DataSource(ds => ds
.Ajax()
.GroupPaging(true)
.Group(g =>
{
g.Add(x => x.GrantName);
g.Add(x => x.ProjectName);
})
.Aggregates(ag =>
{
ag.Add(x => x.GrantName).Count();
ag.Add(x => x.ProjectName).Count();
})
.Read(read => read.Action("MyReimbursementSubmitted", "ProjectReimbursement"))
)
)
</text>
);
x.Add().Text("In Progress")
.Content(
@<text>
@(Html.Kendo().Grid<Grants.Models.ProjectReimbursementView>()
.Name("ReimbursmentInProgress")
.Columns(column =>
{
column.Bound(c => c.GrantName).ClientGroupHeaderTemplate("Grant Name: #=value# (Project Count: #=CustomCount(value, aggregates.ProjectName,'ReimbursmentInProgress')#)").Hidden(true);
column.Bound(c => c.ProjectName).ClientGroupHeaderTemplate("Project Name: #=value# (Reimbursement Count: #=count#)").Hidden(true);
column.Bound(c => c.InvoiceDate).Title("Invoice Date").Width(130)
.ClientTemplate("#if (MultipleCategory == 0)"
+ "{#<a onclick=\"windowSingleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}else"
+ "{#<a onclick=\"windowMultipleProcess(#=ProjectReimbursementId#)\"><span style='color:blue; cursor:pointer;'>#= kendo.toString(InvoiceDate,'MM/dd/yyyy') #</span></a>"
+ "#}#");
column.Bound(c => c.VendorName).Title("Vendor name");
column.Bound(c => c.InvoiceNumber).Title("Invoice #");
column.Bound(c => c.GrantFundedTotal).Title("Grant Funds Requested").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.ContributionFundedTotal).Title("Match").Width(150).Format("{0:c2}").HtmlAttributes(new { style = "text-align:right!important" });
column.Bound(c => c.BudgetCategory).Title("Budget Category");
column.Bound(c => c.ProcessedDate).Title("Process Date").Format("{0:d}").Width(130);
})
.Pageable()
.Sortable()
.Scrollable(s => s.Height("auto"))
.ColumnMenu()
.Mobile()
.ToolBar(tool => tool.Excel())
.Excel(ex => ex
.AllPages(true)
.Filterable(true)
.FileName("Reimbursement In Progress.xlsx")
.ProxyURL(Url.Action("ValidationErrorExport", "Application"))
)
.Events(ev => ev.DataBound("ExpandProgress"))
.DataSource(ds => ds
.Ajax()
.GroupPaging(true)
.Group(g =>
{
g.Add(x => x.GrantName);
g.Add(x => x.ProjectName);
})
.Aggregates(ag =>
{
ag.Add(x => x.GrantName).Count();
ag.Add(x => x.ProjectName).Count();
})
.Read(read => read.Action("MyReimbursementInProgress", "ProjectReimbursement"))
)
)
</text>
);
})
)
I have tried with Event DataBound("ExpandProgress") javascript but still not working.
Any advice to achieve this. Thank you.
Hi guys.
I have a grid with 4 command buttons. I need to align the last one to the right. I try some ways I find on the support furum but I can't obtain my goal. Can you help me? This is my code:
</style>
.impExcel a { float: right; }
.impExcel { float: right; }
</style>
then...
@(
Html.Kendo().Grid<MCP310.Models.MCP_Detail>()
.Name("Grid_MCP_Detail")
.ToolBar(toolbar => {
toolbar.Create().HtmlAttributes(new { @class = (Model.idStatoRichiesta > 0 ) ? "k-button-outline-primary k-state-disabled" : "k-button-outline-primary k-state-default" });
toolbar.Save().HtmlAttributes(new { @class = "k-button-outline-primary"});
toolbar.Custom().Text("t").IconClass("k-icon k-i-file-excel impExcel").HtmlAttributes(new { @class = "k-button-outline-primary impExcel", @id = "btnImportExcel"});
})
.Columns(columns => {
.....Thanks
Cristian
I have the following in a .cshtml file:
@(Html.Kendo().Grid<TaxCertApp.ViewModels.ViewModel>()
.Name("FilingFeesGrid")
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:500px;" })
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(s => s.DistributionDate).Format("{0:MM/dd/yyyy}").Width(100).EditorTemplateName("Date");
columns.Bound(s => s.Disbursed)
.Format("{0:C2}")
.EditorTemplateName("Disbursed")
.Width(100)
.ClientFooterTemplate("Total: #=sum#")
.HtmlAttributes(new { style = "text-align: right" })
.FooterHtmlAttributes(new { style = "text-align: right" });
columns.Bound(s => s.Received)
.Format("{0:C2}")
.EditorTemplateName("Received")
.Width(100)
.ClientFooterTemplate("Total: #=sum#")
.HtmlAttributes(new { style = "text-align: right" })
.FooterHtmlAttributes(new { style = "text-align: right" });
columns.Bound(s => s.CHECKNO).Title("Check Number").Width(100);
columns.Bound(s => s.DESCRIPTION).Title("Description").Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Aggregates(aggregates =>
{
aggregates.Add(p => p.Disbursed).Sum();
aggregates.Add(p => p.Received).Sum();
})
.Read(read => { read.Action("Fees", "Fees").Data("{ ID: " + @Model.ID + "}"); })
)
)
This generates a grid with 2 columns having sum aggregates. The format of those 2 columns is currency. How can I get the sum aggregates to display with the same currency format? I have included a picture of the rendered grid.
Question #2: How can I access the two aggregate sum's to display a "difference" number (the Disbursed sum - the Received sum)?

We have a page that contains a mvc kendo grid. This grid contains a detail template = all working as expected!
Also, on the same page there is a checkbox.
In our grid (below), and we want to switch SALES OUT and COST VALUE column groupings based on the checkbox being checked. Does the checkbox have to be a html checkbox or can we leave it as a .net checkbox and do this in the code behind?
I'm new to kendo so any help greatly appreciated. We are trialling it to see if ti fits our requirements.
Thanks Simon
@(Html.Kendo().Grid<Web_AllPFCs_BySMR_v5>() .Name("wpsbysmr") .Columns(columns => { columns.Bound(c => c.SMRCat).Title("Category").Width(150); columns.Group(g => g.Title("Sales Out").Visible(true) .Columns(costvalue => { costvalue.Bound(c => c.Avg1_Invoice).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Avg2_Invoice).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Value1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Value2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.PFCDiffSale).Width(100).Title("Change").Format("{0:£#,##0}"); costvalue.Bound(c => c.PFCPercSale).Width(100).Title("Change %").Format("{0:0.0%}"); }) ); columns.Group(g => g.Title("Cost Value").Visible(false) .Columns(costvalue => { costvalue.Bound(c => c.Avg1_Cost).Width(100).Title("PPU Calendar YTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Avg2_Cost).Width(100).Title("PPU Calendar PYTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Cost1).Width(100).Title("Calendar YTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.Cost2).Width(100).Title("Calendar PYTD").Format("{0:£#,##0}"); costvalue.Bound(c => c.PFCDiffCost).Width(100).Title("Change").Format("{0:£#,##0}"); costvalue.Bound(c => c.PFCPercCost).Width(100).Title("Change %").Format("{0:0.0%}"); }) ); }) .Scrollable(s => s.Height("auto")) .HtmlAttributes(new { style = "max-height:550px !important;" }) .Pageable(pageable => pageable .Refresh(true) .PageSizes(true) .ButtonCount(15)) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("WPSBySMR", "Home")) .PageSize(10) ) .Events(e => e.DataBound("wpsbysmr_Databound")) .ClientDetailTemplateId("SMRCatDetails") )
Hi,
Would there be a way to interact with the Rating widget by setting a minimum and maximum value of 1, within a grid?
For example in this way:
columns.Bound(p => p.IsFavorite).Title("Is Favorite?").Width(140).Editable("returnFalse").ClientTemplate(Html.Kendo().Rating()
.Name("rating_#=ProductID#")
.Min(1)
.Max(1)
.Label(false)
.HtmlAttributes(new { data_bind = "value: IsFavorite" })
.Selection("single")
.ToClientTemplate().ToHtmlString()
);
I have tried but when I select the only star it no longer lets me deselect it
Any help would be greatly appreciated
Javier B.