Questions on UI for ASP.NET AJAX Forum

8 answers

501 views

Hi,

I use Selenium IDE 1.4.1 to test my website. This all works fine except for some Telerik controls that are used. To be more specific, I cannot select/click items from the RadComboBox (Telrik control) with Selenium IDE. Several topics are available but none of the solutions work for me... Maybe somebody can put me on the right track?

The control in HTML looks like this:

RadComboBox (closed)
<td class="rcbInputCell rcbInputCellLeft" style="width:100%;">
<input id="ctl00_ddlNavigateTo_Input" class="rcbInput" type="text" readonly="readonly" value=" Go to" name="ctl00$ddlNavigateTo" autocomplete="off">
</td>
<td class="rcbArrowCell rcbArrowCellRight">
<a id="ctl00_ddlNavigateTo_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>

--> id="ctl00_ddlNavigateTo_Arrow" is the "arrow" next to the ComboBox to open the list.

RadComboBox (activated)
<div class="rcbSlide" style="z-index: 6000; visibility: visible; display: block; overflow: visible; margin-left: 0pt; position: absolute; top: 75.5px; left: 1340.02px; height: 196px; width: 282px;">
<div id="ctl00_ddlNavigateTo_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Windows7 " style="display: block; width: 280px; visibility: visible; top: 0px; left: 0px;">
<div class="rcbScroll rcbWidth" style="width: 100%; overflow: auto; height: 193.5px;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom: 1;">
<li class="rcbItem "> Go to</li>
<li class="rcbItem ">Grid</li>
<li class="rcbItem ">Portfolio balance</li>
<li class="rcbItem ">Portfolio finance</li>
</ul></div></div></div>

--> The items Grid, Portfolio balance, and Portfolio finance are the items in the list that can be selected to link to a different page.

Current commands in Selenium:

Command: click
Target: id=ctl00_ddlNavigateTo_Arrow
(opens the list of the combobox)

Command: waitForVisible
Target: id=ctl00_ddlNavigateTo_DropDown
(waits for the actual list to show up)

Command: waitForElementPresent
Target: //div[@id=ctl00_ddlNavigateTo_DropDown]

Command: mouseOver
Target: //div[@id="Portfolio balance"]

Command: click
Target: //div[@id="Portfolio balance"]

I've included the last 3 items based on several other topics. However it is not working... Does somebody know the right commands and targets
for Selenium IDE to deal with the RadComboBox?

Thanks!

ComboBox

answered on 15 Oct 2015

31 answers

6.4K+ views

ItemDatabound RadGrid

Hi All,
I use RadGrid control,
I want each row add attribute, I use ItemDatabound
But I don't know how ItemDatabound work

Please help me,
Thanks!

Grid

answered on 14 Oct 2015

13 answers

540 views

Export DetailTable to Excel

Hi all,
I have a RadGrid with 2 levels of data hierarchy (Countries > Campaigns > Entries) . I only want to export the lowest level grid (Entries) to Excel.

For some reason, the Export isn't happening. The ItemCommand event with the CampaignsRadGrid.MasterTableView.ExportToExcel(); call is being hit though, but the only thing that happens is that the pagination controls, on the bottom of the grid, disappear.

ASPX code:

<telerik:RadAjaxManagerProxy ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CampaignsRadGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="CampaignsRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista"></telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="CampaignsRadGrid" Width="97%" Skin="Office2007"

AllowPaging="True" PageSize="10" runat="server" AllowSorting="true"

AutoGenerateColumns="false" GridLines="None"

onneeddatasource="CampaignsRadGrid_NeedDataSource"

ondetailtabledatabind="CampaignsRadGrid_DetailTableDataBind"

onitemcommand="CampaignsRadGrid_ItemCommand"

>

<PagerStyle Mode="NextPrevNumericAndAdvanced" AlwaysVisible="true" />

<MasterTableView Width="100%" EditMode="PopUp" DataKeyNames="ID" AllowMultiColumnSorting="True" >

<DetailTables>

