We are in serach of scalable gird with all featues and good perfomance for our MVC ASP.Net Project.
Our requirement is to have records around 200 thousand in a grid. Please suggest whether its feasible to use Telerik Grid. We need features like Filtering,Sorting,PAging.. with good performance. Please advice. Please send me the sample code for Telerik Grid to start with. I need to bind data to grid and play around.
Thanks,
Arun
48 Answers, 1 is accepted
I have prepared a sample project showing data binding performance with 200000 database records. The grid is configured to bind using Ajax action methods. The database is SQL Server Express and I am using Linq 2 Sql for data access.
I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for the prompt reply. I will run through the samples and get back to you. I've created sample project with an object and i need to bind this object to Grid. I'm no
| ASPX Page: |
| <%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %> |
| <asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server"> |
| Home Page |
| </asp:Content> |
| <asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server"> |
| <h2><%= Html.Encode(ViewData["Message"]) %></h2> |
| <p> |
| To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>. |
| </p> |
| <div> |
| <%= Html.Telerik().Grid <Telerik_Grid.Models.Person>() |
| .Name("Grid") |
| .Columns(columns => |
| { |
| columns.Add(o => o.ID).Width(100); |
| columns.Add(o => o.Name).Width(200); |
| columns.Add(o => o.Birthday); |
| }) |
| .Ajax(ajax => ajax.Action("Index", "Home")) |
| .Pageable() |
| .Sortable() |
| .Scrollable() |
| .Filterable() |
| %> |
| </div> |
| </asp:Content> |
| Controller: |
| using System; |
| using System.Collections.Generic; |
| using System.Linq; |
| using System.Web; |
| using System.Web.Mvc; |
| using Telerik.Web.Mvc; |
| using Telerik_Grid.Models; |
| namespace Telerik_Grid.Controllers |
| { |
| [HandleError] |
| public class HomeController : Controller |
| { |
| [GridAction] |
| public ActionResult Index() |
| { |
| return View(new GridModel<Person> |
| { |
| Data = getPerson() |
| }); |
| //ViewData["Message"] = "Welcome to ASP.NET MVC!"; |
| //IEnumerable<Person> obk = getPerson(); |
| //return View(); |
| } |
| public ActionResult About() |
| { |
| return View(); |
| } |
| [GridAction] |
| public ActionResult _Index() |
| { |
| return View(new GridModel<Person> |
| { |
| Data = getPerson() |
| }); |
| } |
| public IEnumerable<Person> getPerson() |
| { |
| //Person p = new Person(); |
| //p.Birthday = new DateTime(1997, 8, 15); |
| //p.ID = 11; |
| //p.Name = "Arun"; |
| //yield return p; |
| yield return new Person { ID = 1, Name = "Darren", Birthday = new DateTime(1970, 9, 13) }; |
| yield return new Person { ID = 2, Name = "Dawn", Birthday = new DateTime(1971, 6, 1) }; |
| yield return new Person { ID = 3, Name = "Thomas", Birthday = new DateTime(1995, 10, 3) }; |
| yield return new Person { ID = 4, Name = "Zoey", Birthday = new DateTime(1997, 8, 15) }; |
| } |
| } |
| } |
I would like you to check the following help topics which will help you to bind your grid using ajax:
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-introduction.html
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-ajax-binding.html
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for your reply. I need to bind simple object as it appears in the code. I need to bind webservice object to the Grid. Please let me know whether the code i pasted in my previous post is fine or not. I'm not seeing any data in Grid, It just shows the column name.
Also, I ran through your sample which had 200000 records. It looked really great. Is it possible to show 2000000 records in a single view, If yes, how would be the performance while scrolling,sortibng & filtering.
By default paging happens for every 10 records. How to customize the number of records. I need to test with 200 records per page.
Appreciate your help.
Thanks,
Arun
Your grid is currently empty and that's why it shows no data. This help topic shows that you need to call the BindTo method of the grid if you are not using the Grid constructor overload which specifies the data source (look for "There are other supported ways to databind the grid").
In your example you don't need to decorate the Index method with the GridAction attribute. Only the method which returns the grid data should be decorated with that attribute. This help topic discusses ajax binding in detail. Please check it.
For web service databinding you can read this article. For configuring the pager please check here.
Finally it is possible to output all 200k records at once if you disable paging. However the performance will not be great as all 200k records will be loaded at once. Currently the grid does not perform any lazy loading for large number of records.
I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for the reply. I've a simple question. I've to bind these following Person object to the Grid. Please advice. Pasted the code for both controller, View below. Thanks in Advance.
| Controller Methods, |
| public IEnumerable<Person> GetABunchOfPeople() |
| { |
| //Person p = new Person(); |
| //p.Birthday = new DateTime(1997, 8, 15); |
| //p.ID = 11; |
| //p.Name = "Arun"; |
| //yield return p; |
| yield return new Person { ID = 1, Name = "Darren", Birthday = new DateTime(1970, 9, 13) }; |
| yield return new Person { ID = 2, Name = "Dawn", Birthday = new DateTime(1971, 6, 1) }; |
| yield return new Person { ID = 3, Name = "Thomas", Birthday = new DateTime(1995, 10, 3) }; |
| yield return new Person { ID = 4, Name = "Zoey", Birthday = new DateTime(1997, 8, 15) }; |
| } |
| [GridAction] |
| public JsonResult GetABunchOfPeopleAsJson() |
| { |
| var rows = (GetABunchOfPeople() |
| .Select(c => new |
| { |
| id = c.ID, |
| cell = new[] |
| { |
| c.ID.ToString(), |
| c.Name, |
| c.Birthday.ToShortDateString() |
| } |
| })).ToArray(); |
| return new JsonResult |
| { |
| Data = new |
| { |
| page = 1, |
| records = rows.Length, |
| rows, |
| total = 1 |
| } |
| }; |
| } |
View Method
<%
= Html.Telerik().Grid<BindingTo200K.Models.Person>()
.Name(
"Grid")
.Ajax(ajax => ajax.Action(
"GetABunchOfPeopleAsJson", "Home"))
.Columns(columns =>
{
columns.Add(c => c.Birthday );
columns.Add(c => c.ID );
columns.Add(c => c.Name);
})
.Pageable()
.Sortable()
.Filterable()
%>
The code you have pasted is perhaps adapted for a different type of grid component. To make it work with Telerik Grid for ASP.NET MVC you need to modify it like this:
[GridAction]public ActionResult GetABunchOfPeopleAsJson(){ return View(new GridModel { Data = GetABunchOfPeople() });}Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Great!. It works now. Similarly, I will try to bind my webservice object.
Is this the only way to bind data ?
Data = GetABunchOfPeople()
Arun
I'm trying to set the row height & col width. Grid is not considering the col width that I set. I didn't find any options to set row height.
How to enalbe filtering ? I did called .Filterable(). Is there anythign i've to do. I got only filtering UI when i enter value nothing happens, Is it possible to have client side filtering & sorting.
Also, is there a way to do sub grid or nested grid in Telerik.
Appreciate your help.
Thanks,
Arun
Filtering is demonstrated in this online demo. How is your code any different? Everything should be all set up provided the filtering menu shows up and you have working paging and sorting.
Column width is specified via the Width property when defining a column. Every single example is setting column width so this should work as expected.
To set row height you need to add the following CSS:
<style type="text/css">
div.t-grid td
{
line-height: 30px;
}
</style>
Nested grids are currently not supported by Telerik Grid for ASP.NET MVC.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks. I'm surprised to know that nested grid is not supported in Telerik. Is there any other way to implement this using telerik grid.Its crucial for us.
I need to get the column values of the rows seleted in the Grid. Is it possible to get the rows seleted by the user. This is very important for our requirement in order to perform some tasks based on the rows selected. :)
I've noticed that when I click on Filter Icon it invokes my Action Method which fetches same set of records again wchich already exist. Ideally, when i do filtering it should not invoke my Action Method. Please advice
Appreicate your help.
Thanks,
Arun
This is the first release of the grid and not all popular grid features are available. We have logged hierarchy support in our TODO list but it is still not scheduled for implementation. Having said that there is no easy way to implement hierarchy unless it is a built-in feature.
It is possible to get the values from the rows. Check this example.
When the user creates a filter we make another request to the action method to retrieve the filtered data. The grid always works with a single page of the data so we cannot filter without fetching a new portion of data.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Hi Atanas,
Thats fine. In order to achieve nested grid i'm thinking to use the first column as hyper link column so that the user can click the link and get the data using ajax. How to make the column to look like Link and allow user to click and pass the clicked value to some function to perform furhter action.
Is there a way to allow user to select the row just by clicking on the ROW. Is there any row selection property available in telerik.
I need to allow user to select multiple rows and get the data for those rows in my application. Please let me know how to do this.
Is there any PDF from where i can learn all the functionalities that you provide.
Here's the code that i've tried to make the column as Link.
columns.Add(c => c.Name).HtmlAttributes(
new HtmlAnchor().HRef = http://www.google.com);
Appreciate your help.
Thanks,
Arun
This is not the way to add a hyperlink inside a column. Please check this help topic which discusses the column properties. This is the recommended approach:
//Template column which shows an action link
columns.Add(o => { %> <%= Html.ActionLink("Edit", "Home", new { id = o.OrderID }) %> <% }).Title("Edit");
By the way you can check this forum thread which has a sample prototype of hierarchy in the grid.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Getting this error when i added template column as you said.
Cannot use templates in Ajax or WebService binding mode.
Here's the Code, If I remove the template column then it works perfectly. Please advice ASAP.
| <% Html.Telerik().Grid<BindingTo200K.Models.Person>() |
| .Name("Orders") |
| .Ajax(ajax => ajax.Action("GetABunchOfPeopleAsJson", "Home")) |
| .Columns(columns => |
| { |
| //Column which will display the OrderID property of the Order |
| columns.Add(o => o.ID); |
| //Column which will display the OrderDate property. The header will display "Order" |
| columns.Add(o => o.Name).Title("Order"); |
| //Template column which shows an action link |
| columns.Add(o => |
| { |
| %> |
| <%= Html.ActionLink("Edit", "Home", new { id = o.ID }) %> |
| <% |
| }).Title("Edit"); |
| }) |
| .Render(); |
| %> |
Thanks,
Arun
As the error suggests Template columns are not supported in Ajax binding mode. Fortunately there is a workaround mentioned in our documentation:
<% Html.Telerik().Grid<BindingTo200K.Models.Person>() .Name("Orders") .Ajax(ajax => ajax.Action("GetABunchOfPeopleAsJson", "Home")) .Columns(columns => { //Column which will display the OrderID property of the Order columns.Add(o => o.ID); //Column which will display the OrderDate property. The header will display "Order" columns.Add(o => o.Name).Title("Order"); //Template column which shows an action link columns.Add(o => o.ID).Format(Html.ActionLink("Edit", "Home", new { id = "{0}" })).Encoded(false).Title("Edit"); }) .Render(); %>Best wishes,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Great. It works, but i need to display the IDs (1,2,3 ..) as Link Text. User shoudl be able to click on the 1,2.. In Grid i'm seeing only Edit as the link text. Attached the screen.
Thanks
Arun
Hi Atanas,
One more very important requirement as below,
I need to allow user to select multiple rows and get the all column values for those selected rows. Please let me know how to do this.
Thanks,
Arun
The code I have pasted in my response is just for example purposes. You have to adapt it as you need. In your case you should use the overload of Html.ActionLink which is able to set the text of the link as first argument:
columns.Add(o => o.ID).Format(Html.ActionLink("{0}","Edit", "Home", new { id = "{0}" })).Encoded(false).Title("Edit");For selection you can use checkboxes. Here you can find a running project.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Hi Atanas,
I'm using the following code to select the rows. I need to select all rows at one go & I need to read the column valules for all the selected rows. Please advice to do this. Please let me know which version of telerik is available for sale & and the features in it.
columns.Add(o => o.ID).Title(
"Boolean").Format("<input type='checkbox' name='checkedRows' />").Encoded(false);
Thanks,
Arun
I have prepared a sample project showing how to add a checkbox in the column header and how to retrieve he checked records.
For purchase information you can check the FAQ.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for the reply. I need to select the columns in the grid not to query the DB. How to select the particular column in the grid for the selected rows. Please advice.
Thanks,
Arun
I am sorry but I cannot understand your requirement. Could you please elaborate?
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I mean , I need to read column values ony by one like coulmn_name.value. Is there any property to read the column value.
Thanks,
Arun
No there is no way to do this. Perhaps there is another way to achieve your goal. Could you describe your requirements in more detail?
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Hi Atanas,
I want user to select some rows and I need to pick particular column values like 5th, 6th, 7th Column from the selected rows.
Thanks,
Arun
The example I've sent you shows how to find out the OrderID of selected orders. From there you can find what those orders are (or your business objects) and retrieve the property you want.
An alternative option is client-side (with JavaScript) to find all checked table rows (TR tags) and get the required values from the table cells <TD>. Let me know if this would suffice.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
In the sample project, I selected the rows in the grid & im able to see the selected customer name in the grid below.
In the following Code, Please explain me how the selected row customer IDs are fetched in checkedRows in Index Action method.
In checkedRows i can see array of customer Ids that are selected.
public ActionResult Index(string[] checkedRows)
{
checkedRows = checkedRows ??
new []{""};
ViewData[
"CheckedCustomers"] = new NorthwindDataContext().Customers.Where(c => checkedRows.Contains(c.CustomerID));
return View();
}
Thanks,
Arun
This is automatically done by ASP.NET MVC. If you check the code the checkbox has its name set to "checkedRows":
columns.Add(c => c.CustomerID)
.Title("Check")
.Format("<input type='checkbox' name='checkedRows' />")
Then in the onRowDataBound client-side event the value of every checkbox is set to the CustomerID field :
function onRowDataBound(e) {
var row = e.row;
var dataItem = e.dataItem;
$("input[type='checkbox']", row)
.attr({
'value' : dataItem.CustomerID
});
}
</script>
When the user submits the form the ASP.NET MVC runtime converts all checked checkboxes to array of strings which are passed to the controller method.
I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for the reply. My Requirement is to select any column from any selected row and get that particular value. Please help me to achieve this requirement as Its crucial for our development. Please get back to me ASAP if you do not understand my requirement.
Thanks,
Arun
Here is some code which shows how to get the value of the clicked cell in the grid:
<%= Html.Telerik().Grid(Model)
.Name("Grid")
.ClientEvents(events => events.OnLoad("onLoad"))
%>
<script type="text/javascript">
function onLoad() {
$('table td:not(.t-footer)', this).live('click', function(e) {
var cellValue = $(this).text();
alert(cellValue);
});
}
</script>
I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thanks for the reply. This doesn't solve our purpose. I need to loop thru all the selected rows and get the column values for those selected.
Something like this,
foreach(row in selectedrows)
{
var a=row.column[0];
var b=row.column[1];
}
Thanks,
Arun
This is also possible using jQuery. Let's assume the Name of your grid is "Grid" for simplicity - here is the required code:
<script type="text/javascript">
$('#Grid :checked') //will get all checked checkboxes within the grid .each(function() { //get the parent <tr> - the grid row as jQuery object var $tr = $(this).closest('tr'); // if you want you can get the underlying DOM element var tr = $tr[0]; //then get whichever cell you want: var a = tr.cells[0].innerHTML; var b = tr.cells[1].innerHTML; //alternatively you can use jQuery to retrieve the cell and its plain text (as opposed to innerHTML) var c = $tr.find('td:eq(0)').text(); //first td var d = $tr.find('td:eq(1)').text(); //second td })</script>
I hope this helps,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
This helps me. Thanks very much for the quick reply. I appreciate your help.
Thanks,
Arun
Thanks a lot for your support. Is it possible to export telerik Grid Data to Excel. This feature is a must for us.
Please revert me ASAP. Appreciate your help.
Thanks,
Arun
We have a knowledge base article showing how to do this - Exporting Grid data to Excel.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Hi Telerik Team,
I am using the telerik grid in my application. And as per the documentation I need to put the Script register in my site. Master[Html.Telerik().ScriptRegistrar()] to render the UI component in a proper way. The problem is that it works in sample application since site. Master do not have any other scripts in Site. Master but in case of my application I have other scripts which I need to load.So after putting the script register the other xyz.js code is breaking the application. Please suggest me some solution for the same. Where else I can put my script register. If I am not putting then I am getting the exception like Object does not support this property or method.
Important to note here is that my aspx page is already having the code like this to render the partial view of the grid.
<%= Html.Telerik().ScriptRegistrar() %>
<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
.Add("jquery-1.4.2.min.js")
.Add("telerik.common.min.js")
.Add("telerik.calendar.min.js")
.Add("telerik.datepicker.min.js")
.Add("telerik.textbox.min.js")
.Add("telerik.grid.min.js")
.Add("telerik.draganddrop.min.js")
.Add("telerik.grid.grouping.min.js")
.Add("telerik.grid.filtering.js")
);
%>
You can use ScriptRegistrar to add your xyz.js file to the default group. For instance if you need to load xyz.js file when Test.aspx page is loaded you just need to use this code snippet:
<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add('xyz.js')); %>Please note that I do not render ScriptRegistrar in the Test.aspx page, but just add the required javascript files into default group. Later ScriptRegistrar will render all javascript files when the Site.master page is loaded.
All the best,
Georgi Krustev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Is it mandatory to put
<% Html.Telerik().ScriptRegistrar() in site.master for my partial view grid to render in a proper way.
Yes, if you load grid or other Telerik Components for ASP.NET MVC with partial view, you need to register the required scripts by hand in the site.master. Review these links for more information:
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-required-javascript-files.html
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
Sincerely yours,
Georgi Krustev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Does currect verions of Telerik Grid supports Sub Grid/Nested Grid Feature ? If not, when can we expect this in Telerik Grid. This is very impotant feature for us in order to buy Telerik Extensions. Please reply me ASAP as we have meeting today to discuss this feature.
Appreciate your help.
Thanks,
Arun
Master/detail (hierarchy) is planned for the next official release (expected in the beginning of July).
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
If you want a sneak peak of the hierarchy let me know. We have some working implementation which is still not fully tested and may have some issues. Still you can give it a try and see if it meets your requirements.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I will send you some samples in the support ticket that you have opened.
Regards,
Atanas Korchev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Thank you guys for really usefull info.
Regards,
Dan.