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.")
Related
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));
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 trying to embed a chart in a Kendo Grid Cell, following this example: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template
I have managed to embed the graph in the grid, but I am unable to find a way to bind to row data.
The ViewModel has properties for each bar value - but how do I bind to those properties (maybe some #= ... # expression?).
I expect something similar to this:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.DataID).Filterable(false);
columns.Template(#<text></text>).ClientTemplate(
Html.Kendo().Chart()
.Name("chart#=DataID#")
.Series(series =>
{
series.Bar("\\#= FirstBarValue \\#");
series.Bar("\\#= SecondBarValue \\#");
})
.ToClientTemplate().ToHtmlString()
);
})
.DataSource(dataSource => dataSource.Ajax().PageSize(20).Read(read => read.Action("Read", "Grid"))))
But the FirstBarValue and SecondBarValue are not properly evaluated, although DataID is. Maybe a different scope? I can only make it work with hard coded values.
Any suggestions?
A little background on how my grid works:
My grid is making use of .Sortable(), .Reorderable(), .Filterable() and .ColumnMenu(). On the dataBound event, the grid saves the state of the grid (column order, items per page, current pagination page, and column sorting [asc and desc]). This is so when a user comes back to that page, their settings are reloaded in the grid when some initializing Javascript makes a query on the grid.
My issue comes into play when I have the same data for two columns:
#(Html.Kendo().Grid<GridDataType>()
.Name("ActiveThreats_Grid")
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(r => r.Id).Title("<input id='checkAll', type='checkbox', class='check-box' />")
.Sortable(false)
.ClientTemplate("<input type='checkbox' class='check_row' id='#= Id#' />")
.Filterable(false);
columns.Bound(r => r.OtherField).Title("Other Field");
columns.Bound(r => r.Id).Title("ID").Hidden(true);
})
.Resizable(resize => resize.Columns(true))
.Scrollable()
.Sortable()
.Reorderable(reorder => reorder.Columns(true))
.Filterable()
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
// Other HtmlHelpers here
)
What I've noticed, is if I have the same data-field attribute and I am using the .Reorderable() HtmlHelper, the grid reorders the first r.Id column to the same position where the second r.Id column appears.
Q: Is there an HtmlHelper or way to change the data-field attribute output to prevent .Reorderable() from ordering the two identical columns next to each other?
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");