Questions on UI for ASP.NET AJAX Forum

8 answers

280 views

I'm trying to create a form with text boxes and combo boxes, that have a set width and right aligned labels.

Using the label attribute of the of the controls, the final rendered output between the two are not consistent. The text box puts the <label> and the <input type=text> in two different table cells. While the combobox renders with in a single cell. So using CSS on the LabelCssClass doesn't get the same results.

I've seen examples on your site of right aligned text on the combo box (http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/expandanimation/defaultcs.aspx) but it is using standard text instead of the <label for="">. I need it to use the label tag for 508 compliance.

Can you point me to another example of how this is done?

ComboBox

answered on 14 Oct 2011

2 answers

110 views

Editor in CompositeControl

Hi, I'm trying to create a compositeControl that contains a RadEditor:

public class TextEditorRad : CompositeControl

{

public TextEditorRad()

{

protected override void OnInit(EventArgs e)

{

CreateChildControls();

base.OnInit(e);

}

#region CreateChildControls

protected override void CreateChildControls()

{

Controls.Clear();

editor = new RadEditor();

editor.ID = "edEdit";

//DoControl();

this.Controls.Add(editor);

}

#endregion

#region RecreateChildControls

protected override void RecreateChildControls()

{

EnsureChildControls();

}

#endregion

#region Render

protected override void Render(HtmlTextWriter writer)

{

AddAttributesToRender(writer);

editor.RenderControl(writer);

}

#endregion

}

When I drag this from my tool box on to an aspx and view the page, The editor is visible but I cannot select the text area and I get the following error showing in FF error console:
Error: a is undefined
Source File: http://localhost/myapp/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3ad0c4ca6e-6b5d-49b6-922d-5244924fb100%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2010.1.309.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3af0c88abc-2e1c-4c5d-ab67-8dc4eeeb22f8%3a16e4e7cd%3aed16cbdc%3af7645509%3a24ee1bba%3a1e771326%3ae524c98b%3a874f8ea2%3adc7e0bd%3a1569bb5f%3a63b115ed%3a1c565fc%3a30f1f089%3a19620875%3a33108d14
Line: 6

Any ideas?

Thanks

Editor

answered on 14 Oct 2011

1 answer

96 views

FileExplorers folder tree scrolls to top after selection

Hi!
I'm using a telerik radeditor with the DocumentManager button that opens a file explorer. In this case I have a rather large folder tree and when I scroll down to select a folder, the file explorer rerenders and the folder tree scrolls to top again. Is there any way to prevent this so that the user easier can keep track of where he/she is?

I have tried the same scenario using the FileExplorer control directly, but in that case the scroll to top does not occur.

/Dan

Editor

answered on 14 Oct 2011

3 answers

80 views

Scheduler Confirmation Delete Position

Hi,

Is it possible to make the confirmation delete box to be displayed just beside the appointment to delete?

Because if I have a scheduler page that is in full view (24 hrs) and I try to delete the meeting in 11pm, the confirmation box is in the center of the scheduler.

And some users are lazy to scroll up to just to click on Ok button.

Thanks,

Bermo

Scheduler

answered on 14 Oct 2011

3 answers

160 views

Rad Grid ClientEvents OnRowCreated Not working in Mozilla Firefox

Hello
     My problem is Row created event is not firing on using Mozilla Firefox. But there is no problem when i am using on IE.

Please help me on this issue..
Thanks in advance...

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript" language="javascript">
            function LessionPlanViewRowCreated(sender, eventArgs) {
                var DataItem = eventArgs.get_gridDataItem().get_element();
                for (var i = 2; i < DataItem.cells.length; i++) {
                    if (DataItem.cells[i].innerText.trim() == "Red") {
                        DataItem.cells[i].style.backgroundColor = "Red";
                    }
                    else if (DataItem.cells[i].innerText.trim() == "Orange") {
                        DataItem.cells[i].style.backgroundColor = "Orange";
                    }

                    else if (DataItem.cells[i].innerText.trim() == "Green") {
                        DataItem.cells[i].style.backgroundColor = "Green";
                    }
                }
            }

        </script>

    </telerik:RadCodeBlock>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <table>
        <tr>
            <td>

