Strange Buttons Dont Postback

[SDI]

I took your idea for a blog/forum as your sample and implemented my own. Strage behavior is the template columns for the edit and reply buttons does not fire off to the Item Command event of the Tree List. Perhaps i am missing something but all seems in check.

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelBlog" Width="100%" Height="100%">
                        <asp:Label runat="server" ID="lblSelectedBlog" Text="Select an Program/Group and/or an Event to start blogging" Font-Size="Larger" />
                        <telerik:RadTreeList ID="RadTreeListBlogBoard" runat="server" DataKeyNames="BlogSubjectId" ClientDataKeyNames="BlogSubjectId" ParentDataKeyNames="ID"
                             AutoGenerateColumns="false" GridLines="Horizontal" BorderStyle="Solid" AllowPaging="true" PageSize="12">
                            <NoRecordsTemplate>
                                <asp:Label runat="server" Font-Bold="true" Font-Italic="true" Text="Click the button above to start a new blog entry." />
                            </NoRecordsTemplate>
                            <Columns>
                                <telerik:TreeListBoundColumn UniqueName="BlogSubjectId" DataField="BlogSubjectId" Display="false" HeaderText="BlogSubjectId"/>
                                <telerik:TreeListTemplateColumn UniqueName="Subject" DataField="Subject" HeaderText="Subject">
                                    <HeaderStyle Width="180px" />
                                    <ItemStyle Width="180px" Wrap="true"/>
                                    <ItemTemplate>
                                        <asp:LinkButton ID="LnkSubject" runat="server" Font-Bold="true" Font-Size="Large" CommandName="ExpandCollapse" CommandArgument="ExpandAll" Text='<%#Eval("Subject")%>' />
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>
                                <telerik:TreeListBoundColumn UniqueName="FullName" DataField="FullName" HeaderText="Author">
                                    <HeaderStyle Width="120px" />
                                    <ItemStyle Width="120px" Wrap="false"/>
                                </telerik:TreeListBoundColumn>
                                 <telerik:TreeListBoundColumn UniqueName="ModifiedDate" DataField="ModifiedDate" HeaderText="Last modified:" DataFormatString="{0:dd MMM yyyy HH:mm}">
                                    <HeaderStyle Width="120px" />
                                    <ItemStyle Width="120px" />
                                </telerik:TreeListBoundColumn>
                                <telerik:TreeListBoundColumn UniqueName="AddDate" DataField="AddDate" HeaderText="Date added:" DataFormatString="{0:dd MMM yyyy HH:mm}">
                                    <HeaderStyle Width="120px" />
                                    <ItemStyle Width="120px" />
                                </telerik:TreeListBoundColumn>



                                <telerik:TreeListTemplateColumn HeaderText=" " >
                                    <HeaderStyle Width="75px" />
                                    <ItemStyle Width="75px" />
                                    <ItemTemplate>
                                        <telerik:RadButton ID="RadButtonReply" runat="server" CommandName="ReplyEntry" ToolTip='<%# "Reply to the " + Eval("Subject") + " entry"%>' Width="24px" Height="24px">
                                            <Image ImageUrl="../images/Blog/reply-blue-24.png" />
                                        </telerik:RadButton>
                                        <telerik:RadButton ID="RadButtonEdit" runat="server" CommandName="EditEntry" ToolTip='<%# "Edit the " + Eval("Subject") + " entry"%>' Width="24px" Height="24px" >
                                            <Image ImageUrl="../images/Blog/edit-blue-24.png" />
                                        </telerik:RadButton>
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>

                            </Columns>

                            <DetailTemplate>
                                <div>
                                    <asp:Label ID="lblBody" runat="server" Text='<%#Eval("Body")%>'></asp:Label>
                                </div>
                            </DetailTemplate>

                            <ClientSettings >
                                <ClientEvents />
                            </ClientSettings>
                        </telerik:RadTreeList>
                    </telerik:RadAjaxPanel>

[SDI]

if i create a TreeListEditCommandColumn it does hit my Item Command event. Firebug doesnt come back with any JS issues either, so its very strange...

edit:

okay so i copied your in the sample and it worked. well the only thing that was different was the image.

once i put 

<Image ImageUrl="../images/Blog/reply-blue-24.png" /> 

it failed - even though the image looked nice :) it didnt want to post back to the Item Commmand. any suggestions Telerik?


edit: 
well tried all kinds of things and no postback to the ItemCommand. The following didnt work too.

