Questions on UI for ASP.NET AJAX Forum

1 answer

134 views

hi
my code is very simple, I just change font size in combo box and it shows very weird line or shadow under combobox as in the screen shot. my telerik for ajax version is 2012.1.215.40

here is my code

<telerik:RadComboBox ID="YearComboBox" Runat="server" Filter="StartsWith" Font-Size="Medium"

Width="100px" Height="150px" DataTextField="Text" DataValueField="Value"

DataSourceID="XmlDataSource1" >

</telerik:RadComboBox>

<asp:XmlDataSource ID="XmlDataSource1" runat="server"

DataFile="~/Common/year.xml"></asp:XmlDataSource>

This appears in both Chrome and IE9

Many Thanks!

ComboBox

answered on 19 Jun 2012

5 answers

288 views

Does Not Load the panel in whole page.

Hi All,
I am having problem in the AjaxLoading Panel. I want to display the loading panel in whole page rather then the specific control for that i used RadAjaxPanel l in the master page like this:

<telerik:RadAjaxPanel ID="Loadingpanel1"  runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

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

           <ClientEvents  OnRequestStart="RequestStart()" />

            <AjaxSettings>

                <telerik:AjaxSetting AjaxControlID="Loadingpanel1">

                    <UpdatedControls>

                        <telerik:AjaxUpdatedControl ControlID="Loadingpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />

                    </UpdatedControls>

                </telerik:AjaxSetting>

            </AjaxSettings>  

        </telerik:RadAjaxManager>

 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  Transparency="30"  IsSticky="true" CssClass="MyModalPanel" Skin="" ScrollBars="None">

                 <asp:Image ID="Image1"  runat="server" AlternateText="Wird geladen" Style="" ImageUrl=  "~/App_Themes/WillisDRITheme/Images/Processing.gif"  CssClass="MyLoadingImage"/>

        </telerik:RadAjaxLoadingPanel>   <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

                </asp:ContentPlaceHolder>

</telerik:RadAjaxPanel>

this will display the Loading panel in the whole page but the image is not display in the center of the page. Like when the page is scrollable i.e. page height is more then the screen height in that case the loading image should be always in the center.But Image appear to the center of the whole page height(screen height).

I use given script to use the loading panel in full page.

    
            function RequestStart() { 
        
                    // the following Javascript code takes care of expanding the RadAjaxLoadingPanel 
        
                    // to the full height of the page, if it is more than the browser window viewport 
        
                    var loadingPanel = document.getElementById("<%= RadAjaxLoadingPanel1.ClientID %>"); 
        
                    var pageHeight = document.documentElement.scrollHeight; 
        
                    var viewportHeight = document.documentElement.clientHeight; 
        
                    if (pageHeight > viewportHeight) { 
        
                        loadingPanel.style.height = pageHeight + "px"; 
        
                    } 
        
                    // the following Javascript code takes care of centering the RadAjaxLoadingPanel 
        
                    // background image, taking into consideration the scroll offset of the page content 
        
                    var scrollTopOffset = document.documentElement.scrollTop; 
        
                    var loadingImageHeight = 55; 
        
                    loadingPanel.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
        
                    // workaround for RadAjaxLoadingPanel for ASP.NET - there are two elements with the same ID 
        
                    // this is not needed with RadAjaxLoadingPanel for ASP.NET AJAX 
        
                    if (loadingPanel.nextSibling.className == loadingPanel.className) // IE, Opera 
        
                    { 
        
                        loadingPanel.nextSibling.style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
        
                    } 
        
                    else if (document.getElementsByClassName) // Firefox 
        
                    { 
        
                        var panels = document.getElementsByClassName("MyModalPanel"); 
        
                        for (var j = 0; j < panels.length; j++) { 
        
                            panels[j].style.backgroundPosition = "center " + (parseInt(scrollTopOffset) + parseInt(viewportHeight / 2) - parseInt(loadingImageHeight / 2)) + "px"; 
        
                        } 
        
                    } 
        
                }

and use this Style for the Loading Image.

    
            .MyLoadingImage 
        
            { 
        
                position:relative; 
        
                top:50%; 
        
                margin-top:-30px; 
        
                left:50%; 
        
                margin-left:-65px; 
        
            }

Thanks
Wish you new Year!!

Ajax

answered on 19 Jun 2012

1 answer

222 views

Column read only in edit mode, editable in insert mode

I want to make a column readonly when editing, but if I am inserting a new entry I don't want the column to be readonly. How can I do this when my columns are generated using an sql datatable?

-Nick

Grid

