Questions on UI for ASP.NET AJAX Forum

2 answers

150 views

I have a rad panel bar Working from a sample. I Added in some javascript to make it move down the side of a page as the user scrolls.

The behavior is - I click an image to open the panelbar and click it again to close the panelbar.

How Can I make this panelbar collapse as soon as someone mouses off of it, like in Visual Studio instead of clicking the button again ?

                <div id="divTopLeft" style="float: left; outline: 0; position: Absolute;" > 
        
                    <asp:Image runat="server" ID="tbimage" ImageUrl="images/Navigation-open.jpg"  Style="float: left;  
        
                        outline: 0; position: Absolute;" /> 
        
                </div> 
        
                <script type="text/javascript">  
        
                    var ns = (navigator.appName.indexOf("Netscape") != -1);  
        
                    var d = document;  
        
                    function JSFX_FloatDiv(id, sx, sy) {  
        
                        var el = d.getElementById ? d.getElementById(id) : d.all ? d.all[id] : d.layers[id];  
        
                        var px = document.layers ? "" : "px";  
        
                        window[id + "_obj"] = el;  
        
                        if (d.layers) elel.style = el;  
        
                        elel.cx = el.sx = sx; elel.cy = el.sy = sy;  
        
                        el.sP = function(x, y) { this.style.left = x + px; this.style.top = y + px; };  
        
                        el.floatIt = function() {  
        
                            var pX, pY;  
        
                            pX = (this.sx >= 0) ? 0 : ns ? innerWidth :  
        
                    document.documentElement && document.documentElement.clientWidth ?  
        
                    document.documentElement.clientWidth : document.body.clientWidth;  
        
                            pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?  
        
                    document.documentElement.scrollTop : document.body.scrollTop;  
        
                            if (this.sy < 0)  
        
                                pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?  
        
                    document.documentElement.clientHeight : document.body.clientHeight;  
        
                            this.cx += (pX + this.sx - this.cx) / 8; this.cy += (pY + this.sy - this.cy) / 8;  
        
                            this.sP(this.cx, this.cy);  
        
                            setTimeout(this.id + "_obj.floatIt()", 10);  
        
                        }  
        
                        return el;  
        
                    }  
        
                    JSFX_FloatDiv("divTopLeft", 0, 0).floatIt();  
        
                </script> 
        
                <div id="menucontainer" class="leftPanelBarContainer">  
        
                    <div id="slidingDiv" style="visibility: hidden;" > 
        
                        <telerik:RadPanelBar runat="server" Width="155" ID="RadPanelBar1" ExpandMode="FullExpandedItem" 
        
                          ><Items>  
        
                             <telerik:RadPanelItem Expanded="True" Text="" BorderWidth="0"  > 
        
                                    <ItemTemplate> 
        
                                        <uc2:MyNavigation ID="MyNavigation3" runat="server"  ></uc2:MyNavigation> 
        
                                    </ItemTemplate> 
        
                                </telerik:RadPanelItem> 
        
                            </Items> 
        
                        </telerik:RadPanelBar> 
        
                    </div> 
        
                </div> 
        
                <script language="javascript" type="text/javascript">  
        
                    var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');  
        
                    var timage = $get('<%= tbimage.ClientID %>');  
        
                    if (panelDomElement) {  
        
                        SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);  
        
                    }  
        
                    function SetUpAnimation(image, direction, element) {  
        
                        element.style.position = "relative";  
        
                        var slider = document.getElementById(image);  
        
                        var expanded = false;  
        
                        var expandAnimation = new Telerik.Web.UI.AnimationSettings({});  
        
                        var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});  
        
                        var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);  
        
                        slide.initialize();  
        
                        slide.set_direction(direction);  
        
                        slider.onclick = function() {  
        
                            element.parentNode.style.visibility = "visible";  
        
                            element.parentNode.style.display = "block";  
        
                            JSFX_FloatDiv("menucontainer", 20, 0).floatIt();  
        
                            if (!expanded) {  
        
                                slide.expand();  
        
                                document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-close.jpg';  
        
                            }  
        
                            else {  
        
                                slide.collapse();  
        
                                document.aspnetForm.ctl00_tbimage.src = 'images/Navigation-open.jpg';  
        
                            }  
        
                            expanded = !expanded;  
        
                            return false;  
        
                        }  
        
                    }  
        
                </script>

PanelBar

answered on 10 Jun 2009

2 answers

80 views

Child menu's now have tabs

