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

Simple: Collapse/Expand a RadGrid itself

7 Answers 111 Views
Grid
This is a migrated thread and some comments may be shown as answers.
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 30 Nov 2010, 02:19 PM
Hi! I'm working on a dashboard type web page. I require several RadGrids on it. Now, with all the grids, the page is pretty long in Y-axis. I need to have the grid's collapse using it's caption bar (if possible). I'm in no mood to use AjaxTool:RoundedCornersExtender at this stage. Kindly suggest a way to accomplish this.

7 Answers, 1 is accepted

Sort by
0
Karl
Top achievements
Rank 1
answered on 30 Nov 2010, 03:46 PM
Have you thought about using the panel bar and have each grid appear in a panel? This will allow you to expan or collapse each panel and have the grids shown or hidden that way.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 30 Nov 2010, 04:14 PM
I'm actually trying that right now. I was hoping that the RadGrid might have this built in.
0
Veli
Telerik team
answered on 03 Dec 2010, 12:56 PM
Hi Hassan,

RadGrid does not offer this functionality off-the-shelf. You can use RadPanelBar to slide it in and out of view. Alternatively, you can use jQuery to toggle the visiblity of the grid or everything but its header:

<telerik:RadGrid ID="RadGrid1" runat="server" Width="800px"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView TableLayout="Fixed"></MasterTableView>
</telerik:RadGrid>
 
<script type="text/javascript">
    (function ($)
    {
        $("table.rgMasterTable thead").click(function (e)
        {
            $("table.rgMasterTable tbody").slideToggle();
        });
    })($telerik.$);
</script>

Attaching a test page to demonstrate this approach.

Greetings,
Veli
the Telerik team
Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 03 Dec 2010, 03:37 PM
I have multiple grid and Column sorting, ordering and other functions are disabled. i like the jQuery way to implement this. Question is, will only the clicked Grid hide? The sample you gave is not doing naything over at my end. Something required to have jQuery working? I'm only using Telerik. No AJAX Toolkit or .js files from jQuery...

...err...

I did this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
      </Scripts>
    </asp:ScriptManager>

... and your sample worked. now attempting on my actual software.

it wont work on my project... there is a master page with the script imports and the dashboard.aspx has the grids.
0
Karl
Top achievements
Rank 1
answered on 03 Dec 2010, 03:52 PM
Hi Hassan,

The "$" in the javascript looks to me like you do need the JQuery .js files referenced in your page.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 03 Dec 2010, 04:12 PM
I know for a fact that Telerik contains a jQuery and I can use that. In your demo, I used the telerik's jQuery. In my project, I keep on getting "$telerik is not defined" error. I have tried the httphandlers tip but to no avail. I have moved the jQuery script to the master page and i think doing so will make all Telerik grids collapse site-wide. Not desired. If i move the script to the dashboard page, nothing happens. no firebug errors and no collapsing.
0
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
answered on 03 Dec 2010, 07:42 PM
Ok. If someone can guide me on my scenerio but with this example in mind: PanelBar Sliding...
Tags
Grid
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Karl
Top achievements
Rank 1
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Veli
Telerik team
Share this question
or