Questions on UI for ASP.NET AJAX Forum

18 answers

434 views

I have a long menu that works fine in IE 7.0 but gets cut off and does not scroll in Firefox 3 or IE 8.0. It works in Compatibility Mode in IE 8.0. Try the following url and click on the "books" menu item to see an example: http://store.families.org.au.

I am using a custom skin with the following css file:

    
            /* <RadMenu / Default> */  
        
            .RadMenu_MyCustomSkin .rmRootGroup,  
        
            .RadMenu_MyCustomSkin .rmLink,  
        
            .RadMenu_MyCustomSkin .rmText,  
        
            .RadMenu_MyCustomSkin .rmLeftArrow,  
        
            .RadMenu_MyCustomSkin .rmRightArrow,  
        
            .RadMenu_MyCustomSkin .rmTopArrow,  
        
            .RadMenu_MyCustomSkin .rmBottomArrow  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmRootGroup  
        
            {  
        
                background-position: 0 -408px;  
        
            }  
        
            /* <Root items> */  
        
            .RadMenu_MyCustomSkin,  
        
            .RadMenu_MyCustomSkin .rmLink  
        
            {  
        
                font-family: Verdana, Arial, Helvetica, sans-serif;  
        
                font-size: 11px;  
        
                color: #5b3b23;  
        
                line-height: 10px;  
        
                text-decoration: none;  
        
                border-bottom-width: 1px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmLink,  
        
            .RadMenu_MyCustomSkin .rmDisabled,  
        
            .RadMenu_MyCustomSkin .rmDisabled:hover  
        
            {  
        
                background-position: 0 -72px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmText,  
        
            .RadMenu_MyCustomSkin .rmDisabled .rmText,  
        
            .RadMenu_MyCustomSkin .rmDisabled:hover .rmText  
        
            {  
        
                background-position: 100% -96px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmFirst .rmLink,  
        
            .RadMenu_MyCustomSkin .rmFirst .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmLast .rmText,  
        
            .RadMenu_MyCustomSkin .rmLast .rmLink:hover .rmText,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLink,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmText  
        
            {  
        
                background-repeat: no-repeat;  
        
                background-position: 0 500px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFirst,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast  
        
            {  
        
                background: none;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmFocused  
        
            {  
        
                color: #ad9d91;  
        
                text-decoration:none;  
        
                border-bottom-style: none;  
        
                border-bottom-style: dashed;  
        
                border-bottom-color: #FFFFFF;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLink  
        
            {  
        
                border-bottom-style: dashed;  
        
                border-bottom-color: #FFFFFF;  
        
                padding-top: 10px;  
        
                padding-bottom: 15px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast .rmLink  
        
            {  
        
                border-bottom-width: 0px;  
        
                border-bottom-style: none;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmExpanded,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmExpanded:hover  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmExpanded,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmFirst .rmExpanded:hover  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast .rmExpanded,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmLast .rmExpanded:hover  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmItem .rmDisabled:hover  
        
            {  
        
                padding-top: 1px;  
        
                padding-bottom: 1px;  
        
                border-width: 0;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmExpanded,  
        
            .RadMenu_MyCustomSkin .rmExpanded:hover  
        
            {  
        
                background-color: #e3f3f4;  
        
                background-position: 0 -72px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmExpanded .rmText,  
        
            .RadMenu_MyCustomSkin .rmExpanded:hover .rmText  
        
            {  
        
                background-position: 100% -96px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmLast .rmExpanded .rmText  
        
            {  
        
                background-position: 0 500px;  
        
                background-repeat: no-repeat;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmDisabled,  
        
            .RadMenu_MyCustomSkin .rmDisabled:hover  
        
            {  
        
                color: #7d7d7d;  
        
                background-color: transparent;  
        
            }  
        
            /* </Root items> */  
        
            /* <Submenu items> */  
        
            .RadMenu_MyCustomSkin .rmGroup,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmVertical  
        
            {  
        
                background-color: #E7F5F5;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink  
        
            {  
        
                border-bottom-style: dashed;  
        
                border-bottom-color: #FFFFFF;  
        
                padding-top: 10px;  
        
                padding-bottom: 15px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLast .rmLink  
        
            {  
        
                border-bottom-style: none;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmSlide .rmScrollWrap  
        
            {  
        
                background-image: none;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmVertical  
        
            {  
        
                background-position: 100% 0;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmRootGroup li.rmItem .rmGroup  
        
            {  
        
                padding-bottom: 0;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmRootGroup .rmHorizontal  
        
            {  
        
                background-image: none;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmScrollWrap .rmVertical  
        
            {  
        
                border: 0;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmExpanded  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLast .rmLink,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLast .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLast .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLast .rmExpanded  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLink,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmText,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmText,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmText  
        
            {  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLink:hover,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmFocused,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpanded  
        
            {  
        
                background-position: 0 -168px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmText,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmText,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmText  
        
            {  
        
                background-position: 100% -192px;  
        
            }  
        
            /* <expand arrows> */  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpandDown,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled .rmExpandDown,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmItem .rmDisabled:hover .rmExpandDown  
        
            {  
        
                background-position: 100% -216px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLink:hover .rmExpandDown,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmFocused .rmExpandDown,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmExpanded .rmExpandDown  
        
            {  
        
                background-position: 100% -240px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmGroup .rmDisabled:hover .rmExpandRight,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmDisabled:hover .rmExpandDown  
        
            {  
        
                background-position: 100% -216px;  
        
            }  
        
            /* </expand arrows> */  
        
            /* <rtl> */  
        
            .RadMenu_MyCustomSkin_rtl .rmLink  
        
            {  
        
                background-position: 100% -96px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmText  
        
            {  
        
                background-position: 0 -72px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmVertical .rmExpanded .rmText,  
        
            .RadMenu_MyCustomSkin_rtl .rmVertical .rmExpanded:hover .rmText  
        
            {  
        
                background-position: 0 500px;  
        
                background-repeat: no-repeat;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded  
        
            {  
        
                background-position: 100% -264px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover .rmText,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused .rmText,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded .rmText  
        
            {  
        
                background-position: 0 -288px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpandLeft  
        
            {  
        
                background-position: 0 -312px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmLink:hover .rmExpandLeft,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmFocused .rmExpandLeft,  
        
            .RadMenu_MyCustomSkin_rtl .rmGroup .rmExpanded .rmExpandLeft  
        
            {  
        
                background-position: 0 -336px;  
        
            }  
        
            /* </rtl> */  
        
            /* </Submenu items> */  
        
            /* <Submenu offsets (Default - specific, overlapping submenus)> */  
        
            .RadMenu_MyCustomSkin .rmSlide  
        
            {  
        
                margin: 0 0 0 -1px;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmVertical .rmSlide,  
        
            .RadMenu_MyCustomSkin .rmSlide .rmSlide,  
        
            .RadMenu_MyCustomSkin_Context .rmGroup .rmSlide  
        
            {  
        
                margin: 0 0 0 0;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmSlide  
        
            {  
        
                margin: 0 0 0 0;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmFirst .rmSlide  
        
            {  
        
                margin-left: 1px;  
        
            }  
        
            .RadMenu_MyCustomSkin_rtl .rmVertical .rmSlide,  
        
            .RadMenu_MyCustomSkin_rtl .rmSlide .rmSlide,  
        
            .RadMenu_MyCustomSkin_Context_rtl .rmGroup .rmSlide  
        
            {  
        
                margin: 0 0 0 5px;  
        
            }  
        
            /* </Submenu offsets> */  
        
            /* <Scrolling arrows> */  
        
            .RadMenu_MyCustomSkin .rmLeftArrow,  
        
            .RadMenu_MyCustomSkin .rmRightArrow  
        
            {  
        
                background-color: #E6E6E6;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }  
        
            .RadMenu_MyCustomSkin .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }  
        
            .RadMenu_MyCustomSkin .rmTopArrow,  
        
            .RadMenu_MyCustomSkin .rmBottomArrow,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmLeftArrow,  
        
            .RadMenu_MyCustomSkin .rmGroup .rmRightArrow  
        
            {  
        
                background-color: #E6E6E6;  
        
            }  
        
            .RadMenu_MyCustomSkin .rmTopArrow { background-position: 50% -367px; border-bottom: 1px solid #828282; }  
        
            .RadMenu_MyCustomSkin .rmBottomArrow { background-position: 50% -391px; border-top: 1px solid #828282; }  
        
            /* </Scrolling arrows> */  
        
            /* <Separators> */  
        
            .RadMenu_MyCustomSkin .rmHorizontal .rmSeparator .rmText,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmHorizontal .rmSeparator .rmText  
        
            {  
        
                height: 22px;  
        
                margin: 1px 0 0;  
        
                width: 1px;  
        
                background-color: #A8A8A8;  
        
            }  
        
            .RadMenu_MyCustomSkin_Context .rmSeparator .rmText,  
        
            .RadMenu_MyCustomSkin .rmHorizontal .rmGroup .rmSeparator .rmText,  
        
            .RadMenu_MyCustomSkin .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText  
        
            {  
        
                background-color: transparent;  
        
                background-position: 0 -406px;  
        
            }  
        
            /* </Separators> */  
        
            /* </RadMenu / Default> */

Here is the definition of the control:

    
                        <telerik:RadMenu ID="RadMenu1" runat="server" DataNavigateUrlField="Url" DataSourceID="XmlDataSource1" 
        
                            DataTextField="Text" DataValueField="Text" EnableEmbeddedSkins="false" Flow="Vertical" 
        
                            Skin="MyCustomSkin" Width="183">  
        
                            <DefaultGroupSettings ExpandDirection="Right" Width="183" /> 
        
                        </telerik:RadMenu>

Please let me know if there is something to fix this.

Thanks.
Dan

P.S. Is there a way to show arrows at the top and bottom to show that there are more options to scroll through.

Menu

answered on 20 Dec 2011

2 answers

298 views

Select all in grid header template checkbox selects items in first page only

I have a Telerik Grid with paging.

I want to Select All the rows in the Radgrid from a checkbox given in Header template of the grid from Client Side function

I am attaching my aspx code for your reference ,along will I am also attaching the javascript code that I am using currently.

But this code Selects all the rows of the same page and I want to select all the rows across all the pages in the grid by

Checking the Checkbox given in Header Template.

HI ,

<telerik:RadGrid ID="grdSearchResults" runat="server" AllowSorting="True" GridLines="None"

Skin="Windows7" AutoGenerateColumns="False" PageSize="5" OnItemDataBound="grdSearchResults_ItemDataBound"

OnNeedDataSource="grdSearchResults_NeedDataSource" CellSpacing="0">

<ClientSettings EnableRowHoverStyle="true">

</ClientSettings>

<MasterTableView Width="100%" TableLayout="Auto" CommandItemDisplay="Top" AllowPaging="true"

AllowSorting="true" PageSize="10" DataKeyNames="BackImage,Image,CreditImage">

<%--StatementID,StatementDate,AccountNumber,Rows,Columns,--%>

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

ShowExportToPdfButton="true" ShowExportToWordButton="true" ShowExportToCsvButton="true">

</CommandItemSettings>

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridTemplateColumn HeaderText="Statement Date" DataField="StatementDate"

UniqueName="StatementDate" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

SortExpression="statementdate">

<ItemTemplate>

<asp:Label ID="lblstmtDate" runat="server" Text="<%# Bind('StatementDate') %>" Font-Bold="False"></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Account Number" DataField="AccountNumber"

UniqueName="AccountNumber" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

SortExpression="AccountNumber">

<ItemTemplate>

<asp:Label ID="lblAccountNumber" runat="server" Text="<%# Bind('AccountNumber') %>"

Font-Bold="False">

</asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Rows" DataField="Rows" UniqueName="Rows"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" SortExpression="Rows">

<ItemTemplate>

<telerik:RadNumericTextBox ID="txtRows" runat="server" Width="20px" Type="Number"

MaxLength="1" DbValue="<%# Bind('Rows') %>" ToolTip="Please enter number greater than 0">

<NumberFormat DecimalDigits="0" GroupSeparator="" />

</telerik:RadNumericTextBox>

<asp:Label ID="Label2" runat="server" ForeColor="#FF3300" Text="*"></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Columns" DataField="Columns" UniqueName="Columns"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" SortExpression="Columns">

<ItemTemplate>

<telerik:RadNumericTextBox ID="txtColumns" runat="server" Width="20px" Type="Number"

MaxLength="1" DbValue="<%# Bind('Columns') %>" ToolTip="Please enter number greater than 0">

<NumberFormat DecimalDigits="0" GroupSeparator="" />

</telerik:RadNumericTextBox>

<asp:Label ID="Label1" runat="server" ForeColor="#FF3300" Text="*"></asp:Label>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn Visible="true" HeaderText="Add Credit Images" UniqueName="Credits"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox ID="chkCredits" runat="server" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Add Back Images" UniqueName="BackImage" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox ID="chkBackImages" runat="server" />

</ItemTemplate>

<FooterStyle Width="100%" />

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="StatementID" HeaderText="StatementID" UniqueName="StatementID"

Visible="false">

<ItemTemplate>

<asp:Label ID="lblStatementID" runat="server" Text="<%# Bind('StatementID') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="DatePrinted" HeaderText="Date Printed" UniqueName="DatePrinted"

Visible="false">

<ItemTemplate>

<asp:Label ID="lblDatePrited" runat="server" Text="<%# Bind('DatePrinted') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="DateEmailed" HeaderText="Date Emailed" UniqueName="DateEmailed"

Visible="false">

<ItemTemplate>

<asp:Label ID="lblDateEmailed" runat="server" Text="<%# Bind('DateEmailed') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Images" HeaderText="Images" UniqueName="Images"

Visible="false">

<ItemTemplate>

<asp:Label ID="lblImages" runat="server" Text="<%# Bind('Images') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Add Images" UniqueName="AddImages" HeaderStyle-HorizontalAlign="Center"

ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:CheckBox ID="chkAddImages" Checked="true" runat="server" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="IsSelected" HeaderText="IsSelected" UniqueName="IsSelected" Display="false">

<ItemTemplate>

<asp:Label ID="lblIsSelected" runat="server" Text="<%# Bind('IsSelected') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="checkboxcolumn" HeaderStyle-Width="7%" ItemStyle-Width="7%"

HeaderStyle-HorizontalAlign="Center">

<HeaderTemplate>

<asp:CheckBox ID="CheckBoxAll" runat="server" onclick="javascript:selectAll(this);" />

</HeaderTemplate>

<ItemTemplate>

<asp:Image ID="SavedItemImage" runat="server" Visible="false" ImageUrl="~/Images/Common/disk2.gif" />

<asp:CheckBox ID="chkSelect" runat="server" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" Width="30px"></HeaderStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="StatementFileIndexId" FilterControlAltText="Filter StatementFileIndexId column"

HeaderText="StatementFileIndexId" UniqueName="StatementFileIndexId" Visible="False">

<ItemTemplate>

<asp:Label ID="lblStatementFileIndexId" runat="server" Text="<%# Bind('StatementFileIndexId') %>"></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

<PagerStyle AlwaysVisible="True"></PagerStyle>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Windows7">

</HeaderContextMenu>

</telerik:RadGrid>

Attached is the image wherein I have the javascript methos that I have used for select all.
Pls let me know ehat can be done.

Grid

answered on 20 Dec 2011

1 answer

126 views

Scrollbar in bottom

Hello,

I have a radEditor with fix size and I want to know how can I set the vertical scrollbar at bottom on load?

Thanks for your help.

Donatien

Editor

answered on 20 Dec 2011

1 answer

85 views

Stupid thing : Focus on first character after selectedvalue

Hi,
I've a combobox (Property : Width="62px" DropDownWidth="180px")

When I selected an item I see in combobox my selected item, but I see the last character of Text property (The width of combobox is smaller than DropDownWidth)

How Can I select the first char after selected (Javascript,JSon, Ajax... everything solution :-) )

I attached two image for example... In the example I selected the 5° item... I want see "5 AND...." and not "..11,06/11" {the last chars}

Thanks,
Marco

ComboBox

answered on 20 Dec 2011

8 answers

316 views

radGrid Format Excel Export

I am trying to format the Excel that is being exported from radGrid and I can't seem to get it to pick up any of the styles. I am using:

protected void imgBtnExportCSV_Click(object sender, EventArgs e)

{

foreach (GridDataItem item in grdLeadList.MasterTableView.Items) //loop through each grid item

{

if (item.Selected)

{

selectedItems.Add(item.ItemIndex);

}

grdLeadList.ExportSettings.ExportOnlyData = true;

grdLeadList.ExportSettings.OpenInNewWindow = true;

grdLeadList.MasterTableView.Columns.FindByUniqueName("ClientSelectColumn").Visible = false;

grdLeadList.MasterTableView.Columns.FindByUniqueName("EditCommandColumn1").Visible = false;

grdLeadList.MasterTableView.Columns.FindByUniqueName("CompanyName").ItemStyle.CssClass = "excelHeaderStyle";

grdLeadList.ExportSettings.FileName = "ColderLeads";

grdLeadList.MasterTableView.ExportToCSV();

}

It finds "CompanyName" I can make it visible false and it goes away. But it won't pick up the "excelHeaderStyle". Am I doing something wrong. Is there a way to style it?

Thanks!

Grid

answered on 20 Dec 2011

1 answer

144 views

Not showing special character in RadEditor

Hi,

Some of the special charaters are not showing properly in hte rad editor
it's displaying unrecognized formate. Please find some unicode below that not showing in the rad editor

𕫠
𕫡
𕫢
𕫣
𕫤
𕫥
𕫦

Pls. suggest me how to go about it

Thank you

Editor

answered on 20 Dec 2011

1 answer

81 views

Lync in RadGrid and other dev controls?

I see that TeamPulse offers Microsoft Lync integration, showing user prescence information about a person, which lets the user click on the little green or red circle next to their name to do "Lync communication" type of actions via the little Lync popup window.

Can I build in Microsoft Lync integration into my custom apps that I build with the Telerik developer tools? Such as I have a RadGrid that lists rows of employees. I'd like the little green/red icons to appear next to their names, just like they do in Microsoft Outlook so a user of my RadGrid could click the green circle in my RadGrid to open Lync-stuff.

Is that available? Or just not yet? Thanks.

Dave

General Discussions

answered on 20 Dec 2011

7 answers

309 views

[Solved] FormDecorator, enabling disabled input-controls client-side, and weird padding.

Hi Telerik,

I am experiencing this issue on Google Chrome 15.0.874.106 m using Telerik.Web.UI.dll v 2011.2.915.35

I have a RadWindow which points to a separate .aspx page. While this window is loading I take the liberty of setting the state of some controls. I am experiencing something very quirky when I enable my input control, though.

I have attached a 'before' and 'after' picture to this thread, but I've got some explaining to do, too. I put this through a couple of hours of testing and discovered some pretty weird discrepancies in functionality, which I would like to draw attention to.

Alright, so, here's the code-behind for the page the RadWindow points to:

<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="CustomLocalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.CustomLocalSettings" %>

<%@ Import Namespace="CableSolve.Web.Controllers.Managers" %>

<!DOCTYPE html>

<html lang="en">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" Runat="Server" />

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="Server" DecoratedControls="All" />

<telerik:RadScriptBlock ID="RadScriptBlock1" Runat="Server" >

<link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/CustomLocalSettings.css?v=<%= VersionManager.GetApplicationVersion() %>" />

</telerik:RadScriptBlock>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="Server" EnablePageMethods="True">

<CompositeScript>

<Scripts>

<asp:ScriptReference Path="~/Scripts/Dashboard/CustomLocalSettings.js" />

<asp:ScriptReference Path="~/Scripts/Dashboard/SharedSettingsFunctionality.js" />

<asp:ScriptReference Path="~/Scripts/jquery-1.6.4.js" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" Runat="server">

<script type="text/javascript">

var autoRefreshNumericTextBoxID = "<%= AutoRefreshNumericTextBox.ClientID %>";

var chartComboBoxID = "<%= ChartComboBox.ClientID %>";

var autoRefreshCheckBoxID = "<%= AutoRefreshCheckBox.ClientID %>";

</script>

</telerik:RadCodeBlock>

<div id="Content">

<fieldset id="RefreshProperties">

<legend>Refresh Settings</legend>

<div id="RefreshArea">

<div id="RefreshLeftSide">

Auto-Refresh Enabled:

<asp:CheckBox ID="AutoRefreshCheckBox" Runat="Server" />

</div>

<div id="RefreshRightSide">

<telerik:RadNumericTextBox ID="AutoRefreshNumericTextBox" Runat="Server" Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<fieldset id="ChartProperties">

<legend>Chart Properties</legend>

<div id="ChartArea">

<telerik:RadComboBox ID="ChartComboBox" Runat="Server">

<Items>

<telerik:RadComboBoxItem Runat="Server" Text="Bar Chart" Value="BarChart" />

<telerik:RadComboBoxItem Runat="Server" Text="Stacked Bar Chart" Value="StackedBarChart" />

</Items>

</telerik:RadComboBox>

</div>

</fieldset>

<div class="BottomButton">

<asp:UpdatePanel>

<ContentTemplate>

<telerik:RadButton ID="ApplySettings" Runat="Server" Text="Apply" OnClientClicked="CloseAndSave" />

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Note that for my example the most-relevant portion of the code is located within the "RefreshProperties" div.
In addition, note that I am able to reproduce this issue with the CSS file commented out. I'll provide it at the end of this document just for the sake of it, but you should not need it.

//SharedSettingsFunctionality.js

//Contains functionality that all the dialog windows share in common. I found that I was maintaing a lot of code in multiple places unnecessarily.

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function OnGetDockAttributesFailure(errors) {

alert(errors);

}

function SetAutoRefreshState() {

var autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);

var wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);

var label = $(wrapperElement.getElementsByTagName("label")[0]);

if ($('#' + window.autoRefreshCheckBoxID).is(':checked')) {

autoRefreshNumericTextBox.enable();

label.addClass("LabelEnabled");

label.removeClass("LabelDisabled");

}

else {

autoRefreshNumericTextBox.disable();

label.addClass("LabelDisabled");

label.removeClass("LabelEnabled");

}

//CustomLocalSettings.js

function pageLoad() {

var oWindow = GetRadWindow();

var dockID = oWindow.argument;

if (dockID) {

InitializeForm(dockID);

}

oWindow.argument = null;

}

function InitializeForm(dockID) {

SetAutoRefreshState();

$('#' + window.autoRefreshCheckBoxID).click(SetAutoRefreshState);

window.PageMethods.GetDockAttributes(dockID, OnGetDockAttributesSuccess, OnGetDockAttributesFailure);

}

//Pass the dialog data back to Dashboard.

function CloseAndSave() {

var oWindow = GetRadWindow();

var customAttributes = {};

customAttributes["RefreshEnabled"] = $('#' + window.autoRefreshCheckBoxID).is(':checked');

customAttributes["RefreshInterval"] = $find(window.autoRefreshNumericTextBoxID).get_value();

customAttributes["ChartType"] = $find(window.chartComboBoxID).get_value();

oWindow.argument = customAttributes;

oWindow.close();

oWindow.argument = null; //Important because pageLoad gets called once more after oWindow closes.

}

function OnGetDockAttributesSuccess(result) {

var dockData = $.parseJSON(result);

//Change the initial loading state based on the dock's known settings.

if (dockData["RefreshEnabled"]) {

$('#' + window.autoRefreshCheckBoxID).attr('checked', true);

var autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);

autoRefreshNumericTextBox.set_value(dockData["RefreshInterval"]);

autoRefreshNumericTextBox.enable();

var wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);

var label = $(wrapperElement.getElementsByTagName("label")[0]);

label.addClass("LabelEnabled");

label.removeClass("LabelDisabled");

}

$find(window.chartComboBoxID).findItemByValue(dockData["ChartType"]).select();

$('#Content').show();

GetRadWindow().autoSize();

}

Okay, once again, most of this is not necessary -- but if it came down to it I wanted Telerik to be able to build easily.

Anyway, the following code executes:

CustomLocalSettings - pageLoad (calling InitializeForm);
CustomLocalSettings - InitializeForm (calling SetAutoRefreshState );
SharedSettingsFunctionality - SetAutoRefreshState: This method sets my input controls to disabled initially on default behavior.

At this point the code relevant to this discussion has fired, the window loads, and looks fine. AutoRefreshNumericTextBox is disabled, as well as it's associated CheckBox. The user then clicks the CheckBox to enable the AutoRefreshNumericTextBox. When it becomes enabled, the input holds its location but the label and arrow-adjuster break from their div and drop.

This in itself wasn't that weird, bugs happen, but there's some other weird things to mention:

I have this exact same code on another dialog window which uses ContentTemplate instead of directing to a separate page. It does not experience this issue. Only having the FormDecorator on a page which is loading seems to cause the issue.
If I tell FormDecorator to use DecorationZoneID = "Content" then I see a change in the error. Instead of arising when the input control becomes enabled (the control enables fine..), I see the div break out when I press the 'Up' arrow on the RadNumericTextBox.
Similarly, if I tell the control to skip decorating TextBox's, the control renders fine until I press the 'Up' arrow.

If I disable the FormDecorator I do not see any issues.

I performed a diff of the HTML mark-up being rendered before/after the control breaks from the div. The only change I saw, other than the CssClass changing from LabelEnabled to LabelDisabled, was that the RadNumericTextBox gained maxlength="524288"

The control does not gain this property when it is loaded inside of the ContentTemplate RadWindow.

Other information:

//CustomLocalSettings CSS

body

{

font-size: 12px;

font-family: "segoe ui", arial, sans-serif;

overflow: hidden;

/*Leave this for auto-sizing behavior under IE*/

width: 403px;

}

.LabelEnabled,

.riTextBox

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.BottomButton

{

padding-top: 7px;

margin-left: 170px;

padding-bottom: 7px;

}

#RefreshArea

{

padding: 2px;

}

/*Leave this for IE8: Extends the fieldset to make it look proper.*/

#ChartArea

{

width: 378px;

}

#RefreshLeftSide

{

float: left;

margin-top: 3px;

}

#RefreshRightSide

{

float: left;

margin-left: 5px;

}

.rfdRoundedWrapper_fieldset

{

display: block\9 !important;

}

#RefreshArea,

#ChartArea

{

overflow: auto\9;

margin: 4px 5px 8px 5px\9;

}

._Telerik_IE9 #RefreshArea,

._Telerik_IE9 #ChartArea

{

margin: 0px;

}

#Content

{

display: none;

}

PasteBins for HTML Diffs:

RadWindow which points to .ASPX

Before Broken: http://pastebin.com/8Sb0wZwc
After Broken: http://pastebin.com/QAGg3GYq

RadWindow using content template:

Before (Never Breaks): http://pastebin.com/zd1bijGH
After (Still OK): http://pastebin.com/GH3QXXHx

See attached for 3 screenshots.

Thank you for your time. I hope I have provided enough information for you guys to track this down on your end. Hopefully it's not a super simple mistake on my end...

FormDecorator

answered on 20 Dec 2011

6 answers

165 views

[Solved] Use Dock as Panel

Hi,

I'd like to use the dock control as a panel control that works with the normal flow of a web page. No docking etc functionality. Is that possible with it as it stands?

If not possible, is there a way to use a div couples with the styles of the Dock to get it working.

This should be created as a panel control as I'm sure that many developers would find it useful.

Regards,

Jon

Dock

answered on 20 Dec 2011

1 answer

132 views

Urgent Requirement plz:How to get the radrotator to be shown next when i clicked on controlbuttons in client side code

Hi,

I've a radrotator (which has property

EnableRandomOrder="true" and

PauseOnMouseOver

="false"

as below. In the attached image below, Next Item to be shown is Disease Analytics when i click on the ControlButtons in right side. How can i access the index/ item itself on click of the control button in javacript. I need the next item/previous item to be shown when i click on the controlbuttons in javascript only as I've to update the description of the selected item using ajaxmanager and also on random click on the radrotator item(which is an image) corresponding description has to be shown.
Below is the javascript for

function OnClientButtonClick(sender, args) {

var objArgs;

debugger;

if (typeof sender._nextItemIndex === "undefined")

objArgs = 0;

else {

if (sender._nextItemIndex == null)

objArgs = 0;

else

objArgs = sender._nextItemIndex;

}

//sender.get_currentItem().get_index();