[CLOSED] Dynamic grid panel

  1. #1

    [CLOSED] Dynamic grid panel

    I am building the gird panel dynamically by code. Through direct method call , we are building this grid(adding all the columns dynamically).
    After building we are calling GridPanel.Reconfigure(). It is working fine and all the columns alignment and width are setting properly.

    but, When i am trying to build this grid in the page load instead of direct method call, it is biding and showing data but the column width are setting properly as i coded the width for dynamic column.

    I read if we build dynamic grid in the direct method call , we need to call the method GridPanel.Reconfigure() at the end.

    Is there any other method like GridPanel.Reconfigure() for building grid in the page load.

    Code :


    
      <ext:GridPanel ID="grdERL" runat="server" MinHeight="0" MaxHeight="690" EnableColumnMove="false" Width="1220" Hidden="true">
                <Store>
                    <ext:Store ID="strERL" runat="server" IgnoreExtraFields="false">
                        <Model>
                            <ext:Model ID="Model39" runat="server" />
                        </Model>
                    </ext:Store>
                </Store>
                <View>
                    <ext:GridView ID="gvERL" runat="server" DeferEmptyText="false"
                        EmptyText="<%$ Resources:WebResource,GeneralMsg_NoRecordsFound %>" StripeRows="false" TrackOver="false" />
                </View>
                <ColumnModel>
                    <Columns>
                        <ext:Column ID="Column26"
                            runat="server"
                            Text="DUMMY"
                            DataIndex="DUMMY"
                            Width="0"
                            Locked="true"
                            Sortable="false">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
    
    
    code behind:
    
    [DirectMethod(ShowMask=true, Target=MaskTarget.Page)]
            public void BindScorecardERL()
            {
                //string strProgramId = hdnSelectedProgramIds.Text;
                //strProgramId = strProgramId.Split(',').GetValue(0).ToString();
    
                ViewManager objViewManager = new ViewManager();
    
                GetFilterCriterias();
                if (CheckSnapshotDate(SelectedMonth, SelectedYear) == 3)
                {
                    objViewManager.BoolHistory = true;
                }
                else
                {
                    objViewManager.BoolHistory = false;
                }
               
                DataSet dataSetDetailsTemp = objViewManager.GetERLDetails(ProgramIds, SelectedMonth, SelectedYear);
                string ipdsPhase = dataSetDetailsTemp.Tables[1].Rows[0]["IPDSPhaseName"].ToString();
                DataTable ERLDetails = new DataTable();
                if (dataSetDetailsTemp.Tables.Count > 2)
                {
                    ERLDetails = dataSetDetailsTemp.Tables[2];
                    ERLDetails.Columns["Measure1"].ColumnName = ipdsPhase;
                    string[] columnNames = (from dc in ERLDetails.Columns.Cast<DataColumn>()
                                            select dc.ColumnName).ToArray();
    
                    string strTemp = string.Empty;
                    foreach (DataColumn col in ERLDetails.Columns)
                    {
    
                        strTemp = col.ColumnName;
                        strTemp = strTemp.Replace(".", string.Empty);
                        col.ColumnName = strTemp;
                    }
                }
                else
                {
                    lblHdnERLDetails1.Hidden = false;
                    pnlHide.Height = 100;
                    grdERL.Hidden = true;
                }
    
                if (ERLDetails.Rows.Count > 0)
                {
                    pnlHide.Height = 0;
                   
    
                    DynamicGridView dynGV = new DynamicGridView();
                    dynGV.createGrid(grdERL, strERL, ERLDetails);
    
                    grdERL.Hidden = false;
                    //grdERL.ColumnModel.Columns[1].SetWidth(310);
                    //grdERL.Refresh();
    
                  
                   
                   
                }
                else
                {
                    strERL.DataSource = ERLDetails;
                    strERL.DataBind();
                }
                
            }
    
    
    code in DynamicGridView class
    
     public void createGrid(GridPanel grdERL, Store strERL, DataTable dt)
            {
                if (X.IsAjaxRequest)
                {
                    strERL.RemoveFields();
                }
    
                for (int i = 0; i < dt.Columns.Count; i++)
                {
                    AddField(new ModelField(dt.Columns[i].ToString()), strERL, dt);
                }
    
    
                strERL.RebuildMeta();
    
                BindSet1(strERL, dt);
    
                for (int j = 0; j < dt.Columns.Count; j++)
                {
    
                    if (j == 0)
                    {
                        Renderer objRenderAlternate = new Renderer();
                        objRenderAlternate.Fn = "RenderAlternateColor";
                        grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = true, Lockable = false, Width = 310, Wrap = true, Renderer = objRenderAlternate, Resizable = false, Sortable = false, MenuDisabled = true });
                    }
                    else
                    {
                        Renderer objRender = new Renderer();
                        objRender.Fn = "RenderColor";
                        grdERL.ColumnModel.Columns.Add(new Column { DataIndex = dt.Columns[j].ToString(), Text = dt.Columns[j].ToString(), Locked = false, Width = 151, Wrap = true, Renderer = objRender, Resizable = false, Sortable = false, MenuDisabled = true });
                    }
                }
    
                if (X.IsAjaxRequest)
                {
                    grdERL.Reconfigure();
                }
            }
    
    
    JavaScript
    
    
               var RenderColor = function (columnValue, columnValueCSS, record, rowIndex) {
    
                   if (rowIndex == 0) {
                       var colIndexToRemove = columnValue.split(",");
                       return '<span style="background-color:#FF0000;color:White;width:25%;height:22px;display:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[0] + '</span>' + '<span style="background-color:#FEFF49;color:Black;width:25%;height:22px;display:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[1] + '</span>' + '<span style="background-color:#008000;color:White;width:25%;height:22px;display:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[2] + '</span>' + '<span style="background-color:#d4d0c8;color:Black;width:25%;height:22px;display:inline-table;line-height: 18px;text-align:center;">' + colIndexToRemove[3] + '</span>';
                   }
                   else if (rowIndex == 1) {
                       return '<span style="background-color:White;color:Black;width:100%;height:20px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                   }
                   else if (rowIndex == 2) {
                       return '<span style="background-color:#E6E6E6;color:Black;width:100%;height:20px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                   }
                   else {
    
                       if (columnValue == 'Actions') {
                           return '<span style="background-color:#FEFF49;color:Black;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == 'In Place') {
                           return '<span style="background-color:#a4ecaa;color:Black;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == 'Gaps') {
                           return '<span style="background-color:#FF0000;color:White;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == 'N/A') {
                           return '<span style="background-color:#d4d0c8;color:Black;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == 'Proven') {
                           return '<span style="background-color:#008000;color:White;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == 'Disconnects') {
                           return '<span style="background-color:#f999a2;color:White;width:100%;height:15px;display:inline-table;text-align:center;font-weight:bold">' + columnValue + '</span>';
                       }
                       else if (columnValue == null) {
                           return '<span style="background-color:White;color:Black;width:100%;height:15px;display:inline-table;text-align:left;font-weight:bold">&nbsp;</span>';
                       }
                   }
                   return columnValue;
               };
    
    
               var count = 1;
               //AP3#1163:Render sequence before Level 1 ERL column
               var newRowCount = 0;
    
               var RenderAlternateColor = function (columnValue, columnValueCSS, record, rowIndex, columnIndex) {
    
                   if (newRowCount == 21) {
                       newRowCount = 0;
                   }
                   if (columnValue == "Counts") {
                       return '<span style="background-color:White;color:Black;width:100%;height:22px;display:inline-table;text-align:right;font-weight:bold">Counts</span>';
                   }
                   else if (columnValue == "Scoring Status") {
                       return '<span style="background-color:White;color:Black;width:100%;height:20px;display:inline-table;text-align:right;font-weight:bold">Scoring Status</span>';
                   }
                   else if (columnValue == "Last Status Date") {
                       return '<span style="background-color:#E6E6E6;color:Black;width:25%;height:20px;display:inline-table;text-align:center;font-weight:bold">Level 1 ERL</span>' + '<span style="background-color:#E6E6E6;color:Black;width:75%;height:20px;display:inline-table;text-align:right;font-weight:bold">Last Status Date</span>';
                   }
                   else {
                       if (count % 2 != 0) {
                           count++;
                           //15-Oct-2014: AP3#1163:Render sequence before Level 1 ERL column
                           newRowCount++;
                           columnValueCSS.css = "GrayColor_ERL";
                           if (newRowCount.toString().length == 2) {
                               return '<span style="background-color:#E6E6E6;color:#444;width:10px;height:15px;display:inline-table;text-align:right;padding-right:5px !important;">' + newRowCount + '</span>' + columnValue;
                           } else {
                               return '<span style="background-color:#E6E6E6;color:#444;width:10px;height:15px;display:inline-table;text-align:right;padding-right:10px !important;">' + newRowCount + '</span>' + columnValue;
                           }
                       }
                       else {
                           count++;
                           //15-Oct-2014: AP3#1163:Render sequence before Level 1 ERL column
                           newRowCount++;
                           columnValueCSS.css = "whitecolorLeftalign_ERL";
                           if (newRowCount.toString().length == 2) {
                               return '<span style="background-color:White;color:#444;width:10px;height:15px;display:inline-table;text-align:right;padding-right:5px !important;">' + newRowCount + '</span>' + columnValue;
                           } else {
                               return '<span style="background-color:White;color:#444;width:10px;height:15px;display:inline-table;text-align:right;padding-right:10px !important;">' + newRowCount + '</span>' + columnValue;
                           }
                       }
                   }
    
                   return columnValue;
               };
    Last edited by Daniil; Sep 19, 2015 at 2:55 PM. Reason: [CLOSED]
  2. #2
    Hi @velusoft,

    Yes, a GridPanel's .Reconfigure() should not be called at initial page load and there is no anything that should be called instead.

    ...but the column width are setting properly as i coded the width for dynamic column.
    I guess you meant "not properly". Please share more details what is exactly wrong with columns' width.

    Also do you see any JavaScript error in a browser's console?

    It looks like that the shortest way to a solution would be providing us with a full test case to reproduce the problem. You could start from your real page and reduce/simplify it step by step as explained in this post.
    How to prepare a sample
  3. #3
    I provided the code what i have.....

    when we build the grid and grid columns dynamically in page load method, the column width is not setting properly... It is showing space in between columns. but if i build the same in direct method call showing properly since that is ajax request and able to call gridpanel.reconfigure() method.
    I don't see any JS error but if call gridpanel.reconfigure() method in page load i am seeing JS error
    Last edited by velusoft; Sep 09, 2015 at 1:39 PM.
  4. #4
    I provided the code what i have.....
    Yes, but looking at the code I cannot determine a possible reason of the problem. I tried to put the code snippets together, but could not run it. To investigate the problem in details we should be able to reproduce it locally. Unfortunately, description and demonstration of code snippets appear to be not enough to determine the problem.

    when we build the grid and grid columns dynamically in page load method, the column width is not setting properly... It is showing space in between columns. but if i build the same in direct method call showing properly since that is ajax request and able to call gridpanel.reconfigure() method.
    For you additional details. Though, I still don't quite have any good ideas on what might be wrong.

    I don't see any JS error
    Okay, thanks.

    but if call gridpanel.reconfigure() method in page load i am seeing JS error
    Yes, that is expected. .Reconfigure() shouldn't be called on initial page load.
  5. #5
    hi @velusoft.

    You can look at it.

    http://forums.ext.net/showthread.php...-group-columns
    Last edited by siyahgul; Sep 11, 2015 at 10:59 PM.

Similar Threads

  1. Export to Excel for Dynamic Grid panel
    By kavitha in forum 2.x Help
    Replies: 0
    Last Post: Jan 22, 2014, 10:33 AM
  2. Dynamic Panel on Grid Row Click
    By macinator in forum 1.x Help
    Replies: 0
    Last Post: Jul 20, 2012, 5:12 PM
  3. [CLOSED] Grid in tab panel dynamic.
    By stoque in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Jul 28, 2011, 6:36 PM
  4. Dynamic Grid Panel
    By sumesh in forum 1.x Help
    Replies: 14
    Last Post: May 31, 2011, 1:53 PM
  5. Dynamic grid does not render in a dynamic panel
    By Wellington Caetano in forum 1.x Help
    Replies: 4
    Last Post: Apr 12, 2011, 9:19 PM

Posting Permissions