Questions on UI for ASP.NET AJAX Forum

1 answer

74 views

Rad chart

My requirment

Am having 10 students in a class ,i will give fromdate and todate and get the attendence percentages of the students for the specified period.Now i want to show the barchart showing students name and attendence percentage in the bar,different colour for different percentages.

Am new to radcharts plz help me to find the solution.

Chart (Obsolete)

answered on 22 Dec 2009

1 answer

126 views

Record count label displayed outside of the box

We have a radGrid which is loaded many columns.

Each column’s wide is narrower so more columns can be displayed.

One of the columns has radCombo box as a drop down list, and the record count label text extended outside of the comboBox.

This looks very undesirable.

Here is a screen shoot http://lh4.ggpht.com/_ohpx5KZcsi0/SzDjYr35nHI/AAAAAAAAFHU/AH-wzDkTMBI/comboBoxOverlap.JPG

Can this problem be fixed?

ComboBox

answered on 22 Dec 2009

3 answers

106 views

SelectedCssClass not working with ItemTemplate

The RadMenu is ignoring the SelectedCssClass property when using ItemTemplates. It is correctly applied if ItemTemplates are not used.

CSS:

    
                    .TabFormat  
        
                    {  
        
                        height:50px !important;  
        
                        background-color:#263144 !important;  
        
                        padding:0px;  
        
                    }  
        
                    .TabFormat:hover  
        
                    {  
        
                        background-color:#212631 !important;  
        
                        color:#f78f1e;  
        
                    }  
        
                    .TabSelected   
        
                    {  
        
                        background-color:#212631 !important;  
        
                        color:#f78f1e !important;  
        
                    }  
        
                    .NavMenuItem  
        
                    {  
        
                        width:150px;  
        
                        height:50px;  
        
                    }  
        
                    .NavMenuItem a, a:hover, a:active  
        
                    {  
        
                        cursor:default;  
        
                        text-decoration:none;  
        
                        color:#f78f1e;  
        
                    }  
        
                    .NavMenuTitle  
        
                    {  
        
                        font-size:12pt;  
        
                        padding:5px 0px 5px 15px;  
        
                    }  
        
                    .NavMenuSubTitle  
        
                    {  
        
                        padding-left:15px;  
        
                        font-size:8pt;  
        
                    }

Markup:

    
                            <telerik:RadMenuItem IsSeparator="true" /> 
        
                            <telerik:RadMenuItem runat="server"   
        
                                Text="how it works"   
        
                                CssClass="TabFormat"   
        
                                SelectedCssClass="TabSelected"   
        
                                NavigateUrl="~/HowItWorks.aspx" 
        
                                > 
        
                                <ItemTemplate> 
        
                                    <a href="../HowItWorks.aspx">  
        
                                        <div class="NavMenuItem">  
        
                                            <div class="NavMenuTitle">  
        
                                                How it works  
        
                                            </div> 
        
                                            <div class="NavMenuSubTitle">  
        
                                                we'll show you  
        
                                            </div> 
        
                                        </div> 
        
                                    </a> 
        
                                </ItemTemplate> 
        
                            </telerik:RadMenuItem>

Codebehind (VB) with work-around:

    
                    Dim currentItem As RadMenuItem  
        
                    If Request.Url.PathAndQuery.Contains("/products/") Then  
        
                        currentItem = RadMenu1.FindItemByText("products")  
        
                    Else  
        
                        currentItem = RadMenu1.FindItemByUrl(Request.Url.PathAndQuery)  
        
                    End If  
        
                    If Not IsNothing(currentItem) Then  
        
                        currentItem.Selected = True 
        
                        ' NOTE: This is a workaround to a bug in the RadMenu that fails to apply the "selectedCSS"   
        
                        '       when using Templates.  
        
                        currentItem.CssClass = "TabSelected" 
        
                    End If

Menu

answered on 22 Dec 2009

1 answer

86 views

Line and Point on one Series

I have a line chart that has one Series of data.
Is there a way to add points to the line?
or taking it from a differant way....is there a way to add a connecting line to a Point chart?

Thanks.

Chart (Obsolete)

answered on 22 Dec 2009

2 answers

532 views

What is proper way to display error message inside auto-generated form

I am using the auto-generated edit form on the grid and handling any errors in ItemInserted/ItemUpdated event. My question is - what is the proper way to display an error message inside the edit form? If that's not possible, do you have any sample code that would illustrate some other technique like display a popup or anything user friendly? Thank you.

