Questions on UI for ASP.NET AJAX Forum

5 answers

179 views

Custom Skins not working with Dynamic Splitters

Hi,
I have made a custom Skin for nested splitters that works OK when I put the splitter code directly in the .aspx page.
When I attempt to create the splitters in C# code-behind with a Link to the skin's css in the .aspx header, the css is not used.
Do I have to dynamically change the skins after the client-side onload event?
Is there another way to specify the Skins css-path in the code-behind?
If so, how would I go about doing so. All your demo's have a "change skin" dropdown (openSkinChooser), but I can't find any info on this.

All this was based in your nested splitters demo and splitters\DynamicObjectCreation (which defaults to the Vista built-in skin)
Here is the code for the .aspx:

    
            <%@ Page Language="c#" CodeFile="DefaultCS4.aspx.cs" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Splitter.DynamicObjectCreation.DefaultCS4" %> 
        
            <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <style type="text/css"> 
        
                html, body, form 
        
                { 
        
                   height: 100%; 
        
                   width: 100%; 
        
                   margin: 0px; 
        
                   padding: 0px; 
        
                   overflow: hidden; 
        
                } 
        
                </style> 
        
                <link href="../../../Skins/Foobar/Foobar/Splitter.Foobar.css" rel="Stylesheet" type="text/css" /> 
        
            </head> 
        
            <body > 
        
                <form id="Form1" method="post" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <asp:Panel runat="server" ID="SplitterHolder" Width="100%" Height="100%"> 
        
                    <%-- here will be added dynamically the splitter --%> 
        
                </asp:Panel> 
        
                </form> 
        
                <script type="text/javascript" src="JScript.js"></script> 
        
            </body> 
        
            </html>

