RadListView Wrapper

[Sean Sparkman]

I have been trying to get the WebAii Rad AJAX Control Wrapper to work for RadListView with limited success.  About to give up in frustration, I decided to run the sample application, the test for RadListView in the sample application failed on all test cases.

I am using Telerik WebAii Testing Framework 2010.1 (Version 101.4.12.0) and Telerik RadControls for ASP.NET AJAX Q1 2010 (10.1.3.9).

When my RadToolbar before the RadListView is visible, my finds seem to always fail.

        <telerik:RadAjaxPanel ID="AjaxPanel"
                              runat="server"
                              LoadingPanelID="AjaxLoadingPanel"
                              ClientEvents-OnResponseEnd="ajaxResponseEnd"
                              ClientEvents-OnRequestStart="ajaxRequestStart">
            <telerik:RadToolBar ID="SuperUser"
                                runat="server"
                                Width="100%"
                                Visible="false">
                <Items>
                    <telerik:RadToolBarDropDown Text="Information"
                                                ID="InformationButton"
                                                runat="server"
                                                Visible="false">
                        <Buttons>
                            <telerik:RadToolBarButton runat="server"
                                                      ID="GpDatabase"
                                                      Enabled="false" />

                            <telerik:RadToolBarButton runat="server"
                                                      ID="GpCompanyId"
                                                      Enabled="false" />

                            <telerik:RadToolBarButton runat="server"
                                                      ID="TransFirstMode"
                                                      Enabled="false" />

                            <telerik:RadToolBarButton runat="server"
                                                      ID="DatabaseServer"
                                                      Enabled="false" />
                        </Buttons>
                    </telerik:RadToolBarDropDown>

                    <telerik:RadToolBarButton ID="SalesRep"
                                              runat="server"
                                              Visible="false">
                        <ItemTemplate><img src="~/img/user_go.png" runat="server" style="vertical-align: middle;" /> Select Sales Rep: </ItemTemplate>
                    </telerik:RadToolBarButton>

                    <telerik:RadToolBarButton ID="OriginalOwner"
                                              runat="server"
                                              Group="SalesReps"
                                              CheckOnClick="true"
                                              Checked="true"
                                              ImageUrl="~/img/user_gray.png"
                                              Visible="false" />

                    <telerik:RadToolBarButton ID="CurrentRep"
                                              runat="server"
                                              Group="SalesReps"
                                              CheckOnClick="true"
                                              ImageUrl="~/img/user_edit.png"
                                              Visible="false" />
                </Items>
            </telerik:RadToolBar>
            <telerik:RadListView ID="Projects"
                                 runat="server"
                                 ItemPlaceHolderID="ProjectHolder"
                                 AllowPaging="true"
                                 AllowCustomPaging="true"
                                 PageSize="6">
                <LayoutTemplate>
                    <div  class="RadListView RadListViewFloated RadListView_<%# Container.Skin %>">
                    <table style="margin: auto;" class="layout" cellspacing="0">
                        <tr>
                            <td rowspan="5" style="background-repeat: repeat-y; background-image: url(img/border-left.png); background-position: right; width: 25px; padding: 0px;">&nbsp;</td>
                            <td colspan="2">
                                <img src="img/ae_checkout.png" alt="Account Executive Checkout Logo" />
                            </td>
                            <td rowspan="5" style="background-repeat: repeat-y; background-image: url(img/border-right.png); background-position: right; width: 25px; padding: 0px;">&nbsp;</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <co:Navigator ID="QuickNavigator" runat="server" />
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: text-top;">
                                <asp:PlaceHolder ID="ProjectHolder" runat="server" />
                            </td>
                            <td style="vertical-align: text-top; white-space: nowrap;">
                                <telerik:RadPanelBar ID="SalesItems"
                                                     runat="server"
                                                     Width="370px"

                                                     CssClass="invoice">
                                    <Items>
                                        <telerik:RadPanelItem Text="Sales Items">
                                            <ItemTemplate>
                                                <table cellpadding="0" cellspacing="0" style="width: 100%">
                                                    <tr>
                                                        <td>
                                                            <co:Invoice ID="SalesInvoice" runat="server" AllowRemoval="true" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="background-color: #8EA3B9; padding-left: 5px;">
                                                            <telerik:RadNumericTextBox ID="Discount"
                                                                                       runat="server"
                                                                                       Type="Currency"
                                                                                       Label="Discount: "
                                                                                       Value="0"
                                                                                       EnabledStyle-HorizontalAlign="Right"
                                                                                        />
                                                            <asp:ImageButton ID="ApplyDiscountButton"
                                                                             runat="server"
                                                                             ImageUrl="~/img/arrow_refresh.png"
                                                                             OnClick="ApplyDiscountButton_Click" />
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td style="text-align: right; background-color: #8EA3B9;">
                                                            <asp:Button ID="ClearButton" runat="server" Text="Clear" OnClick="ClearButton_Click"/>
                                                            <asp:Button ID="EstimateButton" runat="server" Text="Create Quote" OnClick="CreateEstimateButton_Click" />
                                                            <asp:Button ID="BillMeButton" runat="server" Text="Bill Me" OnClick="BillMeButton_Click" />
                                                            <asp:Button ID="CheckOutButton" runat="server" Text="Pay Now" OnClick="CheckOutButton_Click" />
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelBar>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: text-top" colspan="2">
                                <telerik:RadDataPager ID="DataPager"
                                                      runat="server"
                                                      PageSize="6"
                                                      PagedControlID="Projects">
                                    <Fields>
                                        <telerik:RadDataPagerButtonField FieldType="FirstPrev" />
                                        <telerik:RadDataPagerButtonField FieldType="Numeric" />
                                        <telerik:RadDataPagerButtonField FieldType="NextLast" />
                                        <telerik:RadDataPagerPageSizeField PageSizeText="Projects per Page: " />
                                        <telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" />
                                        <telerik:RadDataPagerTemplatePageField>
                                        <PagerTemplate>
                                            <div style="float: right">
                                                <b>Projects
                                                    <asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
                                                    to
                                                    <asp:Label runat="server" ID="TotalPagesLabel" Text="<%# IIf(Container.Owner.StartRowIndex+Container.Owner.PageSize > Container.Owner.TotalRowCount, Container.Owner.TotalRowCount, Container.Owner.StartRowIndex+Container.Owner.PageSize) %>" />
                                                    of
                                                    <asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount %>" />
                                                    <br />
                                                </b>
                                            </div>
                                        </PagerTemplate>
                                    </telerik:RadDataPagerTemplatePageField>
                                    </Fields>
                                </telerik:RadDataPager>
                            </td>
                        </tr>
                    </table>
                    </div>
                </LayoutTemplate>
                <ItemTemplate>
                    <asp:HiddenField ID="ProjectName" runat="server" Value='<%#Eval("ProjectAbbreviation") %>' />
                    <telerik:RadPanelBar ID="ProjectPanelBar"
                                         runat="server"
                                         Width="619px"
                                         CssClass='<%#IIf(Eval("ProjectAbbreviation").ToString().Equals(Account.DefaultProject, StringComparison.CurrentCultureIgnoreCase), "highlightedProject projectHolder", "projectHolder") %>'>
                        <Items>
                            <telerik:RadPanelItem Text="Project Name"
                                                  runat="server"
                                                  ClickedCssClass="rpOut"
                                                  ExpandedCssClass="rpOut"
                                                  FocusedCssClass="rpOut"
                                                  SelectedCssClass="rpOut">
                                <ItemTemplate>
                                    <co:Project ID="Project" runat="server" />
                                </ItemTemplate>
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelBar>

                </ItemTemplate>
                <EmptyDataTemplate>
                    <span style="width: 619px; text-align: center;">
                        <h1>No projects available for this account.</h1>
                    </span>
                </EmptyDataTemplate>
            </telerik:RadListView>
        </telerik:RadAjaxPanel>

