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

Client performance

5 Answers 79 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Andy Macourek
Top achievements
Rank 1
Andy Macourek asked on 17 Oct 2012, 05:35 PM
I have been having problems with the self hierarchy with the RadGrid control with the columns not lining up.  It is a cross-IE problem.  I decided to look at the TreeList control.  How can I have all of the data on the client pre-loaded without having to make a server call for each expand/collapse.

5 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 22 Oct 2012, 03:01 PM
Hello Andy,

Can you please specify what is the difference in your project compared with our online example?
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/selfreferencing/defaultcs.aspx

Greetings,
Pavlina
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.
0
Andy Macourek
Top achievements
Rank 1
answered on 22 Oct 2012, 04:06 PM
The differences are that the sample has all of the columns the same width and does not pre-define the columns that will be showing up. 

Here is the definition for the grid.

<div style="width:800px">
           <rad:RadGrid ID="GridSummary" runat="server" OnColumnCreated="Grid_ColumnCreated"
               OnItemCreated="GridSummary_ItemCreated" OnItemDataBound="Grid_ItemDataBound"
               EnableEmbeddedSkins="false" Skin="MetroMagenta" AutoGenerateColumns="false">
               <MasterTableView HierarchyDefaultExpanded="true" HierarchyLoadMode="Client"
                   OnDataBound="GridSummary_DataBound"
                   DataKeyNames="RecordId, ParentRecordId, RecordName"
                   Width="100%"
                   <SelfHierarchySettings ParentKeyName="ParentRecordId" KeyName="RecordId" />
                   <Columns>
                       <rad:GridBoundColumn DataField="RecordName" UniqueName="RecordName" HeaderStyle-Width="410px" ItemStyle-Width="410px"/>
                       <rad:GridBoundColumn DataField="Volume1" UniqueName="Volume1" HeaderText="Set1 Volume"  HeaderStyle-Width="130px" ItemStyle-Width="130px" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Center"/>
                       <rad:GridBoundColumn DataField="Volume2" UniqueName="Volume2" HeaderText="Set2 Volume"  HeaderStyle-Width="130px" ItemStyle-Width="130px" ItemStyle-HorizontalAlign="Right"  HeaderStyle-HorizontalAlign="Center"/>
                       <rad:GridBoundColumn DataField="Volume3" UniqueName="Volume3" HeaderText="Set3 Volume"  HeaderStyle-Width="130px" ItemStyle-Width="130px" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Center" />
                   </Columns>
               </MasterTableView>
               <ClientSettings AllowExpandCollapse="true" />
            </rad:RadGrid>
       </div>

I have attached an image of the grid. 

I do have the style "hack" at the top of the page:

<

 

 

style type="text/css">

 

 

 

.RadGrid td

 

{

 

 

padding: 0;

 

}

 

 

</style>

 