<telerik:GridTableView DataKeyNames="ID" Name="Campaigns" Width="100%" NoDetailRecordsText="There are no campaigns for this country.">

<DetailTables>

<telerik:GridTableView CommandItemDisplay="Top" DataKeyNames="ID" AutoGenerateColumns="true" Name="Entries" NoDetailRecordsText="There are no entries for this campaign." Width="100%">

<CommandItemSettings ShowExportToExcelButton="true" ShowRefreshButton="false" ShowAddNewRecordButton="false" />

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn UniqueName="CampaignName" DataField="CampaignName" SortExpression="CampaignName" HeaderText="Campaign Name" AllowSorting="true" />

<telerik:GridDateTimeColumn UniqueName="DateCreated" SortExpression="DateCreated" DataField="DateCreated" HeaderText="Date Created" DataFormatString="{0:d}" AllowSorting="true" />

<telerik:GridBoundColumn UniqueName="Entries" SortExpression="Entries" DataField="Entries" HeaderText="Entries" AllowSorting="true" />

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridBoundColumn UniqueName="CountryName" SortExpression="CountryName" DataField="CountryName" HeaderText="CountryName" AllowSorting="true" />

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true" />

<PagerStyle Mode="NextPrevAndNumeric" />

</telerik:RadGrid>

C# code:

protected void CampaignsRadGrid_ItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == Telerik.Web.UI.RadGrid.ExportToExcelCommandName)

{

ConfigureExport();

CampaignsRadGrid.MasterTableView.ExportToExcel();

}

public void ConfigureExport()

{

CampaignsRadGrid.ExportSettings.ExportOnlyData = true;

CampaignsRadGrid.ExportSettings.IgnorePaging = true;

CampaignsRadGrid.ExportSettings.OpenInNewWindow = false;

}

Any thoughts? Thanks in advance for any help...

Grid

answered on 14 Oct 2015

4 answers

222 views

Resizing RadPageView inside RadMultiPage

I have a RadMultiPage with multiple RadPageView, some of which are created dynamically. The page starts with one RadPageView and the user can add more via a button. The initial code is something like the one bellow.

<telerik:RadMultiPage ID="ContactsPagesViews" ScrollBars="Auto" Height="100%"

RenderMode="Lightweight" runat="server"

OnPageViewCreated="ContactsPagesViews_PageViewCreated"

SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server" Height="600px">

more elements here

</telerik:RadPageView>

</telerik:RadMultiPage>

I also have some code to resize my RadPageViews to fit the size of my window. For this I use the following code:

01.<telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

02. <script type="text/javascript">

03. $(document).ready(function () {

04.

05. $(window).resize(function () {

06. ResizePage($find('<%= ContactsPagesViews.ClientID %>'))

07. });

08.

09. ResizePage($find('<%= ContactsPagesViews.ClientID %>'))

10. });

11.

12. function ResizePage(multiPage) {

13. for (i = 0; i < multiPage.get_pageViews().get_count() ; i++) {

14. var pageView = multiPage.get_pageViews().getPageView(i);

15. pageView.get_element().style.height = ($(window).height() - 80) + 'px';

16. }

17.}

18. </script>

19.</telerik:RadScriptBlock>

The Resizing is working really great but the first time the page is loaded the initial RadPageView is not resized. You can see line 9. where I'm trying to force it but it only resizes if I change the size of the window. Is there anyway for this to work?

Thank you.

General Discussions

answered on 14 Oct 2015

2 answers

85 views

Unable to Select the Text of a RadAlert

I need the ability for the user to select a portion of the text displayed in a dialog box. In the demo of Dialog boxes located here http://demos.telerik.com/aspnet-ajax/window/examples/browserdialogboxes/defaultcs.aspx when clicking on the button "radalert from server" the ability to select the text by holding down the left mouse button and dragging the cursor does work.

However, when I created a simple button which displays a RadAlert dialog it will not allow selecting of the text by clicking and dragging the cursor. It will however allow selecting the text by double clicking on a word in the text. Attached is a screen shot of what the dialog looks like when attempting to click and drag the cursor. When I copy and paste I get the following:

