Questions on UI for ASP.NET AJAX Forum

3 answers

212 views

How to implement radAjaxPanel on this simple page

Hi,
I am using Visual Studio 2008 and Telerik Controls Version 2009.3.1103.20.

I am developing ASP.Net Website.

I have so many different WebPages and I want to implement AJAX on my page so that I can display rotating image during postback when system is processing something.

I tried code from Telerik Demo, tried using "telerik:RadAjaxPanel" and also tried to add ajaxsettings using "telerik:RadAjaxManager" but somehow I always ended up having javascript errors on some controls. So finally I thought to post my question here for help.

I am PASTING html for my sample UI. Can you please help me what is the best way to implement this on this page?

In the attached sample HTML, I removed all of my events and other source code and just putting my basic UI design with minimum fields.

My purpose is to know hot to implement AJAX on these pages.
Please provide me working setting for AJAX on these pages as I have already tried so many different options.

I HAVE SAMPLE PROJECT BUT DONT KNOW HOW TO UPLOAD IT HERE. SO I AM PASTING ONE OF MY PAGE CODE HERE. IF THERE IS ANY WAY TO UPLOAD .ZIP FILE WITH NEW THREAD, PLEASE DO LET ME KNOW AND I WILL UPLOAD MY SAMPLE PROJECT.

Can you help me with these items? -->
1. is it possible to display loadingpanel image for whole page and its ok to refresh whole page if we can display loading image during postback
2. in general, for grid, whenever any paging number is clicked, it should display loadingpanel for grid
3. CompletedRequestsDetail.aspx
--> When "btnUpdateGeneratedPONo" or "btnCompleteRequest" is clicked which is inside ItemTemplate, it should display loadingpanel for grid
--> when "btnViewAllSelected" or "btnViewAllSelectedSupplierCopy" is clicked, it should display loadingpanel for whole page

Thanks in advance,
Nirav

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"

CodeFile="CompletedRequestsDetail.aspx.cs" Inherits="CompletedRequestsDetail"

Title="All Completed/Cancelled Requests" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="ContentPlaceHolder2" ContentPlaceHolderID="ContentPlaceHolder1"

runat="server">

<script type="text/javascript" language="javascript">

</script>

<table>

<tr>

<td colspan="100%" valign="top">

<table border="0" cellpadding="0" cellspacing="0">

<tr valign="top">

<td valign="top">

<asp:ImageButton runat="server" ID="imgExportToExcel" ImageUrl="~/Images/Excel-19.png"

CausesValidation="false" OnClick="imgExportToExcel_Click" BorderWidth="0" ToolTip="Click here to export displayed list to Excel" />

<asp:ImageButton runat="server" ID="imgExportToWord" ImageUrl="~/Images/Word-19.png"

CausesValidation="false" OnClick="imgExportToWord_Click" BorderWidth="0" ToolTip="Click here to export displayed list to Word" />

<asp:Button CssClass="ButtonCSS" runat="server" ID="btnViewAllSelected" Text="View All Selected Requests as pdf"

ToolTip="Click here to view all selected requests as pdf" CausesValidation="false"

OnClick="btnViewAllSelected_Click" OnClientClick="javascript:Page_BlockSubmit = false;buttonClicked_WithObj(this);" />

<asp:Button CssClass="ButtonCSS" runat="server" ID="btnViewAllSelectedSupplierCopy"

Text="View All Selected Requests Supplier Copy" ToolTip="Click here to view all selected requests Supplier Copy"

CausesValidation="false" OnClick="btnViewAllSelectedSupplierCopy_Click"

OnClientClick="javascript:Page_BlockSubmit = false;buttonClicked_WithObj(this);" />

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td colspan="100%">

</td>

</tr>

</table>

<table>

<tr>

<td>

<asp:Panel runat="server" ID="pnlPendingRequests" CssClass="panelStyle">

<table cellspacing="0" cellpadding="0">

<tr>

<td>

<%--<div class="Scrollgrid" style="WIDTH: 1100px; HEIGHT: 600px;">--%>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" AllowSorting="true"

AllowFilteringByColumn="true" AutoGenerateColumns="False" GridLines="Both" OnNeedDataSource="RadGrid1_needdatasource"

OnItemDataBound="RadGrid1_ItemDataBound" OnDetailTableDataBind="RadGrid1_DetailTableDataBind"

AllowMultiRowSelection="true" OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand"

SelectedItemStyle-CssClass="SelectedItem" Skin="Default">

<PagerStyle Mode="NextPrevNumericAndAdvanced" Position="TopAndBottom" AlwaysVisible="true" />

<ClientSettings EnableRowHoverStyle="true" EnablePostBackOnRowClick="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView ShowHeadersWhenNoRecords="true" AllowFilteringByColumn="true" DataKeyNames="RequestInfoID"

