I am trying to use Kendo UI Grid to replace an existing grid in a page, without changing the backing business logic. I am able to query data grouped on a single field (the business and data layers are legacy code and not open for change).
In the Kendo UI grid, is it possible to allow grouping on any ONE field, but disallow adding more grouping fields?
This should do it.
Fields/Columns Setup
columns.Bound(p => p.Action).Groupable(false);
Grouping Configuration
.DataSource(ds => ds
.Server()
.Group(g => g.Add(p => p.ChangeDateTime)
)
Related
I am using a Kendo UI Grid from MVC with ajax datasource. things are working fine, however I need to show some existing filters from database. For now, I am making a call from javascript for it setting by setting the filter object. However, it is making 2 requests, first without any filters and then with filters. I want to avoid double calls.
What I have tried.
I tried setting the AutoBind to false in Html helper for kendo grid but it gives error and doesn't load anything.
Secondldly, I tried setting the Filter while creating the kendo grid with html helper, but it doesn't reflect anything on UI.
#(Html.Kendo().Grid(Model.Students)
.Name("KendoGrid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(Model.FirstName).HtmlAttributes(new { #class = "auto-ellipsis" });
})
.Read(read => read.Action("GetStudents", "Student").Data("BindStudents"))
)
I tried loading the loading the filters in code and applying them like
.Filter(filter=>filter.Add(x=>x.Firstname contains("Mike")))
but it doesn't have any effect on kendo grid in UI.
secondly I tried using the AutoBind(false) and it just gives an error and nothing loads on page.
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
Hope this is clear.
I have a view that includes a grid with an existing application. The grid needs to load only after selecting some other inputs in the view. Using one of the "template" approaches like the above example works if you know what the list will contain ahead of time. The grid databinds when the view is rendered, and any ClientTemplate is rendered then. So, rebinding the grid doesnt seem to affect the dropdownlist since it has already been rendered.
However, the contents of the dropdownlist cant be known until the user starts adding items to the grid, so its only then that I to need define whats going to be in the dropdownlist, not from the very beginning when the grid is initially displayed.
How do I define or populate the dropdownlist when the grid is binding or as a result of the read action?
[update]
This is the grid column in question, where now Ive setup the column to have its own datasource, but the action GetSystemItemCodes never gets invoked. There is a read action on the grid itself (not shown), but since the template has already rendered when the grid is displayed the first time, it doesnt matter what I do to update the viewdata, its already been rendered.
columns.Bound(rdetail => rdetail.ItemCode).Title("Item Code").ClientTemplate((#Html.Kendo().DropDownList()
.DataSource(datasrc => datasrc.Read(read => read.Action("GetSystemItemCodes", "SalesVoucher")))
.HtmlAttributes(new { id = "itemCodeDropDown" })
.OptionLabel("- Select Item Code - ")
.DataValueField("ItemCodeID")
.DataTextField("ItemCodeValue")
.Name("itemCodeDropDown")
.Events(e => e.Change("OnItemCodeChange"))
.ToClientTemplate()).ToHtmlString()).Width(230);
I think my next approach will be to filter the dropdown with items being returned when adding a new row.
So suppose my question is at this point is: when defining a datasource for an individual column this way, when does its read action get called? Right after the read action on the grid ? How manually cause the column datasource to refresh or rebind?
using ajax i am binding kendo grid in the date column it returns kendo grid returns /Date(1403789061723)/ other Fields are binding properly.In case of Normal binding its working perfectly.is there any way to fix this error...................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................
Ok. The first thing I would ask is what is the model structure of your data that is being presented back to the grid.
I suspect that you are using a complex model that is not flattened eg. You have some custom classes with multiple properties within them.
If this is the case the grid and the datasource can not figure out what the actual data type is and treats anything not at the top level of data as a string.
To get around this either flatten out the viewmodel data that is being assigned to the grid or use the parsing functions to present the date back. Something like this should work:
columns.Bound(c => c.Date).ClientTemplate("#=kendo.format(\"{0:ddd, dd MMM yyyy}\",kendo.parseDate(Date))#")
Obviously putting what ever date time format you want.
The Telerik MVC grid I am using is shown below. The data is displaying in the grid but the
filterable attribute is not working, though the "Filter Icon" is displaying. I have registered the scripts and css in the layout.cshtml but I dont know why the filterable action is not working and sometimes the Column Widths are ignored and the grid is rendering in a default size.
#model IEnumerable<Customers>
#(Html.Telerik()
.Grid(Model)
.Name("Customers")
.PrefixUrlParameters(false)
.Columns(columns=>
{
columns.Bound(c => c.CustomerId).Title("CustomerId").Width(50);<br/>
columns.Bound(c => c.CustomerStatus).Title("Customer Status").Width(70);
columns.Bound(c=>c.CityId).Title("CityID").Width(50);
}
.Filterable()
.Sortable(sort=>sort.SortMode(GridSortMode.MultipleColumn))
)
layout.cshtml (registered scripts and stylesheets):
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css").Combined(true).Compress(true)))
#(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
In order to specify the size of the grid, you could wrap it in a div:
<div style="width:300px;">
#(Html.Telerik()...
</div>
Also, make sure you enable sorting/filtering in your grid:
.Sortable(sorting => sorting.Enabled(true))
.Filterable(filtering => filtering.Enabled(true))
If it still doesn't work, ensure that the script file being created by the Telerik script manager can be served by your web server (view source, grab the .axd link and paste it into your address bar).
One more thing:
Don't forget that the columns will expand to accomodate all their
content so be sure your column widths match your parent div.
You could also use Firebug to examine any script issues in your page.
if you are using Datakeys or if you have enabled custom binding on the grid action method, removing that might solve the problem.
I have discovered a very interesting thing. The filtering on my grid was not working. The icon was there, but it was not clickable. And it all was acting weird. For example at sorting it was adding a long tail to the query string. And I spent two days on this. Until I found the problem. I had four tabs on a page, and in each I was loading a partial. Each partial was containing one grid. The first three grids (on the first three tabs) were working fine. The fourth was not. I have moved the last partial in the first tab, it was working fine, but the grid in the third tab was not working anymore. The problem was that only three grids on a page were working. If I had all the four grids on the first tab, only the first three were working, the fourth was not. Very weird. Didn't find the source of the problem though...
Telerik grids really are terrible. If a dataype is datatimeoffset for a column the filter will never work.
Telerik Experts, I need your help guys!
In my grid, data gets bound on the client, through .ClientEvents .OnDataBinding.
I just call grid.dataBind(customData). Data gets displayed, but grouping, filtering, sorting don't work. Is it possible to group or filter stuff after grid.dataBind call?
Right now it just moves my columns around and doesn't do any grouping. Sorting and filtering fails also.
Can you show me a simple example of grouping without any server calls please?
You may want to consider using the Operation Mode feature, which was released in the recent Q2 2011 release.
Client operation mode - This new mode allows operations like sorting,
paging, filtering or grouping to be performed purely on the client, by
making a single initial call to the server to retrieve all data.
Client Mode Implementation:
Html.Telerik().Grid(Model)
.Name("YourGrid")
.DataBinding(dataBinding => dataBinding
.Ajax()
.OperationMode(GridOperationMode.Client) // Set to Client
.Select("Select", "Home")
)
Otherwise, to manually group using javascript, as follows:
<script type='text/javascript'>
function yourGrid_onDataBinding(e){
//Grabs your Grid
var yourGrid = $("#yourGrid").data("tGrid");
//Removes any existing groupings
yourGrid.groups = [];
//Ensure the column you wish to group by is EXACTLY as it appears in the Grid
yourGrid.group("yourColumnName");
}
</script>
Here are a few useful threads from the Telerik MVC forum that might help you solve your issue if this isn't a viable solution for you:
Client-Side Grouping | Has a great deal of code for client-side grouping operations
Client-Side dataBinding | More client-side code, talks about ClientSideGroupHeaderTemplates
Grouping with OperationMode.Client | If you have any issues with OperationMode.Client
As I know you couldn't do it without any hit to the server again.
But you can do it by Ajax throw JavaScript.
All you need to do is and these methods will rebind your grid :
// For filtering
grid.filter("propName~eq~youValue");
// For grouping
grid.group("column Title");
And take care this is column title not property name so if your property is "CustomerName" and your column title is "Customer Name" the you should pass the column title.
Anyway this will make an Ajax call to the controller to rebind Grid again.
Update:
Your grid should set .EnableCustomBinding(true) and you should decorate controller method that get your Ajax grid with [GridAction(EnableCustomBinding = true)] Attribute.
Hope this helped
I'm doing the exact same thing in my grid. I'm using 2011.2.629, jQuery 1.6.2. I'm actually doing this for external filtering--so I don't use the built in filtering--but grouping and sorting both work for me.
We need some code, man.
As someone else mentioned, make sure you have the following set:
dataBinding.Ajax().OperationMode(GridOperationMode.Client)
Is your grid bound at runtime? If not, bind it to an empty viewModel that's the same as the one you're using in the dataBind(). Also, how are you binding to the new list? It could be something in your onDataBinding().