Which control I can use to slide Panel (left to right and vice versa) ?

[Phuc]

Hi all,

I have a problem and I don't know how to solve it.
Could you pls help me to do this as the attached file and below description ?

We have a page which contains 2 Panels. The first panel contains a RadGrid.The second panel contains some TextBoxes, Combobox, etc.
Firstly, the first panel is displayed with one image on the MIDDLE, RIGHT of page (actually it's in ContentPlaceHolder).

When user clicks on this image the Panel 2 will be slided from RIGHT to LEFT (the first Panel is covered by second Panel) and now this image appeared on MIDDLE, LEFT of page.
If user clicks on this image (on MIDDLE, LEFT), the Panel 1 will be slided from LEFT to RIGHT (the second Panel is covered by first Panel), now this image appeared on MIDDLE, RIGHT again.

Thanks in advance,
Phuc PHAM

[Marin Bratanov]

Hi Phuc,


You can use the RadSplitter control for this purpose. If you wish to have animation you can use the RadSlidingPane functionality, otherwise the standard collapse/expand buttons in the RadSplitBar offer the exact required functionality and even appearance.

You can examine this controls and its relevant functionality in the following online demos:
http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_firstlook/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/splitter/examples/collapseexpand/defaultcs.aspx

I hope this will help you choose the approach that best fits your needs.

Kind regards,
Marin
the Telerik team

[Phuc]

Thank you for your support.

Could I change the Image of RadSplitBar ?

And one more thing I need your help is when I click on the RadSplitBar to collapse/expand the RadAjaxPanel, the RadGrid inside is not widened automatically (its side is fixed even I have set its  width property is 100%). 
How can I do that?

Kind regards,
Phuc PHAM

[Marin Bratanov]

Hello Phuc,

The images are places via CSS - the background-image and the background-position properties are used. You can use a tool like firebug to examine the resulting HTML, locate the element and its style. Then you can copy the class and property, change their values and apply the !important attribute in order to override the devault ones. This is the approach I took and it resulted in the following example:

.RadSplitter_Default .rspCollapseBarExpand
{
    background-position: 0px 0px !important;
    background-image: url("customExpandButton.png") !important;
}

.RadSplitter_Default .rspCollapseBarCollapse
{
    background-position: 0px 0px !important;
    background-image: url("customCollapseButton.png") !important;
}

As for the autoresizing of the RadGrid - I am not sure how to reproduce this issue, since the RadAjaxPanel renders as a div, which has its width to 100% by default. I used for testing the below code and it seems to be working as expected on my end:

<telerik:RadSplitter runat="server" ID="RadSplitter1">
<%--No scrolling, as the 1px border the grid has by default will result in a scrollbar
    Alternatively you could set the grid to 99% percent or calculate the size via JavaScript
--%>
    <telerik:RadPane runat="server" ID="RadPane1" Width="600px" Scrolling="None">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <telerik:RadGrid runat="server" ID="RadGrid1" Width="100%"></telerik:RadGrid>
        </telerik:RadAjaxPanel>
    </telerik:RadPane>
    <telerik:RadSplitBar runat="server" ID="RadSplitBar1" CollapseMode="Both"></telerik:RadSplitBar>
    <telerik:RadPane runat="server" ID="RadPane2" Width="300px"></telerik:RadPane>
</telerik:RadSplitter>

with the following dummy datasource attached to its OnNeedDataSourece event:

protected DataTable GetData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("FirstColumn"));
    tbl.Columns.Add(new DataColumn("SecondColumn"));
    tbl.Columns.Add(new DataColumn("ThirdColumn"));
    tbl.Columns.Add(new DataColumn("FourthColumn"));
    tbl.Rows.Add(new object[] { "firstRecord1", "firstRecord2", "firstRecord3", "firstRecord4" });
    tbl.Rows.Add(new object[] { "secondRecord1", "secondRecord2", "secondRecord3", "secondRecord4" });
    tbl.Rows.Add(new object[] { "thirdRecord1", "thirdRecord2", "thirdRecord3", "thirdRecord4" });
tbl.Rows.Add(new object[] { "fourthRecord1", "fourthRecord2", "fourthRecord3", "fourthRecord4" });
    return tbl;
}

Please compare it with yours and try to locate any major differences. If you are still unable to resolve the situation I would advise that you prepare and send us a simple, runnable page that reproduces your issue so we can investigate it.

Greetings,
Marin
the Telerik team

[Phuc]

Thank you, Marin.
The Grid is not autoresizing because I am using a div which has a fixed number of Width.

Have a nice day,
Phuc