Dynamic RadGrid UI Issue

11 posts, 0 answers
  1. Siljith
    Siljith avatar
    8 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post

    Hi,

    I am creating a dynamic rad grid with multiple templatefield .  when I am scrolling horizondally the Grid is becoming invisible and some text like System.Data.DataRowView are visible. For your information I am creating grid entirely in the page init but declaration is in the .aspx page. Any help will be greatly apreciated.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Jun 2011 Link to this post

    Hello Siljith,

    I suggest you to create the Grid completely from code behind.
    Create Telerik RadGrid entirely in the code behind.

    Thanks,
    Princy.
  3. Siljith
    Siljith avatar
    8 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post

    Hi Princy,

    Thanx for the reply....Alignment issue has resolved when I created the Grid completely from code behind. However text System.Data.DataRowView  is still coming. Each postback adding one more column with text"System.Data.DataRowView " to the end of grid view .
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 23 Jun 2011 Link to this post

    Hi Siljith,

    This issue can appear when the DataField value of the column in question does not matches the underlying source column name (the same can be observed with regular MS GridView control). Please revise your code accordingly to address the problem in question.


    Greetings,
    Maria Ilieva
    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.

  5. Raji
    Raji avatar
    56 posts
    Member since:
    Jul 2011

    Posted 01 Jul 2011 Link to this post

    I also have the same problem. When I load the grid first time its fine. When I click on the columns to sort, it sorts fine but adds the columns again to the grid. I would appreciate if I can get some help. I am attaching the code below. I am using the .net 2.0 dll version Telerik.Web.UI.dll(2010.3.1317.20)

    RadGridFIlter.cs(code below):

    using System;
    using System.Collections.Generic;
    using System.Text;
    using Telerik.Web.UI;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    using System.Data;
    using System.Configuration;

    namespace RadWebUIControls
    {
        /// <summary>
        /// Summary description for RadGridFilter.
        /// </summary>
        public class RadGridFilter:RadGrid
        {
            public RadGridFilter()
                : base()
      {           
            }

            public void CreateDataGrid(System.Data.DataSet dsQDFields)
            {
                this.ID = "RadWorkItemDataGrid";
                //this.Columns.Clear();

                this.ShowStatusBar = true;
                this.AutoGenerateColumns = false;
                this.MasterTableView.PageSize = 50;
                this.AllowSorting = true;
                this.AllowMultiRowSelection = false;
                this.AllowPaging = true;
                //this.EnableViewState = false;
               
               
                //this.AllowAutomaticDeletes = true;
                //this.AllowAutomaticInserts = true;
                //this.AllowAutomaticUpdates = true;
                this.GridLines = GridLines.None;

                this.PagerStyle.Mode = GridPagerMode.NumericPages;

                this.MasterTableView.DataKeyNames = new string[] { "EmployeeID" };

                this.AddTemplateColumn(this.SelectWorkItemTemplateColumn());
                this.AddTemplateColumn(this.ViewImageTemplateColumn());

                foreach (DataRow drQRow in dsQDFields.Tables[0].Rows)
                {
                    if (drQRow["DataTypeName"].ToString().ToUpper().Equals("DATE"))
                    {
                        //this.AddBoundColumn(drQRow["FieldName"].ToString(), drQRow["FieldName"].ToString(), drQRow["FieldDisplayName"].ToString(), true, System.Web.UI.WebControls.HorizontalAlign.Left, System.Web.UI.WebControls.VerticalAlign.Middle, false, "{0:MM/DD/YYYY}",Convert.ToInt16(drQRow["GridColSize"]));
                        this.AddBoundColumn(drQRow["FieldName"].ToString(), drQRow["FieldName"].ToString(), drQRow["FieldDisplayName"].ToString(), true, System.Web.UI.WebControls.HorizontalAlign.Left, System.Web.UI.WebControls.VerticalAlign.Middle, false, "{0:d}",0);
                    }
                    else
                    {
                        //this.AddBoundColumn(drQRow["FieldName"].ToString(), drQRow["FieldName"].ToString(), drQRow["FieldDisplayName"].ToString(), true, System.Web.UI.WebControls.HorizontalAlign.Left, System.Web.UI.WebControls.VerticalAlign.Middle, false, "", Convert.ToInt16(drQRow["GridColSize"]));
                        this.AddBoundColumn(drQRow["FieldName"].ToString(), drQRow["FieldName"].ToString(), drQRow["FieldDisplayName"].ToString(), true, System.Web.UI.WebControls.HorizontalAlign.Left, System.Web.UI.WebControls.VerticalAlign.Middle, false, "",0);
                    }

                    if (!drQRow.IsNull("HideColumn") && Convert.ToInt16(drQRow["HideColumn"]) == 1)
                    {
                        HideColumn(drQRow["FieldDisplayName"].ToString());
                    }
                }

                this.AddTemplateColumn(this.EditWorkItemTemplateColumn());
                //this.EnableSorting(System.Drawing.Color.White);

            }

            //public void LoadData(DataSet pData, string sFilter, string pSortOrder, string pSelectedItems, string pLastItemViewed, string pUserName, string pStepName, string pObjectStore, string pQType)
            public void LoadData(DataTable pData, string sFilter, string pSortOrder)
            {

                this.VirtualItemCount = pData.Rows.Count;
        
                pData.DefaultView.Sort = pSortOrder;
                if (sFilter != null && !sFilter.Equals(string.Empty))
                    pData.DefaultView.RowFilter = sFilter;
              
                this.DataSource = pData.DefaultView;
                this.DataBind();

              
           
            }

    /// <summary>
            /// Add template column
            /// </summary>
            public void AddTemplateColumn(GridTemplateColumn pTemplateColumn)
            {
                this.MasterTableView.Columns.Add(pTemplateColumn);
            }

            /// <summary>
            /// Add bound column
            /// </summary>
            public void AddBoundColumn(string pDataField, string pSortExpression, string pHeaderText, bool pReadOnly, HorizontalAlign pHalign, VerticalAlign pValign, bool pWrap, string pFormat, int pWidth)
            {
                GridBoundColumn column = new GridBoundColumn();
              
                //BoundColumn column = new BoundColumn();
                column.HeaderText = pHeaderText;
                column.DataField = pDataField;
                column.ReadOnly = pReadOnly;
                column.UniqueName = pDataField;
                column.ItemStyle.Wrap = pWrap;
                column.ItemStyle.VerticalAlign = pValign;
                column.ItemStyle.HorizontalAlign = pHalign;
                if (pWidth > 0)
                    column.ItemStyle.Width = Unit.Pixel(pWidth);
                column.SortExpression = pSortExpression;
                if (pFormat != String.Empty)
                    column.DataFormatString = pFormat;
                //this.Columns.Add(column);

                this.MasterTableView.Columns.Add(column);

            }
            /// <summary>
            /// Hide the column.
            /// </summary>
            public void HideColumn(string pHeaderText)
            {
                for (int _i = 0; _i < this.MasterTableView.Columns.Count; _i++)
                {
                    if (this.MasterTableView.Columns[_i].HeaderText.IndexOf(pHeaderText) >= 0)
                    {
                        this.MasterTableView.Columns[_i].Visible = false;
                        break;
                    }
                }
            }
            /// <summary>
            /// Show the column.
            /// </summary>
            public void ShowColumn(string pHeaderText)
            {
                for (int _i = 0; _i < this.MasterTableView.Columns.Count; _i++)
                {
                    if (this.MasterTableView.Columns[_i].HeaderText.IndexOf(pHeaderText) >= 0)
                    {
                        this.MasterTableView.Columns[_i].Visible = true;
                        break;
                    }
                }
            }
           
            /// <summary>
            /// Hide the Select column.
            /// </summary>
            public void HideSelect()
            {
                this.HideColumn("Select");
            }
            /// <summary>
            /// Show the Select column.
            /// </summary>
            public void ShowSelect()
            {
                this.ShowColumn("Select");
            }

            /// <summary>
            /// Hide the View column.
            /// </summary>
            public void HideViewWorkItem()
            {
                this.HideColumn("View");
            }
            /// <summary>
            /// Show the View column.
            /// </summary>
            public void ShowViewWorkItem()
            {
                this.ShowColumn("View");
            }
            /// <summary>
            /// Show the Process column.
            /// </summary>
            public void ShowProcessWorkItem()
            {
                this.ShowColumn("Process");
            }
            /// <summary>
            /// Hide the Process column.
            /// </summary>
            public void HideProcessWorkItem()
            {
                this.HideColumn("Process");
            }

            public int GetSelectedRowIndexForJavascript(int pItemIndex)
            {
                int _selectRow = (pItemIndex + 1);
                if (this.AllowPaging &&
                    this.PagerStyle.Visible &&
                    (this.PagerStyle.Position == GridPagerPosition.Top || this.PagerStyle.Position == GridPagerPosition.TopAndBottom))
                {
                    _selectRow = (pItemIndex + 2);
                }
                return _selectRow;
            }

            protected GridTemplateColumn SelectWorkItemTemplateColumn()
            {
                GridTemplateColumn _tmpCol = new GridTemplateColumn();
                _tmpCol.ItemTemplate = new SelectWorkItemColumn();
                _tmpCol.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                _tmpCol.HeaderText = "Select";
                _tmpCol.UniqueName = "SelectWorkItem";
                return _tmpCol;
            }

            protected GridTemplateColumn EditWorkItemTemplateColumn()
            {
                GridTemplateColumn _tmpCol = new GridTemplateColumn();
                _tmpCol.ItemTemplate = new EditWorkItemColumn();
                _tmpCol.HeaderText = "Process";
                _tmpCol.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                _tmpCol.UniqueName = "EditWorkItem";
                return _tmpCol;
            }

            protected GridTemplateColumn ViewImageTemplateColumn()
            {
                GridTemplateColumn _tmpCol = new GridTemplateColumn();
                _tmpCol.HeaderText = "View";
                _tmpCol.HeaderStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                _tmpCol.ItemTemplate = (new ViewWorkItemImageColumn());
                _tmpCol.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                _tmpCol.UniqueName = "ViewDocument";
                return _tmpCol;
            }

        }

        /// <summary>
        /// Summary description for SelectWorkItemColumn
        /// </summary>
        public class SelectWorkItemColumn : System.Web.UI.ITemplate
        {
            public void InstantiateIn(System.Web.UI.Control container)
            {
                CheckBox _select = new CheckBox();
                _select.ID = "SelectWorkItem";
                container.Controls.Add(_select);
            }
        }
        /// <summary>
        /// Summary description for EditWorkItemColumn
        /// </summary>
        public class EditWorkItemColumn : System.Web.UI.ITemplate
        {
            public void InstantiateIn(System.Web.UI.Control container)
            {             
                HyperLink _edit = new HyperLink();
                //_edit.Target = "_BLANK";
                _edit.Text = "Process";
                _edit.Attributes.Add("target", "_blank");
                _edit.ID = "EditWorkItem";
                _edit.CssClass = "DataGridLinkButton";
                container.Controls.Add(_edit);
            }
        }
        /// <summary>
        /// Summary description for ViewWorkItemImageColumn
        /// </summary>
        public class ViewWorkItemImageColumn : System.Web.UI.ITemplate
        {
            public void InstantiateIn(System.Web.UI.Control container)
            {
                LinkButton _view = new LinkButton();
                _view.Text = "View";
                _view.ID = "ViewImage";
                _view.CssClass = "DataGridLinkButton";
                container.Controls.Add(_view);
            }
        }
    }

    CustomRadGrid.aspx(Code below):

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomRadGrid.aspx.cs" Inherits="CustomRadGrid" %>
    <%@ Register TagPrefix="radweb" Namespace="RadWebUIControls" Assembly="RadWebUIControls" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!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>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
            <div>
                <radweb:RadGridFilter ID="WorkItemDataRadGrid" runat="server" > </radweb:RadGridFilter>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                </telerik:RadAjaxManager>
            </div> 
        </form>
    </body>
    </html>

    CustomRadGrid.aspx(Code behind below):

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;
    using Telerik.Web.UI;

    public partial class CustomRadGrid : System.Web.UI.Page
    {
        public static DataTable dtTable;
        protected void Page_Load(object sender, EventArgs e)
        {
            RadAjaxManager1.AjaxSettings.AddAjaxSetting(WorkItemDataRadGrid, WorkItemDataRadGrid);
            if (!this.IsPostBack)
            {
                LoadData1();
            }  
          
           
        }

        private void LoadData1()
        {
            //DataSet dsTemp = new DataSet();
            if (ViewState["WorkItemsList"] == null)
            {
              
            SqlConnection SqlConnection = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString());
            //Declare a global SqlDataAdapter SqlDataAdapter 
            SqlDataAdapter SqlDataAdapter = new SqlDataAdapter();
            //Declare a global SqlCommand SqlCommand 
            SqlCommand SqlCommand = new SqlCommand();

            SqlConnection.Open();
            SqlCommand.CommandText = "Select EmployeeID,FirstName,LastName,BirthDate,City from Employees";
            SqlCommand.Connection = SqlConnection;
            SqlDataAdapter.SelectCommand = SqlCommand;
            dtTable = new DataTable();
            SqlDataAdapter.Fill(dtTable);
            ViewState.Add("WorkItemsList", dtTable);
            SqlConnection.Close();

            }
            else
            {
                dtTable = (DataTable)(ViewState["WorkItemsList"]);
            }
            //dsTemp.Tables.Add(dtTable);
            WorkItemDataRadGrid.LoadData(dtTable, "", "FirstName");
        }

        protected void Page_Init(object sender, EventArgs e)
        {
            //if (!this.IsPostBack)
            //{
            DataSet dsQE = new DataSet();
            DataTable dtQE = new DataTable("QDataFields");
            dtQE.Columns.Add(new DataColumn("DataTypeName", System.Type.GetType("System.String")));
            dtQE.Columns.Add(new DataColumn("FieldName", System.Type.GetType("System.String")));
            dtQE.Columns.Add(new DataColumn("HideColumn", System.Type.GetType("System.Boolean")));
            dtQE.Columns.Add(new DataColumn("FieldDisplayName", System.Type.GetType("System.String")));

            DataRow drQE;

            drQE = dtQE.NewRow();
            drQE[dtQE.Columns.IndexOf("DataTypeName")] = "INT";
            drQE[dtQE.Columns.IndexOf("FieldName")] = "EmployeeeID";
            drQE[dtQE.Columns.IndexOf("HideColumn")] = "False";
            drQE[dtQE.Columns.IndexOf("FieldDisplayName")] = "EmployeeeID";
            dtQE.Rows.Add(drQE);

            drQE = dtQE.NewRow();
            drQE[dtQE.Columns.IndexOf("DataTypeName")] = "STRING";
            drQE[dtQE.Columns.IndexOf("FieldName")] = "FirstName";
            drQE[dtQE.Columns.IndexOf("HideColumn")] = "False";
            drQE[dtQE.Columns.IndexOf("FieldDisplayName")] = "First Name";
            dtQE.Rows.Add(drQE);

            drQE = dtQE.NewRow();
            drQE[dtQE.Columns.IndexOf("DataTypeName")] = "STRING";
            drQE[dtQE.Columns.IndexOf("FieldName")] = "LastName";
            drQE[dtQE.Columns.IndexOf("HideColumn")] = "False";
            drQE[dtQE.Columns.IndexOf("FieldDisplayName")] = "Last Name";
            dtQE.Rows.Add(drQE);

            drQE = dtQE.NewRow();
            drQE[dtQE.Columns.IndexOf("DataTypeName")] = "DATE";
            drQE[dtQE.Columns.IndexOf("FieldName")] = "BirthDate";
            drQE[dtQE.Columns.IndexOf("HideColumn")] = "False";
            drQE[dtQE.Columns.IndexOf("FieldDisplayName")] = "Birth Date";
            dtQE.Rows.Add(drQE);

            drQE = dtQE.NewRow();
            drQE[dtQE.Columns.IndexOf("DataTypeName")] = "STRING";
            drQE[dtQE.Columns.IndexOf("FieldName")] = "City";
            drQE[dtQE.Columns.IndexOf("HideColumn")] = "False";
            drQE[dtQE.Columns.IndexOf("FieldDisplayName")] = "City";
            dtQE.Rows.Add(drQE);

            dsQE.Tables.Add(dtQE);

            //RadAjaxManager1.AjaxSettings.AddAjaxSetting(Grid1, Grid1);
            WorkItemDataRadGrid.CreateDataGrid(dsQE);

        
            //}
           
        }

    protected void WorkItemDataRadGrid_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
        {
            if (e.CommandName == Telerik.Web.UI.RadGrid.RebindGridCommandName)
            {
                //LoadData();
                //WorkItemDataRadGrid.DataSource = dtTable;
                //if (RadGrid1.MasterTableView.IsItemInserted)
                //{
                //    e.Canceled = true;
                //}
            }
        }

    private void WorkItemDataRadGrid_SortCommand(object source, GridSortCommandEventArgs e)
        {
            WorkItemDataRadGrid.AutoGenerateColumns = false;       
            GridSortExpression sortExpr = new GridSortExpression();
            switch (e.OldSortOrder)
            {
                case GridSortOrder.None:
                   
                    WorkItemDataRadGrid.LoadData(dtTable, "", e.SortExpression + " " + "ASC");

                    break;
                case GridSortOrder.Ascending:
                   
                    WorkItemDataRadGrid.LoadData(dtTable, "", e.SortExpression + " " + "DESC");
                    break;
                case GridSortOrder.Descending:
                   
                    WorkItemDataRadGrid.LoadData(dtTable, "", e.SortExpression + " " + "ASC");
                    break;
            }

        }

  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 04 Jul 2011 Link to this post

    Hello Raji,

    Verify that you build the grid structure programmatically conforming to the concepts for runtime creation depicted in these help topics:

    http://www.telerik.com/help/aspnet-ajax/grid-programmatic-creation.html
    http://www.telerik.com/help/aspnet-ajax/grid-changing-structure-dynamically.html

    This should ensure that the grid viewstate will remain intact and no abnormalities should be observed.

    Regards,
    Sebastian
    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.

  7. Raji
    Raji avatar
    56 posts
    Member since:
    Jul 2011

    Posted 05 Jul 2011 Link to this post

    Hi Sebastian,

    I followed the documents that you mentioned in your reply. If I copy the same code and place it on the code behind of an aspx page it works fine. I create the grid dynamically and then add it to the placeholder. What I trying to do is that I am creating a class RadGridFilter which is inherited from the RADGrid control class. (You can see it from my code below.) This class I am calling it in the aspx page. Let me know if this is going to work. If yes what I am doing wrong.

    Thanks,
    Raji
  8. Siljith
    Siljith avatar
    8 posts
    Member since:
    Jun 2011

    Posted 08 Aug 2011 Link to this post

    Hello,

    I have a new problem in Dynamic radgrid now. The reason I opted Dynamic gid is that the number of Column will be based on selected value of a drop down eg. If i select first item then i will have 10 column but if select another value my grid may have only 8 column. Now since i am creating column in page_init the selected value will through error. So how I can accomplish this.
  9. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 Aug 2011 Link to this post

    Hi Siljith,

    One way to accomplish this is to use auto-generated columns for the grid - thus the number of columns can vary depending on the data source you assign to the control.

    Another method for building non auto-generated columns programmatically is explained in this documentation topic.

    Best regards,
    Sebastian
    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.

  10. Jeff Wu
    Jeff Wu avatar
    1 posts
    Member since:
    May 2010

    Posted 23 Mar 2014 in reply to Sebastian Link to this post

    I have same problem, 
    U can try to add 
    RadGrid1.MasterTableView.EnableColumnsViewState = false;
    Maybe the proble will solve
  11. Ilaya
    Ilaya avatar
    2 posts
    Member since:
    Mar 2012

    Posted 27 Nov 2017 in reply to Jeff Wu Link to this post

    Hi Jeff Wu's

    My Problem solved.

     Thank you so much.

    by

    Raja Ilaya

Back to Top