Client performance

6 posts, 0 answers
  1. Andy Macourek
    Andy  Macourek avatar
    30 posts
    Member since:
    Mar 2010

    Posted 17 Oct 2012 Link to this post

    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.
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 22 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy Macourek
    Andy  Macourek avatar
    30 posts
    Member since:
    Mar 2010

    Posted 22 Oct 2012 Link to this post

    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);
                   }
               }
           }
       }

  5. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 23 Oct 2012 Link to this post

    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.
  6. Andy Macourek
    Andy  Macourek avatar
    30 posts
    Member since:
    Mar 2010

    Posted 25 Oct 2012 Link to this post

    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.
  7. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 30 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017