Before I upgraded to the this quarters release, my child tabs just displayed text and icons using the default css (which is what I wanted) but now all the child items have tabs which is ugly looking.

Is there any way to get rid of them?

Thanks,
Joe

Menu

answered on 10 Jun 2009

1 answer

99 views

Bar Chart question

I have a bar chart that I want the Labels on the x axis to display a name not a count. Currently the x axis labels are just a count of 1,2,3,4. Here is the markup and the code behind :

    
            <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
        
                                        ConnectionString="<%$ ConnectionStrings:tp %>"  
        
                                        SelectCommand="tsp_PortalChart_Get"  
        
                                SelectCommandType="StoredProcedure"> 
        
                                <SelectParameters> 
        
                                    <asp:CookieParameter CookieName="PortalAccountNumber" DefaultValue=""  
        
                                                Name="AccountNumber" Type="Int32" /> 
        
                                </SelectParameters> 
        
                            </asp:SqlDataSource> 
        
            <telerik:RadChart ID="RadChart1" runat="server"  
        
                Title="Account Summary" OnItemDataBound="RadChart1_ItemDataBound"  
        
                DataSourceID="SqlDataSource1"  
        
                ChartTitle-TextBlock-Appearance-TextProperties-Font="Verdana, 10pt"  
        
                Width="370px" Height="254px"> 
        
                <Appearance> 
        
                    <Border Visible="False" /> 
        
                </Appearance> 
        
            <ChartTitle> 
        
            <TextBlock Text="Account Summary"> 
        
            <Appearance TextProperties-Font="Verdana, 10pt"></Appearance> 
        
            </TextBlock> 
        
            </ChartTitle> 
        
                                <Legend Appearance-ItemTextAppearance-TextProperties-Font="Verdana, 8pt"> 
        
            <Appearance> 
        
            <ItemTextAppearance TextProperties-Font="Verdana, 8pt"></ItemTextAppearance> 
        
            </Appearance> 
        
                                </Legend> 
        
                               <Series> 
        
                                <cc1:ChartSeries Name="Series 1" Type="Bar" DataYColumn="Count"> 
        
                                <Appearance LegendDisplayMode="ItemLabels" ></Appearance> 
        
                                </cc1:ChartSeries> 
        
                                </Series> 
        
                                 </telerik:RadChart>

Code Behind

    
            Partial Class UserControls_AccountSummaryChart 
        
                Inherits System.Web.UI.UserControl 
        
                Protected Sub RadChart1_ItemDataBound(ByVal sender As Object, ByVal e As ChartItemDataBoundEventArgs) 
        
                    e.SeriesItem.Name = CType(e.DataItem, DataRowView)("Name").ToString() 
        
                End Sub 
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
        
                    RadChart1.Skin = Application("TelerikTheme") 
        
                    RadChart1.ChartTitle.TextBlock.Text = Application("CompanyName").ToString 
        
                    RadChart1.Chart.Appearance.FillStyle.MainColor = Color.Transparent 
        
                    If Not IsPostBack Then 
        
                        RadChart1.DataSourceID = "SqlDataSource1" 
        
                        RadChart1.DataBind() 
        
                        RadChart1.Series(0).Name = "Type" 
        
                        Dim barColors As Color() = New Color(4) {Color.Purple, Color.SteelBlue, Color.Green, Color.Yellow, Color.Crimson} 
        
                        Dim i As Integer = 0 
        
                        For Each item As ChartSeriesItem In RadChart1.Series(0).Items 
        
                            item.Appearance.FillStyle.MainColor = barColors(System.Math.Max(System.Threading.Interlocked.Increment(i), i - 1)) 
        
                        Next 
        
                    End If 
        
                End Sub 
        
            End Class

Thanks!
Sam

Chart (Obsolete)

answered on 10 Jun 2009

1 answer

78 views

ComboBox Generates an error

Hi , Please help me to implement the combo box . I cant find a proper example for combo box . I did all steps described in the live demos and as soos as I add OnClientSelectedIndexChanging="LoadCities" or OnClientItemsRequested="ItemsLoaded" I get "Microsoft JScript runtime error: Object doesn't support this property or method " What is the problem ?

ComboBox

answered on 10 Jun 2009

3 answers

220 views

[Solved] RadGrid Selected Item Issue

I have an requirement of selecting the first item/row of the RadGrid selected on client side. I have used following code snippet:--

var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
var dataItem = masterTable.get_dataItems()[0];
dataItem.set_selected(true);

