This is a migrated thread and some comments may be shown as answers.

Excel-like RadGrid WITH GROUPING!!

1 Answer 138 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Michael asked on 19 Jan 2011, 11:07 AM

Hello!

I want to use the radgrid control in excel-style like it is explained under http://www.telerik.com/community/code-library/aspnet-ajax/grid/excel-like-radgrid.aspx. I use the sample version 193898_excellikegrid.zip. I tested it with the actual version of the control/suite and it works fine.

It goes in the right the direction, but I want one further step: I want to achieve an excel-syle grid with grouping (one group level). Here is my code:

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="RadGridTest._Default" Trace="true" TraceMode="SortByTime" Debug="true" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>RadGridTest</title>

<script src="scripts.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<%--<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>--%>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Simple" Width="100%"

OnPreRender="RadGrid1_PreRender" OnDataBinding="RadGrid1_DataBinding"

OnNeedDataSource="RadGrid1_NeedDataSource">

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

<MasterTableView GridLines="Both" ShowHeader="true" TableLayout="Fixed" AutoGenerateColumns="true" Width="3000px"

EditMode="InPlace" >

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField HeaderText="Department" FieldName="department"></telerik:GridGroupByField>

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="department" SortOrder="Ascending"></telerik:GridGroupByField>

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridBoundColumn HeaderText="id" DataField="id" UniqueName="id">

<HeaderStyle Width="30px" BackColor="DarkGray"/>

<ItemStyle Width="30px" BackColor="DarkGray"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Department" DataField="department" UniqueName="department" Visible="false">

<HeaderStyle Width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Firstname" DataField="firstname" UniqueName="firstname">

<HeaderStyle Width="150px" BackColor="DarkGray"/>

<ItemStyle Width="150px" BackColor="DarkGray"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Lastname" DataField="lastname" UniqueName="lastname">

<HeaderStyle width="150px" BackColor="DarkGray"/>

<ItemStyle Width="150px" BackColor="DarkGray"/>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Street" DataField="street" UniqueName="street">

<HeaderStyle width="250px" />

<ItemStyle Width="250px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Number" DataField="number" UniqueName="number">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Zip" DataField="zip" UniqueName="zip">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="City" DataField="city" UniqueName="city">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Phone" DataField="phone" UniqueName="phone">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Fax" DataField="fax" UniqueName="fax">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Mobile" DataField="mobile" UniqueName="mobile">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="E-Mail" DataField="email" UniqueName="email">

<HeaderStyle width="250px" />

<ItemStyle Width="250px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Hired" DataField="hired" UniqueName="hired">

<HeaderStyle width="150px" />

<ItemStyle Width="150px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Comment" DataField="comment" UniqueName="comment">

<HeaderStyle Wrap="false" />

<ItemStyle Wrap="false" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="dummy">

<HeaderStyle Width="1px" />

<ItemStyle Width="1px" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ScrollHeight="150px" FrozenColumnsCount="4">

</Scrolling>

</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Default.aspx.cs

using System;

using System.Text;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using Telerik.Web.UI;

namespace RadGridTest

