AjaxToolKit : ReorderList : problème avec le design des items

Version imprimable

Bonjour,

Je souhaiterais avoir aligner les zones DragHandleTemplate et ItemTemplate sur la même ligne.

Mais pour le moment, le DragHandleTemplate et l'itemTemplate s'affichent sur 2 lignes.

Le code source aspx:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
 <style type="text/css">
        .OrderedList li
        {
            list-style: none;
        }
 
         .dragHandle {
            width:10px;
            height:10px;
            border:thin outset white;
            background-color:red;            
        }
 
        .processing {
            background-color:yellow;
            color:black;  
            border:thin inset white;          
        }
 
        .reorderCue {
            background-color:green;
            border:thin dotted black;
            height:25px;                       
        }
    </style>
    <div class="OrderedList">
    <table>
    <tr><td>
        <EFileAjax:ReorderList ID="OrderList" 
                                      runat="server" 
                                      AllowReorder="true" 
                                      LayoutType="User"
                                      OnItemReorder="OrderList_ItemReorder" 
                                      PostBackOnReorder="true" 
                                      OnItemDataBound="OrderList_ItemDataBound"
            >
            <ItemTemplate>
                <%# HttpUtility.HtmlEncode(Convert.ToString(Container.DataItem))%>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue">
                </asp:Panel>
            </ReorderTemplate>
          <DragHandleTemplate>
                <div class="dragHandle"></div>
            </DragHandleTemplate>
        </EFileAjax:ReorderList>
    </td></tr></table>
    </div>

le code généré :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="ctl00_MainContentPlaceHolder_OrderList">
   <ul id="ctl00_MainContentPlaceHolder_OrderList__rbl">
        <li id="ctl00_MainContentPlaceHolder_OrderList__rli0" style="vertical-align: middle;">
            <div>
               <div id="ctl00_MainContentPlaceHolder_OrderList__rli0___dih0">
                  <div>
                     <div class="dragHandle"> </div>
                  </div>
               </div>
               <div> Item 1 </div>
            </div>
         </li>
   </ul>
</div>

Quelqu'un aurait-il une idée?

Lorsque que je regarde le code généré dans le SampleSite de l'ajaxControlToolKit, j'ai ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="ctl00_SampleContent_ReorderList1">
    <ul id="ctl00_SampleContent_ReorderList1__rbl">
        <li id="ctl00_SampleContent_ReorderList1__rli0" style="vertical-align: middle;">
            <table cellspacing="0" cellpadding="0" border="0" style="border-width: 0px; border-collapse: collapse;">
                <tbody>
                    <tr>
                        <td id="ctl00_SampleContent_ReorderList1__rli0___dih0">
                            <div>
                                <div class="dragHandle"/>
                            </div>
                        </td>
                        <td style="width: 100%;">
                            <div class="itemArea">
                                <span id="ctl00_SampleContent_ReorderList1__rli0_Label1">Have product idea</span>
                                <span id="ctl00_SampleContent_ReorderList1__rli0_Label2"> - Figure out opportunities</span>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </li>
    </ul>
</div>

il y a un <table> qui est mis en place. Quel paramétrage permet de le faire apparaitre?

Merci

Yann

Quand on y regarde de plus près :

Code:

1
2
3
4
5
6
7
8
<EFileAjax:ReorderList ID="OrderList" 
                                      runat="server" 
                                      AllowReorder="true" 
                                      LayoutType="User"
                                      OnItemReorder="OrderList_ItemReorder" 
                                      PostBackOnReorder="true" 
                                      OnItemDataBound="OrderList_ItemDataBound"
            >

C'est l'argument LayoutType qui gère cela.

Merci à tous et désolé pour le dérangement. :oops: