regarding nested view template of Radgrid

[chaitanya elluri]

Hi Veli,

I am using the Telerik RadGrid in our application,

our requirement is to Bind the columns and data to the grid dynamically .

including this based on the parent grid's selected row i need to show the related say 3tables of data either using Detai table grid or a NestedView template

I will describe the issues i faces on using these two options in breif now and also attached the screenshots for the related issues

1.Using Detail Table Data

    Adding columns and binding data is no problem...

        a).     First thing is the appearance 
         b).     Is it more flexible to have add,edit and one more button to redirect to some other page funtionalities with in all the  GridTableViews.
    passing the selected row as parameter
         c)    . If i resize the column extensively the RadGrid control automatically intiates the scroll
    option where i fill the screen gets so clumsy to differentiate the Parent grid and the Gridtableview

2.Using Nested View template
 
 In this template i took a panel and a tabstrip with in that panel.that tabstrip consists of
 three tabs for the three different related tables as explained above.
 
 Using this also adding columns and binding the data is no problem
 
     a).  The main problem is the columns and the data are not getting binded for the first click of expand column
    Inorder to over come this problem i used the HierarchyLoadMode as Client for this even for the first expand column click also data is gettind binded.
    but if i click for the next page of parent grid,then i am not able to view get the data binded to the child grids of the tabcontrol

     b).  In this also i need flexibility to have add,edit and even to redirect to some other page from the childgrids passing the selected row as parameter

Now coming to an end , I need the best solution among the two and also the solutions to over come the problems

Thanks in Advance
chaitanya.E
[e-mail]

[Veli]

Hello chaitanya,

The choice of hierarchy setup for RadGrid, of course, depends on your business requirements. Still, using the NestedViewTemplate offers greater flexibility, as you can define any custom content inside the nested view. If your grids are not bound when first expanding your parent items, try explicitly calling Rebind() in the parent grid's ItemCommand event handler, when expanding an item:

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    //if ExpandCollapse command is fired and the item is not expanded yet
    //(meaning the item will expand after the command)
    if (e.CommandName == RadGrid.ExpandCollapseCommandName && !e.Item.Expanded)
    {
        //find inner RadGrid and rebind explicitly
        RadGrid innerGrid = (e.Item as GridDataItem).ChildItem.FindControl("InnerGridID") as RadGrid;
        innerGrid.Rebind();
    }
}

For adding columns with custom functionality, you can use one of the many different column types RadGrid supports. Check this RadGrid column types demo for more info.

Regards,
Veli
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Milind Raje]

hi,
Is there a way to customize the appearance of the ">" or the expand button on the nextedviewtemplate in RadGrid? I would like something like "View Details" displayed instead of just ">".
Also, is there a way for the nestedview expand if the user clicks on one of the items on the row instead of just the ">" button?
thanks
milind raje

[Princy]

Hello Milind,

One solution is hide the ExpandColumn of RadGrid and add one GridTemplateColumn with LinkButton in ItemTemplate. Set the CommadName of LinkButton as 'ExpandCollapse' which toggles the expanded state of the child items.

You can refer the following Forum post for hiding ExpandCollapse column.
How to hide the ExpandColumn
Add the following mark up in MastertableView->Columns .
ASPX:

<telerik:GridTemplateColumn>
    <ItemTemplate>
        <asp:LinkButton ID="LinkButton1" CommandName="ExpandCollapse" Text="View" runat="server"></asp:LinkButton>
    </ItemTemplate>
 </telerik:GridTemplateColumn>

Try the following cliient side code to expand grid item on row click.
ASPX:

<ClientSettings>
      <ClientEvents OnRowClick="RowClicked"></ClientEvents>
</ClientSettings>

Java Script:

<script language="javascript">
    function RowClicked(sender, args) {
        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
        row.set_expanded(true);
    }
</script>

Thanks,
Princy.

[Milind Raje]

Thanks. That worked perfectly!
milind

[Milind Raje]

That worked well however, with a little problem, the filter boxes all get shifted to right by one. Anyway, I used a slightly different approach to do the same thing and it kept the filter boxes in the same place.

protected void StudentListingItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem item = e.Item as GridDataItem;
                Button button = item["ExpandColumn"].Controls[0] as Button;
                button.Visible = false;
                LinkButton linkButton = new LinkButton();
                linkButton.Text = "Details";
                linkButton.CommandName = "ExpandCollapse";
                item["ExpandColumn"].Controls.Add(linkButton);
            } // end if
        }  // end method

And it the item command event:
 protected void StudentListingItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName == "ExpandCollapse")
            {
                if (e.CommandSource is LinkButton)
                {
                    LinkButton linkButton = e.CommandSource as LinkButton;
                    if (linkButton.Text == "Details")
                    {
                        linkButton.Text = "Hide";
                    }
                    else
                    {
                        linkButton.Text = "Details";
                    } // end if
                } // end if
            } // end if
        } // end method