Test Framework Code:

        Dim ajaxPanelPanel As HtmlDiv = Find.ById(Of HtmlDiv)("AjaxPanelPanel")

        Assert.IsNotNull(ajaxPanelPanel)

        Dim ajaxPanel As HtmlDiv = Find.ById(Of HtmlDiv)("AjaxPanel")

        Assert.IsNotNull(ajaxPanel)

        'Dim element_ As ArtOfTest.WebAii.ObjectModel.Element = ajaxPanel.Find.ById("Projects")
        'Dim listView As RadListView = element_.As(Of RadListView)()
        Dim listView As RadListView = ajaxPanel.Find.ByAttributes(Of RadListView)("class=RadListView RadListViewFloated RadListView_Default")

I can find the div and use an As(Of RadListView)(), but it throws an exception about the span should of been an input.  I recently upgraded to the latest version (above) to see if it would resolve some of these issues but no luck.

[Sean Sparkman]

I can get the element itself as a HtmlDiv.

ajaxPanel.Find.ById("ProjectsListView")

Contains
        Content   "<DIV id=ProjectsListView class="RadListView RadListViewFloated RadListView_Default">"   String
But when I add...

ajaxPanel.Find.ById("ProjectsListView").As(Of RadListView)

I get an exception.
un-time exception thrown : System.ArgumentException - Invalid control '[Element: 'div:14' (id=ProjectsListView)]'.  Control does not match FindExpression '[tagname 'Exact' div] AND [class 'Contains' RadListView_]'

[Konstantin Petkov]

Hello Sean,

My first guess is we probably fail to initialize the RadListView due to the custom layout in your case. The wrapper supports the built-in layouts but we can't run smoothly with the custom layouts for sure.

We will discuss the issue and get back to you with our findings. We can probably allow the initialization of the RadListView wrapper but it's API may not be functional with the custom layouts.

Can you share what the final goal of this test is? What would you like to verify? You can probably achieve your goal with the HtmlControls like the Div, inputs, etc. building the complete functional tests again.

I'm sorry for the confusion and the frustration this issue brought and looking forward to your response.

All the best,
Konstantin Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sean Sparkman]

It's a sales rep check out page for orders they take over the phone.  I was hoping to be able to navigate to the project (an item/row/whatever) in the RadListView and select what products I wanted and then make sure they show up correctly.  I should be able to do it via HtmlDiv.  Is there a place I could go to read up on writing my own wrappers then?

[Konstantin Petkov]

Hi Sean,

Yes, that sounds reasonable. You can navigate and find any element in the HTML using the nature HTML controls. I think this page from the WebAii documentation can give you some ideas.

I think I've seen a helpful forum thread discussing creating a custom Html wrapper in WebAii and I'll ask around if someone can find it. We'll follow up with more info as well otherwise.

Best wishes,
Konstantin Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.