RadSplitBar - client-side drag event

[Karl-Heinz]

Dear team members,

Is it possible to catch a drag event on client-side that occurs when a RadSplitBar is being dragged? I want to display the change of the position continuously.

Kind Regards

[Vasko]

Hello,

To capture and display the continuous position change of a RadSplitter during a drag event on the client-side, you can use the OnClientResizing event of the RadSplitter control. This event is triggered continuously as the user drags the split bar, allowing you to monitor and display the position changes in real-time.

The OnClientResizing event is advantageous because it provides a seamless way to capture and respond to resizing actions, including split bar drags, without requiring additional setup or handling of separate events.

For more details on client-side programming for RadSplitter, refer to the official documentation:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/splitter/client-side-programming/events/onclientresizing

Feel free to adjust the implementation to fit your specific requirements.

Please refer to the following articles for additional information:

• Sliding pane Title text upside down

Regards,
Vasko
Progress Telerik

[Karl-Heinz]

Dear team members,

 

The OnClientResizing event does not solve my problem. I added the handler on client-side using add_resizing.

Like add_resized, the event is not triggered when I'm dragging the RadSplitbar. It's only triggered after resizing the element that contains the splitter (resize of browser window etc.).

Additionally, I added the handler for the first pane in the splitter.

Code snippet:

var pane = splitter.getStartPane();
pane.add_resizing(this._resizeEvt);

 

Now, the the resizing event is triggered as expected. But unfortunately, it's only triggered once like the resized event, not continuously.

 

Kind Regards

 

[Attila Antal]

Hi Karl-Heinz,

The Splitbar handles the Drag event internally, but there are no Properties/Methods exposed to the public. Nevertheless, you can override the built-in function and inject your JavaScript function which will be called when the Dragging the Splitbar.

Example:

(function () {
    try {
        // Store the original function in a variable
        var original_onDrag = Telerik.Web.UI.RadSplitBar.prototype.onDrag;

        // Override the original function
        Telerik.Web.UI.RadSplitBar.prototype.onDrag = function (args) {
            // Call the original function first
            original_onDrag.call(this, args); 

           // Inject your Custom Handler
            SplitbarOnDrag(this, args); 
        }
    } catch (e) {

    }
})();

// The Custom Drag Handler function
function SplitbarOnDrag(sender, args) {
    // do something here...
}

 

Regards,
Attila Antal
Progress Telerik