Here is the code for the Splitters:

    
            using System; 
        
            using System.Collections; 
        
            using System.ComponentModel; 
        
            using System.Data; 
        
            using System.Drawing; 
        
            using System.Web; 
        
            using System.Web.SessionState; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Web.UI.HtmlControls; 
        
            using Telerik.Web.UI; 
        
            namespace Telerik.Web.Examples.Splitter.DynamicObjectCreation 
        
            { 
        
                /// <summary> 
        
                /// Summary description for DefaultCS. 
        
                /// </summary> 
        
                public partial class DefaultCS4 : Page 
        
                { 
        
                    //protected Telerik.Web.UI.RadPane pane1; 
        
                    //protected Telerik.Web.UI.RadSplitter splitter1; 
        
                    //protected System.Web.UI.WebControls.Button Button1; 
        
                    private void Page_Load(object sender, System.EventArgs e) 
        
                    { 
        
                        /* Splitter1: Two panes, horizontal, NO Splitbar 
        
                           BottomPane contains two other nested splitters*/ 
        
                            RadSplitter Splitter1 = new RadSplitter(); 
        
                            Splitter1.ID="RadSplitter1"; 
        
                            Splitter1.Orientation = Orientation.Horizontal; 
        
                            Splitter1.BackColor = ColorTranslator.FromHtml("#00137F");  
        
                            Splitter1.Width = Unit.Percentage(100.0); 
        
                            Splitter1.Height = Unit.Percentage(100.0); 
        
                                RadPane TopPane = new RadPane(); //Fixed top pane 
        
                                TopPane.ID="TopPane"; 
        
                                TopPane.Height = Unit.Pixel(50); 
        
                                TopPane.Scrolling = SplitterPaneScrolling.None;  
        
                                    Label label0 = new Label(); 
        
                                    label0.Text = "<span style='color:White'>Top Pane</span>"+ 
        
                                    "<a href='javascript:togglenav('tree')' ><span style='color:White'>TOC</span></a><br />"+ 
        
                                    "<a href='javascript:togglenav('idx')' >Index</a><br />"+ 
        
                                    "<a href='javascript:togglenav('search')' >Search</a><br/>"; 
        
                                TopPane.Controls.Add(label0); 
        
                                RadPane BottomPane = new RadPane(); 
        
                                BottomPane.ID="BottomPane"; 
        
                            Splitter1.Items.Add(TopPane); 
        
                            //vertical splitter goes in BottomPane 
        
                                RadSplitter Splitter2 = new RadSplitter(); 
        
                                Splitter2.ID="RadSplitter2"; 
        
                                Splitter2.Width = Unit.Percentage(100.0); 
        
                                Splitter2.Height = Unit.Percentage(100.0); 
        
                                Splitter2.BackColor = System.Drawing.Color.White; 
        
                                Splitter2.EnableEmbeddedSkins=false; 
        
                                Splitter2.Skin="Foobar"; 
        
                            // LeftPane of Splitter2 
        
                                    RadPane LeftPane = new RadPane(); 
        
                                    LeftPane.ID="LeftPane"; 
        
                                    LeftPane.Width = Unit.Percentage(25.0); 
        
                                    LeftPane.Height= Unit.Percentage(100.0); 
        
                                    // add content to LeftPane 
        
                                        Label label1 = new Label(); 
        
                                        label1.Text =   "<div id='tree' style='padding-left:10px;padding-top:10px;'>"+ 
        
                                        "left NAV content Tree"+ 
        
                                        "<br /><a href='http://google.com' target= TopContentPane>Open google.com</a><br />"+ 
        
                                        "<a href='http://flickr.com' target=TopContentPane>Open flickr.com</a>"+ 
        
                                        "</div>"+ 
        
                                        "<div id='idx' style='padding-left:10px;padding-top:10px;display: none;'>"+ 
        
                                        "left NAV content Index  </div>"+ 
        
                                        "<div id='search' style='padding-left:10px;padding-top:10px;display: none;'>"+ 
        
                                        "left NAV content Search </div>"; 
        
                                    LeftPane.Controls.Add(label1); 
        
                            // add the pane in to Splitter2 
        
                                Splitter2.Items.Add(LeftPane); 
        
                            // now create Splitter2 SplitBar 
        
                                RadSplitBar SplitBar2 = new RadSplitBar(); 
        
                                SplitBar2.ID="RadSplitbar2"; 
        
                                SplitBar2.CollapseMode = SplitBarCollapseMode.Forward; 
        
                            // add the SplitBar2 to Splitter2 
        
                                Splitter2.Items.Add(SplitBar2); 
        
                            // create Splitter2 right pane       
        
                                    RadPane RightPane = new RadPane(); 
        
                                    RightPane.ID="RightPane"; 
        
                                    RightPane.Scrolling = SplitterPaneScrolling.None; //to avoid double scroll bars 
        
                            //create horizontal splitter in RightPane 
        
                                        RadSplitter Splitter3 = new RadSplitter(); 
        
                                        Splitter3.ID="RadSplitter3"; 
        
                                        Splitter3.Orientation = Orientation.Horizontal; 
        
                                        Splitter3.Width = Unit.Percentage(100.0); 
        
                                        Splitter3.Height = Unit.Percentage(100.0); 
        
                                        Splitter3.BackColor = System.Drawing.Color.White; 
        
                                        Splitter3.EnableEmbeddedSkins=false; 
        
                                        Splitter3.Skin="Foobar"; 
        
                            //Create top pane in Splitter3:  
        
                                        RadPane TopContentPane = new RadPane(); 
        
                                        TopContentPane.ID="TopContentPane"; 
        
                                        TopContentPane.ContentUrl = "default.html"; 
        
                                        Splitter3.Items.Add(TopContentPane); 
        
                            //Create SplitBar3 in Splitter3:  
        
                                        RadSplitBar SplitBar3 = new RadSplitBar(); 
        
                                        SplitBar3.ID="RadSplitBar3"; 
        
                                        SplitBar3.CollapseMode = SplitBarCollapseMode.Backward; 
        
                                        Splitter3.Items.Add(SplitBar3); 
        
                            //Create bottom pane in Splitter3: 
        
                                        RadPane BottomContentPane = new RadPane(); 
        
                                        BottomContentPane.ID="BottomContentPane"; 
        
                                        BottomContentPane.Collapsed=true; 
        
                                        BottomContentPane.Height=Unit.Pixel(330); 
        
                                        BottomContentPane.MaxHeight=330; 
        
                                        BottomContentPane.Scrolling = SplitterPaneScrolling.None; //Prevents double scrollbar 
        
                                        BottomContentPane.MinHeight=0; 
        
                            //Add Preview <div> 
        
                                            Label label2 = new Label(); 
        
                                            label2.Text="<div style='width:100%; height:100%' id='preview'></div>"; 
        
                                        BottomContentPane.Controls.Add(label2); 
        
                                        Splitter3.Items.Add(BottomContentPane); 
        
                            //Add Content (Splitter3) to RightPane of Splitter2 
        
                                    RightPane.Controls.Add(Splitter3); 
        
                            //Add RightPane to Splitter2 
        
                                Splitter2.Items.Add(RightPane); 
        
                            //Splitter2 to BottomPane of Splitter1 
        
                            BottomPane.Controls.Add(Splitter2); 
        
                            //BottomPane to Splitter1 
        
                            Splitter1.Items.Add(BottomPane); 
        
                            //Add Splitter1 to Placeholder 
        
                            SplitterHolder.Controls.Add(Splitter1); 
        
                    } 
        
                    override protected void OnInit(EventArgs e) 
        
                    { 
        
                        // 
        
                        // CODEGEN: This call is required by the ASP.NET Web Form Designer. 
        
                        // 
        
                        InitializeComponent(); 
        
                        base.OnInit(e); 
        
                    } 
        
                    /// <summary> 
        
                    /// Required method for Designer support - do not modify 
        
                    /// the contents of this method with the code editor. 
        
                    /// </summary> 
        
                    private void InitializeComponent() 
        
                    {     
        
                        this.Load += new System.EventHandler(this.Page_Load); 
        
                    } 
        
                } 
        
            }

