Problem with Ajax update of coolite control in a Layout

[matmani]

Hello everybody!

Many thanks to Development Team for this excellent work!

I have a problem with coolite control inside a Borderlayout .

When I select a row in the GridPanel only "ext:Label" control is updated, the Slider1 and the comboBox1 do not change.


This is the code :

...

protected void RowSelect(object sender, AjaxEventArgs e)
{                
  this.label1.Text = "test";
  this.Slider1.Value =10;
  this.ComboBox1.SelectedItem.Value = "30";

}

...
<ext:BorderLayout ID="BorderLayout1" runat="server">
        <Center>
            <ext:GridPanel runat="server" ID="GridPanel1" Border="false" StoreID="Store1">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Titre" Header="Titre" Sortable="true" DataIndex="Titre" />
                        <ext:Column ColumnID="idLupPriorite" Header="Priorite" Sortable="true" DataIndex="idLupPriorite" />
                        <ext:Column ColumnID="idLupMaitrise" Header="Maitrise" Sortable="true" DataIndex="idLupMaitrise" />
                        <ext:Column ColumnID="idLupExperience" Header="Experience" Sortable="true" DataIndex="idLupExperience" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                        <AjaxEvents>
                            <RowSelect OnEvent="RowSelect" Buffer="250">
                                <EventMask ShowMask="true" Target="CustomTarget" Msg="Chargement" CustomTarget="#{Panel3}" />
                                <UserParams>
                                    <ext:Parameter Name="Id" Value="this.getSelected().id" Mode="Raw" />
                                </UserParams>
                            </RowSelect>
                        </AjaxEvents>
                    </ext:RowSelectionModel>
                </SelectionModel>
            </ext:GridPanel>
        </Center>
        <East Collapsible="true" MinWidth="175" Split="true">
            <ext:Panel ID="Panel3" runat="server" Width="175" Title="Details">
                <Content>
                     <ext:Label ID="label1" runat="server" Text="test0"></ext:Label>

<ext:Slider runat="server" ID="Slider1" Width="214" Value="50" Increment="10" />
                    
<ext:ComboBox ID="ComboBox1" runat="server" AutoPostBack="true">
                        <Items>
                           <ext:ListItem Text="Item 0" Value="10" />
                           <ext:ListItem Text="Item 1" Value="20" />
                           <ext:ListItem Text="Item 2" Value="30" />
                           <ext:ListItem Text="Item 3" Value="40" />
                           <ext:ListItem Text="Item 4" Value="50" />
                        </Items>
                    </ext:ComboBox>
                </Content>
           
</ext:Panel>
        </East>
    </ext:BorderLayout>

...

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 12"><meta name="Originator" content="Microsoft Word 12"><link rel="File-List" href="file:///C:%5CDOCUME%7E1%5Cmatman%5CLOCALS%7E1%5CTemp%5Cmso htmlclip1%5C01%5Cclip_filelist.xml"><link rel="themeData" href="file:///C:%5CDOCUME%7E1%5Cmatman%5CLOCALS%7E1%5CTemp%5Cmso htmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CDOCUME%7E1%5Cmatman%5CLOCALS%7E1%5CTemp%5Cmso htmlclip1%5C01%5Cclip_colorschememapping.xml"><sty le></style>Thank you for your help!

[geoffrey.mcgill]

Hi matmani,

Thanks for pointing out the problems.*


The .Value property on the Slider was missing an attribute which prevented it from being updated correctly during an AjaxEvent. I've fixed the problem and committed the change to SVN. The fix will be included with the v0.7 release.*


The following code sample demonstrates how to work-around the problem.


Example

this.Slider1.AddScript("{0}.setValue({1},true);", this.Slider1.ClientID, 10);

Setting the ComboBox .SelectedItem during an AjaxEvent is also proving to be a bit of a challenge. I'll have to spend some time looking into this further. Typically setting a new ComboBox value would set using the .SetValue() Method.


The following code sample demonstrates using the .SetValue Method.


Example

this.ComboBox1.SetValue(30);

I'll post an update as soon as we have the .SelectedItem.Value properly working during an AjaxEvent.


Hope this helps.

[matmani]

Thank you very much Geoffrey for your quick response!

This work perfectly !

[antonyn]

Hi Geoffrey

With regards to setting the selected value of a combo box in code, do you know when there will be a fix available, or a workaround?

Many thanks
Antony

[geoffrey.mcgill]

Hi Antony,

Setting the .SelectedItem.Value during an AjaxEvent/AjaxMethod will be supported in v0.7.

The following sample demonstrates.

Example

<%@ Page Language="C#" %>

<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<script runat="server">
    protected void Button1_Click(object sender, AjaxEventArgs e)
    {
        this.ComboBox1.SelectedItem.Value = "CA";
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <p><a href="AjaxEvent.aspx">Reload</a></p>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
       
        <ext:ComboBox ID="ComboBox1" runat="server">
            <SelectedItem Value="BR" />
            <Items>
                <ext:ListItem Text="Belgium" Value="BE" />
                <ext:ListItem Text="Brazil" Value="BR" />
                <ext:ListItem Text="Bulgaria" Value="BG" />
                <ext:ListItem Text="Canada" Value="CA" />
            </Items>
        </ext:ComboBox>
        
        <ext:Button ID="Button1" runat="server" Text="Set Canada" Icon="FlagCa">
            <AjaxEvents>
                <Click OnEvent="Button1_Click" />
            </AjaxEvents>
        </ext:Button>
    </form>
</body>
</html>

Hope this helps.