Grid

answered on 22 Dec 2009

1 answer

115 views

Alternative way to handle [ENTER] key

RadControls for ASP.NET AJAX Q2 2009 SP1 3.5 2008 Visual Basic.NET

Requirements
RadControls version
.NET version
Visual Studio version
programming language
browser support	all browsers supported by RadControls

PROJECT DESCRIPTION
This is an alternative way to handle [ENTER] key to perform insert/update operation inside a RadGrid FormTemplate (EditFormType="Template") within a Content Page (Master Page template). For unknown reason (probably the FormTemplate with customized insert/update and cancel button), I was unable to handle the [ENTER] key event so this is a possible solution:

                     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">         
                    <script type="text/javascript" language="javascript">         
                        function onKeyPress(sender, eventArgs) {         
                            // 13 is the keycode for enter key         
                            if (eventArgs.get_keyCode() == 13) {         
                                // LblUpdateButtonId it's an hidden label that contain the id of my custom insert/update button         
                                var temp = document.getElementById("<%=LblUpdateButtonId.ClientID %>");         
                                var button_id = temp.innerHTML.replace(/_/g, "$");         
                                // perform postback         
                                WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(button_id, "", true, "", "", false, true));         
                                // inhibit event bubbling         
                                eventArgs.set_cancel(true);         
                            }         
                        }         
                </script>         
                </telerik:RadCodeBlock>         

The custom insert/update asp:button calls a sub on OnLoad event (OnLoad="SetUpdateButtonId") to store his client id in the hidden label because I was unable to retrieve it in a different way:

                    Protected Sub SetUpdateButtonId(ByVal sender As Object, ByVal e As System.EventArgs)         
                  LblUpdateButtonId.Text = CType(sender, Button).ClientID         
            End Sub         

Grid

answered on 22 Dec 2009

2 answers

114 views

Problem with 100% height for a RadGrid in a UserControl

In a previous thread people were discussing a problem with 100% height of a RadGrid placed in a RadSplitter.
When using a RadAjaxManager I was forced to include an event like:

    
                void contentpagecs_aspx_AjaxSettingCreated(object sender, AjaxSettingCreatedEventArgs e) 
        
                { 
        
                    if (e.Initiator.ID == "GridView") 
        
                    { 
        
                        this.RadGrid1PanelClientID = e.UpdatePanel.ClientID; 
        
                    } 
        
                }

That solved my problem then. But I still dont really understand what I do when I set the PanelClientID like that.

No I have a Master page with a RadAjaxManager.
I have a WebForm, using that Master Page, containing a RadSplitter and in one of the RadPanes I have a UserControl.
The UserControl contains a RadGrid. The same RadGrid I used before.
In the UserControl I have a RadManagerProxy like:

    
            <telerik:RadAjaxManagerProxy runat="server" ID="RadAjaxProxyGrid"> 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="MyGrid"> 
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="MyGrid" LoadingPanelID="RadAjaxPanelMaster" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy>

No I have the same problem like before. The RadGrid doesnt fill up the height in the RadPane in the container for my UserControl.
I guess I have to include a AjaxSettingCreated event like before. But how and where?
Can somebody explain in a good pedagogic way for me how to do that, what this solve and how it does that.

/Mathias

Grid

answered on 22 Dec 2009

2 answers

191 views

how to replace SessionDataSource with SqlDataSource

Hi
the demo -Grid- MultiColumnEditForm run fine on my computer.
Now I have my own database-Northwind and I want to use sqldatasource instead of sessiondatasource.
I copied all the code into my project except datasource, the error:
Employee 3 cannot be updated. Reason: Must declare the scalar variable "@EmployeeID". shows after I click on update.

I searched the internet which normally say that you need to put DataKeyNames="EmployeeID" into grid. I think I have it. so what is wrong?

