Questions on UI for ASP.NET AJAX Forum

4 answers

228 views

Hello,

In my web page, i have 2 list boxes and i also have a radajaxmanager on the page. Everything works as expected on localhost but once i publish it on the server, the list box items are disabled. As they are disabled, i couldn't move the items from source listbox to destination list box.
Can you guys think of any reason why it would behave like that?

Appreciate the help
Thanks

ListBox

answered on 01 May 2012

1 answer

147 views

how to

Hi sir,
I placed one tabcontrol inside the page and i am adding AccessKey it is working (ALT+AcessKey+Enter) that page open but my work (ALT+Acesskey) press that open how to sir ,please help me .how it will work ?

<telerik:RadTabStrip ID="radTabIn" runat="server" Skin="Web20" SelectedIndex="6"

style="float:none" MultiPageID="radIPPage" Width="100%">

<Tabs>

<telerik:RadTab Text="<span class='underline'>R</span>egistration Address" Width="22%"

TabIndex="0" AccessKey="R" ToolTip="Alt+r">

</telerik:RadTab>

<telerik:RadTab Text="<span class='underline'>P</span>atient Details" Width="22%" TabIndex="1" AccessKey="P" ToolTip="Alt+p">

</telerik:RadTab>

<telerik:RadTab Text="<span class='underline'>W</span>ork Address" Width="21%" TabIndex="2" AccessKey="W" ToolTip="Alt+w">

</telerik:RadTab>

<telerik:RadTab Text="Past <span class='underline'>H</span>istroy" Width="25%" TabIndex="3" AccessKey="H"

ToolTip="Alt+h">

</telerik:RadTab>

<telerik:RadTab Text="Aller<span class='underline'>g</span>ies" Width="22%" TabIndex="4" AccessKey="G" ToolTip="Alt+g">

</telerik:RadTab>

<telerik:RadTab Text="Ha<span class='underline'>b</span>its-Immunisation" Width="22%" TabIndex="5" AccessKey="B"

ToolTip="Alt+m">

</telerik:RadTab>

<telerik:RadTab Text="D<span class='underline'>o</span>ctor Details" Width="21%" TabIndex="6"

AccessKey="O" ToolTip="Alt+o" Selected="True">

</telerik:RadTab>

<telerik:RadTab Text="Roo<span class='underline'>m</span> Allotment" Width="25%" TabIndex="7" AccessKey="M" ToolTip="Alt+m">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

TabStrip

answered on 01 May 2012

1 answer

102 views

How to achieve desired functionality

I have a RadComboBox that I would like to have the following functionality:

When you re-enter the text area of the box I would like the text to be automatically selected and when a character is typed for the text to be replaced with the typed character unless that character is the AutoCompleteSeperator (in my case a semicolon) in which case I would like it to append the semicolon to the text that was already there and the drop down to show all items again.

I have it nearly working the combo box looks like this

<telerik:RadComboBox ID="rcbPartNumber" runat="server" TabIndex="7" Width="140px" BackColor="#F9D295"

Skin="Vista" EmptyMessage="All" Font-Size="XX-Small" Height="140px" ShowMoreResultsBox="true"

CausesValidation="false" AllowCustomText="true" MarkFirstMatch="true" ShowDropDownOnTextboxClick="true"

OnClientFocus="ClientFocus" OnClientDropDownOpening="ClientFocus" OnClientKeyPressing="onClientDDLKeyPressing"

EnableVirtualScrolling="true" EnableLoadOnDemand="true" AutoPostBack="true" AutoCompleteSeparator=";" />

with the relevant code looking like this.

