OnClientResizing not fired until resized

[Mo]

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!!

[Vessy]

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

[Mo]

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,

[Vessy]

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