Questions on UI for ASP.NET AJAX Forum

3 answers

181 views

How to fire radwindow OnTextChanged event

Hi all I am having my textbox designed as follows

<telerik:RadMaskedTextBox Mask="###-##-####" runat="server" ID="txtSSN" Width="200px" AutoPostBack="true" OnTextChanged="ssnchanged">

</telerik:RadMaskedTextBox>

On my server side code I code as follows

protected void ssnchanged(object sender, EventArgs e)

{

if (txtSSN.Text.Length != 9)

{

RadWindowManager1.VisibleOnPageLoad = true;

string scriptstring = "radalert('You must save Employee Information to proceed further..', 250, 80,'Information');";

ScriptManager.RegisterStartupScript(this, this.GetType(), "radalert", scriptstring, true);

}

But unable to load the Window can some one help me..

Window

answered on 20 Jun 2012

3 answers

1.1K+ views

getting the "Rad Editor" Content Value throgh Java Script

how to get the "Rad Editor" Control Content value at the ClientSide (java Script), without postback.

Thanks & Regards
Srinivas

Editor

answered on 19 Jun 2012

1 answer

122 views

Roll over menus

I am using jquery in a menu. I would like to use the RadSplitter in the master page; however, when I roll over the dropdown gets cut off because of the RadPanel. How can I get the menu to ignore the RadPanel line? (possibly a z index setting?)

<telerik:RadSplitter ID="SplitterMain" BorderStyle="None" PanesBorderSize="0"
BorderSize="0" runat="server" LiveResize="False"
ResizeWithParentPane="False" ResizeWithBrowserWindow="True"
Orientation="Horizontal" Width="100%">
<telerik:RadPane runat="server" Height="115px" Width="100%" Locked="true">
Header content
</telerik:RadPane>
<telerik:RadPane runat="server">
Body content
</telerik:RadPane>
<telerik:RadPane runat="server">
Footer content
</telerik:RadPane>
</telerik:RadSplitter>

Thanks.

Splitter

answered on 19 Jun 2012

2 answers

2.2K+ views

[Solved] How to hide/display a GridTemplateColumn ?

Hello,

I have a RadGrid control with a GridTemplateColumn. I need to hide an "Action" TemplateColumn in Edit mode and to display that colum in normal mode. I defined the following ItemDatabound event to hide the "Action" TemplateColumn:

protected void oRgRoulement_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

// Hide the Action TemplateColumn in edit mode

if (e.Item is GridEditableItem && e.Item.IsInEditMode)

(oRgRoulement.MasterTableView.GetColumn("Action") as GridTemplateColumn).Visible = false;

}

What should I do to display the action TemplateColumn when the user will leave the edit mode ? In other words, how to determine if a row is already in edit mode ?

Thanks,

Steven

Grid

answered on 19 Jun 2012

7 answers

336 views

Implementing a "Paste From Excel" button in RadGrid

Hi,

I am looking to implement a feature within the RadGrid that allows the pasting of clipboard information copied from an Excel sheet.

I found an old thread that seeks to implement this, and I managed to get it working with GridBoundColumns that contain a regular string. Basically, I copy items from Excel, I click on a cell in the Grid, then I click on a "Paste From Excel" button I added to the CommandItemTemplate, and it pastes the clipboard informatoin.

Thing is, I am having issues getting this to work with other types of columns, such as a GridDateTimeColumn or a GridNumericColumn.

In the case of the GridDateTimeColumn, nothing appears in the cell, and I'm thinking it's due to formatting issues within javascript.

In the case of the GridNumericColumn, the value is pasted into the cell, but as soon as I click on the cell, the value disappears.

Here's the javascript code:

var lastFocused;

function pasteFromExcel() {

debugger;

if (!lastFocused) return;

var clipData = window.clipboardData.getData('Text');

var crlf = String.fromCharCode(13) + String.fromCharCode(10);

var table = clipData.split(crlf);

for (var tRow = 0; tRow < table.length - 1; tRow++)

table[tRow] = table[tRow].split(String.fromCharCode(9));

Array.remove(table, table[table.length - 1]);

fillTable(table);

}

