Questions on UI for ASP.NET AJAX Forum

4 answers

102 views

I have created a server control that contains various Telerik controls, however it seems whenever I include a RadListBox control on the page, it completely breaks the entire styling/rending of the page that the control is included in. The page that the control gets loaded into also gets loaded into a RadWindow. I tried commenting out all events and even the managed server side stuff that modifies the controls, and it still breaks the entire page. It seems like something goes wrong in rendering and one of the managers can't load the skins/CssClass(es) somehow, or maybe the manager breaks in applying them. I also don't get any javascript errors or exceptions when debugging so I have no idea how to troubleshoot this.

AddEditUser.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditUser.ascx.cs" Inherits="Caw.ClientAccessWeb.Main.Users.AddEditUser" %>

<telerik:RadToolBar ID="AddEditUserToolBar" Width="100%" runat="server" OnButtonClick="AddEditUserToolBar_Click">

<Items>

<telerik:RadToolBarButton runat="server" Text="Save Changes" CommandName="Save" CommandArgument="" ImageUrl="~/Main/Content/Images/Icons/check.png" CausesValidation="true" />

<telerik:RadToolBarButton runat="server" Text="Save And Add Another" CommandName="Save" CommandArgument="true" ImageUrl="~/Main/Content/Images/Icons/check.png" CausesValidation="true" Visible="false" />

<telerik:RadToolBarButton runat="server" Text="Cancel" CommandName="Cancel" ImageUrl="~/Main/Content/Images/Icons/delete.png" CausesValidation="false" />

</Items>

</telerik:RadToolBar>

<div >

<div class="PageViewHeader" >

<asp:Label ID="AddEditLabel" runat="server" CssClass="LabelFont"></asp:Label>

</div>

<div class="riTextBox"></div>

<input type="hidden" id="UserIdHidden" runat="server" />

<input type="hidden" id="ClientIdHidden" runat="server" />

<input type="hidden" id="CurrentUsernameHidden" runat="server" />

<div style="width: 100%">

<telerik:RadTextBox ID="UsernameTextBox" runat="server" Label="Username" Width="400px" WrapperCssClass="EmailRTBWrapper" />

<asp:Label ID="UsernameRequiredImage" runat="server" Visible="true" CssClass="TelerikFont">*</asp:Label>

<asp:RequiredFieldValidator

ID="UserNameRequired"

runat="server"

ControlToValidate="UsernameTextBox"

Display="Dynamic"

ErrorMessage="Username is required"

EnableClientScript="true"

CssClass="TelerikFont"

ForeColor="DarkRed" Width="45%"/>

<asp:RegularExpressionValidator

ID="UsernameExpression"

runat="server"

ControlToValidate="UsernameTextBox"

ValidationExpression=""

ErrorMessage="Username already exists"

Display="Dynamic"

CssClass="TelerikFont"

ForeColor="DarkRed" />

</div>

<div style="width: 100%">

<telerik:RadTextBox ID="FullNameTextBox" runat="server" Label="Full Name" Width="400px" WrapperCssClass="EmailRTBWrapper" />

<asp:Label ID="FullNameRequiredImage" runat="server" Visible="true" CssClass="TelerikFont">*</asp:Label>

<asp:RequiredFieldValidator

ID="FullNameRequired"

runat="server"

ControlToValidate="FullNameTextBox"

Display="Dynamic"

ErrorMessage="Full Name is required"

EnableClientScript="true"

CssClass="TelerikFont"

ForeColor="DarkRed" />

</div>

<div style="width: 100%">

<telerik:RadTextBox ID="EmailTextBox" runat="server" Label="Email Address" Width="400px" WrapperCssClass="EmailRTBWrapper" />

<asp:RegularExpressionValidator

ID="EmailExpression"

runat="server"

ControlToValidate="EmailTextBox"

ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

ErrorMessage="Invalid email address"

Display="Dynamic"

CssClass="TelerikFont"

ForeColor="DarkRed"/>

</div>

<p class="HelpText TelerikFont" style="padding-left: 5px;"><span style="font-weight:bold;">Password Requirements:</span> <%= Configuration.PasswordPolicy.ToString() %></p>

<div style="width: 100%">