answered on 19 Jun 2012

5 answers

434 views

Possible to make Loading Panel "modal"? (cover whole screen?)

Is there any way to make a Loading Panel cover the whole screen (i.e. a Loading Panel "modal"). During a save operation I would find it much easier to cover the whole screen and block using the save, delete, etc so they are only clicked once. This would also stop the user from accidentally clicking the menu and navigating away from the page during the save operations.

I realize that there are events which I could use to hide/show buttons and etc but that would be a pain in the butt to hide the menu on the Master Page and I am just looking for a simple solution here and I would think that just covering the whole screen with a Loading Panel "modal" would be the best option.

I tried using a RadWindow to accomplish this and it works okay but it just really looks strange.

Ajax

answered on 19 Jun 2012

2 answers

111 views

Grid LinqDataSource binding - Foreign key field

Hi,
I have a grid binded to LinqDataSource (tablename='Region') that show 2 fields "id" and "description".
I want to display also a field "description" of another table ('State') in relathion with the first by stateID Field ( foreign key).
How can I show this last field in my grid?
Thanks a lot to all
Gaetano

Grid

answered on 18 Jun 2012

3 answers

299 views

Set visible for Adding new record button in code behind

Hi everyone,
I'm very new to ASP.NET.
Currently I'm doing a project that require CommandItemSettings-ShowAddNewRecordButton to be set hidden by default and will be set to visible (myGrid.MasterTableView.CommandItemSettings.ShowAddNewRecordButton = true) after validate the user credentials successful in the code behind C#. However, I encounter the problem where it won't be showed as visible unless there is an action on the page/grid to refresh(like a post back event, etc).
So is there a solution to by pass this problem?

Thanks a lot.

Grid

answered on 18 Jun 2012

1 answer

230 views

Guidance on interaction between RadGrid and RadConfirm

I have a RadGrid which has a linkbutton for deleting a row from the grid and I use RadConfirm to display message to user to confirm the delete, if user chooses yes/ok then the record should be deleted.

However before the radconfirm is being called the record from the grid is deleted and then the confirm dialog box appears.

The version I am using version 2012.1.411.40 of teleik and facing issue in this version, can you please help or let me know where am I going wrong?

Updating with additional information:

In the grid we are adding a link button using the Command Template on the bottom of the grid and onclientclick, we have a javascript to check whether any row is selected in the grid and based on that, we display message (ALERT) asking the user to select the record to be deleted. If the row is already selected then we display the (CONFIRM) to check if the user really wants to delete the row. And based on the user choice yes/no the record is deleted.

However, using RADConfirm in this scenario works differently, the row is first deleted and then the message is displayed. This is the issue.

Grid

answered on 18 Jun 2012

4 answers

128 views

Turn Off Enhanced ToolTip

How do you turn off/disable the new "Enhanced ToolTip"? I'd like to continue to use the RadToolTipManager instead. Thanks.

RibbonBar

answered on 18 Jun 2012

1 answer

86 views

validate radgird in EditFormMode or insertmode

I need to validate my radgrid when in the EditFormMode or in InsertMode, need the same validation on the controls for both instances. Tried to use asp validators but it does not seem to work, how can i validate my controls for insert or edit mode.

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table width="100%">

<tr>

<td style="width:10%" align="right">Mac Type: </td>

<td style="width:15%" align="left"><asp:DropDownList ID="ddlMacType" runat="server" AutoPostBack="false" Width="205px"></asp:DropDownList></td>

<asp:RequiredFieldValidator ID="valmac" runat="server" ControlToValidate="ddlmacType" Display="Dynamic" ErrorMessage="*" ForeColor="Red" />

<td style="width:10%" align="right">SSN: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtSSN" runat="server" Width="200px" Text='<%# Bind("strSSN") %>'></asp:TextBox></td>

<td style="width:10%" align="right">EDIPI: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtEDIPI" runat="server" Width="200px" Text='<%# Bind("strEDIPI") %>'></asp:TextBox></td>

<td style="width:10%" align="right">AKO Logon: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtAKO" runat="server" Width="200px" Text='<%# Bind("strAkoLogon") %>'></asp:TextBox></td>

</tr>

<tr>

<td style="height:5px"></td>

</tr>

<tr>

<td style="width:10%" align="right">LName: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtLName" runat="server" Width="200px" Text='<%# Bind("strLName") %>'></asp:TextBox></td>

<td style="width:10%" align="right">FName: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtFname" runat="server" Width="200px" Text='<%# Bind("strFname") %>'></asp:TextBox></td>

