Questions on UI for ASP.NET AJAX Forum

7 answers

427 views

I have just created a combobox on my page and need to skin it so it fits with my site and have come across an issue that I can't figure out.

When an item is selected in the combobox that has a length greater than that of the control, the text for the selected value over runs slightly and text appears outside of the input area and over the arrow icon on the end. I have attached a blown up screen shot of my control to show what I mean.

Below is the code used to build my control, as well as the stylesheet which I have properly referenced in my page.

Can anyone spot whats causing this and how I'd go about fixing it?

Thanks
Karl

<telerik:RadComboBox

id="Test15"

runat="server"

width="200px"

Skin="Probitas"

EnableEmbeddedSkins="false"

EmptyMessage="Select a value...">

<Items>

<telerik:RadComboBoxItem Text="One" Value="1" />

<telerik:RadComboBoxItem Text="Two" Value="2" />

<telerik:RadComboBoxItem Text="Three" Value="3" />

<telerik:RadComboBoxItem Text="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789" Value="All" />

</Items>

</telerik:RadComboBox>

and the stylesheet...

/* RadComboBox Simple skin */

/*global*/

.RadComboBox_Probitas,

.RadComboBox_Probitas .rcbInput,

.RadComboBoxDropDown_Probitas

{

font: 12px "Segoe UI", Arial, sans-serif;

color: #333;

}

/* combobox */

div.RadComboBox_Probitas table td.rcbInputCell

{

height: 18px;

line-height: 18px;

border: 1px solid #10568A;

background: #fff;

}

* html div.RadComboBox_Probitas table td.rcbInputCell

{

height /**/: 20px;

line-height /**/: 20px;

}

div.RadComboBox_Probitas table td.rcbInputCellLeft { border-width: 1px 0 1px 1px; }

div.RadComboBox_Probitas table td.rcbInputCellRight { border-width: 1px 1px 1px 0; }

* html div.RadComboBox_Probitas .rcbInputCell .rcbInput

{

height /**/: 16px;

padding /**/: 2px 0; /* This should fix the ajax introduced height in IE7 and not break IE6 */

}

.RadComboBox_Probitas .rcbInputCell .rcbEmptyMessage

{

color: #666;

}

.RadComboBox_Probitas .rcbHovered .rcbInputCell .rcbInput,