Thanks,
Mike

Splitter

answered on 12 May 2010

5 answers

170 views

RadEditor and IE ???

I have a problem with IE 8 ??

with my personnal skin the editor are explosed...see screenshoot.

but with firefox the same page are OK ?????

i have a same problem with a arrow on combobox ???

Editor

answered on 12 May 2010

1 answer

183 views

RadUpload upload images from local machine

Hi,
I'm using the RadEditor control to allow users to create emails on our website. The website is posted on a webserver, however I want the users to be able to upload images from their own pc's is this possible to do.

My settings are
<telerik:RadEditor ID="RadEditor1" runat="server">
                <ImageManager UploadPaths="~\images" ViewPaths="~\images" />
                <Content>
</Content>
            </telerik:RadEditor>

Regards

Robert Smith

Editor

answered on 12 May 2010

1 answer

112 views

Can I prevent drag/drop between grids?

I have an application with two RadGrids on the page together. I have drag/drop functionality for each grid, which works fine. However when dragging from one grid to the other, It creates the Javascript errors copied below. On some environments, depending on the version/settings of the browser, it can cause a 404 error. I have tried to solve this issue by adding code to my RowDrop event handler that ignores all drops from other grids. But these errors are happening before the RowDrop is called.

How can I prevent these errors without losing the ability to drag/drop within the same grid?

Message: Sys.WebForms.PageRequestManagerServerErrorException: Cannot find a cell bound to column name 'Tasks'
Line: 4723
Char: 21
Code: 0
URI: http://localhost/Portal/ScriptResource.axd?d=fUJMFujfF39B_MM1dA7T_Ma2RfpS-GNQI3ziev5S6xl4tV7mAyNoKGpas918t9DDxFFDHGrlJR32pG3inQwrxiDv0KhaA9jpi0IMUfn4-f01&t=ffffffffec2d9970

Grid

answered on 12 May 2010

4 answers

229 views