<telerik:RadTextBox ID="PasswordTextBox" runat="server" Label="Password" Width="400px" WrapperCssClass="EmailRTBWrapper" TextMode="Password" />

<asp:Label ID="PasswordRequiredImage" runat="server" Visible="false" CssClass="TelerikFont">*</asp:Label>

<asp:RequiredFieldValidator

ID="PasswordRequired"

runat="server"

ControlToValidate="PasswordTextBox"

Display="Dynamic"

ErrorMessage="Password is required"

EnableClientScript="true"

CssClass="TelerikFont"

Enabled="false"

ForeColor="DarkRed" />

<asp:RegularExpressionValidator

ID="PasswordLengthExpression"

runat="server"

ControlToValidate="PasswordTextBox"

ValidationExpression=""

ErrorMessage=""

Display="Dynamic"

CssClass="TelerikFont"

ForeColor="DarkRed" />

<asp:RegularExpressionValidator

ID="PasswordAlphaExpression"

runat="server"

ControlToValidate="PasswordTextBox"

ValidationExpression="^.*(?=.*[a-z]|[A-Z]).*$"

ErrorMessage="Password must contain at least one alpha character"

Display="Dynamic"

Enabled="false"

CssClass="TelerikFont"

ForeColor="DarkRed" />

<asp:RegularExpressionValidator

ID="PasswordNumberExpression"

runat="server"

ControlToValidate="PasswordTextBox"

ValidationExpression="^.*(?=.*[\d]).*$"

ErrorMessage="Password must contain at least one number"

Display="Dynamic"

Enabled="false"

CssClass="TelerikFont"

ForeColor="DarkRed" />

<asp:RegularExpressionValidator

ID="PasswordSpecialExpression"

runat="server"

ControlToValidate="PasswordTextBox"

ValidationExpression="^.*(?=.*[\W]).*$"

ErrorMessage="Password must contain at least one special character"

Display="Dynamic"

Enabled="false"

CssClass="TelerikFont"

ForeColor="DarkRed" />

<asp:RegularExpressionValidator

ID="PasswordMixedCaseExpression"

runat="server"

ControlToValidate="PasswordTextBox"

ValidationExpression="^.*(?=.*[a-z])(?=.*[A-Z]).*$"

ErrorMessage="Password must contain at least one lowercase and one uppercase letter"

Display="Dynamic"

Enabled="false"

CssClass="TelerikFont"

ForeColor="DarkRed" />

</div>

<br />

<telerik:RadButton ID="AccountLockedCheckBox" runat="server" Text="Account Locked" ButtonType="ToggleButton" AutoPostBack="false"

ToggleType="CheckBox" CssClass="SettingsRadCheckBox" />

<telerik:RadButton ID="Permission_OverrideIpRestrictionsCheckBox" runat="server" Text="Override IP Restrictions" AutoPostBack="false"

ButtonType="ToggleButton" ToggleType="CheckBox" Visible="false" CssClass="SettingsRadCheckBox" />

<input type="hidden" ID="Permission_OverrideIpRestrictionsHidden" runat="server" value="OverrideIpRestrictions"

Visible="false"/>

<telerik:RadButton ID="PasswordExpiredCheckBox" runat="server" Text="Password Expired" ButtonType="ToggleButton" AutoPostBack="false"

ToggleType="CheckBox" CssClass="SettingsRadCheckBox" />

<br /><br />

<telerik:RadListBox ID="ClientSourceListBox" runat="server" DataKeyField="Number" DataValueField="Id" Height="200px"

CssClass="LeftListBox" ToolTip="Select Clients For The New User To Access"

AllowTransfer="true" TransferMode="Move" TransferToID="ClientDestinationListBox" AllowTransferOnDoubleClick="true"

SelectionMode="Multiple" />

<telerik:RadListBox ID="ClientDestinationListBox" runat="server" DataKeyField="Number" DataValueField="Id" Height="200px"

CssClass="RightListBox" AllowTransferOnDoubleClick="true" SelectionMode="Multiple"

ToolTip="Clients The New User May Access" />

<fieldset id="PermissionFieldSet" runat="server" class="rfdRoundedCorners">

<legend>Permissions</legend>

</fieldset>

<telerik:RadScriptBlock runat="server">

<script type="text/javascript">