<td style="width:10%" align="right">MI: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtMI" runat="server" Width="200px" Text='<%# Bind("strMI") %>'></asp:TextBox></td>

<td style="width:10%" align="right">Gen Qual: </td>

<td style="width:15%" align="left"><asp:DropDownList ID="ddlGenQual" runat="server" AutoPostBack="false" Width="205px"></asp:DropDownList></td>

</tr>

<tr>

<td style="height:5px"></td>

</tr>

<tr>

<td style="width:10%" align="right">Emp Type: </td>

<td style="width:15%" align="left"><asp:DropDownList ID="ddlEmpType" runat="server" AutoPostBack="false" Width="205px"></asp:DropDownList></td>

<td style="width:10%" align="right">Rank/Salutation: </td>

<td style="width:15%" align="left"><asp:DropDownList ID="ddlSalutation" runat="server" AutoPostBack="false" Width="205px"></asp:DropDownList></td>

<td style="width:10%" align="right">Job Title: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtJobTitle" runat="server" Width="200px" Text='<%# Bind("strJobTitle") %>'></asp:TextBox></td>

<td style="width:10%" align="right">Pick Unit: </td>

<td style="width:15%" align="left"><asp:DropDownList ID="ddlunit" runat="server" AutoPostBack="false" Width="205px"></asp:DropDownList></td>

</tr>

<tr>

<td style="height:5px"></td>

</tr>

<tr>

<td style="width:10%" align="right">Requires Email: </td>

<td style="width:15%" align="left"><asp:CheckBox ID="cbEmail" runat="server" Checked='<%# IIF(Convert.tostring(Eval("bitEmail"))="",false, Eval("bitEmail")) %>' /></td>

<td style="width:10%" align="right">Military Phone: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtPhone" runat="server" Width="200px" Text='<%# Bind("strPhoneNumber") %>'></asp:TextBox></td>

<td style="width:10%" align="right">Requires LD: </td>

<td style="width:15%" align="left"><asp:CheckBox ID="cbLD" runat="server" Checked='<%# IIF(Convert.tostring(Eval("bitLongDistance"))="",false, Eval("bitLongDistance")) %>' /></td>

<td style="width:10%" align="right">Requires VM: </td>

<td style="width:15%" align="left"><asp:CheckBox ID="cbVM" runat="server" Checked='<%# IIF(Convert.tostring(Eval("bitVoiceMail"))="",false, Eval("bitVoiceMail")) %>' /></td>

</tr>

<tr>

<td style="height:5px"></td>

</tr>

<tr>

<td style="width:10%" align="right"></td>

<td style="width:15%" align="left"></td>

<td style="width:10%" align="right">Zero Out: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtZeroOut" runat="server" Width="200px" Text='<%# Bind("strVoiceExt") %>'></asp:TextBox></td>

<td style="width:10%" align="right">Notes: </td>

<td style="width:15%" align="left"><asp:TextBox ID="txtNotes" runat="server" Width="260px" TextMode="MultiLine" Height="60px" Text='<%# Bind("strNotes") %>'></asp:TextBox></td>

<td style="width:10%" align="right"></td>

<td style="width:15%" align="left"></td>

</tr>

<tr>

<td style="height:5px"></td>

</tr>

</table>

<table width="100%">

<tr>

<td style="width:25%"></td>

<td style="width:50%" align="center">

<asp:LinkButton ID="lnkSubmit" runat="server" text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'

CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'></asp:LinkButton>

<asp:LinkButton ID="lnkCancel" runat="server" CausesValidation="false" CommandName="Cancel" Text="Cancel"></asp:LinkButton>

</td>

<td style="width:25%"></td>

</tr>

</table>

</FormTemplate>

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

If (e.CommandName = RadGrid.PerformInsertCommandName) Then

do something

End if

If (e.CommandName = RadGrid.UpdateCommandName AndAlso e.Item.IsInEditMode) Then

do something

end if

End sub

Grid

answered on 18 Jun 2012

3 answers

732 views

Pie Chart SQL Binding Example

Hello,

I have been trying to implement the new RadHtmlChart as a pie chart, but I have not seen an example on how to get this to work. The data being returned is in two columns, type and count. I have tried serveral ways making this into a pie chart, but nothing seems to work correctly. Is there any example of a pie chart with databinding to a sql datasource? I want it to look like the pie chart sample that is in the demos with the legend showing the value for the type column and the pie chart showing the value for the count column. The only exception is I would like the labels for each pie slice to show the percentage and value of the count field.

Thanks,
Ron

Chart (HTML5)

answered on 18 Jun 2012