Template column after postback issue

[Anton]

I got some problems with using template columns. Rad Version - 2008.3.1016.35
The question is: why DataBinding template event doesn't fires after postback and can it be fixed?
To illustrate it I done the test described below.

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace Test.WebApplication
{
    public partial class postbacktest : System.Web.UI.Page
    {
        protected RadGrid dataGrid;

        private string keyColumnName;

        protected void Page_Init(object sender, EventArgs e)
        {
            dataGrid = RadGrid1;

            dataGrid.Skin = "Office2007";
            dataGrid.Width = 800;

            dataGrid.AllowAutomaticDeletes = false;
            dataGrid.AllowAutomaticInserts = false;
            dataGrid.AllowAutomaticUpdates = false;
            dataGrid.AutoGenerateColumns = false;
            dataGrid.AutoGenerateEditColumn = false;
            dataGrid.AutoGenerateDeleteColumn = false;

            dataGrid.MasterTableView.EditMode = GridEditMode.InPlace;
            dataGrid.MasterTableView.ShowFooter = true;


            dataGrid.EnableAjaxSkinRendering = true;


            BindGridToDataTable();


            //AddEditColumn();
            AddTextColumn("first", "ProductName");
            AddTextColumn("id", "ProductID");
            AddNumericColumn("second", "Number", NumericType.Currency);
            AddColumn("test", "ComboID");
            AddDeleteColumn();
        }

        public void AddColumn(string headerText, string dataField)
        {
            GridTemplateColumn templateColumn = new GridTemplateColumn();
            BPTemplate temp = new BPTemplate(dataField, keyColumnName);
            templateColumn.ItemTemplate = temp;
            templateColumn.EditItemTemplate = temp;
            templateColumn.HeaderText = headerText;
            templateColumn.UniqueName = dataField;
            dataGrid.MasterTableView.Columns.Add(templateColumn);
        }

        public void AddTextColumn(string headerText, string dataField)
        {
            GridBoundColumn boundColumn = new GridBoundColumn();
            boundColumn.HeaderText = headerText;
            boundColumn.DataField = dataField;
            boundColumn.UniqueName = dataField;
            dataGrid.MasterTableView.Columns.Add(boundColumn);
        }

        public void AddNumericColumn(string headerText, string dataField, NumericType type)
        {
            GridNumericColumn numericColumn = new GridNumericColumn();
            numericColumn.HeaderText = headerText;
            numericColumn.DataField = dataField;
            numericColumn.UniqueName = dataField;
            numericColumn.NumericType = type;
            dataGrid.MasterTableView.Columns.Add(numericColumn);
        }

        public void AddDeleteColumn()
        {
            GridButtonColumn buttonColumn = new GridButtonColumn();
            buttonColumn.ButtonType = GridButtonColumnType.ImageButton;
            buttonColumn.UniqueName = "DeleteCol";
            buttonColumn.CommandName = "Delete";
            buttonColumn.Text = "Delete";
            buttonColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            buttonColumn.ItemStyle.CssClass = "MyImageButton";
            dataGrid.MasterTableView.Columns.Add(buttonColumn);
        }

        public void AddEditColumn()
        {
            GridEditCommandColumn editCommandColumn = new GridEditCommandColumn();
            editCommandColumn.UniqueName = "EditCol";
            editCommandColumn.ButtonType = GridButtonColumnType.ImageButton;
            editCommandColumn.ItemStyle.CssClass = "MyImageButton";
            dataGrid.MasterTableView.Columns.Add(editCommandColumn);
        }

        private void BindGridToDataTable()
        {

            SqlConnection con = new SqlConnection("Data Source=;Initial Catalog=Northwind;Integrated Security=True");

            SqlDataAdapter adapter = new SqlDataAdapter("SELECT TOP 5 [ProductID], cast([ProductID] as numeric) as Number,[ProductName],[ProductID] as ComboID   FROM [Products]", con);
            DataTable links = new DataTable();

            adapter.Fill(links);

            DataBindGrid("ProductID", links);
        }

        public void DataBindGrid(string keyColName, DataTable data)
        {
            dataGrid.DataSource = data.DefaultView;
            keyColumnName = keyColName;
            dataGrid.MasterTableView.DataKeyNames = new string[] { keyColumnName };
        }

    }


    public class BPTemplate : ITemplate
    {
        protected LiteralControl lControl;

        private string colname;
        private DataTable controlData;
        private string keyColName;


        public BPTemplate(string columnName, string keyColumnName)
        {
            colname = columnName;
            keyColName = keyColumnName;

        }

        public void InstantiateIn(Control container)
        {
            lControl = new LiteralControl();
            lControl.ID = "lControl";
            lControl.DataBinding += lControl_DataBinding;

            container.Controls.Add(lControl);

        }

        public void lControl_DataBinding(object sender, EventArgs e)
        {
            LiteralControl l = (LiteralControl)sender;
            GridDataItem container = (GridDataItem)l.NamingContainer;

            var value = ((DataRowView)container.DataItem)[colname].ToString();

            l.Text = value;

        }

    }
}

And ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="postbacktest.aspx.cs" Inherits="Test.WebApplication.postbacktest" %>

<%@ 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></title>
</head>
<body>
   <script type="text/javascript">

       function Post() {

            __doPostBack("", "");
        }



   </script>

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

        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
        </telerik:RadScriptManager>

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

    <button id="button" onclick="Post()">POST</button>
    </form>
</body>
</html>

Please, push the button "POST" and look at the column "test".
No DataBinding event, no values at column "test"

[Anton]

Can anybody help me?

I’ve got a composite control with RadGrid and composite control with RadComboBox, placed inside EditItemTemplate for the column of first one(it’s real-life problem, not a perversion).

So, the behavior described above is very sad for me because it makes the in-line editor unable to work. First postback of RadComboBox by SelectedIndexChanged kills the functionality (combo misses value).

I can set AutoPostBack = false and write tonne of client code, but is it a good workaround? That's quite doubtful…

[Vlad]

Hi Anton,

DataBinding event will be fired only during data-binding. If the control is recreated from ViewState you will not get this event. You can handle NeedDataSource to provide DataSource for the grid and call Rebind() when needed on post-back events.

All the best,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Anton]

Hello, Vlad and thank you for the answer.

But the problem can’t be solved by this way or I didn’t understand you.

Let’s consider the posted example.

Ok. I can change line with BindGridToDataTable(); to dataGrid.NeedDataSource += dataGrid_NeedDataSource; and describe handler like

        private void dataGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

        {

            BindGridToDataTable();

 

        }

But  NeedDataSource dosn’t fires on post-back… Only on load at this case…

[Anton]

Thank you, problem clear.
Rebind() if(IsPostBack) works.
But in case of composite control after rebind command icons such as "Edit", "Delete" disappears.
That is changes to default icon "x".
How can I set CssClass or smth. to prevent it? (at example buttonColumn.ItemStyle.CssClass = "MyImageButton"; used)

[Anton]

Check it out. Considering example above...
Column "Delete"
Before post-back:

<td class="MyImageButton" align="center"><input type="image" name="RadGrid1$ctl00$ctl04$ctl00" src="/WebResource.axd?d=GWnTC4AlHDImmZbhZP2cp7K1Qr4my3aijvd3PSvqBJj7zpD0z-Zd5PlNJOQ8SwVFfCgQJxfAlUdrxnAME3OFzg2&amp;amp;t=633596931280000000" alt="Delete" style="border-width:0px;" /></td>

After post-back:

<td><input type="image" name="RadGrid1$ctl00$ctl04$ctl00" src="/WebResource.axd?d=GWnTC4AlHDImmZbhZP2cp7K1Qr4my3aijvd3PSvqBJj7zpD0z-Zd5PlNJOQ8SwVFfCgQJxfAlUdrxnAME3OFzg2&amp;amp;t=633596931280000000" alt="Delete" style="border-width:0px;" /></td>

Bug? Feature?

[Vlad]

Hi Anton,

Can you post the new version of your code?

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Anton]

Hi, Vlad.
Yes, of course.
ASPX the same.
CS:

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

namespace Test.WebApplication
{
    public partial class postbacktest : System.Web.UI.Page
    {
        protected RadGrid dataGrid;

        private string keyColumnName;

        protected void Page_Init(object sender, EventArgs e)
        {
            dataGrid = RadGrid1;

            dataGrid.Skin = "Office2007";
            dataGrid.Width = 800;

            dataGrid.AllowAutomaticDeletes = false;
            dataGrid.AllowAutomaticInserts = false;
            dataGrid.AllowAutomaticUpdates = false;
            dataGrid.AutoGenerateColumns = false;
            dataGrid.AutoGenerateEditColumn = false;
            dataGrid.AutoGenerateDeleteColumn = false;

            dataGrid.MasterTableView.EditMode = GridEditMode.InPlace;
            dataGrid.MasterTableView.ShowFooter = true;


            dataGrid.EnableAjaxSkinRendering = true;

            dataGrid.NeedDataSource += dataGrid_NeedDataSource;


            //AddEditColumn();
            AddTextColumn("first", "ProductName");
            AddTextColumn("id", "ProductID");
            AddNumericColumn("second", "Number", NumericType.Currency);
            AddColumn("test", "ComboID");
            AddDeleteColumn();

            if(IsPostBack )
            {
                dataGrid.Rebind();
            }
        }