Here is the code behind.
protected void GridSummary_ItemCreated(object sender, GridItemEventArgs e)
   {
       Grid_ItemCreated(sender, e, GridSummary);
   }
   protected void GridSummary_DataBound(object sender, EventArgs e)
   {
       Grid_DataBound(sender, e, GridSummary);
   }
   protected void Grid_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
   {
       if (e.Column is GridExpandColumn)
       {
           e.Column.Visible = false;
       }
       else if (e.Column is GridBoundColumn)
       {
           if (e.Column.UniqueName == "RecordName")
           {
               e.Column.HeaderStyle.Width = Unit.Pixel(410);
               e.Column.ItemStyle.Width = Unit.Pixel(410);
           }
           else
           {
               e.Column.HeaderStyle.Width = Unit.Pixel(130);
               e.Column.ItemStyle.Width = Unit.Pixel(130);
           }
       }
   }
   protected void Grid_ItemCreated(object sender, GridItemEventArgs e, RadGrid Grid)
   {
       CreateExpandCollapseButton(e.Item, "RecordName", "RecordId");
       if (e.Item is GridHeaderItem && e.Item.OwnerTableView != Grid.MasterTableView)
       {
           e.Item.Style["display"] = "none";
           e.Item.Style["width"] = "0px";
       }
       if (e.Item is GridNestedViewItem)
       {
       }
       e.Item.Expanded = false;
     }
   protected void Grid_ItemDataBound(object sender, GridItemEventArgs e)
   {
       CreateExpandCollapseButton(e.Item, "RecordName", "RecordId");
   }
   protected void Grid_DataBound(object sender, EventArgs e, RadGrid Grid)
   {
       HideExpandColumnRecursive(Grid.MasterTableView);
       foreach (GridDataItem item in Grid.MasterTableView.Items)
       {
           if (!string.IsNullOrEmpty(item.GetDataKeyValue("ParentRecordId").ToString()))
           {
               item.Visible = false;
           }
       }
   }
   public void CreateExpandCollapseButton(GridItem item, string columnUniqueName, string keyName)
   {
       if (item is GridDataItem)
       {
           if (item.FindControl("MyExpandCollapseButton") == null)
           {
               Button button = new Button();
               button.CommandName = "ExpandCollapse";
               //button.Text = "x";
               button.CssClass = "gridCollapse";
               button.ID = "MyExpandCollapseButton";
               if (item.OwnerTableView.HierarchyLoadMode == GridChildLoadMode.Client)
               {
                   string script = String.Format(@"$find(""{0}"")._toggleExpand(this, event); toggleExpandStyle(event); return false;", item.Parent.Parent.ClientID);
                   button.OnClientClick = script;
               }
               int level = item.ItemIndexHierarchical.Split(':').Length - 1;
               button.Style["margin-left"] = level * 15 + "px";
               TableCell cell = ((GridDataItem)item)[columnUniqueName];
               cell.Controls.Add(button);
               cell.Controls.Add(new LiteralControl(" "));
               cell.Controls.Add(new LiteralControl(((GridDataItem)item).GetDataKeyValue(columnUniqueName).ToString()));
           }
       }
   }
   public void HideExpandColumnRecursive(GridTableView tableView)
   {
       GridItem[] nestedViewItems = tableView.GetItems(GridItemType.NestedView);
       foreach (GridNestedViewItem nestedViewItem in nestedViewItems)
       {
           foreach (GridTableView nestedView in nestedViewItem.NestedTableViews)
           {
               nestedView.Style["border"] = "0";
               Button MyExpandCollapseButton = (Button)nestedView.ParentItem.FindControl("MyExpandCollapseButton");
               if (nestedView.Items.Count == 0)
               {
                   if (MyExpandCollapseButton != null)
                   {
                       MyExpandCollapseButton.Style["visibility"] = "hidden";
                   }
                   nestedViewItem.Visible = false;
               }
               else
               {
                   if (MyExpandCollapseButton != null)
                   {
                       MyExpandCollapseButton.Style.Remove("visibility");
                   }
               }
               if (nestedView.HasDetailTables)
               {
                   HideExpandColumnRecursive(nestedView);
               }
           }
       }
   }

0
Pavlina
Telerik team
answered on 23 Oct 2012, 11:48 AM
Hi,

Note that ItemStyle-Width should not be set for defining column widths. Only HeaderStyle-Width should be used.

Greetings,
Pavlina
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.
0
Andy Macourek
Top achievements
Rank 1
answered on 25 Oct 2012, 05:16 PM
I removed the item width from the code behind and the the grid definition.  It looks fine in FireFox and IE9.  When I change to compatibility view in IE9, the columns do not align like in the image below.  Also, this same problems happens when I view in IE10.
0
Pavlina
Telerik team
answered on 30 Oct 2012, 04:39 PM
Hello,

Can you provide a live url where this problem can be observed? We will inspect it locally and will advice you further.

Regards,
Pavlina
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.
Tags
TreeList
Asked by
Andy Macourek
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Andy Macourek
Top achievements
Rank 1
Share this question
or