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

Problem working with dynamically created RadGrid's

7 Answers 344 Views

Grid

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

Remco asked on 04 Dec 2011, 12:57 PM

Hello,

We want to create a WebForm with a RadGrid that should be able to show different datasources. I started out with http://www.telerik.com/help/aspnet-ajax/grid-changing-structure-dynamically.html help page, that explains how to dynamically create a grid structure. To be more flexible I used the NeedDataSource event handling, and everything works reasonably well. For this I got some helpful info from the http://www.telerik.com/community/forums/aspnet-ajax/grid/grid-dynamically-needs-different-datasources-needdatasource-can-t-do-this.aspx forum page.

However I have two issues I'm unable to solve.

1) If the user changes a column width and then switch to a different datasource we get a 'Cannot find a column with UniqueName '...' error. This is because it still refers to the previous grid layout. What code changes should I make to fix this?

2) I want to save the width of columns and the sort columns. But as the RadGrid is created dynamically in the Page_Init I don't have a clue how and when I should save the grid layout.

I added a small sample, based on the Northwind database, to show my current solution. Can someone instruct me how to solve my problems?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="WebApplication3.WebForm9"  Trace="false" %>

<%@ 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 id="Head1" runat="server">

<title></title>

</head>

<body class="BODY">

<form runat="server" id="mainForm" method="post">

<telerik:RadScriptManager ID="RadScriptManager" runat="server"></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 id="menu" style="height:30px; margin-top:10px;">

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"

onselectedindexchanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>customers</asp:ListItem>

<asp:ListItem>orders</asp:ListItem>

</asp:DropDownList>

</div>

<br />

<div id="DivGrid1" style="height:200px; margin-top:10px;" >

<telerik:RadGrid ID="RadGrid1" runat="server" >

</telerik:RadGrid>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Configuration;

using System.Data.SqlClient;

using Telerik.Web.UI;

namespace WebApplication3