OK status label {1} ##LOC[OK]## {1} ##LOC[OK]## ##LOC[Cancel]## {1} ##LOC[OK]## ##LOC[Cancel]##

We are using version UI for ASP.NET AJAX Q2 2014.

General Discussions

answered on 14 Oct 2015

3 answers

310 views

Customising layout for EditForm template in RadGrid for AJAX

Hi,

I have a RadGrid (for AJAX) in my web page. I chose to use EditForm template and I wish to customise the design of the edit form. My questions are (please refer to the attached jpeg file):

1. How do I set the column/cell spacing between labels and controls (Item A in the file)?

2. How do I set the row spacing (Item B in the file)?

3. How do I change the vertical alignment of the label (Item C in the file)? In this case, I want the label to be aligned at the top, rather than middle.

4. How do I change the spacing between the last row of user control and the command button row (Item D in the file)?

My markup for the RadGrid is as below:

<telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanelMain">
<telerik:RadGrid ID="RadGridDegreeClassRules" runat="server" AllowPaging="True" AllowSorting="true" PageSize="10" Font-Names="Segoe UI"
   OnNeedDataSource="RadGridDegreeClassRules_NeedDataSource" HeaderStyle-BackColor="DarkCyan" HeaderStyle-Font-Bold="true"
   OnItemCommand="RadGridDegreeClassRules_ItemCommand" OnPreRender="RadGridDegreeClassRules_PreRender"
   AllowAutomaticInserts="false" OnInsertCommand="RadGridDegreeClassRules_InsertCommand"
   AllowAutomaticUpdates="false" OnUpdateCommand="RadGridDegreeClassRules_UpdateCommand"
   AllowAutomaticDeletes="false" OnDeleteCommand="RadGridDegreeClassRules_DeleteCommand" >
   <PagerStyle Mode="NextPrevAndNumeric" />
   <MasterTableView CommandItemDisplay="Top" AutoGenerateColumns="false" AllowSorting="true"
               CommandItemSettings-ShowAddNewRecordButton="true" CommandItemSettings-AddNewRecordImageUrl="../images/add12.png"
               CommandItemSettings-AddNewRecordText="Insert new rule"
               CommandItemSettings-RefreshImageUrl="../images/refresh14.png" DataKeyNames="Id">
       <Columns>
           <telerik:GridEditCommandColumn UniqueName="EditCommandColumnDegreeClassRules" ButtonType="ImageButton"
               EditImageUrl="../images/edit12.png" EditText="Edit rule"
               HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center">
               <ItemStyle CssClass="MyImageButton"></ItemStyle>
           </telerik:GridEditCommandColumn>
           <telerik:GridTemplateColumn HeaderText="Effective Date" HeaderStyle-ForeColor="White" AllowSorting="true" SortExpression="EffectiveDate">
               <ItemTemplate>
                   <asp:Label ID="LabelEffectiveDate" runat="server" Text='<%# Bind("EffectiveDate","{0:dd-MM-yyyy}") %>'></asp:Label>
               </ItemTemplate>
               <InsertItemTemplate>
                   <telerik:RadDatePicker ID="DatePickerEffectiveDateInsert" runat="server" DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy" ></telerik:RadDatePicker>
                   <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidatorEffectiveDateInsert" ControlToValidate="DatePickerEffectiveDateInsert"
                       ErrorMessage="  Missing required field!" Display="Dynamic" Font-Size="Small" ForeColor="Red"></asp:RequiredFieldValidator>
               </InsertItemTemplate>
               <EditItemTemplate>
                   <telerik:RadDatePicker ID="DatePickerEffectiveDateEdit" runat="server" MinDate="1900/01/01" DbSelectedDate='<%# Bind("EffectiveDate") %>'
                       DateInput-DateFormat="dd-MM-yyyy" DateInput-DisplayDateFormat="dd-MM-yyyy"></telerik:RadDatePicker>
                   <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidatorEffectiveDateEdit" ControlToValidate="DatePickerEffectiveDateEdit"
                       ErrorMessage="  Missing required field!" Display="Dynamic" Font-Size="Small" ForeColor="Red"></asp:RequiredFieldValidator>
               </EditItemTemplate>
           </telerik:GridTemplateColumn>
           <telerik:GridTemplateColumn HeaderText="Rule Name" HeaderStyle-ForeColor="White" AllowFiltering="true" AllowSorting="true" SortExpression="DegreeClassRuleName">
               <ItemTemplate>
                   <asp:Label ID="LabelDegreeClassRuleName" runat="server" Text='<%# Bind("DegreeClassRuleName") %>'></asp:Label>
               </ItemTemplate>
               <InsertItemTemplate>
                   <telerik:RadTextBox ID="TextBoxDegreeClassRuleNameInsert" runat="server" Text="" Width="400" CssClass="EditFormButtonRow" ></telerik:RadTextBox>
               </InsertItemTemplate>
               <EditItemTemplate>
                   <telerik:RadTextBox ID="TextBoxDegreeClassRuleNameEdit" runat="server" Text='<%# Bind("DegreeClassRuleName") %>' Width="400" CssClass="EditFormButtonRow" ></telerik:RadTextBox>
               </EditItemTemplate>
           </telerik:GridTemplateColumn>
           <telerik:GridTemplateColumn HeaderText="Rules" HeaderStyle-ForeColor="White" AllowFiltering="true" AllowSorting="true" SortExpression="DegreeClassRule">
               <ItemTemplate>
                   <asp:Label ID="LabelDegreeClassRules" runat="server" Text='<%# Bind("DegreeClassRule") %>'></asp:Label>
               </ItemTemplate>
               <InsertItemTemplate>
                   <telerik:RadEditor ID="EditorDegreeClassRuleInsert" runat="server" >
                       <Tools>
                           <telerik:EditorToolGroup>
                               <telerik:EditorTool Name="Copy" />
                               <telerik:EditorTool Name="Cut" />
                               <telerik:EditorTool Name="Paste" />
                               <telerik:EditorTool Name="Undo" />
                               <telerik:EditorTool Name="Redo" />
                               <telerik:EditorTool Name="FontName" />
                               <telerik:EditorTool Name="FontSize" />
                               <telerik:EditorTool Name="ForeColor" />
                               <telerik:EditorTool Name="Bold" />
                               <telerik:EditorTool Name="Italic" />
                               <telerik:EditorTool Name="Underline" />
                               <telerik:EditorTool Name="InsertUnorderedList" />
                               <telerik:EditorTool Name="InsertOrderedList" />
                               <telerik:EditorTool Name="Indent" />
                               <telerik:EditorTool Name="Outdent" />
                               <telerik:EditorTool Name="InsertSymbol" />
                               <telerik:EditorTool Name="InsertLink" />
                           </telerik:EditorToolGroup>
                       </Tools>
                   </telerik:RadEditor>
               </InsertItemTemplate>
               <EditItemTemplate>
                   <telerik:RadEditor ID="EditorDegreeClassRuleEdit" runat="server" content='<%# Bind("DegreeClassRule") %>' >
                       <Tools>
                           <telerik:EditorToolGroup>
                               <telerik:EditorTool Name="Copy" />
                               <telerik:EditorTool Name="Cut" />
                               <telerik:EditorTool Name="Paste" />
                               <telerik:EditorTool Name="Undo" />
                               <telerik:EditorTool Name="Redo" />
                               <telerik:EditorTool Name="FontName" />
                               <telerik:EditorTool Name="FontSize" />
                               <telerik:EditorTool Name="ForeColor" />
                               <telerik:EditorTool Name="Bold" />
                               <telerik:EditorTool Name="Italic" />
                               <telerik:EditorTool Name="Underline" />
                               <telerik:EditorTool Name="InsertUnorderedList" />
                               <telerik:EditorTool Name="InsertOrderedList" />
                               <telerik:EditorTool Name="Indent" />
                               <telerik:EditorTool Name="Outdent" />
                               <telerik:EditorTool Name="InsertSymbol" />
                               <telerik:EditorTool Name="InsertLink" />
                           </telerik:EditorToolGroup>
                       </Tools>
                   </telerik:RadEditor>
               </EditItemTemplate>
           </telerik:GridTemplateColumn>
           <telerik:GridButtonColumn CommandName="Delete" UniqueName="DeleteColumnDegreeClassRules"
               Text="Delete rule" ConfirmText="Delete this rule?" ConfirmTitle="Delete" ConfirmDialogType="RadWindow"
               HeaderStyle-Width="30px" ItemStyle-HorizontalAlign="Center"
               ButtonType="ImageButton" ImageUrl="../images/delete12.png" DataType="System.Boolean">
               <ItemStyle CssClass="MyImageButton"></ItemStyle>
           </telerik:GridButtonColumn>
       </Columns>
       <EditFormSettings ColumnNumber="1" CaptionDataField="DegreeClassRuleName" CaptionFormatString="Edit properties of rule: {0}">
           <FormStyle Width="100%" BackColor="Ivory"></FormStyle>
           <FormTableItemStyle Wrap="False"></FormTableItemStyle>
           <EditColumn UniqueName="EditColumnDegreeClassRule" ButtonType="PushButton"
               InsertText="Insert" UpdateText="Update" CancelText="Cancel" ></EditColumn>
           <FormTableButtonRowStyle HorizontalAlign="Right" ></FormTableButtonRowStyle>
       </EditFormSettings>
   </MasterTableView>
   <ClientSettings>
       <ClientEvents OnRowDblClick="rowDblClick" />
   </ClientSettings>
