I have a kendo grid on a page. I added the filtering possibility like this for every column
I need to add the row filtering of the kendo grid, and it looks like this.
#(Html.Kendo().Grid<GGISServices.Models.DistrictViewModel>()
.Name("districtGrid")
.HtmlAttributes(new { #class = "newGrid" })
.Columns(columns =>
{
columns.Bound(c => c.NatureOfProduct).Title(LanguageService.Instance.Translate("NatureOfProduct")).Filterable(f => f.Multi(true).DataSource(ds => ds.Read(r => r.Action("GetFilterData", "Contract", new { Area = GGISWeb.AreaModules.District }).Type(HttpVerbs.Post).Data("{ field: 'NatureOfProduct' }"))));
This filter looks like this, and the user can select more than one item to search
But I needed to change to row filtering mode, because the client asked for search box for every column, so I added
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
and now the filer appears like this
which is ok, this is what the client needs, but they want both searching possibilities, and when I have added the
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
the filter where I can select all items does not appear anymore.
Can you please advise how to do, to show both filter: the searchbox for every column and the other where the user can select the items?
Or if I use only the GridFilterMode.Row the user has the posssibility to select more than one item?
The solution was to add the
.ColumnMenu(f => f.Enabled(true))
and for the columns
.Filterable(f => f.Multi(true));
Related
im trying to populate a grid in an asp.net mvc app.
i have an issue with one specific column in the grid which needs to render as dropdown list.
#(Html.Kendo().Grid(Model)
.Name("gridExclusions")
.AutoBind(false)
.Columns(columns =>
{
columns.ForeignKey(c => c.SubTaskId, GetSubTasks(item.Id), "Value", "Text").Width(100).Title("Sub Task").Filterable( ftb => ftb.Multi(true) .Search(true));
columns.Command(command => { command.Edit(); }).Width(100);
})
....
Because every item in the grid can have different list of sub task, my question is how to pass the current item id "item.Id" to the function GetSubTasks(int id)
try using the kendo escape characters - # in a string like => "#{parameterNameInModel}"
I have a SQL Table result.
ProductNumber ProductNumberColorClass OrderNumber OrderNumberColorClass
I am trying to use Kendo to render this information. Basically i need the output as
ProductNumber OrderNumber
Data value and Apply Css class( ProductNumberColorClass )
Basically this is a report with a lot of columns. The user can select only the columns that he wants to see.
I am able to render the grid using the examples from the web site. I am not able to apply.
My application is Asp.net mvc application
Update
I will try your feedback. This is my code. Basically i wanted to avoid coding for each column as the list is big around 50 . the report can be customized so the user can hide some columns. .So i used a loop. however in this scenario, the clienttemplate is not work. I am not very sure, if it is a code issue too.
If you can find what is wrong in my code it will help me learn about the issue too.
meanwhileI am going to manually type the columns and add a attribute as visible
#(Html.Kendo().Grid <DataTransferObjects.ViewModels.UserReportDataModel>()
.Name("Grid")
.HtmlAttributes(new { style = "height: 550px;" })
.Pageable(pageable => pageable
.Input(true)
.Numeric(false)
)
.Sortable()
.Scrollable(
scr => scr.Height(430)
)
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetReportData", "ShortTermPlanner").Data("AdditionnalParameters"))
.PageSize(20)
.ServerOperation(false)
)
.Columns(columns =>
{
var colIndex = 0;
foreach (var col in Model.lstHeaderInformation)
{
if (col.SqlColumnName == "ProductNumber")
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(false)
.Visible(col.IsVisible)
.Width(1190)
.ClientTemplate("<div style='background-color:red; text-align:center;width:70px'> #= ProductNumber # </div>");
}
else
{
columns.Bound(col.SqlColumnName)
.Title(col.ColumnHeader)
.Filterable(true)
.Visible(true)
.Width(300)
.Locked(true)
.HtmlAttributes(new { #class = "selectedRow" });
}
}
})
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
)
Update 2 Adding the clienttemplate and specifying the column information worked. Thanks
However i am curious, is there a better way where i can loop through a 3 table which defines the column name, title and class that needed to be displayed and applied to my report.
what i am looking is
MY Report -- Select * from Report
My header table Select colname, title, class from reportcoldefinication
so now for each matching colname from reportcoldefinication
and Report. add a col to the grid with the class applied.
You can use the template functionality for columns in the Kendo grid.
columns.Template(#<div class= '#=ProductNumberColorClass #'> #= ProductNumber#<div/>)
Have implemented one in the example in the below link. Its implemented using JQuery but you can use the razor syntax for kendo for achieving the same.
http://dojo.telerik.com/ukIma/3
I am using Kendo Grid for displaying.
#(Html.Kendo().Grid<ReportModel>()
.Name("myReport")
.Columns(cols =>
{
columns.Bound(c => c.sNo).Title("S.No.");
columns.Bound(c => c.particulars).Title("Particulars");
}
)
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.Read(read => read.Action("myReportList","Reporting")
)
.Resizable(resize => resize.Columns(true))
)
I want the formatting of the row to change to bold if and only if the cell in the SNo column is an alphabet otherwise the formatting must be normal.
Help me achieve this.
There are a few different ways to achieve that:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values
Use a row template. This approach is suitable if you do not intend to apply hierarchy, grouping, editing, and frozen columns to the Grid.
Use a databound handler and iterate the table rows. This approach is suitable if you intend to customize all rows of the Grid.
Use a databound handler and iterate the data items. This approach is suitable if you intend to customize only part of the Grid rows.
You can write it like this:
columns.Bound(c => c.sNo)
.ClientTemplate("<strong> #=DateOfService#</strong>")
.Title("S.No.")
I have a model like so:
Id Type
-------------
1 Vehicle
2 Trailer
3 Vehicle
I am hoping to eventually use a radio button to control how this data is filtered on a Kendo grid, choosing to filter on whether Type equals Vehicle or Trailer. I don't know how to do that, but, for now, I can't even get the initial filter to work. My grid is as follows:
#(Html.Kendo().Grid<PcKendoUi.Models.CompanyDueDatesIndexVM>()
.Name("DueDates")
.Columns(columns =>
{
columns.Bound(c => c.Id);
columns.Bound(c => c.Type);
})
.Filterable()
.DataSource(ds => ds
.Ajax()
.Model(m => m.Id(x => x.Id))
.Read(s => s.Action("Test", "CompanyDueDates"))
.Filter(filter =>
{
filter.Add(f => f.Type == "Vehicle");
})
)
)
My code is based on the filter example from the documentation.
This still displays all 3 records in the model, rather than just rows 1 and 3. What is also interesting is that after specifying this initial filter, the filter controls also do not allow any filter. That is, they are visible, I can type in data and click Filter, but it will not filter the grid.
Does anyone have an idea what the problem could be?
According the documentation your syntax is not correct, you wrote:
filter.Add(f => f.Type == "Vehicle");
When it should be:
filter.Add(f => f.Type).IsEqualTo("Vehicle");
I have an asp.net MVC application where I am using telerik grid to show the data/records.I am using the Entity Model.
My requirement is that sometime I want to show only some of the columns specified at the runtime/may the user select. How do I bind View with only those columns as selected by the user . Initially view is binded with Model class with all columns .
Is there any other way other than telerik to show the customized columns as selected by the user
then it will be also OK .
You could customize the columns that are shown using the Columns method. You need to have the information about which columns need to be shown in the view model so that you can at runtime select the columns to show:
<%= Html.Telerik()
.Grid(Model.Customers)
.Name("Grid")
.Columns(columns =>
{
if (Model.IsShowFirstName)
{
columns.Bound(customer => customer.FirstName);
}
if (Model.IsShowLastName)
{
columns.Bound(customer => customer.LastName);
}
})
%>
<%= Html.Telerik()
.Grid(Model.Customers)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(customer => customer.FirstName).Visible(Model.IsShowFirstName);
columns.Bound(customer => customer.LastName).Visible(Model.IsShowLastName);
})
%>