<telerik:TreeListTemplateColumn UniqueName="Template Column" HeaderText=" ">
    <HeaderStyle Width="75px" />
    <ItemStyle Width="75px" />
    <ItemTemplate>
        <telerik:RadButton ID="ReplyBtn" runat="server" CommandName="Reply" Width="24px" Height="24px"  AutoPostBack="true">
            <Image EnableImageButton="true" IsBackgroundImage="true" ImageUrl="../images/Blog/reply-blue-24.png" />
        </telerik:RadButton>
        <telerik:RadButton ID="EditBtn" runat="server" Text="Edit" CommandName="EditMessage">
        </telerik:RadButton>
    </ItemTemplate>
</telerik:TreeListTemplateColumn>

I even tried setting CSS and still - no postback

[SDI]

Hi guys, anything on this one? We would really like to use the buttons with images in the RadTreeList with commandname property for postbacks

Thanks!.

[Vasil]

Hello Brain,

The rendered button should be input with type=submit. This way the command will be handled correct. When you use image button the rendering is different. You could handle the client side event of the button and use the RadTreeList client API to fire a command, in this case the TreeList will be the initiator of the PostBack and it will handle the command event.
http://www.telerik.com/help/aspnet-ajax/treelist-client-side-basics.html

Regards,
Vasil
Telerik

[SDI]

Hi Telerik

It doesnt work setting it up as your explained. As a matter of fact even my client events are not being triggered.

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanelBlog" Width="100%" Height="100%">
                        <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
                            <script type="text/javascript">
                                //![CDATA[
                                function RadButtonReplyEntry_Clicked(sender, args) {
                                    alert("Clicked");
                                }

                                function RadButtonReplyEntry_Clicking(sender, args) {
                                    alert("Clicking");
                                }
                                //]]>
                            </script>
                        </telerik:RadCodeBlock>
...

<telerik:RadTreeList ID="RadTreeListBlogBoard" runat="server" DataKeyNames="BlogSubjectId" ClientDataKeyNames="BlogSubjectId" ParentDataKeyNames="ID"
                             AutoGenerateColumns="false" GridLines="Horizontal" BorderStyle="Solid" AllowPaging="true" PageSize="12" Width="100%" Height="100%">
                            <NoRecordsTemplate>
                                <asp:Label runat="server" Font-Bold="true" Font-Italic="true" Text="Click the button above to start a new blog entry." />
                            </NoRecordsTemplate>
                            <Columns>
                                <telerik:TreeListBoundColumn UniqueName="BlogSubjectId" DataField="BlogSubjectId" Display="false" HeaderText="BlogSubjectId"/>

...

<telerik:TreeListTemplateColumn HeaderText=" " >
                                    <HeaderStyle Width="75px" />
                                    <ItemStyle Width="75px" />
                                    <ItemTemplate>
                                        <telerik:RadButton ID="RadButtonReplyEntry" runat="server" UseSubmitBehavior="true" ButtonType="StandardButton" CommandName="ReplyEntry" Width="24px" Height="24px" ToolTip='<%# "Reply to the " + Eval("Subject") + " entry"%>' OnClientClicked="RadButtonReplyEntry_Clicked" OnClientClicking="RadButtonReplyEntry_Clicking" >
                                            <Image EnableImageButton="true" IsBackgroundImage="true" ImageUrl="../images/Blog/reply-blue-24.png" />
                                        </telerik:RadButton>
                                    </ItemTemplate>
                                </telerik:TreeListTemplateColumn>

                            </Columns>

                            <DetailTemplate>
....
                            </DetailTemplate>

                            <ClientSettings >
                                <ClientEvents />
                            </ClientSettings>
                        </telerik:RadTreeList>
                    </telerik:RadAjaxPanel>

...maybe i am missing something, code all starting to run together!!

Can you give me demo zip showing an image button working in the columns for a RadTreeList?? Posting back as an ItemCommand event.

Thanks!

[Vasil]

Hello Brain,

You can see how the button client events are working in this online demo:
http://demos.telerik.com/aspnet-ajax/button/examples/clientsideapi/defaultcs.aspx

Also you should use RadScriptBlock for your scripts, not RadCodeBlock.

Regards,
Vasil
Telerik

[SDI]

It all had to do with how the Ajax was rendered. I couldnt use Ajax panel wrapped around the RadTreeView in the AjaxManager, it had to use the RadTreeView iteself as the updated control. It now works as expected.