Questions on UI for ASP.NET AJAX Forum

2 answers

100 views

[Solved] Retrieve Contents of Textboxes in Add Record Row

New to using the Radgrid and trying to learn my way around but I found that I am stuck and need some help.

I have a small web app that allows the user to import a *.csv file that I bind to a RadGrid. I want the user to have the ability to add, edit or delete rows before storing to a table. I've got everything working except adding data.

For the edit (RadGrid.UpdateCommand) I am able to get the Item Index, cast as a GridEditableItem, specify the column name, cast as a textbox and get the text value.

Dim editItem As GridEditableItem = CType(gvMSR.EditItems(e.Item.ItemIndex), GridEditableItem)

dtb.Rows(e.Item.ItemIndex).Item("column1") = CType(editItem("column1").Controls(0), TextBox).Text

When I try to do this for the add record row, which has an Item Index of -1, I get an error "Index was out of range. Must be non-negative and less than the size of the collection."

I have also tried using the unique ID from the sender and concatenating that with the column number to get the unique ID for the individual textbox (which I have verified using Google Chrome dev tools) but get an "Object reference not set to an instance of an object" error.

Dim itemPrefix As String = e.Item.UniqueID.ToString & "$ctl"

dtb.Item("column1") = CType(e.Item.FindControl(itemPrefix & "00"), TextBox).Text

So I'm stuck. I'm sure there is a better way to do this but I'm not familiar enough with RadGrid yet to know how.

Any help is appreciated. Thanks.

Grid

answered on 14 Oct 2011

8 answers

330 views

[Solved] right aligned label

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

140 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

126 views

[Solved] 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

155 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

179 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

287 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

148 views

[Solved] 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

97 views

[Solved] 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

218 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