Hi Prajakta,

While dragging the WebSplitter uses transparent blocking shell (IFRAME or DIV), which is created dynamically and inserted into main element of splitter. In order to modify its style attributes (change cursor), an application have to find reference to that element.

The easiest way is to process SplitterBarMouseDown event and use internal variable _splitElem. In theory it is also possible to use jquery search, but that can be difficult and unreliable, because that shell has no id and no className. Also setTimeout is required, because potentially an application may cancel SplitterBarMouseDown event and shell will be never created.

Below is example for you:

<script type="text/javascript">
function WebSplitter1_SplitterBarMouseDown(sender, eventArgs) {
  setTimeout(function () {
    var elem = sender._splitElem || $util._splitElem;
    if (elem && elem.nodeName === "IFRAME")
      elem = elem.contentDocument.body;
      if (elem)
      elem.style.cursor = sender.get_orientation() === 0 ? "e-resize" : "n-resize";
  }, 0);
}
</script>
<ig:WebSplitter ... >
  <ClientEvents SplitterBarMouseDown="WebSplitter1_SplitterBarMouseDown" />
  ...