Hi I have a kendo grid which is responsive using footable plugin. It is working fine. But when i click the pagination it is breaking the ui. Attached the image of the page. Can you pls help to fix this?
#(Html.Kendo().Grid<UCM.UCW.PresentationService.Entity.Dto.Task>()
.Name("ValidationTaskListGrid")
.HtmlAttributes(new { #class = "table-bordered" })
.TableHtmlAttributes(new { #class = "footable" })
.Columns(columns =>
{
columns.Bound(p => p.TaskDueDate)
.Sortable(true)
.Title("Due Date")
.HeaderHtmlAttributes(new { data_class = "expand" });
columns.Bound(p => p.StateCode)
.Sortable(true)
.Title("State")
.HeaderHtmlAttributes(new { data_hide = "phone_s" });
columns.Bound(p => p.DocumentType)
.Sortable(true)
.Title("Document Type")
.HeaderHtmlAttributes(new { data_hide = "phone,phone_s" });
columns.Bound(p => p.Form)
.Sortable(true)
.Title("Form")
.HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });
columns.Bound(p => p.UnemploymentDocumentId)
.Sortable(true)
.Title("Document ID")
.HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });
columns.Bound(p => p.TaskSubject)
.Sortable(true)
.Title("Task Name ")
.HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });
columns.Bound(p => p.TaskAssignedTo)
.Sortable(true)
.Title("Assigned To ")
.HeaderHtmlAttributes(new { data_hide = "phone,tablet,phone_s" });
columns.Bound(p => p.InstanceName)
.Sortable(false)
.Title("Actions")
// .HeaderHtmlAttributes(new { data_hide = "phone,phone_s" })
.HtmlAttributes(new { style = "text-align: center" })
.ClientTemplate("<a href = '" + Url.Action("GetUnemploymentDocument", "UnemploymentDocument",
new { UnemploymentDocumentId = "#=UnemploymentDocumentId#", taskId = "#=TaskId#", taskAssignedToType = "#=TaskAssignedToType#" }) + "' class='btn btn-function'>Start Task</a>");
})
.Pageable(pageable => pageable.ButtonCount(6)
.Messages(m => m.Display("Showing {0}-{1} of {2}")))
.Sortable(sortable => sortable.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetValsync", "WorkList"))
//.ServerOperation(WebConstants.EnableServerOperation)
.ServerOperation(true)
.PageSize(AppContextHelper.Instance.ApplicationConfiguration.DefaultViewItem)
.Sort(sort =>
{
sort.Add("TaskDueDate").Descending();
}))
.Events(x => x.DataBound("GridDataBound")
))
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 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 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);
})
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()
I'm using Kendo UI grid with ASP.NET MVC 4
#Html.Label("Status: ")<select id="drStaus" style="width:250px">
<option value="Open">Open</option>
<option value="Pending">Pending</option>
<option value="Other">Closed</option>
</select>
<br /><br />
#(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)
.Name("grid")
.Columns(columns => {
columns.Bound(o => o.id).Visible(false);
columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("Edit").Width(45);
columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
columns.Bound(o => o.OS).Width("70px");
columns.Bound(o => o.Browser).Width("70px");
columns.Bound(o => o.UserAgent).Width("200px"); ;
columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
columns.Bound(o => o.Description).Title("Description").Width("200px");
columns.Bound(o => o.Email).Width("150px");
columns.Bound(o => o.Status).Width("70px");
columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("Details").Width(65);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.HtmlAttributes(new { style = "height:900px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
<script>
function additionalInfo() {
return {
status: $("#drStaus").val()
}
}
$("#drStaus").kendoDropDownList();
</script>
In the above code i have successfully bound the Kendo Grid to a data source. Now i need to implement the following scenario.
when a option value is selected from the "drStaus" dropdown, i want to pass the selected value to the kendogrid and reload the grid according to the selected value.
Try this solution, I use demo model property to bound grid.
In view
#(Html.Kendo().DropDownList()
.Name("drStatus")
.DataTextField("Text")
.DataValueField("Value")
.Events(e => e.Change("Change"))
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "Open",
Value = "Open"
},
new SelectListItem() {
Text = "Pending",
Value = "Pending"
},
new SelectListItem() {
Text = "Other",
Value = "Other"
}
})
.Value("Open")
)
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Name);
columns.Bound(x => x.Id);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
And in javaScript
var additionalDataObject;
function additionalInfo() {
var dropdownlist = $("#drStatus").data("kendoDropDownList");
additionalDataObject = {
status: dropdownlist.value()
};
return additionalDataObject;
}
function Change() {
var grid = $("#grid").data("kendoGrid");
var page = grid.dataSource._page;
reloadFilterParameters();
grid.dataSource.page(page);
}
function reloadFilterParameters() {
var dropdownlist = $("#drStatus").data("kendoDropDownList");
additionalDataObject = {
status: dropdownlist.value(),
};
}
I've implemented the above scenario using Kendo Grid ToolBar Template.
http://demos.kendoui.com/web/grid/toolbar-template.html
#(Html.Kendo().Grid((IEnumerable<FeedBackDashBord.Models.FeedBack>)Model)
.Name("grid")
.Columns(columns => {
columns.Bound(o => o.id).Visible(false);
columns.Template(o => Html.ActionLink("Edit", "Edit", new { o.id })).ClientTemplate("Edit").Width(45);
columns.Bound(o => o.CurrentURL).Width("200px").Title("Reported URL");
columns.Bound(o => o.OS).Width("70px");
columns.Bound(o => o.Browser).Width("70px");
columns.Bound(o => o.UserAgent).Width("200px"); ;
columns.Bound(o => o.datetime).Title("Date Time").Width("100px");
columns.Bound(o => o.Description).Title("Description").Width("200px");
columns.Bound(o => o.Email).Width("150px");
columns.Bound(o => o.Status).Width("70px");
columns.Template(o => Html.ActionLink("Details", "Details", new { o.id })).ClientTemplate("Details").Width(65);
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
<label class="category-label" for="category">Status:</label>
#(Html.Kendo().DropDownList()
.Name("drStaus")
.OptionLabel("All")
.DataTextField("Text")
.DataValueField("Value")
.AutoBind(false)
.Events(e => e.Change("categoriesChange"))
.DataSource(ds =>
{
ds.Read("ToolbarTemplate_Categories", "DashBoard");
})
)
</div>
</text>);
})
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Groupable()
.HtmlAttributes(new { style = "height:900px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("AjaxGrid", "DashBoard").Data("additionalInfo"))
)
)
<script>
function additionalInfo() {
return {
status: $("#drStaus").val()
}
}
$("#drStaus").kendoDropDownList();
</script>
<script>
function categoriesChange() {
var value = this.value(),
grid = $("#grid").data("kendoGrid");
if (value) {
grid.dataSource.filter({ field: "Status", operator: "eq", value: value });//parseInt(value)
} else {
grid.dataSource.filter({});
}
}
</script>