I am trying to add functionality (adding filters to Kendo Grid), to an existing kendo MVC grid. Please see below code of the Grid. I added filters for each column, but not able to get the filtered results. Please let me know any changes to code.
Thanks in advance.
'''
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.RankNumber).Title("Rank").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true)); ;
columns.Bound(p => p.IDSRequestID).Title("ID").ClientTemplate("#if(IDSRequestID>0){#" +
"<a target='_blank' href =
'" + Url.Action("Edit", "ServiceCatalog") + "?id=#=IDSRequestID#'>#= IDSRequestID#</a>" +
"<input type='hidden'
name='RankStatus' value='#= RankStatus#'/>" +
"#}else {# <span
class='hiddenRow'></span>#}#").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true)); ;
columns.Bound(p => p.UnitName).Title("Unit Name").Hidden();
columns.Bound(p => p.TeamName).Title("Team Name").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true)); ;
columns.Bound(p => p.EffortLeft).Title("Effort Left").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true)); ;
columns.Bound(p => p.CustName).Title("Customer Name").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true));
columns.Bound(p => p.Status).Title("Status").Width(80).Filterable(ftb =>
ftb.Multi(true).Search(true));
columns.Bound(p => p.SegmentServiced).Title("Segment Serviced").Hidden();
columns.Bound(p => p.ProductClass).Title("Product Class").Hidden();
columns.Bound(p => p.Projects).Title("Projects").Hidden();
})
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Group(groups => groups.Add(p => p.RankStatus))
).Events(e => e.DataBound("GroupCollapse_user")))
'''
Hi since you are anyways adding filtering for all coulmns (non hidden columns)..Can you try like this and see if it works
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.RankNumber).Title("Rank").Width(80);
columns.Bound(p => p.IDSRequestID).Title("ID").ClientTemplate("#if(IDSRequestID>0){#" +
"<a target='_blank' href =
'" + Url.Action("Edit", "ServiceCatalog") + "?id=#=IDSRequestID#'>#= IDSRequestID#</a>" +
"<input type='hidden'
name='RankStatus' value='#= RankStatus#'/>" +
"#}else {# <span
class='hiddenRow'></span>#}#").Width(80);
columns.Bound(p => p.UnitName).Title("Unit Name").Hidden();
columns.Bound(p => p.TeamName).Title("Team Name").Width(80);
columns.Bound(p => p.EffortLeft).Title("Effort Left").Width(80);
columns.Bound(p => p.CustName).Title("Customer Name").Width(80);
columns.Bound(p => p.Status).Title("Status").Width(80);
columns.Bound(p => p.SegmentServiced).Title("Segment Serviced").Hidden();
columns.Bound(p => p.ProductClass).Title("Product Class").Hidden();
columns.Bound(p => p.Projects).Title("Projects").Hidden();
})
.Sortable()
.Filterable(ftb => ftb.Multi(true))
.DataSource(dataSource => dataSource
.Ajax()
.Group(groups => groups.Add(p => p.RankStatus))
).Events(e => e.DataBound("GroupCollapse_user")))
Related
I have code that looks as follows:
#(Html.Kendo().Grid<JeffreysOnline.Entities.Customer>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.LastName).Width(150);
columns.Bound(p => p.FirstName).Width(125);
columns.Bound(p => p.MiddleInitial).Width(75);
columns.Bound(p => p.Phone).Width(125);
columns.Bound(p => p.Address).Width(150);
columns.Bound(p => p.City).Width(100);
columns.Bound(p => p.State).Width(50);
columns.Bound(p => p.Zip).Width(125);
columns.Bound(p => p.TaxName).Width(125);
columns.Bound(p => p.TaxId).Width(125);
columns.Bound(p => p.BadChecks).Width(125);
columns.Bound(p => p.OtherRisk).Width(125);
columns.Bound(p => p.Interests).Width(125);
columns.Bound(p => p.BirthDate).Width(125);
columns.Bound(p => p.BouncedCheck).Width(125);
columns.Bound(p => p.PCNumber).Width(125);
columns.Bound(p => p.Comments).Width(125);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create();
toolbar.Save();
toolbar.Excel();
})
.Editable(editable => editable.Mode(GridEditMode.InCell)) // In-cell editing instead of the whole row
.Pageable()
.Navigatable() // This allows the user to tab between columns in the grid.
.Sortable()
.Scrollable()
.Groupable()
.Excel(excel => excel
.FileName("Customers.xlsx")
.Filterable(true)
.AllPages(false)
.ProxyURL(Url.Action("ExcelExport", "Customer"))
)
.HtmlAttributes(new { style = "height:700px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true) // We want to perform batch operations
.PageSize(500) // Set the page size
.Events(events => events.Error("error_handler")) // Define a function that gets called on an error
.Model(model => model.Id(p => p.RowId)) // Define the PK
.Create(update => update.Action("Create", "Customer")) // The Create method in the controller
.Read(read => read.Action("Read", "Customer")) // The Read method in the controller
.Update(update => update.Action("Update", "Customer")) // The Update method in the controller
.Destroy(update => update.Action("Delete", "Customer")) // The Delete method in the controller
)
When the grid renders on the page, an Edit button appears in the last column:
Why is this edit button appearing when I have in-cell editing mode set?
Do you mean the Edit button? You're adding it in your code here:
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
Remove the command.Edit(); statement and the button should disappear.
I want to Auto calculate Kendo Grid Column on client side. My code is
#(Html.Kendo().Grid(Model)
.Name("VATGrid")
.Columns(columns =>
{
columns.Bound(p => p.BaseAmount);
columns.Bound(x => x.Unit);
columns.Bound(p => p.VATPercentage);
columns.Bound(p => p.VATAmount)
.HeaderHtmlAttributes(new { title = "VAT Amount" })
.HtmlAttributes(new { style = "text-align:right" })
.Title("VAT Amount")
.ClientTemplate(
"#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#" +
"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.DocumentVATID);
model.Field(x => x.CompanyVATType).Editable(false);
model.Field(x => x.VATPercentage).Editable(false);
model.Field(x => x.VATType).Editable(false);
model.Field(x => x.BaseAmount).DefaultValue(0);
model.Field(x => x.Unit).DefaultValue(0);
})
)
Where I am able to get Auto calculated value but after clicking on the Grid Cell.
I want to show calculated value on change itself
Something like this?
#(Html.Kendo().Grid(Model)
.Name("VATGrid")
.Columns(columns =>
{
columns.Bound(p => p.BaseAmount);
columns.Bound(x => x.Unit);
columns.Bound(p => p.VATPercentage);
columns.Bound(p => p.VATAmount)
.HeaderHtmlAttributes(new { title = "VAT Amount" })
.HtmlAttributes(new { style = "text-align:right" })
.Title("VAT Amount")
//.ClientTemplate(
//"#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#" +
//"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
//})
.ClientTemplate(
"<span id="vatId">#= VATAmount=kendo.toString(BaseAmount*Unit*VATPercentage, 'n2')#</span>" +
"<input type='hidden' class='VATAmount' value='#=kendo.toString(BaseAmount*Unit*VATPercentage, 'n4')#' />");
})
//put span tag around the clienttemplate above
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.Change("onProductChange")) //add this event listener
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.DocumentVATID);
model.Field(x => x.CompanyVATType).Editable(false);
model.Field(x => x.VATPercentage).Editable(false);
model.Field(x => x.VATType).Editable(false);
model.Field(x => x.BaseAmount).DefaultValue(0);
model.Field(x => x.Unit).DefaultValue(0);
})
)
<script type="text/javascript">
function onChange(e) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
//TODO: calculate your data and use calc variables below
var calc1 = 0;
var calc2 = 0;
$("#vatId").text(calc);
$(".VATAmount").val(calc2); //or something like that, but you get the grip
}
</script>
Perhaps I´m misunderstanding your problem but it sounds to me as if you want to calculate the data in your footertemplate each time a cell is selected.
I am using Kendo UI and I am trying to use the filter property in the grid with the following code
#(Html.Kendo().Grid(Model)
.Name("TaskListGrid")
.Columns(columns =>
{
columns.Bound(p => p.Description);
columns.Bound(p => p.InstrumentType.DisplayName).Title("Instrument Type");
columns.Bound(p => p.CounterParty).Title("Counterparty");
columns.Bound(p => p.CommodityType);
columns.Bound(p => p.ContractDate).Format(Settings.Current.DatePattern);
columns.Bound(p => p.Price);
columns.Bound(p => p.Currency);
columns.Bound(p => p.Comment);
columns.Template(#<text>
#Html.ActionLink("View details", "Index", item.InstrumentType.DetailController(), new { Id = item.ContractId }, null)
</text>).Width(120);
})
.Filterable()
.Sortable()
When I execute this code in my localSTS the filtering works fine on ContractDate(DateTime without the time component). But when I deploy the same code without making any changes, In the deployed environment filtering doesn't work properly for the ContractDate, Could someone help me with this
Current scenario, demand deletion of the Kendo Gird column at runtime, I was wondering if there is any way to place checkbox or radio Button for Column header?
Like this,
#(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription).HeaderTemplate("<input id='chkSampleDescription' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleCode).HeaderTemplate("<input id='chkSampleCode' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleItems).HeaderTemplate("<input id='chkSampleItems' class='chkbxq' type='checkbox' />");
})
.Pageable()
.Navigatable()
//.Filterable()
.Sortable()
.Groupable()
.Events(events => events.DataBound("_GridItemDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.inx))
.Read(read => read.Action("Read", "Test"))
)
)
I have a Hierarchical grid that is bound to the server and is in MVC (.DataSource(d => d.Server()))
When the grid first loads I'd like the grid to expand the first row by default so the detail view is showing.
Can this be done without Javascript (preferred) or in Javascript if needed.
Try this,
Script
function _GridItemDataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
View
#(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>()
.Name("grid12")
.Columns(columns =>
{
columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox_#=inx#' class='chkbxq' type='checkbox' />");
columns.Bound(p => p.SampleDescription);
columns.Bound(p => p.SampleCode);
columns.Bound(p => p.SampleItems);
})
.ClientDetailTemplateId("client-template")
.AutoBind(true)
.Events(events => events.DataBound("_GridItemDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Test"))
)
)