Client resize radsplitter

8 posts, 1 answers
  1. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 04 Jun 2011 Link to this post

    I have RadWindow, inside page with RadTabStrip/RadMultiPage, each RadPageView have RadSplitter with Width/Height=100%. RadSplitter usualy have 2 horizontal panels, up for main content (grid or test boxes) and bottom is height=40 for buttons like Save/Cancel. When I open RadWindow, RadSplitter fills entire space and controls iniside fills pane and everything is ok.


    When I resize RadWindow at same time is RadSplitter resized to fill space and that is ok but only in active RadPageView. Other  RadSplitters in other RadPageViews is frozen to initial size and it looks ugly and the useless.
    How to persuade all RadSplitters in all RadPageViews to resize and fill Width/Height=100% when I resize RadWindow?


    It can be done by some client function on RadTabStrip.OnClientTabSelected but what to do with RadPageViews without tabs? 
    I have some RadPageViews that are accessed by code behind (not by tabs) and there is no RadMultiPage.OnClientSelected event. 
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 07 Jun 2011 Link to this post

    Hi Gosha,

    The RadSplitter control would only resize if it is visible. That is the reason why the other(invisible) splitters are not resizing.

    From your description of the problem that you are experiencing, I understand that you are using the RadSplitter only for the purpose of aligning the OK/Cancel buttons at the bottom part of the RadWindow.

    If that is the case and you insist on using the splitter, then you should find a way to capture the moment a splitter becomes visible, i.e. when a tab is selected, and force the splitter to resize then. The OnClientTabSelected event appears like the best choice for that purpose. Then making sure that you have the correct dimensions of the splitter you can invoke its resize method. Otherwise I would suggest that you do not use the splitter and implement a CSS only approach for aligning the buttons at the bottom part of the window.

    Hope this helps.

    Best wishes,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 07 Jun 2011 Link to this post

    Ok, I'll use function OnTabSelected event, so, how to write javascript code for:

    $find any splitter ControlID on selected PageView    
    splitter resize




     
  5. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 08 Jun 2011 Link to this post

    Hi Gosha,

    Your approach is absolutely correct. Still I will give you a small hint that you may find helpful. Set the splitter IDs with a suffix the tab index that they are at. For example, if the RadSplitter is in the first tab, then it should have the ID="RadSplitter0". After that in the OnClientTabSelected event handler you can have the following construction to capture the corresponding splitter:
    function tabSelectedHandler(tabStrip, args)
    {
        var splitter = $find("RadSplitter" + args.get_tab().get_index());
    }

    After that just use the resize method to resize the splitter.

    Hope this helps.

    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    I was expecting something like

    for each control in pageview
       if control.type == "splitter"
            control.resize
      
    but if this can not be done in javascript, i'll implement your idea  
  7. Niko
    Admin
    Niko avatar
    387 posts

    Posted 08 Jun 2011 Link to this post

    Hi Gosha,

    The for cycle is also possible, but I find it a bit useless. You need to fix the appearance only of the splitter that is currently being shown, not all. Otherwise it will be a waste of computing resources and precious calculating time.

    Hope this explains the described intentions in my previous post.

    Kind regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

  8. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 11 Jun 2011 Link to this post

    I found this function resize Splitter to 100% (inside RadWindow) but I dont know what means first 3 lines. Can you explain to me so it could use for other purposes. I understand that they get height and width of something (RadWindow?) but how?

    var $ = $telerik.$;
    var height = $(window).height();
    var width = $(window).width();
    var splitter = $find("RadSplitter" + args.get_tab().get_index());
    splitter.resize(width, height - 25);
  9. Niko
    Admin
    Niko avatar
    387 posts

    Posted 13 Jun 2011 Link to this post

    Hi Gosha,

    Please, find a short explanation to each of the first three lines of the code sample you have provided:
    var $ = $telerik.$;//this line creates a short-cut function for the jQuery library
    var height = $(window).height(); //the window object is the base(root) DOM object, not a RadWindow element.
    var width = $(window).width();

    Hope this helps.

    Best wishes,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start 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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017