Name="ApprovalsMaster">

<DetailTables>

<telerik:GridTableView DataKeyNames="RequestInfoID" Width="80%" Name="ApprovalsDetail"

AllowPaging="false" runat="server" AllowSorting="false">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="RequestInfoID" MasterKeyField="RequestInfoID" />

</ParentTableRelation>

<HeaderStyle CssClass="InnerHeaderStyle" />

<Columns>

<telerik:GridBoundColumn DataField="ApproverEmailAddress" HeaderText="ApproverEmailAddress"

SortExpression="ApproverEmailAddress">

</telerik:GridBoundColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridTemplateColumn HeaderStyle-Width="10px" AllowFiltering="false" UniqueName="selectrow">

<HeaderTemplate>

<input id="chkSelectAll" type="checkbox" onclick="return CheckAllCheckboxes(this,'chkSelectRow');" />

</HeaderTemplate>

<ItemTemplate>

<asp:CheckBox runat="server" ID="chkSelectRow" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn DataField="RequestInfoID" HeaderText="Request No." SortExpression="RequestInfoID"

DataType="System.Int64" FilterControlWidth="40px">

</telerik:GridNumericColumn>

<telerik:GridTemplateColumn HeaderText="Total Amount" SortExpression="TotalAmount"

DataType="System.Decimal" DataField="TotalAmount" HeaderStyle-HorizontalAlign="Right"

ItemStyle-HorizontalAlign="Right">

<ItemTemplate>

<asp:Label runat="server" ID="lblTotalAmount" Text='<%# Eval("CurrencySymbol").ToString() + Eval("TotalAmount","{0:#,##0.00}").ToString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Update Generated PO No./Invoice No." UniqueName="updategeneratedpono"

AllowFiltering="false" SortExpression="generatedpono">

<ItemTemplate>

<asp:TextBox Width="150px" runat="server" MaxLength="150" ValidationGroup="vgGeneratedPONo"

ID="txtGeneratedPONo" ToolTip="Enter Generated PO No."></asp:TextBox>

<asp:Button runat="server" ID="btnUpdateGeneratedPONo" Text="Update" CssClass="ButtonCSS"

ValidationGroup="vgGeneratedPONo" ToolTip="Click here to update information for Generated PO No./Invoice No."

OnClick="btnUpdateGeneratedPONo_Click" OnClientClick="javascript:return confirm('Are you sure you want to update this Generated PO No./Invoice No.? ');"

CommandArgument='<%# Eval ( "RequestInfoID").ToString() %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Complete Request" UniqueName="completerequest"

SortExpression="CompletedStatus" DataField="CompletedStatus">

<ItemTemplate>

<asp:Label ID="lblCompletedStatus" runat="server" Text='<%# Eval ( "CompletedStatus").ToString()%>'></asp:Label>

<asp:Button runat="server" ID="btnCompleteRequest" Text="Complete" CssClass="ButtonCSS"

ToolTip="Click here to complete Request" CausesValidation="False" OnClick="btnCompleteRequest_Click"

OnClientClick=

"javascript:var agree= confirm('Are you sure you want to complete this Request? '); if(agree){ Page_BlockSubmit = false;buttonClicked_WithObj(this); return true; };else {return false;};"

CommandArgument='<%# Eval ( "RequestInfoID").ToString() %>' />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle />

</ExpandCollapseColumn>

<RowIndicatorColumn Visible="False">

<HeaderStyle />

</RowIndicatorColumn>

</MasterTableView>

</telerik:RadGrid>

<br />

<%--</div>--%>

</td>

</tr>

</table>

<table width="100%">

<tr>

<td>

<hr class="hrClass" />

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

<div class="WaitDisplay" id="divWait" style="display: none; width: auto;">

<img alt="" src="Images/spinner2.gif" />

<div id="divWaitMessage">

Processing...

</div>

</asp:Content>

Ajax

answered on 13 Mar 2012

3 answers

1.0K+ views

RadAjaxManager Ajaxrequest from Client side

i need to update panels from client side RadWindow ClientClose event
depend the return value i need to update Panels
for example if return value = "1"
i need to update Panel1

if return value = "2"
i need to update Panel 2

how to achive this

Ajax

answered on 13 Mar 2012

1 answer

74 views

IFrame Radwindow Stylesheets

Hello,
Is there a way to configure an iFrame RadWindow to automatically add the stylesheets of the parent window? I recall that the RadEditor has this feature, so I am hoping that the RadWindow can perform the same functionality.

Thanks,
Adam

Window

answered on 13 Mar 2012

1 answer

325 views

RadComboBox in RadGrid with SqlDataSource

Hi there,

I have a problem with the Grid not returning the text I have in my RadComboBox.