Ajax for filling child radcombobox not working

Hi,
I have 2 radcomboboxes on my page. One for country and one for city. On the selected index changed event of the country dropdowni want to fill my city dropdown, which requires a database hit. I tried the following code, but it is causing postback, and working in ajax.

master page:

<div>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

<telerik:RadWindow ID="RadWindow1" Height="500px" Width="600px"

KeepInScreenBounds="true" OnClientShow="OnPopupShow" Behaviors="Close,Pin,Maximize,Reload,Move"

OnClientClose="OnPopupClose" ReloadOnShow="false" ShowContentDuringLoad="false" Modal="true" runat="server">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

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

<asp:ScriptReference Name="" Assembly="" Path="~/Common/Scripts/Gateway.js" />

</Scripts>

</telerik:RadScriptManager>

</div>

Content page - on which Ajax is required:

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

<telerik:AjaxSetting AjaxControlID="Country" EventName="SelectedIndexChanged">

<telerik:AjaxUpdatedControl ControlID="City" LoadingPanelID="loadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="loadingPanel" runat="server">

<asp:Image ID="loadingImage" runat="server" ImageAlign="Middle" ImageUrl="~/Images/Loading.gif">

</asp:Image>

</telerik:RadAjaxLoadingPanel>

<td>

Client Country

</td>

<td>

<telerik:RadComboBox ID="Country" runat="server" Width="150px" OnSelectedIndexChanged="Country_SelectedIndexChanged"

AutoPostBack="true" Height="170px">

</telerik:RadComboBox>

</td>

<td>

Client City

</td>

<td>

<%

-- <asp:TextBox ID="ClientCity" runat="server" Width="110px"></asp:TextBox>--%>

<telerik:RadComboBox ID="City" runat="server" Width="110" AllowCustomText="true"

MarkFirstMatch="true" ShowToggleImage="false" MaxHeight="170px">

</telerik:RadComboBox>

</td>

Please suggest what can be done to ajaxify filling of the child radcombobox.

ComboBox

answered on 12 May 2010

1 answer

86 views

Adding labels along axis

Sorry for what is probably an elementary question. First day using Radchart. I've been searching for an answer, but haven't found anything yet.

I'm dynamically creating the charts because the # of charts will change. Here's the function I'm using:

    
                Protected Sub CreateChart(ByVal sQuestionId As String, ByVal chtChart As RadChart) 
        
                    Dim csSeries As New Telerik.Charting.ChartSeries 
        
                    csSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName 
        
                    chtChart.Skin = "Inox" 
        
                    chtChart.SeriesOrientation = ChartSeriesOrientation.Horizontal 
        
                    oConn.Open() 
        
                    Try 
        
                        oCmd = New SqlCommand("Survey_ReportingByQuestionId", oConn) 
        
                        oCmd.CommandType = CommandType.StoredProcedure 
        
                        oCmd.Parameters.Clear() 
        
                        oCmd.Parameters.AddWithValue("@QuestionId", sQuestionId) 
        
                        If oRdr.HasRows Then 
        
                            Do While oRdr.Read 
        
                                Dim csiSeriesItem As New Telerik.Charting.ChartSeriesItem 
        
                                csiSeriesItem.YValue = oRdr.Item("AnswerCount") 
        
                                csiSeriesItem.Name = oRdr.Item("Answer") 
        
                                csSeries.AddItem(csiSeriesItem) 
        
                            Loop 
        
                        End If 
        
                    Catch ex As Exception 
        
                    Finally 
        
                        oConn.Close() 
        
                    End Try 
        
                    chtChart.AddChartSeries(csSeries) 
        
                End Sub

The "answers" are things like True/False, A/B/C/D, etc. How can I use those to label the X axis instead of the default numbers that the chart generates? The only way I've seen to do it is through databinding, which I'm not doing.

Any help would be greatly appreciated!

Chart (Obsolete)

answered on 12 May 2010

1 answer

70 views

IE8 Grouping issue