.RadComboBox_Probitas .rcbFocused .rcbInputCell .rcbInput { color: #333333; }

div.RadComboBox_Probitas table td.rcbArrowCell

{

border: 1px solid #10568A;

background: #fff url('ComboBox/rcbSprite.png') no-repeat -1px 50%;

}

div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellLeft,

div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellLeft { border-width: 1px 1px 1px 1px; }

div.RadComboBox_Probitas .rcbReadOnly .rcbArrowCellRight,

div.RadComboBox_Probitas .rcbArrowCellHidden.rcbArrowCellRight { border-width: 1px 1px 1px 1px; }

.RadComboBox_Probitas td.rcbArrowCell { background-position: -1px 50%; }

.RadComboBox_Probitas .rcbHovered .rcbArrowCell { background-position: -21px 50%; }

.RadComboBox_Probitas .rcbFocused .rcbArrowCell { background-position: -41px 50%; }

.RadComboBox_Probitas .rcbDisabled .rcbArrowCell { background-position: -61px 50%; }

.RadComboBox_Probitas .rcbReadOnly td.rcbArrowCell { background-position: -2px 50%; }

.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCell { background-position: -22px 50%; }

.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCell { background-position: -42px 50%; }

.RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCell { background-position: -62px 50%; }

.RadComboBox_Probitas td.rcbArrowCellHidden,

.RadComboBox_Probitas .rcbHovered td.rcbArrowCellHidden,

.RadComboBox_Probitas .rcbFocused td.rcbArrowCellHidden,

.RadComboBox_Probitas .rcbReadOnly td.rcbArrowCellHidden,

.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden,

.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden,

.RadComboBox_Probitas .rcbDisabled .rcbReadOnly .rcbArrowCellHidden,

.RadComboBox_Probitas table.rcbDisabled td.rcbArrowCellHidden

{

/*background: #none; */

background: #ffffff;

}

.RadComboBox_Probitas .rcbHovered .rcbArrowCell,

.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbInputCell,

.RadComboBox_Probitas .rcbHovered .rcbReadOnly .rcbArrowCellHidden { background-color: #ffffff; }

.RadComboBox_Probitas .rcbFocused .rcbArrowCell,

.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbInputCell,

.RadComboBox_Probitas .rcbFocused .rcbReadOnly .rcbArrowCellHidden { background-color: #ffffff; }

div.RadComboBox_Probitas .rcbHovered .rcbArrowCell,

div.RadComboBox_Probitas .rcbHovered .rcbInputCell { border-color: #10568A; }

div.RadComboBox_Probitas .rcbFocused .rcbArrowCell,

div.RadComboBox_Probitas .rcbFocused .rcbInputCell { border-color: #10568A; }

div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell,

div.RadComboBox_Probitas .rcbDisabled .rcbInputCell { border-color: #10568A; }

div.RadComboBox_Probitas .rcbArrowCell a

{

height: 20px;

}

div.RadComboBox_Probitas td.rcbArrowCellHidden,

div.RadComboBox_Probitas .rcbArrowCellHidden a

{

width: 1px;

}

div.RadComboBox_Probitas td.rcbArrowCellHidden.rcbArrowCellRight

{

border-left: 1px solid #10568A;

}

/* Read-only styles */

/* dropdown */

.RadComboBoxDropDown_Probitas

{

background: #fff;

border-color: #10568A;

}

.RadComboBoxDropDown_Probitas .rcbHeader,

.RadComboBoxDropDown_Probitas .rcbFooter

{

background: #e4e4e4;

color: #000;

}

.RadComboBoxDropDown_Probitas .rcbHeader

{

border-bottom-color: #10568A;

}

.RadComboBoxDropDown_Probitas .rcbFooter

{

border-top-color: #10568A;

}

.RadComboBoxDropDown_Probitas .rcbItem em

{

background: #ffffff;

}

div.RadComboBoxDropDown_Probitas .rcbHovered

{

background: #ffffff;

color: #ffffff;

border: 1px solid #10568A;

padding: 1px 5px;

}

.RadComboBoxDropDown_Probitas .rcbSeparator

{

color: #cc0000;

background: #0000cc;

/*

color: #fff;

background: #8a8a8a;

*/

}

.RadComboBox_Probitas .rcbDisabled .rcbInputCell .rcbInput,

.RadComboBoxDropDown_Probitas .rcbDisabled

{

color: #888888;

}

.RadComboBoxDropDown_Probitas .rcbLoading

{

background: #ffffff;

}

.RadComboBoxDropDown_Probitas .rcbMoreResults

{

border-top-color: #10568A;

background: #ffffff;

color: #333333;

}

.RadComboBoxDropDown_Probitas .rcbMoreResults a

{

background: url('ComboBox/rcbSprite.png') no-repeat -1px -85px;

}

div.RadComboBox_Probitas .rcbInputCell

{

border-color: #10568A;

}

.RadComboBox_Probitas .rcbInput

{

color: #000000;

}

DIV.RadComboBox_Probitas .rcbArrowCell

{

border-color: #10568A;

}

div.RadComboBox_Probitas .rcbHovered .rcbInputCell

{

border-color: #10568A;

}

div.RadComboBox_Probitas .rcbHovered .rcbInput

{

color: #000000;

}

.RadComboBox_Probitas .rcbHovered .rcbArrowCell

{

border-color: #10568A;

background-color: #FFFFFF;

}

div.RadComboBox_Probitas .rcbFocused .rcbInputCell

{

border-color: #10568A;

}

div.RadComboBox_Probitas .rcbFocused .rcbInput

{

color: #000000;

}

div.RadComboBox_Probitas .rcbFocused .rcbArrowCell

{

background-color: #FFFFFF;

}

div.RadComboBox_Probitas .rcbDisabled .rcbInputCell

{

border-color: #888888;

}

div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell

{

border-color: #888888;

}

div.RadComboBoxDropDown_Probitas

{

border-color: #10568A;

}

div.RadComboBoxDropDown_Probitas .rcbHeader

{

background-color: #BCD1E1; /*light blue*/

}

div.RadComboBoxDropDown_Probitas .rcbHovered

{

border: #10568A 1px solid;

background-color: #BCD1E1;

color: #000000;

}

/*General*/

div.RadComboBox_Probitas .rcbInputCell

{

border-color: #10568A;

border-right: #10568A 1px solid;

}

div.RadComboBox_Probitas .rcbArrowCell

{

border-color: #10568A;

}

/*Hovered*/

div.RadComboBox_Probitas .rcbHovered .rcbInputCell

{

border-right: #10568A 1px solid;

}

div.RadComboBox_Probitas .rcbHovered .rcbInput

{

color: #000000;

}

/*Focused*/

div.RadComboBox_Probitas .rcbFocused .rcbInputCell

{

border-right: #10568A 1px solid;

border-color: #10568A;

}

div.RadComboBox_Probitas .rcbFocused .rcbInput

{

color: #000000;

}

/*Disabled*/

div.RadComboBox_Probitas .rcbDisabled .rcbInputCell

{

border-right: #888888 1px solid;

border-color: #888888;

}

div.RadComboBox_Probitas .rcbDisabled .rcbInput

{

color: #888888;

}

div.RadComboBox_Probitas .rcbDisabled .rcbArrowCell

{

border-color: #888888;

color: #888888;

}

ComboBox

answered on 24 Mar 2011

4 answers

102 views

Dock Index gets over written??

Hi,

I currently have a page which has 8 docks spread between two docking zones. These are not dynamic and are coded into the page. My aim is to give the user the ability to save the position of the dock, it's collapse state and whether it viewable or not. everything works in that respect apart from one thing, the Index of the dock. I chose to use javascript (postbacks, update panels and web services were not an option) to save the state of the docks in a cookie when certain client side events fire, I then access this cookie on Page_Init and LoadDockLayout and apply to the relevant dock. when debugging in VS these events are hit and the information in the state is correct i.e. the index of the dock is the index that it should be. I have tried to manually set the index after calling ApplyState(), see below:

For Each dock As RadDock In RadDockLayout1.RegisteredDocks

Dim uniqueName As String = dock.UniqueName

Dim title As String = dock.Title

Dim index As Integer = dock.Index

Dim id As String = dock.ID

If Not (uniqueName = "") Then

Dim state As DockState = DockState.Deserialize(states(uniqueName).ToString())

dock.ApplyState(state)

Dim iIndex As Integer = state.Index

dock.Index = iIndex

Dim zone As String = state.DockZoneID

dock.DockZoneID = zone

dock.UniqueName = uniqueName

dock.Title = title

dock.EnableAnimation = True

dock.Width = Unit.Pixel(250)

dock.EnableRoundedCorners = True

dock.Style.Value = "margin-bottom: 10px !important;"

End If

Next

Unfortunately for some reason the Index of the dock gets over written somewhere along the line and when the page loads the docks are all correct in terms of state apart from the order in which they appear in the dock zone's. For some reason the Index I set in the code behind gets over written with the index that it is on the markup page, below is a cut down example:

<telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Height="100%" >

<telerik:RadDock ID="RadDock9" UniqueName="RadDock9" runat="server" Title="License Information" Width="250px" DockMode="Docked"

EnableAnimation="true" EnableRoundedCorners="true" Resizable="true" OnClientInitialize="DockInit" OnClientDockPositionChanged="OnDockChange"

OnClientCommand="OnClientCommand" Style="margin-bottom: 10px !important;">

<ContentTemplate>

<uc8:license ID="license1" runat="server" />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock8" UniqueName="RadDock8" runat="server" Title="Sales Basket" Width="250px" DockMode="Docked"

EnableAnimation="true" EnableRoundedCorners="true" OnClientInitialize="DockInit" OnClientDockPositionChanged="OnDockChange"

OnClientCommand="OnClientCommand" Resizable="true" Style="margin-bottom: 10px !important;">

<ContentTemplate>

<uc10:SalesBasket ID="SalesBasket" runat="server" />

</ContentTemplate>

</telerik:RadDock>

</<telerik:RadDockZone>

In the code above if I were to set the index of RadDock8 to 0 and the index of RadDock9 to 1 it would load with RadDock9 with an index of 0 and Raddock8 with an index of 1. I have been through all the code and as already stated the correct index's are being passed and applied, but they just get over written somewhere and for some reason?

After looking at some other threads I can see that this was a bug in the past (http://www.telerik.com/community/forums/aspnet-ajax/docking/index-of-dockstate-not-persisting.aspx), has this been fixed now? Am I going about it the wrong way or missing something?

Regards

James

Dock

answered on 24 Mar 2011

1 answer

93 views

Adding a DatePicker or other control to the RadRibbonBar

Dear Telerik,

For navigating through days in my web application, it would be ideal to have a way of selecting a date in the RibbonBar (where all my other buttons are located). I have found that the WinForms variant of this control supports a RadHostItem in which you can place any control. Would something similar be possible with the ASP.Net RadRibbonBar?

Kind regards,

Datamex

RibbonBar

answered on 24 Mar 2011

2 answers

91 views

Overwrite on file drag

Is there any way to allow an overwrite when someone drags a file to a folder that already has a file with that name? I know it works on the Upload functionality but I need it to allow it for a drag and drop also.

thanks!

FileExplorer

answered on 24 Mar 2011

1 answer

130 views

Telerik AJAX NOT working Masterpage/Contentpage

Can you explain why the content page continues to blink and why the telerik controls do not work as advertised?

Site Master:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="TelerikAjaxStandard.Site1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebContentForm1.aspx.cs" Inherits="TelerikAjaxStandard.WebContentForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
    <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>

    </AjaxSettings>

</telerik:RadAjaxManagerProxy>

    <telerik:RadGrid ID="RadGrid1" runat="server"
                     DataSourceID="SqlDataSource_Course" GridLines="None"
                     Width="400px"
                     AutoGenerateColumns="False">

    <asp:SqlDataSource ID="SqlDataSource_Course" runat="server"
        ConnectionString="<%$ ConnectionStrings:SchoolConnectionString %>"
        SelectCommand="SELECT [Title], [Credits], [CourseID] FROM [Course] ORDER BY [Title]"></asp:SqlDataSource>

</asp:Content>

Ajax

answered on 24 Mar 2011

4 answers

293 views

Add RadDatePicker to RadGrid inline editmode in codebehind!

Hi!
I'm new to telerik components so this is propably very easy.
Could somebody show me how to add a RadDatePicker to Radgrid datefield.
I need the datepicker when in inline editmode.

I'm only interested in how it's done in codebehind (vb.net)

The snippet below shows how i fill the RadGrid and it works fine.

Private Sub test()

With tabell

.Columns.Add("Test")

.Columns.Add("TEST!")

.Columns.Add("KNamn")

.Columns.Add("W_Name")

.Columns.Add("W_Message")

.Columns.Add("date")

.Columns.Add("Post_ID")

End With

' sql connection goes here.......

Dim r As DataRow

While SQLReader.Read

r = tabell.NewRow

r.Item(0) = (SQLReader("kundNr"))

r.Item(1) = (Roomname.Dequeue.ToString)

r.Item(2) = (SQLReader("Kund_Namn"))

r.Item(3) = (SQLReader("Welcome_Name"))

r.Item(4) = (SQLReader("Welcome_Message"))

r.Item(5) = (SQLReader("date")) ' here i need a RadDatePicker

r.Item(6) = (SQLReader("Post_Id"))

tabell.Rows.Add(r)

End While

SQLReader.Close()

SQLConn.Close()

RadGrid1.DataSource = tabell

RadGrid1.DataBind()

End Sub

Calendar

answered on 24 Mar 2011

3 answers

260 views

RadAjaxPanel - excluding control from async postback

I need full postback when one of the buttons within RadAjaxPanel is clicked. I followed the documentation section "Exclude controls from ajaxifying" by registering postback on page load

ScriptManager1.RegisterPostBackControl(Button2);

This works, but only once. When the same or another button is clicked after the first time, nothing happens. No postbacks.

This may have something to do with SharePoint because the code runs fine if the control under ASP.NET, but once the control is deployed to SharePoint, postback occurs only once.

How can I troubleshoot this problem?

Thanks,

-Stan

Ajax

answered on 24 Mar 2011

1 answer

198 views

RadGrid case-insensitive sort?

I have a RadGrid bound to an IList<SomeType>, where SomeType is defined as a struct with two string properties (e.g., A and B). In the Grid, column 0 displays property A and column 1 displays property B. Both properties contain data in mixed case.

The grid sorts the data in a case-sensitive manner, such that "AA" is the first item and "zz" is the last item, and "Music" and "music" are not next to each other:

Is there a way to make the grid perform the sort in a case-insensitive manner? How do people normally handle this situation with the RadGrid? Do I need to do a case-insensitive sort of the data and rebind (AKA "custom sorting")?

Thanks!

General Discussions

answered on 24 Mar 2011

0 answers

48 views

RaeEditor - Silvelight dialog problems

Hello,

I'm facing three problem with the silverlight dialog within the RTL RadEditor:
1) The Dialog is not designed well in RTL mode (Common problem for all dialogs in RTL mode).
Please view the attached image.

2) As you can see in the attached image I can't add InitParameters to the silverlight control. Is there any way to set the InitParameters without using the HTML Mode of the RadEditor (I mean manually)? Is there any way to add fields to this dialog? If it is possible, please explain to me how I can do that?

3) What does the following properties means:
    a. Windowless
    b. Auto Upgrade
    c. Enable Hml Access

Please, I need your help in order to solve the above problems.
It is apreciared to send me a code which solves the first two problems and an explaination for the third problem.

Regards,
Bader

Editor

asked on 24 Mar 2011

3 answers

116 views

RadWindow doesn't show when RowDblClick from dynamically loaded usercontrol

Hi there,

I'm facing the following problem:

First I had a web page that consisted of a RadTabStrip. When you clicked on any of its tabs, a RadGrid would be shown (related to its tab). There was one Radgrid in particular that when you double clicked on a row a RadWindow would show and render a PDF as its contents. As anyone might imagine for this I had to set the RadGrid's OnRowDblClick ClientSetting-ClientEvents to a javascript function.
<ClientSettings...
   <ClientEvents OnRowDblClick="RowDblClickAC" />

and the function:
function RowDblClickAC(sender, eventArgs) {
                var oWnd = window.radopen("../Catalogos/CatContent.aspx?" +
                    "NoCredito=" + eventArgs.getDataKeyValue("ID") +
                    "&FechaRegistro=" + eventArgs.getDataKeyValue("DateTrans"),
                    "uld");
                oWnd.setSize(800, 500);
                oWnd.center();
                oWnd.set_modal(true);
                oWnd.set_title = "PDF Content";
            }

and I also had the RadWindowManager code:
<telerik:RadWindowManager ID="rwm" runat="server" Skin="Outlook">
        <Windows>
            <telerik:RadWindow ID="uld" runat="server"
                AutoSize="true" VisibleTitlebar="true"
                VisibleStatusbar="false"
                ReloadOnShow="true" Modal="true" ShowContentDuringLoad="false"
                Skin="Outlook" />
        </Windows>
    </telerik:RadWindowManager>

As anyone can see this code, everything worked OK as soon as the controls were declared declaratively. For performance reasons, I had to re-create the webpage by now loading dynamically each RadGrid. Now when I want to double click on a row, the RadWindow pops up but it stays there "forever" (with a circular loading panel) but without presenting the PDF. As I just mentioned, before everything worked OK.

Please, can someone shed some light on this?

Felix

Window

answered on 24 Mar 2011