Dual slider control in asp.net

I have downloaded the sample code fro Dual slider control from

http://www.dimebrain.com/2007/11/another-dual-sl.html

it works well in normal scenario. if i apply inside a <td> tag inside a<table> tag The sample code doesnt work

any idea?

You have

<table>

<tr>

<td>...</td>

</tr>

</table>

right?

If you miss the <tr> element then you have a "little" problem.

I cant understand can u tell in detail.

I am using <table><tr><td>...... </td></tr></table> tag.

The solution is i have to adjust the style property of the particular div tag. I solved my previous problem.

Now an another one issue is, This slider doesnt support the Update control of atlas. Y? What s d solution?

DropShadowExtender

DropShadowExtender just working i sample not like in website code?

i get it working only onOpacity="1"and width has no effect

Set opacity between "0.1" to "0.9". No effect on opacity = "1" since it will give a sold shadow

I mean that opacity are only working by applaying it in Client code (javascript) code

DropShadow Resize problem with the Shadow remaining on table resize.

The code below is just a sample I added to the DropShadow and I pretty sure this is a bug.

What happens when load up is fine. When you move items from the left listbox to the right listbox it seems fine.

EXCEPT, when one listbox becomes empty, the listbox shrinks, hence the table shrinks and then your left with this big black shadow on the right that goes up to the table. That is the shadow has not resized with the table.

If I addWidth="100%" to the Panel yes it works but then my screen design is not what I want I have this massive table on the screen. It's the solution I'm forced to use now.

<divclass="demoarea">

<divclass="demoheading">DropShadow Demonstration</div><asp:PanelID="Panel1"runat="server"CssClass="dropShadowPanel"Width="100%"><divstyle="padding:10px">

<tableborder="2"width="100%">

<tr>

<tdcolspan="3"align=center> </td>

</

tr>

<

tr><td>

<asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListLeft"runat="server"><asp:ListItem>Somewhere RSL Club, 555 Something St, Somewhere</asp:ListItem><asp:ListItem>20</asp:ListItem>

<asp:ListItem>D</asp:ListItem></asp:ListBox><br/></td><td><NOBR><inputvalue="Add >>" type="button"BR></NOBR><NOBR><inputvalue="Add <<" type="button"BR></NOBR><NOBR><inputvalue="Add All >>" type="button"BR></NOBR><NOBR><inputvalue="Add All <<" type="button"BR></NOBR></td><td>

<br/><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListRight"runat="server"><asp:ListItem> RSL Club, 154 Somewhere Pde, Somewhere</asp:ListItem><asp:ListItem>2</asp:ListItem><asp:ListItem>3</asp:ListItem>

</asp:ListBox></td>

</

tr>

</

table>

Did you set "TrackPosition='true'" on the DropShadowProperties?

Yes I haveTrackPosition="true"as it came from the example.

Here's the complete code in a master page. YOu'll notice that once you move all items to one listbox the table shrinks I have mentioned. I've done some slight changing to the html but this content page should work standalone. Unless you tweak the Content Placer then you'll have to tweak the javascript.

<%

@.PageLanguage="C#"MasterPageFile="~/Site.master"AutoEventWireup="true"CodeFile="DropShadow.aspx.cs"Inherits="DropShadow_DropShadow"Title="DropShadow Sample" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="MiddleContent"Runat="Server"><atlas:ScriptManagerid="ScriptManager"EnablePartialRendering="true"runat="Server"/><divclass="demoarea"><asp:PanelID="Panel1"runat="server"CssClass="dropShadowPanel"><divstyle="padding:10px">

<

tableborder="0"width="100%">

<tr><td><tableborder=0width="100%">

<tr><tdalign="right"><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListLeft"runat="server"><asp:ListItem>Kogarah RSL Club, 254 Railway Pde, Kogarah</asp:ListItem><asp:ListItem>20</asp:ListItem><asp:ListItem>30</asp:ListItem><asp:ListItem>40</asp:ListItem><asp:ListItem>A</asp:ListItem><asp:ListItem>B</asp:ListItem><asp:ListItem>C</asp:ListItem><asp:ListItem>D</asp:ListItem></asp:ListBox></td></tr></table><br/><br/></td><td><NOBR><inputvalue="Add >>"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListLeft, this.form.ctl00$MiddleContent$lbListRight, false );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add <<"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListRight, this.form.ctl00$MiddleContent$lbListLeft, false );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add All >>"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListLeft, this.form.ctl00$MiddleContent$lbListRight, true );"type="button"style="width:90"><BR></NOBR><NOBR><inputvalue="Add All <<"onclick="moveDualList( this.form.ctl00$MiddleContent$lbListRight, this.form.ctl00$MiddleContent$lbListLeft, true );"type="button"style="width:90"><BR></NOBR></td><td>