{

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

{

myListview pageGrid = new myListview();

List<myListviewColumn> gridColumn = new List<myListviewColumn>();

protected void Page_Init(object sender, System.EventArgs e)

{

Grid1_PageInit();

}

private void Grid1_PageInit()

{

RadGrid1.Skin = "Office2010Blue";

this.RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(this.RadGrid1_NeedDataSource);

RadGrid1.Width = Unit.Percentage(100);

RadGrid1.AllowPaging = true;

RadGrid1.GroupingEnabled = false;

RadGrid1.ShowGroupPanel = false;

RadGrid1.ShowStatusBar = true;

RadGrid1.AllowMultiRowSelection = true;

RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;

RadGrid1.PagerStyle.AlwaysVisible = true;

RadGrid1.ClientSettings.AllowDragToGroup = true;

RadGrid1.ClientSettings.Selecting.AllowRowSelect = true;

RadGrid1.ClientSettings.AllowColumnsReorder = true;

RadGrid1.ClientSettings.AllowKeyboardNavigation = true;

RadGrid1.ClientSettings.Scrolling.AllowScroll = true;

RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = true;

RadGrid1.ClientSettings.Scrolling.ScrollHeight = Unit.Percentage(100);

RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;

RadGrid1.ClientSettings.Resizing.EnableRealTimeResize = true;

RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = true;

RadGrid1.ClientSettings.Resizing.AllowResizeToFit = true;

// Add Master Table

RadGrid1.MasterTableView.PageSize = 20;

RadGrid1.MasterTableView.AllowSorting = true;

RadGrid1.AutoGenerateColumns = false;

RadGrid1.MasterTableView.EnableColumnsViewState = false;

string ddlValue = Request.Form.Get("DropDownList1");

switch (ddlValue)

{

case "customers":

goto default;

case "orders":

pageGrid.gridDbConnection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

pageGrid.gridQuery = "SELECT OrderID, OrderDate, ShipName, ShipAddress FROM Orders";

gridColumn.Clear();

gridColumn.Add(new myListviewColumn(0, "orderid", "Order", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(1, "orderdate", "Orderdatum", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(2, "shipname", "Bedrijf", AttributeType.String, 100));

gridColumn.Add(new myListviewColumn(3, "shipaddress", "Adres", AttributeType.String, 100));

break;

default:

pageGrid.gridDbConnection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;

pageGrid.gridQuery = "SELECT CompanyName, ContactName, Address, City FROM Customers";

gridColumn.Clear();

gridColumn.Add(new myListviewColumn(0, "companyname", "Bedrijf", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(1, "contactname", "Contactpersoon", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(2, "address", "Adres", AttributeType.String, 200));

gridColumn.Add(new myListviewColumn(3, "city", "Plaats", AttributeType.String, 200));

break;

}

CreateListlayout();

}

private void CreateListlayout()

{

GridClientSelectColumn selectColumn;

selectColumn = new GridClientSelectColumn();

selectColumn.UniqueName = "ClientSelectColumn";

selectColumn.HeaderStyle.Width = Unit.Pixel(35);

selectColumn.Resizable = false;

RadGrid1.MasterTableView.Columns.Add(selectColumn);

GridBoundColumn boundColumn;

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

{

boundColumn = new GridBoundColumn();

boundColumn.DataField = gridColumn[i].AttributeName;

boundColumn.HeaderText = gridColumn[i].Name;

boundColumn.ItemStyle.Wrap = false;

if (i < gridColumn.Count - 1) { boundColumn.HeaderStyle.Width = Unit.Pixel(gridColumn[i].Width); }

RadGrid1.MasterTableView.Columns.Add(boundColumn);

}

protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

SqlDataReader dr;

dr = SqlRetrieve(pageGrid.gridQuery, pageGrid.gridDbConnection);

RadGrid1.DataSource = dr;

}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

RadGrid1.CurrentPageIndex = 0;

RadGrid1.MasterTableView.SortExpressions.Clear();

RadGrid1.Rebind();

}

// Retrieve data using a SQL Query

public static SqlDataReader SqlRetrieve(string sql, string connectionString)

{

// Create the database connection

SqlConnection dbConnection = new SqlConnection(connectionString);

// Prepare the SQL command execution

SqlCommand cmd = new SqlCommand(sql, dbConnection);

cmd.CommandType = CommandType.Text;

// Retrieve data with sqlDataReader

try

{

dbConnection.Open();

// Make sure the database connection is closed when the datareader is closed.

return cmd.ExecuteReader(CommandBehavior.CloseConnection);

}

catch (SqlException dbex)

{

return null;

}

catch (Exception ex)

{

return null;

}

public class myListview

{

public string gridQuery { get; set; }

public string gridDbConnection { get; set; }

}

public class myListviewColumn

{

public int Index { get; set; }

public string Name { get; set; }

public string AttributeName { get; set; }

public int Type { get; set; }

public int Width { get; set; }

public myListviewColumn(int index, string attributename, string name, int type, int width)

{

Index = index;

Name = name;

Type = type;

Width = width;

AttributeName = attributename;

}

Kind Regards, Remco

7 Answers, 1 is accepted

answered on 06 Dec 2011, 11:32 AM

Hi Adam,

Try setting the DataSource property to null before calling the Rebind() method for your RadGrid and check whether this resolves the issue.

Your code should be something similar to this:

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

RadGrid1.CurrentPageIndex = 0;

RadGrid1.MasterTableView.SortExpressions.Clear();

RadGrid1.DataSource = null;

RadGrid1.Rebind();

}

Regards,
Andrey
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 06 Dec 2011, 11:47 AM

6-12-2011-11-40-25.jpg

Hello Andrey,

Thanks, but this does not solve the problem. I tried that before and tried it again, following your suggestion. However I still get the same error message, see attached screenshot, if I switch to another view immediately after resizing a column or a column swap.

Any other suggestions?

Regards, Remco

answered on 06 Dec 2011, 02:17 PM

Hi Remco,

Another approach you could try is to create the whole structure of RadGrid in code behind in the Grid1_PageInit() method and to remove its tag from the mark-up code. Splitting the structure in both places sometimes could mess up the ViewState.

Your code should be something similar to this:

private void Grid1_PageInit()

{

RadGrid RadGrid1 = new RadGrid();

RadGrid1.ID = "RadGrid1";

RadGrid1.Skin = "Office2010Blue";

this.RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(this.RadGrid1_NeedDataSource);

RadGrid1.Width = Unit.Percentage(100);

RadGrid1.AllowPaging = true;

RadGrid1.GroupingEnabled = false;

RadGrid1.ShowGroupPanel = false;

RadGrid1.ShowStatusBar = true;

RadGrid1.AllowMultiRowSelection = true;

.......................................

Give these suggestion a try and if the issue still persists please share a sample project that we could test debug locally.

Regards,
Andrey
the Telerik team

answered on 07 Dec 2011, 05:25 PM

For anyone interested in the solution provided by Telerik for this issue, I post their response.

This is a scenario that RadGrid does not support with ViewState on - to apply changes to columns of RadGrid which will not be available on subsequent postbacks. The problem is that the control tries to recreate the resizing and reordering changes (this is not part of the columns viewstate but of the whole control) but does not manage to find the columns to which they should be applied. So, you have two options:

1) To drop the resizing and reordering features from this grid.
2) To disable the ViewState of the whole placeholder where you load the RadGrid control. In this scenario have in mind that the SqlDataReader binding may not works, as each postback in the page will make the grid try to rebind and if the reader is currently closed, you will get an exception.

Additionally, just an advice - place this line, after all the logic that adds controls to the grid (to make sure that all properties are applied correctly):
this.PlaceHolderGrid1.Controls.Add(RadGrid1);

I hope this helps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem working with dynamically created RadGrid's

7 Answers, 1 is accepted