function fillTable(table) {

var pCell = lastFocused.parentNode;

var pRow = pCell.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;

var pBody = pRow.parentNode;

var maxRows = pBody.rows.length;

var maxCols = pRow.cells.length;

for (var row = 0; row < table.length; row++) {

for (var col = 0; col < table[row].length; col++) {

debugger;

var cCellIndex = pCell.parentNode.cellIndex + col;

var cRowIndex = pRow.sectionRowIndex + row;

if (cRowIndex < maxRows && cCellIndex < maxCols) {

var cCell = pBody.rows[cRowIndex].cells[cCellIndex];

var pInput = cCell.getElementsByTagName("input")[0];

pInput.style.backgroundColor = "#F7FAFF";

if (cCellIndex == 0)

pInput.value = new Date(Date.parse(table[row][col]));

else if (cCellIndex == 2)

pInput.value = parseFloat(table[row][col]);

else

pInput.value = table[row][col];

}

function gridFocus(e) {

e = e || window.event;

var target = e.target || e.srcElement;

if (target.tagName.toLowerCase() == "input" && target.type.toLowerCase() == "text")

lastFocused = target;

}

Please note that I hard-coded some condition checks for the cCellIndex variable for testing purposes.

Here's some of the relevant RadGrid definition:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="false" AllowMultiRowEdit="true"

AutoGenerateColumns="false" AllowPaging="false" PageSize="1000" AllowSorting="True"

CellSpacing="0" DataSourceID="RadGrid1TableDataSource" GridLines="None" Skin="Office2007"

RegisterWithScriptManager="false" ShowFooter="true" EnableLinqExpressions="false" ValidationSettings-EnableValidation="false" OnClick="gridFocus(event)">

<MasterTableView EditMode="InPlace" DataKeyNames="PeriodID" AllowAutomaticDeletes="true"

AllowAutomaticInserts="true" CommandItemDisplay="Bottom">

<columns>

<telerik:GridBoundColumn DataField="PeriodID" UniqueName="PeriodID"

HeaderText="<%$ Resources:GlobalResources, PeriodID %>"

Visible="false" />

<telerik:GridTemplateColumn DataField="RepaymentDate" UniqueName="RepaymentDate"

HeaderText="<%$ Resources:GlobalResources, RepaymentDate %>"

FooterText="Totals:">

<ItemTemplate>

<%# DataBinder.Eval(Container.DataItem, "RepaymentDate", "{0:dd MMM yyyy}")%>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadDatePicker ID="RepaymentDatePicker" runat="server" RegisterWithScriptManager="false"

SelectedDate='<%# DataBinder.Eval(Container.DataItem, "RepaymentDate") == DBNull.Value ? (DateTime?)null : DataBinder.Eval(Container.DataItem, "RepaymentDate")%>' />

</EditItemTemplate>

<InsertItemTemplate>

<telerik:RadDatePicker ID="RepaymentDatePicker" runat="server" RegisterWithScriptManager="false" />

</InsertItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="MovementTypeText" UniqueName="MovementTypeText"

HeaderText="<%$ Resources:GlobalResources, MovementTypeText %>" />

<telerik:GridNumericColumn DataField="OutstandingBeforeRepaymentAmount" UniqueName="OutstandingBeforeRepaymentAmount"

HeaderText="<%$ Resources:GlobalResources, OutstandingBeforeRepaymentAmount %>"

NumericType="Number" />

</columns>

<CommandItemTemplate>

<table cellpadding="5" style="width: 100%">

<tr>

<td align="left">

<asp:LinkButton ID="btnAddNewRecord" runat="server" CommandName="InitInsertSpecial">

<img style="border:0px" alt="" src="../Images/add.png" />Add New Record

</asp:LinkButton>

<telerik:RadNumericTextBox ID="txtLineNum" runat="server"

Type="Number" Value="1" MinValue="1" MaxValue="30" ClientEvents-OnKeyPress="CommandKeyPress">

<NumberFormat GroupSeparator="" DecimalDigits="0" />

</telerik:RadNumericTextBox>

</td>

<td align="center">

<asp:LinkButton ID="btnPasteFromExcel" runat="server" OnClientClick="pasteFromExcel(); return false;">

Paste From Excel

</asp:LinkButton>

</td>

<td align="right">

<asp:LinkButton ID="btnDeleteSelected" runat="server" CommandName="DeleteSelected"

OnClientClick="javascript:return confirm('Delete all selected periods?')">

<img src="../Images/delete.png" alt="" style="border:0px" />Delete Selected

</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

</MasterTableView>

</telerik:RadGrid>

I hope this is clear enough.

Anybody has any ideas?

Thank you.

Grid

answered on 19 Jun 2012

0 answers

208 views

Set height dynamically

This is my scenario:

Master Page.
centerBody div--> in content page the app generate programmatically a RadSplitter with 2 panes (left and center)

ContentPage --> add in center Pane grid.

I need do this grid with heigt = centerBody heigth or Splitter height.

this is my contentPage.aspx:

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

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">

window.onload = regrid;

function regrid() {

/try1: this option
var scrollArea = $find("<%= CommunityGrid.ClientID %>" + "_GridData");
if (scrollArea) {

// this isn't work
scrollArea.style.height = 700 + "px";
}

//try 2: this option

var scrollArea = $find("<%= CommunityGrid.ClientID %>");
if (scrollArea) {

// this isn't work
scrollArea.get_element().style.height = 700 + "px";
}

}

function ShowEditForm(id, rowIndex) {

var grid = $find("<%= CommunityGrid.ClientID %>");

var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);

var oWindow = window.radopen("CommunityForm.aspx?ID=" + id, "UserListDialog");

return false;
}

function RowDblClick(sender, eventArgs) {
editedRow = eventArgs.get_itemIndexHierarchical();
$find("<%= CommunityGrid.ClientID %>").get_masterTableView().editItem(editedRow);
}

function ShowDelete(id, rowIndex) {
var grid = $find("<%= CommunityGrid.ClientID %>");

var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);

var oWindow = window.radopen("DeleteCommunity.aspx?ID=" + id, "ConfirmDelete");

return false;
}

function ShowInsertForm() {

var oWindow = window.radopen("CommunityForm.aspx", "UserListDialog");

return false;
}

function confirmCallBackFn(arg) {

var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

if (arg == true)
{ ajaxManager.ajaxRequest("Remove"); }

}

function refreshGrid(arg) {

if (arg != null) { $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(arg); }
else {
if (arg) {
$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(arg);
}
else {
$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("RebindAndNavigate");
}
}
}

</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="AjaxManagerProxy1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="CommunityGrid" LoadingPanelID="LoadginPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="CommunityGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="CommunityGrid" LoadingPanelID="LoadginPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<UC:header runat="server" ID="headerPage" />
<div id="containerSubWHelp" runat="server" >
<telerik:RadGrid ID="CommunityGrid" runat="server" OnNeedDataSource="CommunityGrid_NeedDataSource"
OnUpdateCommand="CommunityGrid_UpdateCommand" OnInsertCommand="CommunityGrid_InsertCommand"
AutoGenerateColumns="False" OnItemCommand="CommunityGrid_ItemCommand" OnPreRender="CommunityGrid_PreRender"
OnItemCreated="CommunityGrid_ItemCreated" OnDeleteCommand="CommunityGrid_DeleteCommand"
OnItemDataBound="CommunityGrid_ItemDataBound" >
<MasterTableView DataKeyNames="Id">
<Columns>
<telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderStyle-Width="25px"
AllowFiltering="false" Resizable="false">
<ItemTemplate>
<asp:ImageButton ID="EditLink" runat="server" ImageUrl="~/UI/Images/pencil.png">
</asp:ImageButton>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridEditCommandColumn HeaderStyle-Width="25px" UniqueName="EditCommandColumn"
ButtonType="ImageButton" EditImageUrl="../Images/grid_edit.png" Resizable="false">
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn UniqueName="btnDelete" ConfirmDialogType="RadWindow" ButtonType="ImageButton"
CommandName="Delete" ConfirmDialogHeight="100px" ConfirmDialogWidth="300px" HeaderStyle-Width="25px"
Resizable="false" />
<telerik:GridTemplateColumn DataField="Id" HeaderText="Id" UniqueName="Id" Visible="false">
<InsertItemTemplate>
<telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# Bind("Id") %>' Width="150px"
ReadOnly="true" Enabled="false" />
</InsertItemTemplate>
<EditItemTemplate>
<telerik:RadTextBox ID="RadTextBox1" runat="server" Text='<%# Eval("Id") %>' ReadOnly="true"
Width="150px" />
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Name" UniqueName="Name" DataField="Name">
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="*"
CssClass="validator" ControlToValidate="txtName"></asp:RequiredFieldValidator><br />
<asp:CustomValidator ID="cvName" CssClass="validator" OnServerValidate="cvName_ServerValidate"
Display="Dynamic" runat="server" ControlToValidate="txtName"></asp:CustomValidator>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Width="200px" Text='<%# DataBinder.Eval(Container.DataItem, "Name") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn HeaderText="Description" DataField="Description" UniqueName="Description">
<EditItemTemplate>
<asp:TextBox ID="txtDescription" Width="250px" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
<CommandItemTemplate>
<UC:AddButtons ID="AddButtons" runat="server" />
</CommandItemTemplate>
</MasterTableView>
<ClientSettings>
<ClientEvents OnRowDblClick="RowDblClick" />
<Scrolling UseStaticHeaders="true"/>
</ClientSettings>
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="UserListDialog" runat="server" Height="600px" Width="800px"
ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" VisibleStatusbar="false"
Behaviors="Close" Skin="Vista" />
<telerik:RadWindow ID="ConfirmDelete" runat="server" Skin="Vista" Left="15%" ReloadOnShow="true"
ShowContentDuringLoad="false" Modal="true" VisibleStatusbar="false" VisibleTitlebar="false"
Behaviors="Close" Height="150px" Width="300px" />
</Windows>
</telerik:RadWindowManager>
</div>
</asp:Content>

Where is the error?

Grid

asked on 19 Jun 2012

3 answers

187 views

[Solved] Edit In Place With Autogenerated Rows

Hi,

I'm currently attempting to make an edit page for a list of 30+ items that ideally need to be edited in place. To do this I'm using the AutoGenerateColumns = True method on the RadGrid to generate the columns I need automatically from the datasource, and this works without a problem. I've also used the AutoGenerateEditColumn = True to generate myself an edit column, which again worked perfectly. My problem then comes when trying to actually catch the update event.

I've made an event to handle the RadGrid.UpdateCommand event, but none of your examples on the following page actually seem to work for this situation:
http://www.telerik.com/help/aspnet-ajax/grid-updating-inplace-and-editforms.html

When I try and use the Auto-Generated Column Editors code the only column that it seems to be able to find is the auto-generated edit column, and then it moves on to rebinding the data using the RadGrid.NeedDataSource event, which then populates my table again with it's original data and not the data from my previous update. Is there a tutorial somewhere that will help me catch the updated data so I can update the datasource before it rebinds it?

Thanks for any help.

Grid

answered on 19 Jun 2012

2 answers

125 views

[Solved] Listbox EmptyMessageTemplate rlbEmptyMessage positioning issue

Hi I have the following aspx code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"

CodeBehind="Default.aspx.cs" Inherits="TestWebApplication1._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<telerik:RadListBox ID="RadListBox1" runat="server">

<HeaderTemplate>

Header

</HeaderTemplate>

<EmptyMessageTemplate>

<asp:Label runat="server" Text="No Items"></asp:Label>

</EmptyMessageTemplate>

</telerik:RadListBox>

</asp:Content>

In my code behind:

RadListBox1.DataSource = new List<string> {};

RadListBox1.DataBind();

The telerik.web.ui.dll is
Version: 2011.3.1115.35
Runtime Version: v2.0.50727

The empty template get's renders like so: (see attachment)

I noticed that in the rendered HTML, there's a div with a class called "rlbEmptyMessage"

.RadListBox .rlbEmptyMessage {

color: #999999;

font-style: italic;

position: absolute;

text-align: center;

}

Now when I remove the position: absolute css style, the emtpy message displays as I think it should. Is this a bug?

Tested in Firefox 13.0 and and IE 8.0

ListBox

answered on 19 Jun 2012

0 answers

104 views

Editable cell on hierarchy RadGrid and asociated to another cell on parent table

Hi, let me try to explain what i need.

I already have a hierarchy grid, the data is loaded on the event "OnNeedDataSource" and creating a dataRelation between tables.

I need a cell is editable and it is related to a cell in the parent table. The parent cell is a summarization of the values in cells is related, so if you change a value in a cell, the parent cell should change.

Attached an image illustrating the case.

Grid

asked on 19 Jun 2012

4 answers

110 views

Can't see sum in footer in IE

Hi,

After upgrading to 2012.1.411 version, the sum of the last column might be hidden in IE.
This problem was not in 2012.1.215.

It only occurs when there is a footer in the last column and that footer is aligned right.
Must also use scrolling and static headers.

Sample:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="testgrid.aspx.vb" Inherits="WebApplication1.testgrid" %>

<!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>

</head>

<body>

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

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

</asp:ScriptManager>

<div>

<telerik:RadGrid ID="rg" runat="server">

<ClientSettings>

<Scrolling AllowScroll="true" ScrollHeight="200px" UseStaticHeaders="true" />

</ClientSettings>

<MasterTableView ShowFooter="True" AutoGenerateColumns="false">

<Columns>

<telerik:GridBoundColumn DataField="string"></telerik:GridBoundColumn>

<telerik:GridNumericColumn DataField="number" Aggregate="Sum">

<ItemStyle HorizontalAlign="Right" />

<FooterStyle HorizontalAlign="Right" />

</telerik:GridNumericColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

Public Class testgrid

Inherits System.Web.UI.Page

Private Sub rg_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rg.NeedDataSource

Dim dt As New DataTable()

dt.Columns.Add("string", GetType(String))

dt.Columns.Add("number", GetType(Integer))

For i As Integer = 1 To 7

dt.Rows.Add({"test", i})

Next

rg.DataSource = dt

End Sub

End Class

As you can see in this sample, the sum of the "number" column will be cut off.

Regards
Caesar

Grid

answered on 19 Jun 2012