When you use grouping in RadGrid in combination with IE8 (Regular), it isn't working properly (no cursor on header) and you can only group one column. When you choose compatible mode it's working fine. Is there any workaround available?

Thanks.

Grid

answered on 12 May 2010

5 answers

126 views

Help required with OnClientNodePopulationFailed event

Hi,

Is there any way of getting the http error code when this result fires? In my application (asp.net mvc) I am returning a 403 Forbidden code when the forms authentication for the user times out.

In my other ajax calls to the app, the code is available and I am redirecting the users to the login page if appropriate. An example of this would be the ClientNodeDropping event

    
            //handles node dropping event. 
        
            function clientNodeDropping(sender, eventArgs) { 
        
              //Get source and destination nodes. 
        
              var srcNode = eventArgs.get_sourceNode(); 
        
              var destNode = eventArgs.get_destNode(); 
        
              //Get values needed to update a folder or reports location. 
        
              var srcId = srcNode.get_value(); 
        
              var srcType = srcNode.get_attributes().getAttribute("nodeType"); 
        
              var destId; 
        
              var destType; 
        
              try { 
        
                destId = destNode.get_value(); 
        
                destType = destNode.get_attributes().getAttribute("nodeType") 
        
              } 
        
              catch (e) { 
        
                destId = 0; 
        
                desttype = "Folder"; 
        
              } 
        
              //Check that destination node is not of "Report" nodeType. 
        
              if (destType != "Report") { 
        
                $.ajax({ 
        
                  type: "POST", 
        
                  url: "/Reports/MoveNode/", 
        
                  data: ({ sourceId: srcId, destinationId: destId, srcNodeType: srcType, destNodeType: destType }), 
        
                  dataType: "json", 
        
                  success: function(response) { 
        
                    if (response.Success) { 
        
                      clientNodeDroppingSuccess(srcNode, destNode, srcType, destType); 
        
                    } 
        
                    else { 
        
                      alert(response.Errors[0]); 
        
                      eventArgs.set_cancel(true); 
        
                    } 
        
                  }, 
        
                  error: function(xhr, state, errorThrown) { 
        
                    switch (xhr.status) { 
        
                      case 403: 
        
                        window.location = window.location; 
        
                        break; 
        
                      default: 
        
                        alert("Sorry, that action could not be performed at this time."); 
        
                        eventArgs.set_cancel(true); 
        
                        break; 
        
                    } 
        
                  } 
        
                }); 
        
              } 
        
            }

How can I achieve this with the OnClientNodePopulationFailed event?

Thanks,
Nick

TreeView

answered on 12 May 2010

1 answer

109 views

JS Error on Menu

I'm having an issue with rad menu throwing a JavaScript error when I mouse over an item in a non ie browser.

The error I'm getting is below.

Error: j is null
Source File: /Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a3bbfe379-348b-450d-86a7-bb22e53c1978%3aea597d4b%3bTelerik.Web.UI%2c+Version%3d2010.1.415.35%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a710a7ed7-bdf5-4c33-88f0-6cb83da7e591%3a16e4e7cd%3af7645509%3a24ee1bba%3ae330518b%3a1e771326%3ac8618e41
Line: 2552

The server is IIS6 with .net 3.5 sp1 and ajax extensions 2.0 installed. There is nothing special or dynamic about the menu on the page, it's all hard coded for a proof of concept.

You can see example here. It all works fine locally in all of the browsers.
http://bit.ly/9roeqA

Menu

answered on 12 May 2010

2 answers

77 views

Edit/Insert Templates different how to implement?

At the moment I am setting the visibilty of controls on the itemdatabound event handler after detecting if row is in insert/edit mode.

    
            if (e.Item is GridEditFormItem && e.Item.IsInEditMode) 
        
            { 
        
                 (e.Item.FindControl("txtUserName") as WebControl).Enabled = false; 
        
            }

This seems quite cumbersome to me, is there a better way to do it?

Thanks

Luis

Grid

answered on 12 May 2010