Questions on UI for ASP.NET AJAX Forum

1 answer

118 views

Hi,
I'm trying to build a horitzonal bar chart with numbers going 10-90 by 10, then 95, 99, and 100 on the X-Axis. This results in 12 items. I am feeding it 12 rows (databound) with exact match xvalues. However, strict mode never seems to engage - nothing lines up besides 10 - each one gets more and more off as it goes up. Autoscale is not on (as I need custom values's).

Is there a trick I am missing?

I am on the latest version of ASP.NET AJAX.

Regards,
Nick H

Here's my chart:

    
              <telerik:RadChart ID="chbBar" runat="server" DataSourceID="sdsReportBar" SeriesOrientation="Horizontal" AutoLayout="True" EnableViewState="False">  
        
                        <Series> 
        
                            <cc1:ChartSeries DataLabelsColumn="MaxMS" DataXColumn="MaxPct" DataYColumn="MaxMS" Name="Series 1">  
        
                                <Appearance BarWidthPercent="35">  
        
                                </Appearance> 
        
                            </cc1:ChartSeries> 
        
                        </Series> 
        
                        <PlotArea> 
        
                            <XAxis AutoScale="False" MaxValue="100" MinValue="10" MaxItemsCount="12">  
        
                                <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">  
        
                                    <MajorGridLines Color="134, 134, 134" Width="0" /> 
        
                                    <TextAppearance TextProperties-Color="Black">  
        
                                    </TextAppearance> 
        
                                </Appearance> 
        
                                <AxisLabel> 
        
                                    <Appearance RotationAngle="270">  
        
                                    </Appearance> 
        
                                    <TextBlock> 
        
                                        <Appearance TextProperties-Color="Black">  
        
                                        </Appearance> 
        
                                    </TextBlock> 
        
                                </AxisLabel> 
        
                                <Items> 
        
                                    <cc1:ChartAxisItem Value="10">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="20">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="30">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="40">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="50">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="60">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="70">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="80">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="90">  
        
                                    </cc1:ChartAxisItem> 
        
                                    <cc1:ChartAxisItem Value="95">  
        
                                    </cc1:ChartAxisItem>                                                  
        
                                    <cc1:ChartAxisItem Value="99">  
        
                                    </cc1:ChartAxisItem>                                                                          
        
                                    <cc1:ChartAxisItem Value="100">  
        
                                    </cc1:ChartAxisItem>                                                                                                  
        
                                </Items> 
        
                            </XAxis> 
        
                            <YAxis> 
        
                                <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134" MinorTick-Color="134, 134, 134">  
        
                                    <MajorGridLines Color="134, 134, 134" /> 
        
                                    <MinorGridLines Color="134, 134, 134" /> 
        
                                    <TextAppearance TextProperties-Color="Black">  
        
                                    </TextAppearance> 
        
                                </Appearance> 
        
                                <AxisLabel> 
        
                                    <Appearance RotationAngle="0">  
        
                                    </Appearance> 
        
                                    <TextBlock> 
        
                                        <Appearance TextProperties-Color="Black">  
        
                                        </Appearance> 
        
                                    </TextBlock> 
        
                                </AxisLabel> 
        
                            </YAxis> 
        
                            <YAxis2> 
        
                                <AxisLabel> 
        
                                    <Appearance RotationAngle="0">  
        
                                    </Appearance> 
        
                                </AxisLabel> 
        
                            </YAxis2> 
        
                            <Appearance> 
        
                                <FillStyle MainColor="158, 184, 229" SecondColor="White">  
        
                                </FillStyle> 
        
                            </Appearance> 
        
                        </PlotArea> 
        
                        <Appearance> 
        
                            <Border Color="134, 134, 134" /> 
        
                        </Appearance> 
        
                        <ChartTitle> 
        
                            <Appearance> 
        
                                <FillStyle MainColor="">  
        
                                </FillStyle> 
        
                            </Appearance> 
        
                            <TextBlock Text="Milliseconds">  
        
                                <Appearance TextProperties-Color="Black" TextProperties-Font="Arial, 18px">  
        
                                </Appearance> 
        
                            </TextBlock> 
        
                        </ChartTitle> 
        
                        <Legend Visible="False">  
        
                            <Appearance Dimensions-Margins="15%, 2%, 1px, 1px" Dimensions-Paddings="2px, 8px, 6px, 3px" Position-AlignedPosition="TopRight" Visible="False">  
        
                                <ItemTextAppearance TextProperties-Color="Black">  
        
                                </ItemTextAppearance> 
        
                                <ItemMarkerAppearance Figure="Square">  
        
                                </ItemMarkerAppearance> 
        
                            </Appearance> 
        
                        </Legend> 
        
                    </telerik:RadChart>

Chart (Obsolete)

answered on 26 Jan 2009

6 answers

300 views

