Simple: Collapse/Expand a RadGrid itself

8 posts, 0 answers
  1. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 30 Nov 2010 Link to this post

    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.
  2. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 30 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 30 Nov 2010 Link to this post

    I'm actually trying that right now. I was hoping that the RadGrid might have this built in.
  5. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 03 Dec 2010 Link to this post

    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.
  6. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 03 Dec 2010 Link to this post

    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.
  7. Karl
    Karl avatar
    172 posts
    Member since:
    Sep 2010

    Posted 03 Dec 2010 Link to this post

    Hi Hassan,

    The "$" in the javascript looks to me like you do need the JQuery .js files referenced in your page.
  8. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 03 Dec 2010 Link to this post

    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.
  9. DoomerDGR8
    DoomerDGR8 avatar
    133 posts
    Member since:
    Aug 2010

    Posted 03 Dec 2010 Link to this post

    Ok. If someone can guide me on my scenerio but with this example in mind: PanelBar Sliding...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017