I have got a grid with a GridTemplateColumn, with a RadComboBox and checkboxes like so:

<telerik:GridTemplateColumn HeaderText="Roles" UniqueName="Roles"> 
    <EditItemTemplate> 
        <telerik:RadComboBox ID="RadComboBox1" DataSourceID="SqlDataSource3" AllowCustomText="true" OnSelectedIndexChanged="OnSelectedIndexChanged"
        DataTextField="RoleName" DataValueField="RoleName" runat="server">
            <ItemTemplate>
                <div class="combo-item-template">
                    <asp:CheckBox runat="server" ID="chk1" OnCheckedChanged="onCheckBoxClick" AutoPostBack="True" />
                    <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1" Text='<%# Eval("RoleName")%>'>
                    <%# Eval("RoleName")%>
                    </asp:Label>
                </div>
            </ItemTemplate>
        </telerik:RadComboBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label runat="server" ID="Label2"><%# Eval("RoleNames")%></asp:Label>
    </ItemTemplate>
</telerik:GridTemplateColumn>

And using a sql datasource and using the getuserlist stored procedure to retrieve the roles :


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SqlConnection %>" OnInserting="SqlDataSource_OnInserting"
SelectCommandType="StoredProcedure"
SelectCommand="GetUserList"
 
InsertCommandType="StoredProcedure"
InsertCommand="dbo.CreateUser" 
>

<InsertParameters>
    <asp:Parameter Name="UserName" Type="String" />
    <asp:Parameter Name="Password" Type="String" />
    <asp:Parameter Name="IsApproved" Type="Byte" />
    <asp:Parameter Name="IsLockedOut" Type="Byte" />
    <asp:Parameter Name="Email" Type="String" />
    <asp:Parameter Name="Roles" Type="String" />
    <asp:Parameter Name="UserId" DbType="Guid" Direction="Output" />
</InsertParameters>

Roles come back as a comma separated string and the procedure that inserts them can handle it like: 'Role1, Role2' as parameter

But in edit/insert mode, I need to fill the RadComboBox and the checkboxes so I can select any of the ones I have.

<asp:SqlDataSource ID="SqlDataSource3" runat="server" 
ConnectionString="<%$ ConnectionStrings:Sql_Azure %>" 
SelectCommand="SELECT RoleId, RoleName FROM Roles ORDER BY RoleName">
</asp:SqlDataSource>

So I have a oncheckboxclick that modfies the RadComboBox

protected void onCheckBoxClick(object sender, EventArgs e)

{

CheckBox chk = (CheckBox)sender;

RadComboBox combobox = (RadComboBox)chk.Parent.Parent;

string text = BuildText(combobox);

combobox.Text = text;

}

So this all works until I check the roles in the command parameters:

protected void SqlDataSource_OnInserting(object sender, SqlDataSourceCommandEventArgs e)

{

DbParameterCollection CmdParams = e.Command.Parameters;

}

And I can see the Roles parameter is empty. What I am doing wrong? I think I am not setting the griddataitem, so I looked into it...

And I have seen use reading the text property of the griddataitem with the following, so I tried to modify the text

protected void OnSelectedIndexChanged(object sender, EventArgs e)

{

GridDataItem dataItem = (GridDataItem)combobox.Parent.Parent;

dataItem["Roles"].Text = text;

}

But that doesn't work, because the Text property is readonly.

For updating I need to do the same thing obviously, plus then I need to set the initial state. I don't know which event I can use.
Thank you so much, been puzzling on this for a long time... :S

Grid

answered on 13 Mar 2012

2 answers

193 views

How to make RadBinaryImage invisible in Javascript

Hello,

I have a RadBInaryImage and i would like to change the visibility from javascript. Right now I am making the source empty but i still see the empty image with cross mark. So i wanted it to be invisible.

var OldImage = $get("<%= rbiClientImage.ClientID %>");

if (OldImage != null)

{

OldImage.src = "";

}

Is there any property to make the binaryimage invisible?

Appreciate the help
Thanks

BinaryImage

answered on 13 Mar 2012

1 answer

401 views

Automatic filter on telrik grid with auto generated column

Is there any way to apply excel like automatic filter on telrik grid ? I have autogeneratedcolumn=true and based on condition I am showing the column

<telerik:RadGrid ID="gvinvoice" Width="98%" AllowPaging="true" PageSize="10" runat="server"
                                AutoGenerateColumns="true" 
                                OnPageIndexChanged="gvinvoice_PageIndexChanged" 
                                ShowFooter="True">
                                <PagerStyle Mode="NextPrevAndNumeric" />
                            </telerik:RadGrid>


So, at design time I am not sure the number and name of the column. How can I apply filter to these columns ?

Grid

