Telerik is a recommandable product....

2 posts, 0 answers
  1. raaj
    raaj avatar
    53 posts
    Member since:
    Jan 2010

    Posted 27 May 2010 Link to this post

    Team

    I'm admiring your support given for me(and others) so far.

    My company runs with Telerik components since Version 2009.

    Since we are implementing your controls one by one in our product, we are stuck with somewhere else.

    Right now we are implementing your splitter control in our application.

    Our client want the splitter Button should be somewhat bigger (ie. easily catchable). is it Possible?

    Pls. provide me your suggestion.

    Thanks
    Rajesh N.



  2. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 27 May 2010 Link to this post

    Hi Rajesh,

    In order to have a bigger splitter button, you should follow the steps bellow:

    • Create a new sprite with horizontal and vertical arrow buttons, that will be bigger sized than the default buttons.
    • Change the CSS positions of the that buttons for normal, hover and expanding stages.
    • Use RadSplitter control property SplitBarsSize="15" (15 or 25 - whatever you need).
    Please find code bellow, where I marked with yellow those parts where you implement size changes.
    For your convenience, I have also attached biggersplitterbutton.zip, a simple project together with the image sprites.

    Please, find also attached splitter.gif showing the changed size buttons.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
            .rspResizeBar
            {
                background-image: url(Sprites/ResizeBarVerticalSprites.gif) !important;
            }
            .rspResizeBar:hover
            {
                background-position: -10px 0 !important;
            }
            .rspCollapseBarCollapse, .rspCollapseBarExpand
            {
                width: 15px !important;
                height: 15px !important;
                background-image: url(Sprites/arrowHorizontal.png) !important;
                background-position: 0 0 !important;
            }
            .rspCollapseBarExpand
            {
                background-position: -15px 0 !important;
            }
            .rspResizeBarHorizontal
            {
                background-image: url(Sprites/ResizeBarHorizontalSprites.gif) !important;
            }
            .rspResizeBarHorizontal:hover
            {
                background-position: 0 -10px !important;
            }
            .rspCollapseBarHorizontalCollapse, .rspCollapseBarHorizontalExpand
            {
                width: 15px !important;
                height: 15px !important;
                background-image: url(Sprites/arrowVertical.png) !important;
                background-position: 0 0 !important;
            }
            .rspCollapseBarHorizontalExpand
            {
                background-position: 0 -15px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="400" Width="700" CssClass="Telerik"
            ResizeMode="EndPane" SplitBarsSize="15">
            <telerik:RadPane ID="Radpane1" runat="server" Width="22" Scrolling="None" MinWidth="22">
            </telerik:RadPane>
            <telerik:RadSplitBar ID="Radsplitbar3" runat="server" CollapseMode="Forward" />
            <telerik:RadPane ID="navigationPane" runat="server">
                <!-- Left Pane Content -->
                <div>
                    Content
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward">
            </telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server" Scrolling="none" Width="500">
                <!-- Nested Horizontal splitter -->
                <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" Orientation="Horizontal"
                    CssClass="Telerik" SplitBarsSize="15">
                    <telerik:RadPane ID="topPane" runat="server" Height="150" Scrolling="both">
                        <!-- Top Pane Content -->
                        <div style="height: 100%">
                            content
                        </div>
                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="contentPane" runat="server" Scrolling="y">
                        content
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>
        </telerik:RadSplitter>
        </form>
    </body>
    </html>


    Best wishes,
    Bojo
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top