My code here(I didn't change the insert and delete command code), I did it using wizard before it give me silence to not update( no exception): Thanks for any help.

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <style type="text/css">
       .EditFormHeader td
       {
           background: #dadec8;
           padding: 5px 0px;
       }
       </style>
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post" style="width: 100%">

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

        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

            <script type="text/javascript">
            function RowDblClick(sender, eventArgs)
            {
              sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
            }
            </script>

        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="divMsg" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div id="divMsg" runat="server" style="float: left;">
            <asp:Label ID="Label1" runat="server" EnableViewState="False" Visible="false"></asp:Label>
        </div>
    <telerik:RadSlider ID="RadSlider1" runat="server">
    </telerik:RadSlider>
        <br />
        <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" ShowStatusBar="True"
            GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
            OnPreRender="RadGrid1_PreRender" AllowAutomaticDeletes="True" AllowAutomaticInserts="True"
            AllowAutomaticUpdates="True" OnItemDeleted="RadGrid1_ItemDeleted"
            OnItemInserted="RadGrid1_ItemInserted"
            OnItemUpdated="RadGrid1_ItemUpdated" >
            <MasterTableView DataKeyNames="EmployeeID" GridLines="None" Width="100%">
                <Columns>
                    <telerik:GridEditCommandColumn UniqueName="EditCommandColumn">
                    </telerik:GridEditCommandColumn>
                    <telerik:GridBoundColumn Visible="False" UniqueName="Country" HeaderText="Country"
                        DataField="Country" EditFormColumnIndex="1">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Visible="False" UniqueName="City" HeaderText="City" DataField="City"
                        EditFormColumnIndex="1">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Visible="False" UniqueName="Region" HeaderText="Region"
                        DataField="Region" EditFormColumnIndex="2">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Visible="False" UniqueName="TitleOfCourtesy" HeaderText="TOC"
                        DataField="TitleOfCourtesy" EditFormColumnIndex="2">
                        <HeaderStyle Width="60px"></HeaderStyle>
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="FirstName" EditFormColumnIndex="0" HeaderText="FirstName"
                        DataField="FirstName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="LastName" EditFormColumnIndex="0" HeaderText="LastName"
                        DataField="LastName">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn Visible="False" UniqueName="HireDate" EditFormColumnIndex="0"
                        HeaderText="Hire Date" DataField="HireDate">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn UniqueName="Title" EditFormColumnIndex="1" HeaderText="Title"
                        DataField="Title">
                    </telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings ColumnNumber="3" CaptionFormatString="Edit details for employee with ID {0}"
                    CaptionDataField="EmployeeID">
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" Width="100%" />
                    <FormTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="2" CssClass="module"
                        Height="110px" Width="100%" />
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>
                    <FormStyle Width="100%" BackColor="#eef2ea"></FormStyle>
                    <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">
                    </EditColumn>
                    <FormTableButtonRowStyle HorizontalAlign="Left" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
                </EditFormSettings>
                <ExpandCollapseColumn ButtonType="ImageButton" Visible="False" UniqueName="ExpandColumn">
                    <HeaderStyle Width="19px"></HeaderStyle>
                </ExpandCollapseColumn>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowDblClick="RowDblClick" />
            </ClientSettings>
        </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConflictDetection="CompareAllValues"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" DeleteCommand="DELETE FROM [Employees] WHERE [EmployeeID] = ? AND [LastName] = ? AND [FirstName] = ? AND [Title] = ? AND [TitleOfCourtesy] = ? AND [BirthDate] = ? AND [HireDate] = ? AND [Address] = ? AND [City] = ? AND [Region] = ? AND [PostalCode] = ? AND [Notes] = ? AND [Country] = ? AND [HomePhone] = ? AND [Extension] = ? AND [ReportsTo] = ?"
            InsertCommand="INSERT INTO [Employees] ([EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode], [Notes], [Country], [HomePhone], [Extension], [ReportsTo]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)"
            OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode], [Notes], [Country], [HomePhone], [Extension], [ReportsTo] FROM [Employees]"

            UpdateCommand="UPDATE [Employees] SET [LastName] =@LastName, [FirstName] =@FirstName, [Title] =@Title, [TitleOfCourtesy] =@TitleOfCourtesy, [BirthDate] = @BirthDate, [HireDate] = @HireDate, [Address] =@Address, [City] =@City, [Region] =@Region, [PostalCode] =@PostalCode, [Notes] = @Notes, [Country] =@Country, [HomePhone] = @HomePhone, [Extension] =@Extension, [ReportsTo] = @ReportsTo WHERE [EmployeeID] = @EmployeeID AND [LastName] =LastName AND [FirstName] = @FirstName AND [Title] = @Title AND [TitleOfCourtesy] =@TitleOfCourtesy AND [BirthDate] = @BirthDate AND [HireDate] = @HireDate AND [Address] = @Address AND [City] = @City AND [Region] = @Region AND [PostalCode] = @PostalCode AND [Notes] = @Notes AND [Country] = @Country AND [HomePhone] = @HomePhone AND [Extension] = @Extension AND [ReportsTo] = @ReportsTo">
            <UpdateParameters>
                <asp:Parameter Name="LastName" Type="String" />
                <asp:Parameter Name="FirstName" Type="String" />
                <asp:Parameter Name="Title" Type="String" />
                <asp:Parameter Name="TitleOfCourtesy" Type="String" />
                <asp:Parameter Name="BirthDate" Type="DateTime" />
                <asp:Parameter Name="HireDate" Type="DateTime" />
                <asp:Parameter Name="Address" Type="String" />
                <asp:Parameter Name="City" Type="String" />
                <asp:Parameter Name="Region" Type="String" />
                <asp:Parameter Name="PostalCode" Type="String" />
                <asp:Parameter Name="Notes" Type="String" />
                <asp:Parameter Name="Country" Type="String" />
                <asp:Parameter Name="HomePhone" Type="String" />
                <asp:Parameter Name="Extension" Type="String" />
                <asp:Parameter Name="ReportsTo" Type="Int32" />
                <asp:Parameter Name="EmployeeID" />
            </UpdateParameters>
     </asp:SqlDataSource>
        

    </form>