// This function may be used as a utility or event handler function. Sender is a RadButton object from event or

// ID of a hierarchy control element to find object from.

function EnableOptions(sender, eventArgs) {

// NOTE: The sending button handle object contains the fieldSetId in the RadButton's CommandArgument attribute

var setElement = null;

if ( typeof(sender) == "object" ) {

// if the type is object the function was called as event handler

setElement = sender;

}

else {

// the ID was passed as a string from function called as utility

setElement = $find(sender);

}

var fieldElement = $("#" + setElement.get_commandArgument())[0];

var cboxes = fieldElement.getElementsByTagName('a');

for (var j = 0; j < cboxes.length; j++) {

var subObject = $find(cboxes[j].id);

var checked = setElement.get_checked();

if (!checked) subObject.set_checked(false);

subObject.set_enabled(checked);

}

function LoadWindow() {

<%= LoadScripts %>

}

$.SiteUtilities_PageLoad(function() { LoadWindow(); });

</script>

</telerik:RadScriptBlock>

</div>

ListBox

answered on 10 Sep 2012

1 answer

110 views

Browser output dependent on screen resolution.

Using the telerik controls when we display grids we observe that there is no provision to adjust size of the grid according to the Client Browser resolution. Please point us to a way to adjust the page size as per target browser resolution.

For e.g. see the blank space on a particular resolution in the file attached.

Grid

answered on 10 Sep 2012

1 answer

183 views

Raddatepicker calendar select today's date

Hi!

I use a raddatepicker on my page. If the user opens the calendar, I want that today's date is highlighted . I don't want to set the date of the raddatepicker itself, only the date in the calendar. Is this possible? I've tried the focuseddate and selecteddate, but nothing changed.

Input

answered on 10 Sep 2012

6 answers

150 views

PanelBar Expand items

Is there a way to control what items will be expended when panel bar is first loaded?
By default it seams to collapse everything.
I would like to have the second level expended.

PanelBar

answered on 10 Sep 2012

2 answers

99 views

Telerik grid sorting from an outside combobox

When i am applying sorting on grid outside from a dropdown (sorting grid not by clicking on the grid header)

how can i change the corresponding column header in the grid to show the SortIcon

i have already tried

radgrid.Columns[3].SortAscImageUrl="image url";

radgrid.Columns[3].ShowSortIcon=true;

but this is only applying when the normal grid header sort event fires

not from outside of the grid (from dropdown)

please provide a solution for this ASAP

Grid

answered on 10 Sep 2012

1 answer

90 views

2 RadRotator conflicting css

top RadRotator using mycustomskin (as set up like http://www.telerik.com/help/aspnet-ajax/rotator-css-classes-and-their-use.html); second RadRotator not using custom skin - problem: 2nd radRotator picking up css from the first.

Rotator

answered on 10 Sep 2012

1 answer

119 views

RadComboBox Clear

I have a combo box that is set to AllowCustomText = "True", however, I just cant seem to get it to clear. Here is my code:

<telerik:RadComboBox ID="rcb_Users" Runat="server" AutoPostBack="True"

DataSourceID="sds_UserList" DataTextField="UserName" AllowCustomText = "True"

DataValueField="UserName" EmptyMessage="Select User" Height="150px"

Skin="WebBlue" EnableAutomaticLoadOnDemand="True" EnableVirtualScrolling="True"

ItemsPerRequest="100" ShowMoreResultsBox="True" OnClientKeyPressing="HandleKeyPressUN">

</telerik:RadComboBox>

Private Sub ClearRCB_LUUserName()

rcb_Users.ClearSelection()

rcb_Users.Text = String.Empty

End Sub

Any help much appreciated.

ComboBox

answered on 10 Sep 2012

2 answers

225 views

Need to display Radgrid columns according to screen resolution

Hi,
i have a radgrid which is exceeding the page size when i gave the width in "%". if i gave width in pixels it is not displaying according to page resolution.

plz suggest me how to override the style properties of radgrid.
<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="SampleGrid">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="SampleGrid" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="clrFilters">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="SampleGrid" />
                        <telerik:AjaxUpdatedControl ControlID="clrFilters" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div id="divDefCols" style="height: 1600px; width: 100%; min-width: 730px; overflow-x: auto;
            overflow-y: auto; border: 1px solid;">
            <asp:LinkButton runat="server" ID="btnSaveSettings" Text="Set as Default setting"
                Font-Bold="false" Font-Size="Small" Width="150px" OnClick="btnSaveSettings_Click" />
            <asp:Image runat="server" ID="InfoImage" Visible="false" EnableViewState="false"
                Style="float: left;" ImageUrl="Images/UpdateActivity.gif" /><asp:Label runat="server"
                    ID="StatusLabel" Font-Bold="false" Font-Size="Small" ForeColor="Red" EnableViewState="false"></asp:Label>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="LoadingPanel1"
                Width="190px">

                        <telerik:RadGrid ID="SampleGrid" EnableAJAX="True" EnableAJAXLoadingTemplate="True"
                            LoadingTemplateTransparency="50" Skin="Office2007" runat="server" AllowSorting="True"
                            AllowFilteringByColumn="True" AllowPaging="True" ShowFooter="True" ShowHeader="true"
                            CellSpacing="0" OnNeedDataSource="SampleGrid_NeedDataSource" OnColumnCreating="SampleGrid_ColumnCreating"
                            OnItemDataBound="Sample_ItemDataBound" OnItemCommand="SampleGrid_ItemCommand"
                            PageSize="50" GridLines="Vertical" AutoGenerateColumns="false" ShowSortIcon="true"
                            Height="900px" ShowGroupPanel="True">
                            <ClientSettings AllowDragToGroup="True">
                            </ClientSettings>
                            <FilterMenu EnableImageSprites="False">
                            </FilterMenu>
                            <MasterTableView EnableHeaderContextMenu="true">
                                <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                </RowIndicatorColumn>
                                <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                                    <HeaderStyle Width="20px"></HeaderStyle>
                                </ExpandCollapseColumn>
                                <EditFormSettings>
                                    <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                                    </EditColumn>
                                </EditFormSettings>
                                <HeaderStyle Height="40px" Width="100px" />
                                <ItemStyle Height="30px" Width="100px" Wrap="False" />
                                <AlternatingItemStyle Height="30px" Width="100px" Wrap="False" />
                                <PagerStyle NextPageText="&gt;" PrevPageText="&lt;" AlwaysVisible="true"
                                    Mode="NextPrevAndNumeric"></PagerStyle>
                            </MasterTableView>
                            <ClientSettings AllowColumnHide="true" AllowColumnsReorder="True" ColumnsReorderMethod="Swap">

                            </ClientSettings>
                        </telerik:RadGrid>

            </telerik:RadAjaxPanel>
            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            </telerik:RadScriptBlock>
        </div>

Adv thxs,
Balaji

General Discussions

answered on 10 Sep 2012

0 answers

93 views

RadGrid export

Hi ,
i am using a telerik radGrid and i invoke the exportExcel fonctionality , when exporting i catch the event and i try to saving the result excel file in my disq , My problem is in using french caracter ( é , à , ... ) in grid column title who make chines carracter in my excel file .

protected void GridPJ_GridExporting(object source, GridExportingArgs e)

{

string path = ((CImport)Session["CImport"]).sFileExcel;

using (FileStream fs = File.Create(path))

{

Byte[] info = System.Text.Encoding.Default.GetBytes(e.ExportOutput);

fs.Write(info, 0, info.Length);

}

Session["Export"] = true;

Response.Redirect(Request.Url.ToString());

}

thank's for reply .

Grid

asked on 10 Sep 2012

2 answers

102 views

Replacing thumbnail functionality

Hello guys,

Really love the FileExplorer, but I'd like to tinker with the Thumbnails functionality. In its current state the thumbnail is just a link to the original image. Since I use the FileExplorer control to serve up a gallery of hi-res stock images, my page basically downloads twenty-megabyte JPEGs as "thumbnails". This also results in ugly compression artifacts and distortions as the browser uses its own algorithm to compress the image.

Is there any way to override the thumbnail display functionality either on the client side or on the server side? For example, if I could point the thumbnails to an ASP.NET handler instead of the images themselves I'd be all set to go since I could perform my own high-quality resizing on the server side and serve up small, good quality thumbnails.

Any ideas?

FileExplorer

answered on 10 Sep 2012