Questions on UI for ASP.NET AJAX Forum

4 answers

101 views

After read the known issue "A JavaScript error can occur when using the debug versions of the MS AJAX library (<compilation debug="true"> in web.config)." we set ScriptMode="Release" property of the ScriptManager.

But when we do click in any tab of the tabscript we are getting this error:
Error: 'this.get_element().offsetWidth' is null or isnt a object.

TabStrip

answered on 02 Jan 2011

10 answers

548 views

Remove all borders from RadPanelBar

I have a RadPanelBar with No skin and would like to remove all borders and underlines. I can not seem to get rid of the border on the Non expanded panel bar. I am using RadControls for ASPNET AJAX Q1 2009. Css and Asp below.

Any help would be appreciated.

Thanks
Doug

    .RadPanelBar .rpRootGroup,
   .RadPanelBar .rpRootGroup .rpLink
   {
       border: none !important;
       color: #5F5F5F;
       text-decoration: none;
   }
   .RadPanelBar .rpRootGroup .rpGroup .rpLink:hover
   {
       border: none !important;
       text-decoration: underline;
   }
   .RadPanelBar .rpRootGroup .rpExpandable:link
   {
       text-decoration: none;
       border: none !important;
   }

   .panelbarItem
   {
      color: #5F5F5F;
      font-size: 10pt;
       cursor: pointer;
       text-decoration: none;
       padding-left: 60px;
       height: 26px;
       border: none !important;
   }

<telerik:RadPanelBar ID="RadPanelBar2" runat="server" EnableEmbeddedSkins="false"
       Width="450"
       Skin=""
       OnItemDataBound="RadPanelbar1_ItemDataBound"
       OnItemClick="RadPanelbar1_ItemClick" ExpandMode="MultipleExpandedItems">
   <ExpandAnimation Type="OutQuint" Duration="900" />
</telerik:RadPanelBar>

PanelBar

answered on 02 Jan 2011

3 answers

655 views

Why can't Javascript functions in User Control be referenced?

I had previously posted this in the Slider section: http://www.telerik.com/community/forums/aspnet-ajax/slider/strange-msg-quot-microsoft-jscript-runtime-error-radslidingpane-beforeexpand-is-undefined-quot.aspx

But I now realize that this problem is not directly related to the Slider but likely has something to do with the loading sequence of Javascript.

To get to the heart of the problem, I created a simple little user control with this layout code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FullFaceMining.ascx.cs" Inherits="DataEntry.UserControls.FullFaceMining" %>

<script type="text/javascript">
function radTreeView1_Test(sender, eventArgs) {
debugger
}
</script>

<telerik:RadTreeView ID="radTreeView1" runat="server" OnClientDoubleClick="radTreeView1_Test">
</telerik:RadTreeView>

Note that it doesn't actually "do" anything but it has the same pattern of a client-side event referring to a client-side event handler. Lo and behold, it also fails when it's loaded. So at least there's some consistency!

But please believe me ... this was all working fine for the past 6 months!!! Suddenly and inexplicably, my project is seemingly unable to reference a user control's Javascript code now. Clearly I've changed something that has effected this problem but what?!?

Robert W.
Vancouver, BC

General Discussions

answered on 02 Jan 2011

3 answers

86 views

How do I handle Update and Delete in this case?

Hi ....
Evaluation is progressing ...

TestProject works like this (short working code below)
I select a TableName from dropdown and create gridcolumns etc dynamicly.

Questions
I need to know how to get values from UpdateForm when I press "Update" and how can I raise an event when I delete a row?
I also want to know if this is the right way/approach to do what I am trying to do!

Doing it lijke this also gives me another problem. Filter is working but the filter expression has dissappeared from filter-textbox ... anyone know how to fix this?

Check the following working code ....

Form code

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="edit_new3.aspx.vb" Inherits="edit" %>

<%@ Register Src="Controls/RecordEditForm.ascx" TagName="RecordEditForm" TagPrefix="uc1" %>

<!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 class="RecordEditForm">

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="TableComboBox">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TableGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="TableGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="TableGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div>

<telerik:RadComboBox ID="TableComboBox" runat="server" Skin="Office2007" AutoPostBack="True">

<Items>

<telerik:RadComboBoxItem runat="server" Enabled="False" Font-Italic="True" Selected="True"