But somehow it is not working. Do i need to set some property of the RadGrid. I am getting the follwoing java script error:--

this._owner._owner._selection is null

Can any one help me?

Grid

answered on 10 Jun 2009

1 answer

107 views

Clearing the selected item in the Rad Combo box.

Hi,

Can anybody tell how to clear the selected items in the rad combo box using the Java script.

Thanks & Regards,
Sushanth Mathew

ComboBox

answered on 10 Jun 2009

2 answers

218 views

Moving the selected item of one Rad combo box to another using Java script.

Hi,

Can any one tell me how to move the selected item of one Rad combo box to another combo box using java script.

For ex: i have two Rad combo box which populate the "Country Name". When i select any country in the first combo box, on the selection of the check box that selected item need to move to the second combo box selected item using the javascript.

I am able to get the value but unable to make that as the second combo box selected one.

Thanks & Regards,
Sushanth Mathew.

ComboBox

answered on 10 Jun 2009

1 answer

81 views

Server-side ItemCreated event gets called even after client-side RequiredFieldValidator requires input

In my FormTemplate I have a RadDateTimePicker that is validated using a RequiredFieldValidator. I use a custom Updatebutton to save the fields. The user is required to provide a date in the RadDateTimePicker. The validation does appear to work and the user gets an error message if they fail to provide a date. The problem is, is that the ItemCreated event on the server-side still gets fired when the user presses the Update button. Why is this happening? The grid shouldn't be performing any postbacks when a RequiredFieldValidator indicates that the user must provide input. The whole point of having the validation done on the client-side is to avoid a postback of any kind to the server. Here is the code in my FormTemplate:

    
            <FormTemplate> 
        
                <table id="tableSessionDetails" cellpadding="5px" cellspacing="0" border="0" style="width: 100%;  
        
                  margin-top: 10px; margin-left: 5px"> 
        
                  <tr> 
        
                    <td style="width: 120px">  
        
                      <asp:Label ID="lblSessionDate" runat="server" Text="Session Date:" CssClass="RadGridDetailsLabel"></asp:Label> 
        
                    </td> 
        
                    <td> 
        
                      <telerik:RadDateTimePicker ID="RadDateTimePickerSessionDate" runat="server" Skin="Sunset">  
        
                      </telerik:RadDateTimePicker> 
        
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="RadDateTimePickerSessionDate" 
        
                            ErrorMessage="This field is required" runat="server">  
        
                        </asp:RequiredFieldValidator> 
        
                    </td> 
        
                  </tr> 
        
                </table> 
        
                <table cellpadding="0" cellspacing="0" border="0" style="margin: 10px; width: 100%">  
        
                  <tr> 
        
                    <td align="right" style="padding-right: 20px; padding-bottom: 10px">  
        
                      <asp:ImageButton ID="imgUpdate" runat="server" ImageUrl="~/images/Update.gif" ToolTip="Update Record" 
        
                        Style="padding-right: 5px" CommandName="Update" /> 
        
                      <asp:ImageButton ID="imgCancel" runat="server" ImageUrl="~/images/Cancel.gif" ToolTip="Cancel Editing" 
        
                        CommandName="Cancel" /> 
        
                    </td> 
        
                  </tr> 
        
                </table> 
        
            </FormTemplate>

Grid

answered on 10 Jun 2009

4 answers

335 views

[Solved] Radgrid currency edit column

How to make the currency editable column GridBoundColumn or GridMaskedColumn in radgrid input currency round by 2 like 77.45, prevent the user inputting 77.353333?

Thanks!

Grid

answered on 10 Jun 2009

1 answer

108 views

IE problem rendering node url containing anchor name

I'm having a problem with rendering my treeview control in IE (I've tested on IE8, 7 & 6).

My node urls point to a various content pages, some of which may also have an anchor name in order to navigate to an anchor within the target content page, such as in the example below:

radTreeNode.NavigateUrl = "examplecontentpage.aspx#navigate to section"

However this example has spaces in the anchor name, IE seems to replace the space character with '%20' which when clicked results in the page not being able to navigate to the anchor on the target page. Neither Firefox and Chrome seem to have this behaviour, neither replace the space character and both navigate to the anchor correctly. Also, I have content pages where this same link may exist elsewhere on the page (outside of the treeview control) and the anchor works fine in IE, so this behaviour seems to be specific to the treeview control in IE.

Any ideas if/how I may resolve this without resorting to having to amend all anchor names?

TreeView

answered on 10 Jun 2009