</body>
</html>

Grid

answered on 22 Dec 2009

6 answers

200 views

[Solved] More captcha's on the same page

Hi,

if a page consist of more then one ascx file containing the code below,
then the correct captcha code can never be entered by the user(isValid allways = false).

    
            <table style="border: solid 1px #323232; background-color: #efefef">  
        
              <tr valign="bottom">  
        
                <td colspan="2">  
        
                  <span style="font-weight: bold; font-size: 11px">For en sikkerheds skyld...</span> 
        
                </td> 
        
              </tr> 
        
              <tr valign="bottom">  
        
                <td style="background-color: #efefef">  
        
                  <telerik:RadCaptcha ID="RadCaptcha1" runat="server" CaptchaImage-RenderImageOnly="true" CaptchaImage-Height="32" 

                   CaptchaImage-Width="90" CaptchaImage-TextColor="#323232" CaptchaImage-LineNoise="Low" CaptchaImage-FontWarp="None"

                   CaptchaImage-BackgroundColor="#efefef" ErrorMessage="Tast koden igen!" Display="Dynamic" 

                   CaptchaTextBoxCssClass="captchaBox"  ImageStorageLocation="Cache" EnableViewState="true">  
        
                  </telerik:RadCaptcha> 
        
                  <div style="padding-bottom: 7px"></div> 
        
                </td> 
        
                <td> 
        
                  <asp:TextBox ID="CaptchaInput" runat="server" MaxLength="5" Width="50" Font-Size="13px" BackColor="white">

                  </asp:TextBox> 
        
                  <br /> 
        
                  <span style="background-color: #efefef; color: #000">Tast koden</span> 
        
                </td> 
        
              </tr> 
        
            </table>

    
            <asp:Button ID="Tilmeld" OnClick="SendEmailNu" title="Tilmeld" runat="server" CssClass="button" Text="Tilmeld">

            </asp:Button>

Code behind like this:

    
            protected void SendEmailNu(Object sender, EventArgs e)  
        
              {  
        
              RadCaptcha1.ValidatedTextBoxID = CaptchaInput.UniqueID;  
        
              RadCaptcha1.Validate();  
        
              if (RadCaptcha1.IsValid)  
        
                {

If only one r.a.d.captcha, with this "external" textbox approace is on the page - then no problem!

Captcha

answered on 22 Dec 2009

8 answers

139 views

[Solved] Need Direction: Create Reusable Grid in Popup Window

I have several places I'd like to call a read-only popup grid, select a row, and return a value to a textbox. I assumed I'd create an ascx file, which would contain a RadWindow, which would contain a RadGrid. I'd call the ascx control, passing it the SQL (to auto-populate the grid), the textbox name to fill on the return, and the column name to return from the selected row.

But while doing this I felt at a loss. (Right now I don't need all the passed in items to work -- I'd be happy just getting a reusable dialog box with a grid to popup). I created an ascx, threw a RadWindow on it (not sure if I should use RadWindoManager) but couldn't place a grid on the RadWindow. I found it uses a NavigateURL, which requires an aspx. So I created an aspx file with a grid and pointed the RadWindow at that... but that's when I began to wonder if I was doing this the wrong way.

With what controls and overall structure would you recommend I do this? I ask because I feel I might be using the wrong tools and/or structure, so I'm hoping for a little direction.

Thanks.

Window

answered on 22 Dec 2009