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

Expand/Collapse radgrid from client side.

7 Answers 840 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Avik
Top achievements
Rank 1
Avik asked on 22 Jul 2008, 01:14 PM
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.

7 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 23 Jul 2008, 12:14 PM
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
0
yusuf
Top achievements
Rank 1
answered on 23 Jul 2008, 02:05 PM
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
0
Princy
Top achievements
Rank 2
answered on 24 Jul 2008, 07:13 AM
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.
0
yusuf
Top achievements
Rank 1
answered on 24 Jul 2008, 08:41 AM
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
0
Shinu
Top achievements
Rank 2
answered on 24 Jul 2008, 10:10 AM
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.
0
Soma
Top achievements
Rank 1
answered on 17 Dec 2013, 11:13 AM
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
0
Eyup
Telerik team
answered on 20 Dec 2013, 08:54 AM
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
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 the blog feed now.
Tags
Grid
Asked by
Avik
Top achievements
Rank 1
Answers by
Veli
Telerik team
yusuf
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Soma
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or