<br/>

<br/><asp:ListBoxRows="20"SelectionMode="Multiple"ID="lbListRight"runat="server"><asp:ListItem> RSL Club, 154 Railway Pde, Kogarah</asp:ListItem><asp:ListItem>2</asp:ListItem><asp:ListItem>3</asp:ListItem><asp:ListItem>4</asp:ListItem><asp:ListItem>5</asp:ListItem><asp:ListItem>D</asp:ListItem><asp:ListItem>G</asp:ListItem><asp:ListItem>K</asp:ListItem><asp:ListItem>Z</asp:ListItem><asp:ListItem>55</asp:ListItem></asp:ListBox></td>

</

tr>

<

tr><tdcolspan=3align=center><asp:ButtonID="btnSave"Text="Save"runat=server/></td></tr>

<

tr><tdcolspan=3>

</

td></tr>

</

table>

<

br/><br/><hr/><p><asp:PanelID="CollapseHeader"runat="server"style="cursor: pointer;"width="100%"><asp:LabelID="Label1"runat="server"Text="Label">Show Details...</asp:Label></asp:Panel><asp:PanelID="Panel2"runat="server"style="overflow:hidden;height:0"width="100%">

Not many details here. This is just a demo to show how the DropShadow will react properly to changes in the size of the panel it is attached to.

</asp:Panel><atlasToolkit:CollapsiblePanelExtenderID="cpe1"runat="server"><atlasToolkit:CollapsiblePanelPropertiesTargetControlID="Panel2"Collapsed="true"CollapsedText="Show Details..."ExpandedText="Hide Details"TextLabelID="Label1"ExpandControlID="CollapseHeader"CollapseControlID="CollapseHeader"SuppressPostBack="true"/></atlasToolkit:CollapsiblePanelExtender></p></div></asp:Panel><divclass="demobottom"></div></div><atlasToolkit:DropShadowExtenderID="dse"runat="server"><atlasToolkit:DropShadowPropertiesTargetControlID="Panel1"Width="5"Rounded='true'Opacity=".75"TrackPosition="true"ID="dsBehavior"/></atlasToolkit:DropShadowExtender>

<

SCRIPTLANGUAGE="JavaScript">

<!-- Begin

// Compare two options within a list by VALUES

function

compareOptionValues(a, b)

{

// Radix 10: for numeric values, Radix 36: for alphanumeric valuesvar sA = parseInt( a.value, 36 );var sB = parseInt( b.value, 36 );return sA - sB;

}

// Compare two options within a list by TEXT

function

compareOptionText(a, b)

{

// Radix 10: for numeric values, Radix 36: for alphanumeric valuesvar sA = parseInt( a.text, 36 );var sB = parseInt( b.text, 36 );return sA - sB;

}

// Dual list move function

function

moveDualList( srcList, destList, moveAll )

{

// Do nothing if nothing is selectedif (( srcList.selectedIndex == -1 ) && ( moveAll ==false ))

{

return;

}

newDestList =

new Array( destList.options.length );var len = 0;for( len = 0; len < destList.options.length; len++ )

{

if ( destList.options[ len ] !=null )

{

newDestList[ len ] =

new Option( destList.options[ len ].text, destList.options[ len ].value, destList.options[ len ].defaultSelected, destList.options[ len ].selected );

}

}

for(var i = 0; i < srcList.options.length; i++ )

{

if ( srcList.options[i] !=null && ( srcList.options[i].selected ==true || moveAll ) )

{

// Statements to perform if option is selected, Incorporate into new list

newDestList[ len ] =

new Option( srcList.options[i].text, srcList.options[i].value, srcList.options[i].defaultSelected, srcList.options[i].selected );

len++;

}

}

// Sort out the new destination list

newDestList.sort( compareOptionValues );

// BY VALUES//newDestList.sort( compareOptionText ); // BY TEXT// Populate the destination with the items from the new arrayfor (var j = 0; j < newDestList.length; j++ )

{

if ( newDestList[ j ] !=null ) destList.options[ j ] = newDestList[ j ];

}

// Erase source list selected elementsfor(var i = srcList.options.length - 1; i >= 0; i-- )

{

if ( srcList.options[i] !=null && ( srcList.options[i].selected ==true || moveAll ) )

{

// Erase Source//srcList.options[i].value = ""; srcList.options[i].text = "";

srcList.options[i] =

null;

}

}

}

// End -->

</

script>

</asp:Content>