Add TargetControls collection from JavaScript

I have dropped a RadToolTipManager control on my web page which calls an OnAjaxUpdate function which can set tooltip content based on an element's ID.

Within this web page is a cached user control - actually a table which contains the elements (some divs with ID's) that i wish to popup tooltips for when I hover over them.

Because the table is a cached user control the parent page can't access the element ID's server-side to add them to the RadToolTipManager's TargetControls collection.

I thought the best answer would be to generate the RadToolTipManager's TargetControls collection from JavaScript when the page loads.

I know how to get the list of element ID's using JavaScript, but how do I get a reference to the RadToolTipManager and then generate its TargetControls collection using my ID's?

The clientside documentation provided is too sparse for me to work out.

Thanks for any answers!

ToolTip

answered on 26 Jan 2009

1 answer

145 views

Operator '=' Not Defined using FindNodeByValue Method

I have a page with a RadTreeView control. I'm trying to populate the control based on data in a SQL database.

When I try to use the FindNodeByValue Method, I get an error stating "Operator '=' is not defined for types 'Telerik.Web.UI.RadTreeNode' and 'Telerik.Web.UI.RadTreeNode'".

I have looked at the examples for "Finding Nodes at Runtime" and "Turorial: Finding Nodes"...from what I am reading, this should work.

What am I doing wrong?

Public

Sub LoadAttendeesTreeView(ByVal p_iSchdID As Integer)
Try
    ' Create DataSet & DataTables
    Dim ds As New DataSet
    Dim dtDepartment As DataTable = TrainingData.GetDepartments
    Dim dtEmployees As DataTable = TrainingData.GetAttendees(p_iSchdID)
    Dim curDept As Integer = 0

    ' Add the DataTables to the DataSet
    ds.Tables.Add(dtDepartment)
    ds.Tables.Add(dtEmployees)
    ' Create the data relationship
    ds.Relations.Add("RelDepartment", ds.Tables(0).Columns("DEPARTMENT"), ds.Tables(1).Columns("eca_emply_dpt_id"))

    For Each deptRow As DataRow In ds.Tables(0).Rows
        curDept =CType(deptRow("DEPARTMENT").ToString, Integer)
        Dim deptTESTNode As RadTreeNode = Me.tvAttendees.FindNodeByValue(curDept.ToString())
        ' GETTING ERROR ON LINE BELOW...
        If deptTESTNode = Nothing Then
            ' Create a root node for the department
            Dim deptNode As RadTreeNode = New RadTreeNode(deptRow("DEPT_NAME").ToString(), deptRow("DEPARTMENT").ToString())
            ' Add the node to the Tree View Control
            tvAttendees.Nodes.Add(deptNode)
        End If
    Next

    tvAttendees.DataBind()

Catch ex As Exception
    Dim rethrow As Boolean = ExceptionPolicy.HandleException(ex, "General Exception")
End Try

End Sub

TreeView

answered on 26 Jan 2009

1 answer

81 views

Drag and Drop Images in RadEditor example, small error

We have just implemented the Drag and Drop images example into our backend and it seems there is a small JS error:

http://demos.telerik.com/aspnet-ajax/Editor/Examples/TreeviewAndEditor/DefaultCS.aspx

In the JS function isMouseOverEditor I think you actually need to replace

            var mouseX = events.clientX;

            var mouseY = events.clientY;

with

            var mouseX = events.offsetX;

            var mouseY = events.offsetY;

See full original code:

//Check if the image is over the editor or not

        function isMouseOverEditor(editor, events)

        {                        

            var editorFrame =  editor.get_contentAreaElement();

            var editorRect = $telerik.getBounds(editorFrame);    

                                        

            var mouseX = events.clientX;

            var mouseY = events.clientY; 

        

            if (mouseX < (editorRect.x + editorRect.width) &&

                mouseX > editorRect.x &&

                mouseY < (editorRect.y + editorRect.height) &&

                mouseY > editorRect.y)

            {

                return true;

            }            

            return false;

        }

We had the editor in a splitter so it was moving around and I am guessing this caused the problem.

Editor

answered on 26 Jan 2009

2 answers

165 views

[Solved] RadAlert on dynamic Content?

Hi there.

I'm trying to get radAlert running - with no afford until now. I read the KB-Article of radalert in CodeBehind but that didn't work with my scenario:

It's a simple Emailsystem. There are multiple possible attachments which are shown as links:

    
             foreach (EmailContainerAttachment att in _currentEmail.Attachments) 
        
                        { 
        
                            int attId = att.Id;                 
        
                            LinkButton attTxt = new LinkButton(); 
        
                            attTxt.ID = string.Format("lnkAttachment[{0}]", attId); 
        
                            attTxt.Text = att.FileName; 
        
                            attTxt.Click += new EventHandler(openAttachment_click); 
        
                            txtMailAttachments.Controls.Add(attTxt); 
        
                        } 
        
                    }

