i've implemented a custom ui filter on the column labourmeansstatusenum. But the function doesn't get called and so the filter doesn't have custom values.
any ideas what i'm doing wrong?
#(Html.Kendo().Grid<Presentation.Mvc.Models.LabourMeans.LabourMeansViewModel>()
.Name("grid")
.Columns(columns =>
{
/**/
columns.Bound(s => s.LabourMeansStatusEnum)
.ClientTemplate("# if (LabourMeansStatusEnum == 0){#" +
"<div id='outofservice'><span class='label label-info arrowed-right arrowed-in'>" + #Label.OutOfService() + "</span></div>" +
"#}else if (LabourMeansStatusEnum == 1){#" +
"<div id='intreatment'><span class='label label-info arrowed-right arrowed-in '>" + #Label.InTreatment() + "</span></div>" +
"#}else if (LabourMeansStatusEnum == 2){#" +
"<div id='inservice'><span class='label label-info arrowed-right arrowed-in '>" + #Label.InService() + "</span></div>" +
"#}#"
)
.Title("Status")
.Filterable(filterable => filterable.UI("labourMeansStatusFilter"));
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.IsEqualTo(#Label.IsEqualTo())
.IsNotEqualTo(#Label.IsNotEqualTo())
))
)
.Resizable(resize => resize.Columns(true))
.Pageable()
.Scrollable()
.Sortable()
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.Sort(sort => sort.Add("Id").Ascending())
.PageSize(10)
.Model(model => model.Id(s => s.LabourMeans.LabourMeans.Id))
.Read(read => read.Action("LabourMeans_Read", "LabourMeans"))
)
)
the js filter function:
function labourMeansStatusFilter(element) {
alert("test");
element.kendoDropDownList({
dataSource: [
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
],
dataTextField: "Name",
dataValueField: "Id"
});
alert("test5");
}
From what I've discovered, the custom filter method never gets called for an enum type. I'm not sure if this is a bug in Kendo, or by design, but perhaps you can work around it by exposing a wrapper property to convert from/to a string representation of your enum?
Related
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 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.
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))
)
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);
})