Text="Choose table" Value="Choose table ..." />

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

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

</Items>

</telerik:RadComboBox>

</div>

<telerik:RadGrid ID="TableGrid" runat="server" AllowSorting="True" Skin="Office2007"

AllowFilteringByColumn="True" AutoGenerateColumns="False">

<ClientSettings EnableRowHoverStyle="True" EnableAlternatingItems="False" />

</telerik:RadGrid>

</form>

</body>

</html>

Code behind

Partial Class edit

Inherits System.Web.UI.Page

Protected Sub TableGrid_ItemCommand(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles TableGrid.ItemCommand

Select Case e.CommandName

Case "Updated"

'How to update my datatable in session

End Select

End Sub

Protected Sub TableGrid_NeedDataSource(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles TableGrid.NeedDataSourc

If TableComboBox.SelectedIndex > 0 Then

'Clear columns

TableGrid.Columns.Clear()

'Declares

Dim TempTable As New Data.DataTable

'Build fixed columns for delete and edit row

Dim EditColumn As New Telerik.Web.UI.GridEditCommandColumn

TableGrid.MasterTableView.Columns.Add(EditColumn)

EditColumn.ButtonType = Telerik.Web.UI.GridButtonColumnType.ImageButton

Dim DeleteColumn As New Telerik.Web.UI.GridClientDeleteColumn

TableGrid.MasterTableView.Columns.Add(DeleteColumn)

DeleteColumn.ButtonType = Telerik.Web.UI.GridButtonColumnType.ImageButton

DeleteColumn.ConfirmText = "Are you sure you want to delete the row?"

'Get Table .... create if it doesn-t exist

If Session(TableComboBox.SelectedValue) Is Nothing Then CreateDataSource()

TempTable = Session(TableComboBox.SelectedValue)

'Loop through Fields and create Columns and SQL field select

For Each Column As Data.DataColumn In TempTable.Columns

Dim BoundColumn As New Telerik.Web.UI.GridBoundColumn

TableGrid.MasterTableView.Columns.Add(BoundColumn)

BoundColumn.DataField = Column.ColumnName

BoundColumn.HeaderText = Column.ColumnName

Next

'Set datasource

TableGrid.DataSource = TempTable

End If

End Sub

Protected Sub TableComboBox_SelectedIndexChanged(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs) Handles TableComboBox.SelectedIndexChanged

TableGrid.Rebind()

End Sub

Sub CreateDataSource()

'Create Table

Dim EmployeeTable = New Data.DataTable

With EmployeeTable

.TableName = "Employees"

.Columns.Add("ID")

.Columns.Add("Name")

.Columns.Add("Phone")

.Rows.Add({1, "John", "444-667788"})

.Rows.Add({2, "Patric", "555-556677"})

End With

Session("Employees") = EmployeeTable

Dim CompanyTable As New Data.DataTable

With CompanyTable

.TableName = "Companies"

.Columns.Add("ID")

.Columns.Add("Company")

.Columns.Add("Phone")

.Rows.Add({1, "Microsoft", "444-667788"})

.Rows.Add({2, "Google", "555-556677"})

End With

Session("Companies") = CompanyTable

End Sub

End Class

Grid

answered on 02 Jan 2011

0 answers

60 views

problem with RadAsyncUpload

hi all
hope you will..
i have problem with RadAsyncUpload in asp.net ajax controls.
i have a web form that contains
1- asp image control 2- RadAsyncUpload contol 3- RadProgressArea 4- RadProgressManager

when i choose image to upload from RadAsyncUpload control i want to display it in the asp image control after the progress done without post back

please help me...
Thanks

AsyncUpload

asked on 01 Jan 2011

0 answers

116 views

Problem with radlistbox alignment after postback

I have master page with a RadSplitter and inside one of the panes I have two radlistbox elements. When the page is first rendered, everything is perfect. When I select an item from either list box (even if I select multiple or all items) and I move them to the other side (which triggers the ondeleted and/or oninserted event), the page postback renders the radlistboxes slightly above their original position, hiding other user controls. It remains that way until one of the list boxes achieves focus, then it drops down into it's proper place.

How do it fix this?

Page: (no other content but the content place holder controls)

<asp:Label ID="labelStatus" runat="server" />

<br />

<PBM:PBMActionButton ID="linkEdit" runat="server" ImageUrl="~/Images/32/save.png"

Text="Update User List" OnClick="linkEdit_OnClick" CssClass="actionbutton" />

<PBM:PBMActionButton ID="linkCancel" runat="server" ImageUrl="~/Images/32/undo.png"

Text="Cancel" OnClick="linkCancel_OnClick" CssClass="actionbutton" CausesValidation="false" />

<br />

<div>

<telerik:RadListBox ID="listSource" runat="server" TransferToID="listDestination"

AllowTransfer="true" AllowTransferDuplicates="false" AllowTransferOnDoubleClick="false"

AutoPostBackOnTransfer="true" SelectionMode="Multiple" TransferMode="Move" Height="200px"

Width="225px">

</telerik:RadListBox>

<telerik:RadListBox ID="listDestination" runat="server" Height="200px" Width="200px"

OnDeleted="listDestination_OnDeleted" OnInserted="listDestination_OnInserted"

SelectionMode="Multiple">

</telerik:RadListBox>

</div>

Hold down the <control> key to select multiple entries at a time.

Master:

<body>

<form style="height: 100%; width: 100%; margin: 0px; padding: 0px;" id="masterForm" runat="server">

<asp:ScriptManager ID="scriptmanagerGlobal" runat="server" EnablePartialRendering="true"

EnablePageMethods="true" EnableViewState="true" />

<telerik:RadAjaxManager ID="radajaxmanagerGlobal" runat="server" EnableAJAX="true"

EnableViewState="true">

</telerik:RadAjaxManager>

<div style="height: 100%; width: 100%">

<div class="headerpane headerbackground">

<telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Vertical" Width="100%"

Height="45" BorderSize="0" PanesBorderSize="0">

<telerik:RadPane ID="RadPane5" runat="server" Width="50%" Height="49">

<asp:ContentPlaceHolder ID="contentTopLeft" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

<telerik:RadPane ID="RadPane6" runat="server" Width="50%" Height="49" CssClass="valigncentered halignright"

MinHeight="49" MinWidth="50">

<span style="vertical-align: middle; text-align: right">Logged in as

<asp:LoginName ID="LoginName" runat="server" />

</span>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Windows7" Width="100%"

Height="100%" HeightOffset="50" BorderWidth="0px" BorderSize="0">

<telerik:RadPane ID="RadPane2" runat="server" Width="210px" CssClass="leftpane">

<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" Width="100%"

Height="100%" BorderSize="0" PanesBorderSize="0">

<telerik:RadPane ID="RadPane3" runat="server" Height="80%">

<asp:ContentPlaceHolder ID="contentPaneLeft" runat="server">

Default Content

</asp:ContentPlaceHolder>

</telerik:RadPane>

<telerik:RadPane ID="RadPane4" runat="server" Height="20%">

<asp:ContentPlaceHolder ID="contentPaneLeftBottom" runat="server">

Default Content

</asp:ContentPlaceHolder>

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False">

</telerik:RadSplitBar>

<telerik:RadPane ID="RadPane1" runat="server">

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="false">

<div class="breadcrumb clear">

<div>

<asp:Label ID="LabelTitle" runat="server" CssClass="pagetitle" /><asp:Label ID="LabelSubTitle"

runat="server" CssClass="pagesubtitle" />

</div>

<asp:PlaceHolder ID="BreadCrumb" runat="server" />

</div>

<asp:ContentPlaceHolder ID="contentPaneRight" runat="server">

Default Content

</asp:ContentPlaceHolder>

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

ListBox

asked on 31 Dec 2010

19 answers

314 views

Is it possible to save and load a dock's collapse state?

Hi,

As per the title, I have managed to save the raddocklayout state to a database and restore it sucessfully. However, it only seems to be saving/restoring all the dock's positions within a dockzone. i.e. it restores docks to the appropriate dockzones and to their places within the dockzones.

However, it does not seem to be restoring the collapse state of any dock. I got the code from various forum posts and the demo etc.

What am I doing wrong?

Thanks,
Steve

My save code:

    
            JavaScriptSerializer serializer = new JavaScriptSerializer(); 
        
                        string serializedPositions = serializer.Serialize(e.Positions); 
        
                        string serializedIndices = serializer.Serialize(e.Indices); 
        
                        string serializedLayout = serializer.Serialize(new string[] { serializedPositions, serializedIndices }); 
        
            // save it to a SQL Server database

My restore code:

    
            string layout = /* get the string from the database */; 
        
                                if (!string.IsNullOrEmpty(layout)) 
        
                                { 
        
                                    JavaScriptSerializer serializer = new JavaScriptSerializer(); 
        
                                    string[] positionsAndIndices = serializer.Deserialize<string[]>(layout); 
        
                                    e.Positions = serializer.Deserialize<Dictionary<string, string>>(positionsAndIndices[0]); 
        
                                    e.Indices = serializer.Deserialize<Dictionary<string, int>>(positionsAndIndices[1]); 
        
                                }

Dock

answered on 31 Dec 2010

2 answers

118 views

GridButtonColumn ConfirmText - Carriage Return Line Feed

Hi,

I am using a GridButtonColumn in a grid to delete records. The confirm text that I want to display is quite long. Is it possible to put a carriage return and line feed in the text?

ConfirmText

="This group will be deleted from all users that have this group assigned to them. This process CANNOT be undone. Are You Sure Want To Delete This Group?" ConfirmDialogType="RadWindow"

Thank You

Grid

answered on 31 Dec 2010

1 answer

394 views

Assign multiple client side methods to one client side event?

I have a RadNumericTextbox and I want to assign two javascript events to fire for the OnValueChanged.

So lets say I have JavaScript methods called MethodA(); and MethodB(); that I want to call. What I would like to do would be something like this:

<telerik:RadNumericTextBox ID="rntMyTextBox" Type="Number" runat="server"
                    MaxValue="997" EnabledStyle-HorizontalAlign="Right" Font-Size="Small" MaxLength="3"
                    MinValue="0" Width="153px" FocusedStyle-PaddingRight="1px" ShowSpinButtons="true"
                    ClientEvents-OnValueChanged="MethodA(); MethodB();">

I am able to stack methods on other HTML properties, such as when I add an onChange="alert('A'); alert('B');" property and change the value via the page, then I get the expected message boxes, the first saying A, the second saying B.

So the first question is, can this be done? If so, what is the format? I can't seem to make it work.

Secondly, one of the methods I'm adding sets a 'FormHasChanged' bool to True... but based on another forum post I read it would seem the 'OnValueChanged' fires once when the page loads and the control populates the value initially... is there a way to modify this behavior? The other post suggested tracking the before and after values... this is far from ideal as I would like to be able to generically add a call to set the bool when the value changes.

The big picture is this:

From a random page's code behind I want to be able to call a function I created like so:

//Add the OnChange event to all the appropriate controls on this user control.
ControlManager.AddOnChange(this.Controls, "SetDirtyFlag", true);

The AddOnChange method loops through all the controls in the passed in control set. For each control, it tries to decide how best to apply an 'onChange' event... ADDING to any existing method defined. The way I'm trying to do this for a RadNumericEtc is something like :

else if(control is RadNumericTextBox)
{
	(control as RadNumericTextBox).ClientEvents.OnValueChanged = (control as RadNumericTextBox).ClientEvents.OnValueChanged + ";" + onChangeString;
	//We also want to avoid user tab to the up and down spinner buttons on any RadNumericTextBox controls.
	(control as RadNumericTextBox).ButtonDownContainer.Attributes.Add("tabindex", "-1");
	(control as RadNumericTextBox).ButtonUpContainer.Attributes.Add("tabindex", "-1");
}

This way, when I call AddOnChange, the SetDirtyFlag method call would be ADDED to any other method(s) defined to fire when the value changes. The SetDirtyFlag simply sets the 'FormHasChanged' flag to true, without needing to include any other specific logic.

So my two issues are 1) I can't seem to stack method calls and 2) If the 'OnValueChanged' fires at page load, then the page will ALWAYS think the form has changed... and if I have to track before/after values, then that would require a MASSIVE amount of additional coding...

Thoughts?

Input

answered on 31 Dec 2010

1 answer

160 views

Hiding text from the design, html & preview buttons in RadEditor

Hi,

I'm currently upgrading our application to support the Ajax editor. I'd like to hide the above mentioned button text. I just want to see their icons with tooltips. How would I do this?

Regards,
Laredo

Editor

answered on 31 Dec 2010