Expand/Collapse radgrid from client side.

[Avik]

Hi,
I am trying to Expand/Collapse group in radgrid from client side by finding the Grouping panel and comparing the text of it.
I am finding the Grouping Panel image and trying to trigger click functionality as mentioned in the example provided by telerik.But it is not working.The code is as below.
var gridload = <%=RadGrid1.ClientID %>;
for(var index = 0; index < gridload.Iw.MasterTableView.Controls[0].Rows.length; index++)
{
if(gridload.Iw.MasterTableView.Controls[0].Rows[index].ItemType == "GroupHeader")

{

for

(var i = 0; i < gridload.Iw.GroupPanel.GroupPanelItems.length; i++)

{

if

(gridload.Iw.MasterTableView.Controls[0].Rows[index].Control.cells[i])

{

if

(gridload.Iw.MasterTableView.Controls[0].Rows[index].Control.cells[1].innerText == "Venture Capital")

{

groupColumnImage = gridload.Iw.MasterTableView.Controls[0].Rows[index].Control.cells[i].firstChild;

groupColumnImage.src= originalAttribute="src" originalPath=""

"http://localhost:2541/WebSitetest/RadControls/Grid/Skins/Default/SingleMinus.gif";

gridload.Iw.MasterTableView.Controls[0].Rows[index].Expanded =

true;
groupColumnImage.click();

}

}

}

}

}
Can anyone let me know the fix for the above issue.

Thanks,
Avik.

[Veli]

Hello Avik,

The code below is a function that expands/collapses a parent/group item inside a OnRowDoubleClick event. You can see how the expand/collapse images can be toggled based on item expanded state:

function RowDblClicked(sender, args)
{
    var item = sender.get_masterTableView().get_dataItems()[args.get_itemIndexHierarchical()];
    var masterTableView = sender.get_masterTableView();
    var rowIndex = args.get_itemIndexHierarchical();

    if(!item.get_expanded())
    {
        item.set_expanded(true);

        var imageButtonPath = masterTableView.getCellByColumnUniqueName(masterTableView.get_dataItems()[rowIndex], "ExpandColumn").innerHTML;
        imageButtonPath = imageButtonPath.replace("title=\"Expand\" class=\"rgExpand\"","title=\"Collapse\" class=\"rgCollapse\"");
        masterTableView.getCellByColumnUniqueName(masterTableView.get_dataItems()[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;
    }
    else
    {
        var imageButtonPath = masterTableView.getCellByColumnUniqueName(masterTableView.get_dataItems()[rowIndex], "ExpandColumn").innerHTML;
        imageButtonPath = imageButtonPath.replace("title=\"Collapse\" class=\"rgCollapse\"","title=\"Expand\" class=\"rgExpand\"");
        masterTableView.getCellByColumnUniqueName(masterTableView.get_dataItems()[rowIndex], "ExpandColumn").innerHTML = imageButtonPath;
        item.set_expanded(false);
    }
}

Greetings,
Veli
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[yusuf]

Hi Veli;
I also have a hierarchical radgrid. My problem is I must take  the datakeyid of parent grid to the server side code while the parent grid expanding. i found an article which gives me the datakeycolumn when clicking to the row but it is not expanding the row and I want that when I click to the + sign at the left most colum of my row at the server side I must take the datakeyid of that row. I hope, I could tell you my problem. Sorry about my english.
Yusuf
Istanbul

[Princy]

Hi Yusuf,

Try the following code snippet to access the DataKeyValue of a row on clicking the expand/Collapse button in a Grid.

CS:

 protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {

        if (e.CommandName == "ExpandCollapse")
        {
            GridDataItem DataItem = (GridDataItem)e.Item;
            string strKey = DataItem.GetDataKeyValue("DataType").ToString();
        }
  }

Thanks
Princy.

[yusuf]

Hello Princy;
At first thank you for your help. On the other hand I have  one more problem. In my code I have a PlaceHolder and I create my radgrid on it so I couldn't apprach events of my grid from properties window. Also when I try to do that like code "RadGrid1.ItemCommand += new GridCommandEventHandler( .....) " I coultn't fill code between paranthesis. how can I apply this code to my dynamically created radgrid.
Thanks
Yusuf
Istanbul

[Shinu]

Hi Yusuf,

Can you try the following code snippet and see if it is working?

CS:

        RadGrid grid = new RadGrid();
        grid.ID = "RadGrid1";
        grid.DataSourceID = "SqlDataSource1";
        PlaceHolder1.Controls.Add(grid);

        grid.MasterTableView.DataKeyNames = new string[] { "ProductName" };

        grid.ItemCommand += new GridCommandEventHandler(grid_ItemCommand);

 void grid_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "ExpandCollapse")
        {
            GridDataItem DataItem = (GridDataItem)e.Item;
            string strKey = DataItem.GetDataKeyValue("ProductName").ToString();
        }

    }

Thanks
Shinu.

[Soma]

HI ,
  I am using nested Radgrid.  my requirement is expanding nested grid i.e expanding specific row from client side by rowindex,

How can i expand my grid.
Please help me

[Eyup]

Hi Soma,

In case you are using HierarchyLoadMode = "Client", you can use the following approach:

Copy Code

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

JavaScript:

Copy Code

function toggleExpandState(sender, args) {
    var item = args.get_item();
    item.set_expanded(!item.get_expanded());
}

Analogously, if you are using server load mode - you can use this method:

Copy Code

function toggleExpandState(sender, args) {
    var item = args.get_item();
    args.get_tableView().fireCommand("ExpandCollapse", item.get_itemIndexHierarchical());
}

That should do the trick. Please give it a try and let me know if it helps you.

Regards,
Eyup
Telerik