DropDownList, UpdatePanel, ControlEventTrigger and TimerControl affecting other UpdatePane

I've run across a problem so I've created some sample code below that replicates what I'm seeing.

I've got an UpdatePanel(up_Test) that has a control in it. I've got a TimerControl that fires every 2 seconds and my UpdatePanel has a Trigger to refresh on my TimerControl's Tick event.

I've got a DropDownList on the page(ddl_Test), with an AutoPostBack="true", I've got another UpdatePanel on the page that has a Trigger to refresh on my DropDownList's SelectedIndexChanged event. In this UpdatePanel I've got another DropDownList that gets its SelectedIndex set to the SelectedIndex of the first DropDownList.

Everything works as expected, except when I test it with IE6, when the TimerControl fires, the DropDownList in the second UpdatePanel gets refreshed. It doesn't seem to happen(or at least isn't noticable) with IE7(which is on the machine I'd been writing this on).

Basically, I wrote this big page that has a ton of different updatepanel's on it each with triggers to specific controls and that whole section worked great, but then on my masterpage, when I put a gridview with a timercontrol, suddenly, the page practically became unusable as all of the updatepanels suddenly trigger when the TimerControl fires. Is there some work-around I can do, or do I just need to drop the TimerControl and scrap the whole layout?

<

atlas:TimerControlID="tc_Test"runat="server"Interval="2000"Enabled="true"OnTick="tc_Test_Tick"/><atlas:UpdatePanelID="up_Test"runat="server"><ContentTemplate><asp:DropDownListID="ddl_Test"runat="server"></asp:DropDownList></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="tc_Test"EventName="Tick"/></Triggers></atlas:UpdatePanel><asp:DropDownListID="ddl_Test1"runat="server"AutoPostBack="true"OnSelectedIndexChanged="ddl_Test1_SelectedIndexChanged"/><atlas:UpdatePanelID="up_Test2"runat="server"><ContentTemplate><asp:DropDownListID="ddl_Test2"runat="server"></asp:DropDownList></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="ddl_Test1"EventName="SelectedIndexChanged"/></Triggers></atlas:UpdatePanel>

protected

void Page_Load(object sender,EventArgs e)

{

if (!Page.IsPostBack)

{

for (int i = 0; i < 10; i++)

{

string itemtext ="This is a long string to make it noticable " + i.ToString();

ddl_Test.Items.Add(itemtext);

ddl_Test1.Items.Add(itemtext);

ddl_Test2.Items.Add(itemtext);

}

}

}

protectedvoid ddl_Test1_SelectedIndexChanged(object sender,EventArgs e)

{

ddl_Test2.SelectedIndex = ddl_Test1.SelectedIndex;

}

protectedvoid tc_Test_Tick(object sender,EventArgs e)

{

Random r=newRandom();

ddl_Test.SelectedIndex = r.Next(9);

}

Mode="Conditional" on the update panels fixes the problem. I guess I just assumed putting in the <trigger> lines caused it to use the triggers but you have to change the updatepanel's mode too.

DropdownList Update

Hi,

I have modified the sample program for Data Demo. I've used ASP.NET AJAX....I have a dropdownlist and a gridview inside an updatepanel. Also, im connected thru a objectdatasource. the dropdownlist gets value from objectdatasource1. The value comes from a distinct state from the author table while the gridview is connected to objectdatasource2. The value for objectdatasource2 comes from auther table where state = to the dropdownlist selected value.

Now what i want to achieve is that if i edit the state in the gridview my dropdownlist will be automacatically refresh. I tried adding <asp:AsyncPostBackTriggerControlID="GridView1"EventName="SelectedIndexChanged"/> to the updatepanel. I was able to save the changes but the dropdownlist doesnt.

Thanks

2lits

When both the controls that cause a refresh to the updatepanel are inside it, you can use the ChildrenAsTriggers property of the UpdatePanel. Set it to True, and your Dropdownlist should be re-binding.

Thanks

The ChildrenAsTriggers was already set to true but still my dropdownlist is not re-binding...any other thoughts? thanks!

Is your updateMode on conditional basis?

Thanks

it was set to always.

Thanks

I'd say step one is to remove the UpdatePanel and see if this is working in regular postback mode. If it is, then we need to figure out what's going wrong with your UpdatePanels.

I'd want to see some code at that point... is there just one UpdatePanel on the page? Is the GridView inside it? Is the DropDownList?

Yes There is only one Update Panel. The Gridview , dropdownlist, and the sources are inside it.

here's my code :

<formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/> <divtitle="My First AJAX-Enabled Data Driven Page"><asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"><ContentTemplate> <asp:DropDownListID="DropDownList1"runat="server"DataSourceID="ObjectDataSource1"DataTextField="State"DataValueField="State"AutoPostBack=True></asp:DropDownList><asp:GridViewID="GridView1"runat="server"AllowPaging="True"AutoGenerateColumns="False"DataSourceID="ObjectDataSource2"AllowSorting="True"DataKeyNames="AuthorID"><Columns><asp:CommandFieldShowEditButton="True"ShowSelectButton="True"/><asp:BoundFieldDataField="AuthorID"HeaderText="AuthorID"InsertVisible="False"ReadOnly="True"SortExpression="AuthorID"/><asp:BoundFieldDataField="FirstName"HeaderText="FirstName"SortExpression="FirstName"/><asp:BoundFieldDataField="LastName"HeaderText="LastName"SortExpression="LastName"/><asp:BoundFieldDataField="City"HeaderText="City"SortExpression="City"/><asp:BoundFieldDataField="State"HeaderText="State"SortExpression="State"/><asp:BoundFieldDataField="Zip"HeaderText="Zip"SortExpression="Zip"/><asp:BoundFieldDataField="Phone"HeaderText="Phone"SortExpression="Phone"/></Columns></asp:GridView><br/> <asp:ObjectDataSourceID="ObjectDataSource2"runat="server"OldValuesParameterFormatString="{0}"SelectMethod="GetData"TypeName="DataSet2TableAdapters.SelectAuthorsTableAdapter"UpdateMethod="Update"><SelectParameters><asp:ControlParameterControlID="DropDownList1"Name="State"PropertyName="SelectedValue"Type="String"/></SelectParameters><UpdateParameters><asp:ParameterName="AuthorID"Type="Int32"/><asp:ParameterName="FirstName"Type="String"/><asp:ParameterName="LastName"Type="String"/><asp:ParameterName="City"Type="String"/><asp:ParameterName="State"Type="String"/><asp:ParameterName="Zip"Type="String"/><asp:ParameterName="Phone"Type="String"/></UpdateParameters></asp:ObjectDataSource><asp:ObjectDataSourceID="ObjectDataSource1"runat="server"OldValuesParameterFormatString="original_{0}"SelectMethod="GetDataState"TypeName="DataSet2TableAdapters.StateListTableAdapter"></asp:ObjectDataSource><br/></ContentTemplate><Triggers><asp:AsyncPostBackTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/><asp:AsyncPostBackTriggerControlID="GridView1"EventName="RowUpdated"/></Triggers></asp:UpdatePanel> </div></form>
The updatemode is set to always. I just test it to conditional.

The updatemode is set to always. I just test it to conditional.

Thanks

And what's supposed to happen to the DropDownList when you edit the GridView?

Did you try removing the UpdatePanel? I have a feeling this isn't working with regular postbacks either and doesn't really have to do with AJAX, since your UpdatePanel code looks correct.

I should be able to see the updates in the state. example if I change the state from MI to NW upon save i should be able to see NW added in the dropdownlist. It is working on the regular postback...

Steve Marx:

I have a feeling this isn't working with regular postbacks either and doesn't really have to do with AJAX, since your UpdatePanel code looks correct.

This is to do with AJAX. When the DropDownList is binded declaratively, the list wont get refreshed on the triggers of the updatepanel. You need to explicitly bind the dropdownlist in the events specified on the updatepanel. But if have you had used the same ObjectSource for both the GridView and DropDownList, then sure the list gets updated.

Since the OP is working on the same database table, one ObjectDataSource is enough and when the GridView UpdateCommand is called, the data for the DropDownList is pulled again.

Thanks

e_screw, I don't quite understand... the databinding should work exactly the same way in a regular postback and an async postback. I'm still having trouble figuring out how this can work without the UpdatePanel but fail with it.

Certainly the DropDownList has to be bound again in the event handler, but what does that have to do with AJAX?

yes..thats also my understanding. How does the updatepanel rebind the data?

Thanks so much!

Steve Marx:

... the databinding should work exactly the same way in a regular postback and an async postback. I'm still having trouble figuring out how this can work without the UpdatePanel but fail with it. Certainly the DropDownList has to be bound again in the event handler, but what does that have to do with AJAX?

I am not sure though (still learning AJAX), the DataBinding of the controls (set declaratively using DataSourceID) will be started before the PreRender event of the page and not sure if the necessary client-scripts for that will be injected into the page by AJAX. I have checked with a different ObjectDataSource (each for Dropdownlist and GridView), and there was no client-script generated for the DropDownList unless there was explicit binding. When you are using the same ObjectDataSource for both the controls, there was client-script inject for both even if there was no explicit binding.

Thanks