Why does the Kendo UI destroy method remove all child widgets?

Question

I have a screen divided into 2 splitted area using kendo UI splitters. Now each splitted area is again splitted many times.

In some use cases I would like to destroy the parent splitters but retain its child splitters.

//get the splitter object of kendo
  var splitter = $splittedDiv.data("kendoSplitter");
  splitter.destroy();

But kendo is destroying all its child widgets recursively. Do we have a workaround for this?

Basically, I have also tried using splitter.remove(), but this doesn't remove the "resize" event from the splitbar which causes issue when I try to resize all the splitted widgets.

Do we have any workaround by which we can use kendo.destroy() but it would only destroy that particular widget without touching any of its child widgets.

<div id="container1">
 <div id="splitA">
 </div>
 <div id="splitB">
   <div id="container2">
     <div id="splitC"></div>
     <div id="splitD"></div>
   </div>
 </div>
</div>


 Now init 
 $('#container1').kendoSplitter();
 $('#container2').kendoSplitter();

 Not destroy
 $('#container1').data("kendoSplitter").destroy();

Above code also destroys #container2 splitted area. why?

Answer 1

That's the intended behavior of the destroy method.

You can add your own destroy method which doesn't call kendo.destroy() (which is responsible for destroying the child widgets) and call that instead:

kendo.ui.Splitter.fn.destroyNonRecursive = function() {
    Widget.fn.destroy.call(this);

    this._detachEvents();

    if (this.resizing) {
        this.resizing.destroy();
    }
}