Finally: Here is the event-handler:

    
             void openAttachment_click(object sender, EventArgs e) 
        
                    { 
        
                        string scriptstring = "radalert('Welcome to Rad<b>window</b>!', 330, 210);"; 
        
                        ScriptManager.RegisterStartupScript(this, this.GetType(), "radalert", scriptstring, true);  
        
                      //  throw new NotImplementedException(); 
        
                    }

Nothing happens here. :(

The event-handler is entered, but I got no alert-Window. BTW: A solution would also be if the Handler only is entered when an radConform-Window was confirmed true.

Any ideas?

Window

answered on 26 Jan 2009

2 answers

152 views

[Solved] Selection turns yellow?

This is a little odd and I can't reproduce it in a test case so it must be some interaction with the application.

I have a RadComboBox on a page which is part of a large application. The base master page has a RadSkinManager set to "outlook". The RadComboBox is populated in the code behind and initially displays correctly but then the "current state" turns to yellow. Once the user makes a selection the box returns to white background and stays there unless the page is reloaded. Oddly enough a dependent RadComboBox, which also shows the yellow background, will go to white after a selection is performed on the first box. (A selection on the first box causes the second box to be repopulated on a filtered set of data).

Any suggestions as to what is causeing this effect?

Stephen

ComboBox

answered on 26 Jan 2009

3 answers

157 views

I suck at skinning the menu... any help?

I have an example using the RadMenu on http://dev1.homeip.net/adventdvr that I "cheated" on by using my own XML file to databind to and it works fine (don't know *how* I accomplished it)... but I want to do the exact same thing now using DNN and autogenerated menus instead of XML binding. In my cheater way I had an "ImageUrl" and "HoveredImageUrl" property so it would be smart enough to just change the image for me... but in the DNN site I want to set an image that can be a background normally and one that can be the hover background and then write the text (page name) centered vertically and horizontally like the static images show on my example.

So I just really suck at the whole UL/LI menu structure and can never quite get it to look right. If I could just be pointed in the right direction then I could probably figure it out from there. Don't really need/want somebody to just outright give me the answer, just some pointers about how to correctly set up the menu to appear like my sample.

Thanks in advance!

Menu

answered on 26 Jan 2009

4 answers

105 views

RadEditor Toolimage problem in Firefox

hi,
In my Rad editor vertical toolimages is not showing proberly......like this vertical toolsimages
( http://demos.telerik.com/aspnet-ajax/Editor/Examples/DockingZone/DefaultCS.aspx )
i think its theme problem , because i used web blue theme its working fine in firefox , but sunset theme and default theme and more theme i applied only off size toolimages is coming how do i fixed it ......its urgend .....i am waiting for your reply . thank you .....

Editor

answered on 26 Jan 2009

9 answers

230 views

Problem with Paragraph drop down list

I have used the following code to set the style sheet for the RAD Editor:

    
                    Dim l_colCSSFiles As EditorCssFileCollection            ' The collection of RAD Editor CSS files.  
        
                    ' Read back the current colleciton of css files.  
        
                    l_colCSSFiles = radEditor.CssFiles  
        
                    ' Add the new css file to the collection.  
        
                    l_colCSSFiles.Add(New EditorCssFile("~/assets/css/customRadEditor.css"))

Unfortunately, for the paragraph drop down list the RAD Editor is picking up the heading styles from the page css instead of the custom rad editor.

Am I doing something wrong, or is there a problem?

Many thanks

Editor

answered on 26 Jan 2009

3 answers

259 views

Insert records in radgrid

Unable to insert records in the row :
Error message - {"Unable to cast object of type 'Telerik.Web.UI.GridCommandItem' to type 'Telerik.Web.UI.GridEditFormInsertItem'."}
Am I missing something ??

    
            protected void RadGrid1_InsertCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)  
        
                {  
        
                    GridEditFormInsertItem insertedItem = (GridEditFormInsertItem)e.Item;  
        
                    string Activity = (insertedItem["Activity"].Controls[0] as TextBox).Text;  
        
                    string Status = (insertedItem["Status"].Controls[0] as TextBox).Text;  
        
                    string Comments = (insertedItem["Comments"].Controls[0] as TextBox).Text;  
        
                    try 
        
                    {  
        
                        string Query = null;  
        
                        Query = "INSERT into  SheduleActivityDetails(Activity,Status,Comments) values('" + Activity + "','" + Status + "','" + Comments + "')";  
        
                        objDataLayer.ExecuteNonQuery(Query);  
        
                        RebindRadGrid();  
        
                    }  
        
                    catch (Exception ex)  
        
                    {  
        
                        RadGrid1.Controls.Add(new LiteralControl("Unable to insert Activity. Reason: " + ex.Message));  
        
                        e.Canceled = true;  
        
                    }

    
            <telerik:RadGrid ID="RadGrid1" runat="server"    
        
                    Width="600px" AllowMultiRowSelection="false" AllowMultiRowEdit="false" AllowAutomaticInserts="false" 
        
                    AllowAutomaticUpdates="false" AllowPaging="true" ShowStatusBar="true" AutoGenerateEditColumn="false"   
        
                    EnableAJAX="true" OnNeedDataSource="RadGrid1_NeedDataSource"    
        
                    OnInsertCommand="RadGrid1_InsertCommand" OnUpdateCommand="RadGrid1_UpdateCommand"   
        
                    ShowFooter="True" OnItemCreated="RadGrid1_ItemCreated" Skin="Office2007">                                                                                                             
        
                    <ClientSettings> 
        
                        <Selecting AllowRowSelect="true" EnableDragToSelectRows="true" /> 
        
                    </ClientSettings>                                                                          
        
                      <MasterTableView CommandItemDisplay="Top" DataKeyNames="Id" EditMode="InPlace"   AllowAutomaticInserts="False"  AutoGenerateColumns="false" Width="100%">  
        
                        <Columns> 
        
                            <telerik:GridClientSelectColumn HeaderStyle-Width="40px" /> 
        
                                 <telerik:GridBoundColumn DataField="Id" Visible="true"  HeaderText="Id"   
        
                                 UniqueName="Id" ReadOnly="True">                                                                                 
        
                                 </telerik:GridBoundColumn> 
        
                            <%--<telerik:GridBoundColumn DataField="Activity Id" HeaderText="ID" ReadOnly="True" 
        
                                SortExpression="ActivityId" UniqueName="Activity ID" Visible="false">  
        
                                <HeaderStyle Width="20px" ForeColor="Silver" /> 
        
                                <ItemStyle ForeColor="Silver" /> 
        
                            </telerik:GridBoundColumn>--%> 
        
                            <telerik:GridBoundColumn DataField="Activity" HeaderText="Activity" SortExpression="Activity" 
        
                                UniqueName="Activity">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" SortExpression="Status" 
        
                                UniqueName="Status" Visible="true" EditFormColumnIndex="1">  
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments" 
        
                                UniqueName="Comments" Visible="true" EditFormColumnIndex="1">  
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                         <CommandItemTemplate> 
        
                            <div style="padding: 10px 0px;">  
        
                                <asp:LinkButton Style="vertical-align: bottom" ID="btnEditSelected" runat="server" 
        
                                    CommandName="EditSelected" CausesValidation="false" Visible='<%# RadGrid1.EditIndexes.Count == 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/Edit.gif" /> Edit Selected Activity</asp:LinkButton> 
        
                                <asp:LinkButton ID="LinkButton1" runat="server" CommandName="UpdateEdited"  Visible='<%# RadGrid1.EditIndexes.Count > 0 %>'><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/Update.gif" /> Update Activity</asp:LinkButton> 
        
             <asp:LinkButton ID="LinkButton2" runat="server" CommandName="CancelAll" CausesValidation="false"    
        
                                    Visible='<%# RadGrid1.EditIndexes.Count > 0 || RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/edit.png" /> Cancel editing</asp:LinkButton> 
        
             <asp:LinkButton ID="LinkButton3" runat="server" CommandName="InitInsert" Visible='<%# !RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/AddRecord.gif" /> Add new Activity</asp:LinkButton> 
        
             <asp:LinkButton ID="LinkButton4" runat="server" CommandName="PerformInsert"   Visible='<%# RadGrid1.MasterTableView.IsItemInserted %>'><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/Insert.gif" /> Add this Activity</asp:LinkButton> 
        
                                &nbsp; &nbsp;&nbsp;&nbsp;  
        
                                <asp:LinkButton ID="LinkButton5" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="=../../Images/Refresh.gif"/> Refresh Activities</asp:LinkButton> 
        
                            </div> 
        
                        </CommandItemTemplate> 
        
                        <EditFormSettings  ColumnNumber="2" CaptionFormatString="Edit properties of Activity with Id {0}" 
        
                        CaptionDataField="ActivityId">  
        
                            <FormTableItemStyle Wrap="False"></FormTableItemStyle> 
        
                            <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle> 
        
                            <FormMainTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="5" BackColor="White" 
        
                                Width="100%"/>  
        
                            <FormTableStyle CellSpacing="0" CellPadding="2" CssClass="module" Height="110px" 
        
                                BackColor="White"/>  
        
                            <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle> 
        
                            <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record" 
        
                                UniqueName="EditCommandColumn1" CancelText="Cancel edit">  
        
                            </EditColumn> 
        
                            <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle> 
        
                        </EditFormSettings> 
        
                    </MasterTableView> 
        
                </telerik:RadGrid>

Grid

answered on 26 Jan 2009