        private void dataGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            BindGridToDataTable();
        }

        public void AddColumn(string headerText, string dataField)
        {
            GridTemplateColumn templateColumn = new GridTemplateColumn();
            BPTemplate temp = new BPTemplate(dataField, keyColumnName);
            templateColumn.ItemTemplate = temp;
            templateColumn.EditItemTemplate = temp;
            templateColumn.HeaderText = headerText;
            templateColumn.UniqueName = dataField;
            dataGrid.MasterTableView.Columns.Add(templateColumn);
        }

        public void AddTextColumn(string headerText, string dataField)
        {
            GridBoundColumn boundColumn = new GridBoundColumn();
            boundColumn.HeaderText = headerText;
            boundColumn.DataField = dataField;
            boundColumn.UniqueName = dataField;
            dataGrid.MasterTableView.Columns.Add(boundColumn);
        }

        public void AddNumericColumn(string headerText, string dataField, NumericType type)
        {
            GridNumericColumn numericColumn = new GridNumericColumn();
            numericColumn.HeaderText = headerText;
            numericColumn.DataField = dataField;
            numericColumn.UniqueName = dataField;
            numericColumn.NumericType = type;
            dataGrid.MasterTableView.Columns.Add(numericColumn);
        }

        public void AddDeleteColumn()
        {
            GridButtonColumn buttonColumn = new GridButtonColumn();
            buttonColumn.ButtonType = GridButtonColumnType.ImageButton;
            buttonColumn.UniqueName = "DeleteCol";
            buttonColumn.CommandName = "Delete";
            buttonColumn.Text = "Delete";
            buttonColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            buttonColumn.ItemStyle.CssClass = "MyImageButton";
            dataGrid.MasterTableView.Columns.Add(buttonColumn);
        }

        public void AddEditColumn()
        {
            GridEditCommandColumn editCommandColumn = new GridEditCommandColumn();
            editCommandColumn.UniqueName = "EditCol";
            editCommandColumn.ButtonType = GridButtonColumnType.ImageButton;
            editCommandColumn.ItemStyle.CssClass = "MyImageButton";
            dataGrid.MasterTableView.Columns.Add(editCommandColumn);
        }

        private void BindGridToDataTable()
        {

            SqlConnection con = new SqlConnection("Data Source=;Initial Catalog=Northwind;Integrated Security=True");

            SqlDataAdapter adapter = new SqlDataAdapter("SELECT TOP 5 [ProductID], cast([ProductID] as numeric) as Number,[ProductName],[ProductID] as ComboID   FROM [Products]", con);
            DataTable links = new DataTable();

            adapter.Fill(links);

            DataBindGrid("ProductID", links);
        }

        public void DataBindGrid(string keyColName, DataTable data)
        {
            dataGrid.DataSource = data.DefaultView;
            keyColumnName = keyColName;
            dataGrid.MasterTableView.DataKeyNames = new string[] { keyColumnName };
        }

    }


    public class BPTemplate : ITemplate
    {
        protected LiteralControl lControl;

        private string colname;
        private DataTable controlData;
        private string keyColName;


        public BPTemplate(string columnName, string keyColumnName)
        {
            colname = columnName;
            keyColName = keyColumnName;

        }

        public void InstantiateIn(Control container)
        {
            lControl = new LiteralControl();
            lControl.ID = "lControl";
            lControl.DataBinding += lControl_DataBinding;

            container.Controls.Add(lControl);

        }

        public void lControl_DataBinding(object sender, EventArgs e)
        {
            LiteralControl l = (LiteralControl)sender;
            GridDataItem container = (GridDataItem)l.NamingContainer;

            var value = ((DataRowView)container.DataItem)[colname].ToString();

            l.Text = value;

        }

    }
}

[Sebastian]

Hello Anton,

From your code snippets I do not see that you add the grid to the Controls collection of a placeholder control as explained in this article from the online documentation. Can you please check whether this is the reason for the erratic behavior you observed on subsequent postback requests?

You also do not need this code block inside the PageInit handler:

           if(IsPostBack )
            {
                dataGrid.Rebind();
            }

because the NeedDataSource event should be raised automatically when the grid is bound to data.

Kind regards,
Stephen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Anton]

Hello, Stephen!
Grid adds statically(look at aspx code snippet), but takes structure dynamically. That's not a reason for the erratic behavior you observed
I think that the reason is incorrect call of Rebind(). The idea to use Page_Init handler for the test wasn't so good as it seemed ))).
Thank you for the answer.