I have a WebSpliter in my page with 2 spliter panels, in the first one I have a WebProgressbar but when I change the size of the splitter panel the WebProgrssBar stays in the same place.
What can I do?
The original size:
When I change the size:
Hello Alejandro,
In order to achieve the behavior you are looking for you need to do the following steps: First you have to set WebProgressBar’s Maximum value to be equal to WebSplitter’s Width. After that set the WebProgressBar’s Value, it have to be equal to the width of first Pane. Finally subscribe for SplitterBarMoving client event and write your code that change the progress. Here is the code I used:
<html xmlns=" http://www.w3.org/1999/xhtml ">
<head runat="server">
<title></title>
<script type="text/javascript" id="igClientScript">
<!--
function WebSplitter1_SplitterBarMoving(sender, eventArgs) {
///<summary>
///
///</summary>
///<param name="sender" type="Infragistics.Web.UI.WebSplitter"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.SplitterBarPositionCancelEventArgs"></param>
var wpb = $find('<%= WebProgressBar1.ClientID %>');
//get size of the first Pane
var progress = eventArgs.get_prevPaneNewSize();
//set new progress value
wpb.set_progressValue(progress);
}// -->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="200px" Width="300px" DynamicResize="True">
<ClientEvents SplitterBarMoving="WebSplitter1_SplitterBarMoving" />
<Panes>
<ig:SplitterPane runat="server">
</ig:SplitterPane>
</Panes>
</ig:WebSplitter>
<ig:WebScriptManager ID="WebScriptManager1" runat="server">
</ig:WebScriptManager>
</div>
<ig:WebProgressBar ID="WebProgressBar1" runat="server" Maximum="300" Value="150">
</ig:WebProgressBar>
</form>
</body>
</html>
Please let me know if you have any further questions.