OnClientResizing not fired until resized

4 posts, 0 answers
  1. Mo
    Mo avatar
    5 posts
    Member since:
    Aug 2012

    Posted 03 Aug 2012 Link to this post

    I have an issue where one of my panes inside splitter has an activex control. While resizing, the splitter anchor line hides behind the active control which prevents the user from releasing the anchor where they want to.

    To overcome that, I am trying to make the activex control hide in the OnClientResizing event and then make it visible again after the resize has completed (OnClientResized). The problem is that the OnClientResizing event is not fired until the resize is complete (mouse button has been released.) This is true even on the telerik demo page based on what gets logged in the log console.

    Can someone please help me here?

    Thanks!!
  2. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 08 Aug 2012 Link to this post

    Hi Mohammad,

    You actually don't need to implement such a complicated logic in order to resize the Splitter. The problem with the hiding RadSplitter's anchor occurs because the ActiveX control loaded by the browser is a heavy-weight object which will be displayed over any other HTML element on the page (including the RadControls). The problem can be solved by using an additional IFRAME element (you could find more detailed information about this approach in this knowledge base article). RadSplitter has it implemented, so you can easily apply this by setting its Overlay property to true.

    Nevertheless, if you still prefer to use the client events in order to overcome the issue, you can set the RadSplitter's LiveResize property to true. This should make the resize events execute correctly.

    Please, try the proposed solutions and see if the problem still exists. If none of them solve the issue could you, please, prepare a sample runnable project that reproduces the problem so we can investigate it further on our side?

    Kind regards,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mo
    Mo avatar
    5 posts
    Member since:
    Aug 2012

    Posted 08 Aug 2012 Link to this post

    Thanks veselina. I had played with the liveresize property before but it causes too much flicker and its not very smooth because of the activex control in the radpane. However this looks like the only option for me for now. Implementing the iframe would be too much work since that would mean hosting the activex in a separate page and reference it inside iframe. The controls on the current page are too integrated with each and I really don't want to go that route.

    Thanks,
  5. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 13 Aug 2012 Link to this post

    Hi Mohammad,

    Please, excuse me for providing misleading information in my previous reply - the Overlay property is implemented only for the RadSlidingPanes, not for the whole RadSplitter.

    Regarding the way the RadSplitter calculates its size: it does not make any recalculations while the user is dragging the Splitbar. When the Splitbar is released, the OnClientBeforeResize event handler is called and the Splitter is being resized.

    And this is the reason why the LiveResize property causes this flickering when it is set to "true" - then the RadSplitter recalculates its size per every 30-40ms. Due to that the OnClientBeforeResized (the equivalent to the deprecated OnClientResizing event) and OnClientResized events are thrown a lot of times.

    Thus, the best thing in a situation, where you need to attach a handler to the whole dragging+resizing process, is to assign a handler to the RadSplitBar's OnClick event:
    function splitterLoaded(splitter, args) {
        $telerik.$("#RadSplitBar1").on("mousedown", function () { //assign handler to the splitbar's element's mousedown event
            $telerik.$(document).one("mouseup", function (e) {
              //show activeX control
            });
               //hide the activeX control

        });
    }

    I hope this was helpful for you.

    Greetings,
    Veselina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top