</telerik:RadGrid>

Thank you. Appreciate your reply.

Zaly

Grid

answered on 14 Oct 2015

1 answer

99 views

ExportToExcel not working in window.ShowModalDialog

I am opening up an .aspx page with a radgrid on it. I click a button and it runs the 4 lines of code below.

rgExportSummary.ExportSettings.IgnorePaging = True

rgExportSummary.ExportSettings.Excel.Format = DirectCast([Enum].Parse(GetType(GridExcelExportFormat), "ExcelML"), GridExcelExportFormat)

rgExportSummary.ExportSettings.ExportOnlyData = True

rgExportSummary.ExportSettings.OpenInNewWindow = True

rgExportSummary.MasterTableView.ExportToExcel()

When I use the window.open javascript to open this aspx page and then click the button to run the above code, I get the export for the grid.

When I use the window.ShowModalDialog javascript to open the aspx page and then click the button to run the above code, I do not get any export or response.

What am I doing wrong or missing?

Grid

answered on 14 Oct 2015

6 answers

1.0K+ views

Regex to check input format

Hi telerik

I use a radtextbox and i want to validate user input of following format
123#, 5677#. User can enter numbers followed by a mandatory #. How to validate this with regex?

Any suggestion
Lovella

Input

answered on 14 Oct 2015

1 answer

75 views

How to add javascript events?

I want to use the lightbox as a way for users as a way to select the image they want from the light box. I thought this would help: http://www.telerik.com/forums/close-lightbox-on-image-click . However, that seems to create just a single item with a single image, and I need the javascript to apply to every image. Can this be done?

LightBox

answered on 14 Oct 2015

4 answers

259 views

Issue with RadDropDownTree in a table

Hi,

I'm having an issue with RadDropDownTable when placed in a table.. When I select/check multiple leaves in the control, the container of the control expands/shortens based on the selection .. Any idea on how to resolve this?

Here is the code im using.

<div>

<table style="background: lightblue;">

<tr>

<td>

<span class="Label"><b>Module: </b></span>

<telerik:RadDropDownTree runat="server" ID="ModuleDropDownTree" CheckBoxes="SingleCheck"

Width="150px" EnableViewState="False" DataFieldID="ModuleID" DataFieldParentID="parentModuleID" DataSourceID="SqlDataSource1" DataTextField="Name" DataValueField="ModuleID">

</telerik:RadDropDownTree>

</td>

<td>

<span class="Label"><b>Modes: </b></span>