function onClientDDLKeyPressing(sender, args) {

var keycode = args.get_domEvent().keyCode;

if ((keycode == 59) || (keycode == 186)) { //a semicolon - it has 2 possible keycodes

var currText = sender.get_text();

varinputBox = sender.get_inputDomElement();

setCaretPosition(sender.get_inputDomElement(), currText.length) //if this isn't done then the typed semicolon appears at the start of the text rather than at the end

}

if ((keycode == 8) || (keycode == 127)) { //a backspace or a delete

sender.set_text('');

}

function ClientFocus(sender, eventArgs) {

var currText = sender.get_text();

sender.set_text(currText);

sender.selectText(0, currText.length);

switch (sender._uniqueId.substr(sender._uniqueId.length - 13, sender._uniqueId.length - 1)) {

case "rcbPartNumber":

var hidPartNumJustGotFocus = document.getElementsByName('<%=hidPartNumJustGotFocus.uniqueId %>');

hidPartNumJustGotFocus[0].value = "1";

break;

}

function setCaretPosition(elemId, caretPos) {

var elem = document.getElementById(elemId);

if (elem != null) {

if (elem.createTextRange) {

var range = elem.createTextRange();

range.move('character', caretPos);

range.select();

}

else {

if (elem.selectionStart) {

elem.focus();

elem.setSelectionRange(caretPos, caretPos);

}

else

elem.focus();

}

the SetFocus definitely works as when I move the focus back to the textarea the current text is selected. however when a semicolon is typed the combo box seems to do an ajax callback as if I have pressed enter and leaves the combo box with the text that was there before the semicolon was typed.

Any ideas as to what I am missing or have done wrong?

ComboBox

answered on 01 May 2012

1 answer

116 views

Missing CausesValidation

I discovered that clicking on certain toolbar buttons in the Image Editor triggers page validation but there is no CausesValidation attribute to turn this behavior off. Do you have a recommended way around this?

ImageEditor

answered on 01 May 2012

5 answers

107 views

Tweak to Related ComboBox Demo

I have been trying to accomplish essentially what the "Related ComboBox" demo does (http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx) but with a slight twist. I want to be able to use the filter. This seems to break the demo and I'm trying to figure out how to "fix" it. Also, when not using the filter (and purely using the keyboard for navigation) you can arrow down and use the tab key to select the highlighted item and advance to the next ComboBox. This also does not work properly with the filter.

To reproduce, I took the demo code and simply added Filter="Contains" and AllowCustomText="False" to all 3 of the RadComboBoxes.

Could someone point me in the right direction to making this work right?

Thanks!

ComboBox

answered on 01 May 2012

5 answers

209 views

Combobox with template

Hello. I've a little issue to get the combobox as I want it to be.
I have, in a database, a table "colors" (let say it only has an "ID" and "code" fields). I want to populate a radcombobox with a small square of each color.

Here's what I do:

<telerik:RadComboBox ID="rcbProdColors" Width="60" runat="server" MarkFirstMatch="false" AllowCustomText="false" DataValueField="ID" >

<ItemTemplate>

<div style=" height:15px;width:15px;border:solid black 1px;background-color: #<%# Eval("Code")%>"></div>

</ItemTemplate>

</telerik:RadComboBox>

And in the code behind:

Dim query = (From c In db.Colors Select c)

rcbProdColors.DataSource = query

rcbProdColors.DataBind()

It's working but not completly.
I have two main issues:

First: The first "item" of the combobox isnt a color square but text saying "colors". I dont know where it comes from, my guess is it is the name of the table in the database. How can I remove it and have a color square as first item?

Second: More important: I can't select anything... whatever my choice, the selected item will always be the first item (in this case the text "colors"). How can I make a selection on this combobox?

Thanx in advance for yours answers.

ComboBox

answered on 01 May 2012

4 answers

235 views

[Solved] Disallow custom text for a RadCombo with RadTree in template

Hello,

I have a RadComboBox with a single RadTreeView as the template item. I essentially want to allow the user to pick an option from the Tree in the drop down, trigger a postback on the tree nodeclick to save and act on the selection, then set the text of the combo box to the item that was selected in the Tree. The only way I've been able to achieve this thus far is by setting the AllowCustomText attribute to "true" on the RadCombo box. If I don't set this to true, the RadCombo box does not display the value that I have set from the selected tree node during the postback. When I set AllowCustomText to "true" however, this allows the user to type text into the RadComboBox field, which is not acceptable. I need to restrict the value of the RadComboBox to the items displayed in the contained tree. Preferably, the user cannot type into the RadComboBox at all. Clicking on this field should just open the drop down so the user can select an item from the tree.

Markup:

<telerik:RadComboBox ID="RadComboObjectPicker" runat="server" Skin="Office2010Blue" Width="150px" Height="300px" AccessibilityMode="True" EnableTextSelection="False" AllowCustomText="true" DropDownWidth="250px">

<Items>

<telerik:RadComboBoxItem runat="server" TabIndex="1" />

</Items>

<ItemTemplate>

<telerik:RadTreeView ID="RadTreeObjectPicker" runat="server" Skin="Office2010Blue" OnNodeClick="RadTreeObjectPicker_NodeClick" TabIndex="1" >

</telerik:RadTreeView>

</ItemTemplate>

</telerik:RadComboBox>

C# Code Behind:

protected void RadTreeObjectPicker_NodeClick(object sender, RadTreeNodeEventArgs e)

{

//if (!String.IsNullOrEmpty(e.Node.Value))

//{

// TakeSomeAction(e.Node.Value);

//}

RadComboObjectPicker.Text = e.Node.Text;

}

I'm open to any suggestions to achieve this behavior. Thanks!

ComboBox

answered on 01 May 2012

2 answers

153 views

RadCombobox closing when select a Row from RadGrid

I have placed my radGrid inside a Radcombobox but I try to open a radcombobox by calling OnClientDropDownOpening="OnClientDropDownOpening" using ajax request it gets closed automatically.

function OnClientDropDownOpening(sender, args) {
var comboText = sender.get_text();
if (comboText.length > 2) {
$find("<%= rapJob.ClientID %>").ajaxRequest("LoadFilteredData," + comboText);
}
else {
args.set_cancel(true);
}
}

Protected Sub rapJob_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs)

Dim rgJob As RadGrid = TryCast(rcbJob.Items(0).FindControl("rgJob"), RadGrid)
If e.Argument.IndexOf("LoadFilteredData") <> -1 Then
rgJob.Rebind()
End If

End Sub

Protected Sub rgJob_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs)

Dim rgJob As Telerik.Web.UI.RadGrid = source

Dim IJobs = (From Jobs In dbContext.FF_Jobs Where Jobs.IsCreated = True And Jobs.IsCancelled = False And Jobs.IsTemplate = False
Select Jobs).ToList

rgJob.DataSource = IJobs

End Sub

<telerik:RadAjaxPanel ID="rapJob" RequestQueueSize="5" runat="server" Width="100%"

OnAjaxRequest="rapJob_AjaxRequest" EnableOutsideScripts="True" HorizontalAlign="NotSet"

ScrollBars="None" LoadingPanelID="alpJob">

<telerik:RadComboBox ID="rcbJob" EmptyMessage="- please select job -" runat="server"

OnClientDropDownOpening="OnClientDropDownOpening" MarkFirstMatch="True" Width="300px"

Skin="Vista" AutoPostBack="True" AutoCompleteSeparator="true" Filter="Contains"

AllowCustomText="true">

<ItemTemplate>

<div>

<telerik:RadGrid ID="rgJob" runat="server" Width="95%" Skin="Vista" AutoGenerateColumns="False"

AllowSorting="True" AllowMultiRowSelection="False" OnNeedDataSource="rgJob_NeedDataSource"

AllowPaging="True" GridLines="Both" ExpandAnimation-Type="None" CollapseAnimation-Type="None">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView Width="100%" DataKeyNames="ID,JobName" Name="rgJob" CommandItemDisplay="None" NoMasterRecordsText="" >

<Columns>

<telerik:GridBoundColumn SortExpression="ID" HeaderText="ID" HeaderButtonType="TextButton"

DataField="ID" UniqueName="ID" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="JobName" HeaderText="Job Name" HeaderButtonType="TextButton"

DataField="JobName" UniqueName="JobName">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

</div>

</ItemTemplate>

<Items>

<telerik:RadComboBoxItem runat="server" Text=" "></telerik:RadComboBoxItem>

</Items>

</telerik:RadComboBox>

</telerik:RadAjaxPanel>

ComboBox

answered on 01 May 2012

1 answer

211 views

RadSlidingPane width tab view

hi, i have this code

<div id="contentlogin">
        <telerik:RadSplitter runat="server" Skin="Black" Orientation="Horizontal" BorderSize="0" PanesBorderSize="0" Width="500px">
            <telerik:RadPane runat="server" Scrolling="none" ShowContentDuringLoad="true">
                <telerik:RadSlidingZone runat="server" Width="500px">
                    <telerik:RadSlidingPane ID="tabslidelog" Title="<span class='txt11fffN'>Login</span>" IconUrl="~/img/blogs.png" TabView="TextAndImage" runat="server" Width="500px" MaxWidth="500" MinWidth="500" MaxHeight="150" EnableDock="true" EnableResize="false" Overlay="true">
                        Pane 1 Content
                    </telerik:RadSlidingPane>
                </telerik:RadSlidingZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </div>

my problem is in the width of tabview or the title from SlidingPane will be the same; attachment explains better me problem. Thanks.

Splitter

answered on 01 May 2012

1 answer

212 views

set Page scroll Position to the Top

Hello

In my my application I have created Training .aspx page in that page i have used usercontrol Mydocument.ascx in that user control i have used telerik RadEditor Control but i want my page scroll position set to Top I have written following javascript code on Training.aspx page and also Mydocument.ascx page but when I browse This page in IE-8 Page scroll position is set to the Cursor Position of Rad Editor but I want to show my page from Top I want my page scroll position should be top so I have used Following Javascript Code it works fine in Other browser but in IE-8 after page load scroll position is set according to cursor position of radEditor

<script type="text/jscript">
    var xPos, yPos;
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(BeginRequestHandler);
    prm.add_endRequest(EndRequestHandler);
    function BeginRequestHandler(sender, args) {

        xPos = $('#<%=reContent.ClientID %>').scrollLeft;
        yPos = $('#<%=reContent.ClientID %>').scrollTop;
    }
    function EndRequestHandler(sender, args) {
        $('#<%=reContent.ClientID %>').scrollLeft = xPos;
        $('#<%=reContent.ClientID %>').scrollTop = yPos;
    }
</script>

please reply as soon as possible

Editor

answered on 01 May 2012