{

public partial class _Default : System.Web.UI.Page

{

private readonly string GRID_SOURCE_SESSION_KEY = "GRID_SOURCE_SESSION_KEY";

private DataTable GridSource

{

get

{

Object obj = Session[GRID_SOURCE_SESSION_KEY];

if (obj != null)

{

return (DataTable)obj;

}

else

{

DataTable dt = new DataTable();

dt.Columns.Add("id");

dt.Columns.Add("department");

dt.Columns.Add("firstname");

dt.Columns.Add("lastname");

dt.Columns.Add("street");

dt.Columns.Add("number");

dt.Columns.Add("zip");

dt.Columns.Add("city");

dt.Columns.Add("phone");

dt.Columns.Add("fax");

dt.Columns.Add("mobile");

dt.Columns.Add("email");

dt.Columns.Add("birthday");

dt.Columns.Add("hired");

dt.Columns.Add("comment");

DataRow dr1 = dt.NewRow();

dr1["id"] = 1;

dr1["department"] = "IT";

dr1["firstname"] = "Test";

dr1["lastname"] = "Test";

dr1["comment"] = "This is a test.";

dt.Rows.Add(dr1);

DataRow dr2 = dt.NewRow();

dr2["id"] = 2;

dr2["department"] = "IT";

dr2["firstname"] = "Test";

dr2["lastname"] = "Collins";

dr2["comment"] = "Test";

dt.Rows.Add(dr2);

DataRow dr3 = dt.NewRow();

dr3["id"] = 3;

dr3["department"] = "Controlling";

dr3["firstname"] = "Test";

dr3["lastname"] = "Test";

dr3["comment"] = "...";

dt.Rows.Add(dr3);

DataRow dr4 = dt.NewRow();

dr4["id"] = 4;

dr4["department"] = "Sales";

dr4["firstname"] = "Steve";

dr4["lastname"] = "Test";

dr4["comment"] = "";

dt.Rows.Add(dr4);

DataRow dr5 = dt.NewRow();

dr5["id"] = 5;

dr5["department"] = "Purchasing Dep.";

dr5["firstname"] = "Michael";

dr5["lastname"] = "Smith";

dr5["comment"] = "Blablabla";

dt.Rows.Add(dr5);

DataRow dr6 = dt.NewRow();

dr6["id"] = 6;

dr6["department"] = "Purchasing Dep.";

dr6["firstname"] = "Tom";

dr6["lastname"] = "Jerry";

dr6["comment"] = "Alles wird gut!!";

dt.Rows.Add(dr6);

Session[GRID_SOURCE_SESSION_KEY] = dt;

return dt;

}

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = GridSource;

}

protected void RadGrid1_DataBinding(object sender, EventArgs e)

{

for (int i = 0; i < GridSource.Rows.Count; i++)

{

RadGrid1.EditIndexes.Add(i);

}

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

RadGrid1.Attributes.Add("onkeydown", "onKeyDown(this,event);");

int itemsCount = 0;

int columnsCount = 0;

StringBuilder builder = new StringBuilder();

// Attach the event handlers to the client side events of the TextBoxes.

foreach (GridDataItem item in RadGrid1.MasterTableView.Items)

{

if (item is GridDataItem)

{

columnsCount = 0;

for (int i = 3; i < RadGrid1.MasterTableView.RenderColumns.Length; i++)

{

GridColumn column = RadGrid1.MasterTableView.RenderColumns[i];

TextBox textBox = (item[column.UniqueName].Controls[0]) as TextBox;

if (textBox != null)

{

textBox.Attributes.Add("ondblclick", "cellDoubleClickFunction('" + textBox.ClientID + "');");

textBox.Attributes.Add("onclick", "cellClick('" + textBox.ClientID + "');");

}

if (i == 2)

{

textBox.ReadOnly = true;

textBox.Attributes.Add("class", "readOnly");

}

columnsCount++;

}

itemsCount++;

}

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "init", "colls = " + columnsCount + ";rows=" + itemsCount + ";", true);

}

My problem is, that I get an error after the method "RadGrid1_DataBinding" is done: System.ArgumentoutOfRangeException.

[ *** I think, that the grouping thing is the key like putting the items of a hierarchy RadGrid in edit mode (http://www.telerik.com/community/forums/aspnet-ajax/grid/how-to-put-the-grid-items-of-a-hierarchy-model-radgrid-in-edit-mode.aspx). ***]

==> it is not: the problem is, that I don't use AutoGeneratedColumns and I can'/don't want to use them. When I change my code, the page loads.

How must I change the code, that it will work with AutoGeneratedColumns = false???

And then it goes on:
With the excel-like RadGrid sample, the user can - for example - use the arrow keys and the tab key for navigation. When there are group rows and group footers, is there a way to recognize this, so that this rows can be skipped?

With my code, the javascript does not work as expected!?!?

Kind regards

Michael

1 Answer, 1 is accepted

answered on 21 Jan 2011, 09:15 AM

Hello Michael,

The excel-like grid example only demonstrates the basic functionality for showing cells and navigate between them like in MS excel. All functionalities is achieved by custom code and it has some limitations. The current implementation of Excel-like grid support navigation between controls only with auto generated Ids. The navigation between inputs depends on the calculating of their id's.
To achieve the desired functionality concerning having the excel-like grid with grouping and AutoGeneratedColumns set to false you need to write you own algorithm for navigation between cells and rows which covers your scenario. In each scenario the navigation logic is different and the current implementation could not be applicable for all scenarios. Additionally providing algorithms covering each custom scenario is out of our scope.

Regards,
Radoslav
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.