                <telerik:RadGrid ID="radGvrAcdamicYearPerformanceView" runat="server" GridLines="None"
                    Skin="Office2007" CellSpacing="1">
                    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" EnableImageSprites="True">
                    </HeaderContextMenu>
                    <MasterTableView>
                        <RowIndicatorColumn>
                            <HeaderStyle Width="20px" />
                        </RowIndicatorColumn>
                        <ExpandCollapseColumn>
                            <HeaderStyle Width="20px" />
                        </ExpandCollapseColumn>
                        <CommandItemSettings ExportToPdfText="Export to Pdf" />
                        <Columns>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings>
                        <ClientEvents OnRowCreated="LessionPlanViewRowCreated" />
                    </ClientSettings>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</asp:Content>

Grid

answered on 14 Oct 2011

1 answer

244 views

Image compression and quality

I am trying to find a way to control the compression and quality of the image saved by the ImageEditor.

Currently running the saveImageOnServer command:

imageEditor.saveImageOnServer("", true)

connected to a "SaveImage" tool

<telerik:ImageEditorTool CommandName="SaveImage" ToolTip="Save Image" />

I loaded an image with following properties:
Width = 1024px
Height = 768px
Size = 606KB
DPI = 96
BitDepth = 24

I cropped the image to 1013 x 638 and saved the image.

The properties of the file changed to:
Width = 1013px Height = 638px Size = 1.32MB DPI = 96 BitDepth = 32

I was hoping the file size would decrease but I imagine file size increase has to do with the BitDepth increasing. How can I control this with the ImageEditor control?

ImageEditor

answered on 14 Oct 2011

1 answer

119 views

Still adding new and new empty columns after Postback

Hi,

I have problem with dynamically generated columns in RadGrid. Each postback adds me same count of empty columns. Here is my test code.

thx for help

DK

<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test.TestGrid" %>

<head runat="server" />

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:HiddenField ID="hfMinYear" runat="server" /><asp:HiddenField ID="hfMaxYear" runat="server" />

<telerik:RadGrid ID="grdForecast" AllowFilteringByColumn="false" AllowMultiRowSelection="true" AllowSorting="true"

AutoGenerateColumns="false" EnableViewState="true" OnNeedDataSource="grdForecast_NeedDataSource" runat="server">

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<MasterTableView DataKeyNames="ForecastId" EnableColumnViewState="false"><HeaderStyle Wrap="false" /><ItemStyle Wrap="false" />

<Columns>

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" />

<telerik:GridBoundColumn DataField="ValueTotal" DataFormatString="{0:0.##}" HeaderText="Total Value" HeaderStyle-Wrap="false" ItemStyle-HorizontalAlign="Right" ItemStyle-Wrap="false" ReadOnly="True" UniqueName="ValueTotal"></telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:button id="ddd" text="Postback" runat="server" />

</form>

Code-behind

using System;

using System.Data;

using Telerik.Web.UI;

namespace Test

{

public partial class TestGrid : System.Web.UI.Page

{

protected int ProjectId;

protected void Page_Init(object sender, EventArgs e)

{

// if (IsPostBack)

{

int MinYear = 2010, MaxYear = 2020;

CreateColumns(MinYear, MaxYear);

}

protected void Page_Load(object sender, EventArgs e)

{

}

protected void CreateColumns(int MinYear, int MaxYear)

{

for (int i = MinYear; i <= MaxYear; i++)

{

grdForecast.MasterTableView.Columns.Add(new GridBoundColumn()

{

DataField = "Value" + i,

DataFormatString = "{0:0.##}",

HeaderText = "Value " + i,

ReadOnly = true,

UniqueName = "Value" + i

});

}

protected void grdForecast_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

grdForecast.DataSource = new DataTable();

}

Grid

answered on 14 Oct 2011

1 answer

70 views

RadEditor - error in IE

Hi,
I have a problem with RadEditor in IE 8.
I have a numbered list with 3 items (1. screen).
Next I added new item to that list (with enter button, 2. screen).
Next I deleted that item (with backspace button).
Afterwards I added again item to the same place. And now I want to delete it (with backspace button).
And now I have unexpected behavior of your editor (see 3. screen). There is a huge space between 2. and 3. item and there is no way to fix this manually or there is very difficult. Besides 3. item has changed font and styles.

Why? Is any solution? I'm using Telerik in version: 2010.1.519.35 but I checked in the newest one, too. In both there is the same problem.

Editor

answered on 14 Oct 2011

3 answers

160 views

cannot use jquery with radcontrols

Hi,
I am implementing a combobox in which I need to make each row change backcolor when mouse is over the row. I use a table inside item template to define item row with <tr class="div_row"> . I then write two jquery in the header section with class selector and event $(.div_row).mouseover and $(.div_row).mouseout. I get no response from the jquery. Using firebug to trace, I find out the script rendered back to the browser changed dramatically, the javascript code functions are completely missing. I had same problem with data pager control but that one was caused by the ajaxmanager. This time I don't have any ajax updates and still get the same error. Is there anything I have to take care when using jquery and radcontrols ? Could you please kindly explain and advice how to enable jquery in telerik ajax environment. I would appreciate it very much since we are going to use a lot of jquery in our development.
Thank you. Attach the script I used.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchBox.aspx.cs" Inherits="iBOOKSTORE.SearchBox" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

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

<script type="text/javascript">

function clientItemsRequesting(sender, e)

{

// var context = e.get_context();

// using jQuery to get the checked item and pass it to the server

// context["QString"] = sender.get_text();

var comboInput = $find("<%= cmbInput.ClientID %>");

var istr = comboInput.get_text();

if (istr.length == 0 || istr.substr(istr.length - 1, 1) == ':' || istr.substr(istr.length - 1, 1) == '：') {

e.set_cancel(true);

comboInput.hideDropDown();

}

function clientDropdownOpening(sender, e) {

var istr = sender.get_text();

if (istr.length == 0 || istr.substr(istr.length - 1, 1) == ':' || istr.substr(istr.length - 1, 1) == '：') {

e.set_cancel(true);

}

function clientDropdownClosing(sender, e) {

var comboInput = $find("<%= cmbInput.ClientID %>");

var istr = comboInput.get_value();

if (istr.length == 0) {

e.set_cancel(true);

}

function indexChanged_handler(sender, e) {

var comboInput = $find("<%= cmbInput.ClientID %>");

var txt = comboInput.get_text();

if (txt.length > 0)

txt += '，';

comboInput.set_text(txt + sender.get_value());

var input = comboInput.get_inputDomElement();

input.focus();

}

var backcolor;

$(document).ready(function () {

$(".div_row").mouseover(function () {

backcolor = $(this).css("backgound-color");

$(this).css("background-color", "yellow");

})

$(document).ready(function () {

$(".div_row").mouseout(function () {

$(this).css("background-color", backcolor);

})

</script>

</telerik:RadCodeBlock>

</head>

<body>

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

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<telerik:RadComboBox ID="cmbMode" Runat="server" Width="66px" OnClientSelectedIndexChanged="indexChanged_handler">

<Items>

<telerik:RadComboBoxItem runat="server" Text="录入书名" ToolTip="录入书名查询条件"

Value="书名：" />

<telerik:RadComboBoxItem runat="server" Text="录入作者" ToolTip="录入作者查询条件"

Value="作者：" />

<telerik:RadComboBoxItem runat="server" Text="出版机构" ToolTip="录入出版社名称查询条件"

Value="出版社：" />

<telerik:RadComboBoxItem runat="server" Text="关键词句" ToolTip="录入关键词查询条件"

Value="关键词：" />

<telerik:RadComboBoxItem runat="server" Text="图书分类" ToolTip="录入图书分类名称查询条件"

Value="类别：" />

<telerik:RadComboBoxItem runat="server" Text="读者人群" ToolTip="录入读者人群查询条件"

Value="读者：" />

<telerik:RadComboBoxItem runat="server" Text="丛书系列" ToolTip="录入丛书系列查询条件"

Value="丛书：" />

</Items>

</telerik:RadComboBox>

<telerik:RadComboBox ID="cmbInput" Runat="server" AllowCustomText="True" LoadingMessage="读取数据..."

DataTextField="TITLE" DataValueField="TITLE" OnClientDropDownClosing="clientDropdownClosing"

OnClientItemsRequesting="clientItemsRequesting" OnClientDropDownOpening ="clientDropdownOpening"

EnableLoadOnDemand="True" Skin="Windows7" DropDownWidth="526px"

Height="400px" MaxHeight="400px" AutoPostBack="true"

onitemsrequested="cmbInput_ItemsRequested" Width="500px"

onselectedindexchanged="cmbInput_SelectedIndexChanged">

<ItemTemplate>

<table width="500" style="border-style: solid; border-width: thin">

<tr class="div_row">

<td style="width: 200px;"><%# Eval("TITLE") %></td>

<td style="width: 50px;"><%# Eval("AUTHOR") %></td>

<td style="width: 50px;"><%# Eval("PUBNAME") %></td>

<td style="width: 60px;"><%# Eval("CLSNAME") %></td>

<td style="width: 40px;"><%# Eval("KEYWDS") %></td>

<td style="width: 40px;"><%# Eval("SERIES") %></td>

<td style="width: 40px;"><%# Eval("READER") %></td>

</tr>

</table>

</ItemTemplate>

<HeaderTemplate>

<table width="500" style="border-style: solid; border-width: thin">

<tr>

<td style="width: 200px;">书名</td>

<td style="width: 50px;">作者</td>

<td style="width: 50px;">出版社</td>

<td style="width: 60px;">图书分类</td>

<td style="width: 40px;">关键词</td>

<td style="width: 40px;">丛书名</td>

<td style="width: 40px;">读者群</td>

</tr>

</table>

</HeaderTemplate>

</telerik:RadComboBox>

</div>

</form>

</body>

</html>

ComboBox

answered on 14 Oct 2011

1 answer

285 views

Show chart legend in multiple rows

Hi,

Currently i have a chart with its legends (total 5 items) displayed in 1 row at the bottom. See below code.

I'm trying to put the legend at the right side of the graph, and outside plot area. After i changed the alignedposition to be right, all the legends (total 5 items) are shown in 1 row.
e.g., - Series 1 - Series 2

I want to display as those demos on Telerik website, each legend takes 1 row.
E.g.,

Series 1
Series 2

ChartControl.Legend.Appearance.Location = Telerik.Charting.Styles.LabelLocation.OutsidePlotArea;
ChartControl.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Bottom;

Please advise how to achieve it. Thanks,

Chart (Obsolete)

answered on 14 Oct 2011