answered on 13 Mar 2012

1 answer

729 views

Script controls may not be registered before PreRender

Ok, I'm at the bottom of the pit of despair!
Have tried for days to resolve this problem, so maybe hoping someone here can help. I've searched the web and tried all the advice given, to no avail. Here is the problem.

I built a local project with RAD grid, cloud, combos etc and it worked fine. However, when I integrated it into out CMS, the problems started. The man error message is:

Script controls may not be registered before PreRender

The problem is something to do with this piece of code:

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

</telerik:RadScriptManager>

The pages where I've tried this :
1. The master page
2. The ascx page

Doesn't matter where I position this line of code, I still get either the above error message. I've also tried these 2 different code blocks (not at the same time obviously) in the code behind of the ascx page:

protected override void OnInit(EventArgs e)

{

if (ScriptManager.GetCurrent(this.Page) == null)

{

ScriptManager scriptManager = new ScriptManager();

scriptManager.ID = "myScriptManager";

scriptManager.EnablePartialRendering = true;

this.Page.Form.Controls.Add(scriptManager);

}

base.OnInit(e);

}

protected override void OnPreRender(EventArgs e)

{

if (ScriptManager.GetCurrent(this.Page) == null)

{

ScriptManager scriptManager = new ScriptManager();

scriptManager.ID = "myScriptManager";

scriptManager.EnablePartialRendering = true;

this.Page.Form.Controls.Add(scriptManager);

}

base.OnPreRender(e);

}

Here is the stack trace:

[InvalidOperationException: Script controls may not be registered before PreRender.]

System.Web.UI.ScriptControlManager.RegisterScriptControl(TScriptControl scriptControl) +348689

System.Web.UI.ScriptManager.RegisterScriptControl(TScriptControl scriptControl) +66

Telerik.Web.UI.RadWebControl.RegisterScriptControl() +42

Telerik.Web.UI.RadWebControl.ControlPreRender() +15

Telerik.Web.UI.RadFormDecorator.ControlPreRender() +464

Telerik.Web.UI.RadWebControl.OnPreRender(EventArgs e) +22

System.Web.UI.Control.PreRenderRecursiveInternal() +80

System.Web.UI.Control.PreRenderRecursiveInternal() +171

System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +842

I'm pretty much as my wits end with this. Any ideas Telerik, community?
Many thanks,
Alan

ScriptManager and StyleSheetManager

answered on 13 Mar 2012

13 answers

547 views

Blurred not clear text in Disabled Combobox

Hi Team,
I have a problem with the combo boxes i'm using. Whenever i disable the comboboxes the text inside them becomes blurry and not clear. If i place the mouse over the combobox the text becomes fine. But if i move the mouse a way from the combobox it becomes blurry and not clear again.
Is this a defect in the Telerik component i'm using? Could you help please.
Thanks,

ComboBox

answered on 13 Mar 2012

1 answer

93 views

Item update event is not firing

Hi,

I have wrote this in my row click,

function RowClick(sender, eventArgs) {

if (editedRow ) {

hasChanges = false;

if (confirm("Update changes?")) {

$find("<%= RadGrid1.ClientID %>").get_masterTableView().updateItem(editedRow);

}

But still my itemupdate event is not firing.

Help me
Thnx in advance

Grid

answered on 13 Mar 2012

10 answers

326 views

Skin lost on non-ajax post back

Hi Guys,

I've been using RadControls for a while now and I've been able to fix most of my issues but this one has me completely stumped. Thankfully, I was able to recreate it in an empty project.

ASPX:

    
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
        
                        <ContentTemplate> 
        
                            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="WebBlue">  
        
                            </telerik:RadDatePicker> 
        
                            <br /> 
        
                            <br /> 
        
                            <asp:Button ID="Button1" runat="server" Text="toggle visibility" /> 
        
                        </ContentTemplate> 
        
                    </asp:UpdatePanel> 
        
                    <br /> 
        
                    <asp:Button ID="Button2" runat="server" Text="post back" />

VB:

    
                Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click  
        
                    Me.RadDatePicker1.Visible = Not Me.RadDatePicker1.Visible  
        
                End Sub

To recrate the problem:
1. Press the 'toggle visibility' button to hide the RadDatePicker.
2. Press the 'post back' button to do a non-ajax postback.
3. Press 'toggle visibility' again to show the RadDatePicker.
4. Now open the calendar of the date picker and it will have lost its skin.

This happens no matter what browser I run it in. I have also already tried swapping out the Rad UpdatePanel/ScriptManager for MS AJAX ones. I have seen similar things happen with other Rad controls in the same situation (which is why I'm posting this in general discussions) but I'm just using DatePicker here for simplicity. Thanks in advance for any help you can give me.

Calendar

answered on 13 Mar 2012