Questions on UI for ASP.NET AJAX Forum

6 answers

57 views

RenderMode Inline ignored for panel with multiple controls

Good afternoon,

I am using ASP.NET AJAX version 2023.3.1010.45,

I have a page with a ComboBox and Grid. By choosing an Item in the ComboBox and clicking a Button, it will locate the Item in the Grid. If an Item is inserted into or deleted from the Grid, the ComboBox needs to update. Both controls have the same ObjectDataSource as their data source. This is why they share an Ajax Panel.

I am using a RadAjaxManager and RadAjaxLoadingPanel as follows (setting UpdatePanelsRenderMode to Inline):

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComboItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItems"/>
                    <telerik:AjaxUpdatedControl ControlID="RadComboItems" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadGridItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGridItems" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboItems" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" BackgroundTransparency="30" RenderMode="Lightweight">
    </telerik:RadAjaxLoadingPanel>

The ComboBox and Grid appear in the same RadAjaxPanel (also with RenderMode Inline):

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline">
    <label for="RadComboItems">Input/Select Item:</label>
    <telerik:RadComboBox ID="RadComboItems" runat="server" Height="200px" Width="200px" DataSourceID="odsItems" EnableVirtualScrolling="true" DataTextField="ItemId" DataValueField="RowNum" EmptyMessage="--Select a value--" RenderMode="Lightweight" EnableAjaxSkinRendering="true">
    </telerik:RadComboBox>
    <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="btnFindItems" OnClick="btnFindItems_Click" EnableAjaxSkinRendering="true" />

    <telerik:RadGrid ID="RadGridItems" RenderMode="Lightweight" runat="server" AllowPaging="True" DataSourceID="odsItems" AllowSorting="True" AllowAutomaticUpdates="True" AllowAutomaticInserts="True" AllowAutomaticDeletes="True" OnUpdateCommand="RadGridItems_UpdateCommand"                                    OnItemDataBound="RadGridItems_ItemDataBound" OnItemCommand="RadGridItems_ItemCommand" OnItemDeleted="RadGridItems_ItemDeleted" OnItemInserted="RadGridItems_ItemInserted" OnItemUpdated="RadGridItems_ItemUpdated" OnPreRender="RadGridItems_PreRender" CellSpacing="-1" GridLines="Horizontal" OnDetailTableDataBind="RadGridItems_DetailTableDataBind" AllowFilteringByColumn="true" OnInfrastructureExporting="RadGridItems_InfrastructureExporting">
....
....
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

When the page first renders, the ComboBox and Button render as expected:

<div class="RadAjaxPanel" id="ctl00_maincontent_ctl00_maincontent_RadComboItemsPanel" style="display: inline;">

Once the Button is pressed though, the rendering changes to Block:

<div class="RadAjaxPanel" id="ctl00_maincontent_ctl00_maincontent_RadComboItemsPanel">

Is there anyway to prevent this from happening, without having to specify this on the page:

    <style type="text/css">
        .RadAjaxPanel
        {
            display: inline !important;
        }
    </style>

Kind regards,

Richard

AjaxLoadingPanel

AjaxPanel

ComboBox

answered on 06 Nov 2024

0 answers

142 views

How to prevent UI elements from improperly rendering on page load on mobile website?

I am creating a mobile website using radcomboboxes inside of update controls that are set to autopostback = true. All of the controls work except on the page's initial load the UI elements are enlarged and look more like buttons. They are still able to be selected and after the controls postback the elements still do not go back to a normal size. Only after a postback from another control do the UI elements shrink down to a normal size.

I have tested the radcombobox with checkboxes enabled outside of the update panel and this behavior does not change. I have a master page that contains jQuery files located in the header, and when I remove one of the js files, the problem disappears with the UI elements disappearing. Can anyone help me figure out what is preventing the UI elements from rendering properly?

On Load:

After postback:

UI for ASP.NET AJAX in ASP.NET MVC

asked on 22 Sep 2023

0 answers

82 views

Ajax Loading panel stays on the page infinitely

Hello, I've encountered a loading panel issue. The loading panel on my user control page won't disappear.

Please see the attached image for my page hierarchy.

I have a parent page which uses 2 same user control pages. On my parent page, I have a RadAjaxManager and on the user control page I have a RadAjaxManagerProxy.

Parent Page RadAjaxManager code:

The button1 on parent page will update panel1.

<telerik:RadAjaxLoadingPanel runat="server" ID="rAjaxLoaingPanel1" Modal="false"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server" ID="rAjaxMan1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="button1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="panel1" LoadingPanelID="rAjaxLoaingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

User Control Page RadAjaxManagerProxy code:

The button2 on user control page will update panel2, and panel2 will update itself.

<telerik:RadAjaxLoadingPanel runat="server" ID="rLdPn" Height="400px"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManagerProxy runat="server" ID="rAjaxManProxy">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="button2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel2" LoadingPanelID="rLdPn" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="panel2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel2" LoadingPanelID="rLdPn" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

When I click button1, the ajax loading panel (id=rAjaxLoadingPanel1) is working fine, it shows and hides. However, when I click button2, the ajax loading panel (id=rLdPn) will stay on the region of panel2 infinitely.

I searched some 2009 forum posts but none of them addressed my issue.

Could someone help me? Thanks very much!

Ajax

AjaxLoadingPanel

updated question on 29 Aug 2023

0 answers

256 views

Invalid ViewState Exception in Telerik Pages

Hi,

We are using Telerik ASP .NET AJAX Control version 2020.1.114.45 in our product.

Sometimes, when the users are using our application with telerik controls, they get invalid viewstate exception as below. It happens randomly. Please let me know, if it is a known issue and fix is available for this issue.

We are using Chrome Browser Version 114.0.5735.199.

Invalid viewstate.
Client IP: <ClientIP>
Port: 48492
Referer: <WebURL>/frmAPPOINTMENTS.aspx
Path: /frmAPPOINTMENTS.aspx
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
ViewState: /wEPDwUJMjIyNjA0OTYwDxYCHhNWYWxpZGF0ZVJlcXVlc3RNb2RlAgEWAmYPZBYCAgMPZBYCAgEPZBYqAgEPFgIeCGRpc2FibGVkZBYEAgEPFgIfAWQWAgIBDxYCHwFkZAIDDxYCHwFkZAIDDxYCHwFkFgQCAQ8WAh8BZGQCAw8WAh8BBQhkaXNhYmxlZGQCBQ8WAh8BZBYcAgEPFgIfAWRkAgMPFgIfAWQWBgIBDxYCHwFkZAIDDxYCHwEFCGRpc2FibGVkZAIFDxYCHwEFCGRpc2FibGVkZAIFDxYCHwEFCGRpc2FibGVkZAIHDxYCHwFkZAIJDxYCHwFkFgoCAQ8WAh8BZBYEAgEPFgIfAWRkAgMPFgIfAQUIZGlzYWJsZWRkAgMPFgIfAQUIZGlzYWJsZWQWBAIBDxYCHwEFCGRpc2FibGVkZAIDDxYCHwEFCGRpc2FibGVkZAIFDxYCHwEFCGRpc2FibGVkZAIHDxYCHwEFCGRpc2FibGVkZAIJDxYCHwEFCGRpc2FibGVkZAILDxYCHwEFCGRpc2FibGVkZAINDxYCHwEFCGRpc2FibGVkZAIPDxYCHwFkZAIRDxYCHwEFCGRpc2FibGVkZAITDxYCHwEFCGRpc2FibGVkZAIVDxYCHwEFCGRpc2FibGVkZAIXDxYCHwFkFgQCAQ8WAh8BBQhkaXNhYmxlZGQCAw8WAh8BBQhkaXNhYmxlZGQCGQ8WAh8BBQhkaXNhY...

Thanks.

AjaxLoadingPanel

Grid

Scheduler

updated question on 07 Jul 2023

0 answers

130 views

The radgrid table is disappears when choosing a value for any filter on radgrid

Please help me to search the error ,

the radgrid table disappear after filtering the search,
I tried to find any solution a lot but i did not find a solution for this problem

aspx code :

    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>


 <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >
                                        <AjaxSettings>
                                            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                                                <UpdatedControls>
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid3" />
                                                    <telerik:AjaxUpdatedControl ControlID="RadGrid4" />
                                                </UpdatedControls>
                                            </telerik:AjaxSetting>
                                        </AjaxSettings>
                            </telerik:RadAjaxManager>
                                    

                            <telerik:RadGrid EnableAriaSupport="true" ID="RadGrid1" runat="server" AllowPaging="true" AllowSorting="true" PageSize="20" ShowStatusBar="true"
                                 CellSpacing="0" GridLines="None" ClientSettings-EnablePostBackOnRowClick="false" AllowFilteringByColumn="True">
                                <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed" DataKeyNames="REQ_ID" >
                                    <HeaderStyle HorizontalAlign="Center" ForeColor="#009900" Font-Names="Arial" Font-Bold="true" Font-Size="Medium" Height="50px"/>
                                    <Columns>
                                        <telerik:GridMaskedColumn DataField="REQ_ID" HeaderText="رقم الطلب" UniqueName="Req_num_r1" Visible="true" AllowFiltering="false">
                                        </telerik:GridMaskedColumn>
                                        <telerik:GridBoundColumn DataField="EMP_NAME" HeaderText="اسم الموظف/ طالب الخدمة" AllowFiltering="true"  UniqueName="EMP_NAME_ra" Visible="true" HeaderStyle-Width="15%">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn DataField="NAME" HeaderText="الخدمة المقدمة" UniqueName="Problem_Name_r1" Visible="true" ColumnGroupName="GeneralInformation">
                                            <FilterTemplate>
                                                <telerik:RadComboBox RenderMode="Lightweight" ID="Problem_NameCombo1" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Problem_Name_r1").CurrentFilterValue %>'
                                                    runat="server" OnClientSelectedIndexChanged="Problem_NameComboIndexChanged1" AutoPostBack="true">
                                                    <Items>
                                                        <telerik:RadComboBoxItem Text="All" Value="" />
                                                        <telerik:RadComboBoxItem Text="مشكلة في الطباعة" Value="مشكلة في الطباعة" />
                                                        <telerik:RadComboBoxItem Text="سكانر" Value="سكانر" />
                                                        <telerik:RadComboBoxItem Text="مشكلة في الشبكة" Value="مشكلة في الشبكة" />
                                                        <telerik:RadComboBoxItem Text="البريد الحكومي" Value="البريد الحكومي" />
                                                        <telerik:RadComboBoxItem Text="الارشيف" Value="الارشيف" />
                                                        <telerik:RadComboBoxItem Text="موارد" Value="موارد" />
                                                        <telerik:RadComboBoxItem Text="الانترنت" Value="الانترنت" />
                                                        <telerik:RadComboBoxItem Text="جهاز الحاسوب" Value="جهاز الحاسوب" />
                                                        <telerik:RadComboBoxItem Text="حزمة الاوفيس" Value="حزمة الاوفيس" />
                                                        <telerik:RadComboBoxItem Text="موقع الديوان" Value="موقع الديوان" />
                                                    </Items>
                                                </telerik:RadComboBox>
                                                <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                                    <script type="text/javascript">
                                                        function Problem_NameComboIndexChanged1(sender, args) {
                                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                                            tableView.filter("Problem_Name_r1", args.get_item().get_value(), "EqualTo");
                                                        }
                                                    </script>
                                                </telerik:RadScriptBlock>
                                            </FilterTemplate>
                                        </telerik:GridBoundColumn>
                                        <telerik:GridDateTimeColumn DataField="CREATE_DATE" ItemStyle-CssClass="sm-visible" HeaderText="وقت انشاء الطلب" DataFormatString="{0:g}" UniqueName="Create_date_r1">
                                        </telerik:GridDateTimeColumn>
                                        <telerik:GridBoundColumn DataField="provider" HeaderText="مقدم الخدمة" UniqueName="provider_r1" HeaderStyle-Width="20%">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridDateTimeColumn DataField="END_DATE" HeaderText="وقت تنفيذ الطلب" DataFormatString="{0:g}" UniqueName="END_DATE_r1" Visible="true">
                                        </telerik:GridDateTimeColumn>
                                        <telerik:GridMaskedColumn DataField="Responsiveness" HeaderText="سرعة الانجاز" UniqueName="Responsiveness_r1" AllowFiltering="false">
                                        </telerik:GridMaskedColumn>


                                    </Columns>

                                    <NestedViewTemplate>

                                        <div class="Table" style="background-color: #a7d1e2">

                                            <div class="TableRow col-12">
                                                <div class="TableCell p-3" style="inline-size: 100%; overflow-wrap: break-word;"><b class="text-danger">تفاصيل المشكلة : </b><%# Eval("DESCRIPTION") %> </div>
                                                <div class="TableCell p-2" style="inline-size: 100%; overflow-wrap: break-word;"><b class="text-danger">ملاحظات مقدم الخدمة : </b><%# Eval("NOTE") %> </div>
                                                <div class="TableCell p-2">
                                                    <b class="text-danger">تقييم الخدمة  : 
                                                          <div class="progress-bar" role="progressbar" style="width:100px ;" aria-valuenow='<%# Convert.ToDouble(Eval("FEEDBACK_RATING"))*20 %>' aria-valuemin="0" aria-valuemax="100"><%# Convert.ToDouble(Eval("FEEDBACK_RATING"))*20 %> %</div>

                                                    </b>

                                                </div>
                                            </div>

                                        </div>

                                    </NestedViewTemplate>
                                </MasterTableView>
                                <ClientSettings>
                                    <DataBinding SelectMethod="GetDataAndCount">
                                    </DataBinding>
                                </ClientSettings>
                            </telerik:RadGrid>

asked on 23 May 2023

0 answers

116 views

Telerik UI for ASP.NET AJAX (2010.1519) using lower version of jQuery

Dear Telerik Team,

We have purchased Telerik UI for ASP.NET AJAX UI 2010.1519. Now we are facing vulnerable issues as it is using jQuery 1.4.2.

One of the Telerik doc tells that

When Telerik upgraded jQuery version to 3.3.1, it faces incompatibilities with the MS AJAX framework and its __doPostBack() method. Due to which, Telerik downgraded jQuery version Telerik UI for ASP.NET AJAX R1 2019 - present are using a modified jQuery version 1.12.4 that includes security vulnerability backport fixes.

Is there a fix to overcome this issue other than upgrading the Telerik version to 2019 or greater?

asked on 08 May 2023

1 answer

178 views

RadAjaxLoadingPanel not showing when javascript call postback on button

VS2022 /Framework 4.7.2 / Vb.net / WebSite / Telerik 2022.1.119.45

Context :

Page1 contains :

RadAjaxLoadingPanel Modal (Id=RALP)
RadAjaxPanel (Id= RAP1 associate to RALP)
1 button to go Page2
1 button to call a job (and after job, reload page with new elements)
and other things...

Page2 contains :
forms and elements for a reunion.
return button to page1
valid button to update writting during reunion in database before run job. (Set session to say to refresh data to page1)

Page1, if i click on different buttons (including button for call job) and elements, is good i've got RadAjaxLoadingPanel
Page2 to page1 by return button : Good
Page2 to page1 by valid button : i've got problem with RadAjaxLoadingPanel :

simulate click button (see code), RadAjaxLoadingPanel not showing (user can click), after treatment content was refreshed. all elements clicked in page not display RadAjaxLoadingPanel

no javascript error in Chrome.

Code Behind :

Page1 :

Private Sub Planning_Load(sender As Object, e As EventArgs) Handles Me.Load
    If IsPostBack = False Then
            If Session("Planning_RunJob") = 1 Then
                PrepareRunJob()
            End If
       '... other treatement
   End If
End Sub


Private Sub PrepareRunJob()

	Session.Remove("Planning_RunJob")
	Dim btRefresh as string = btJobOperation.UniqueID
	
	'Simulate click button for run run after page load, for user to inform is in update
	
	
	Dim sc As String = $"setInterval(__doPostBack('{btRefresh}',''), 10000);"
    ClientScript.RegisterStartupScript(Page.GetType, "refresh", $"{sc}", True)

End Sub

Private sub Runjob()

  'Simulate job
  Threading.Thread.Sleep(10000)
  litE4.Text = "REFRESHED !"

End Sub

Private Sub btJobOperation_Click(sender As Object, e As EventArgs) Handles btJobOperation.Click
        RunJob()
End Sub

Thanks for your help !

Ajax

AjaxLoadingPanel

answered on 26 Apr 2022

1 answer

147 views

RadWizard and ajax Loading Panel

Hi,

I have a radWizard and an ajaxloadingpanel (connected by a radajaxmanager)

However when I change steps the loading panel does not work,

The first step I am using the radwizard "next" button and on the second step y button is custom.On neither of the button clicks does the loading panel show.

Thanks

AjaxLoadingPanel

AjaxPanel

Wizard

answered on 05 Oct 2021

1 answer

273 views

RadAjaxManager postback

Hello,

I have a setup like so:

<telerik:RadAjaxManager ID="RadAjaxManager1" RequestQueueSize="5" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="pnlProductType">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="pnlProductSubType" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>

[...omitted...]

<asp:Panel ID="pnlProductType" runat="server">
<telerik:RadLabel runat="server" AssociatedControlID="rcbProductType" ID="lblProductType" Text="Product type"/> 
       <telerik:RadComboBox RenderMode="Lightweight" Filter="Contains" Width="100%" AllowCustomText="true" ID="rcbProductType" ClientIDMode="Static" runat="server"  DataTextField="Value" DataValueField="Id" AutoPostBack="True" ></telerik:RadComboBox>
</asp:Panel>

[...omitted...]

<telerik:RadLabel runat="server" AssociatedControlID="rcbProductSubType" ID="lblProductSubType" Text="Product subtype" />
<asp:Panel ID="pnlProductSubType" runat="server">
    <telerik:RadComboBox RenderMode="Lightweight" Filter="Contains" Width="100%" AllowCustomText="true" ID="rcbProductSubType" ClientIDMode="Static" runat="server"  DataTextField="Value" DataValueField="Id"></telerik:RadComboBox>
</asp:Panel>

Basically the idea is to populate the Product Subtype combobox with items depending on the Product Type selected, asynchronously. However, this does not occur and the form is reloaded with a hard postback, seemingly ignoring the RadAjaxManager setting.

What could be the most likely reason for this?

Thank you.

PS.: please ignore any discrepancies in control IDs, they have been altered for better readability.

Ajax

AjaxLoadingPanel

ComboBox

answered on 23 Jul 2021

1 answer

122 views

Update contents of a LoadingPanel on long timed post back

Not sure if this is even possible.

I have an update panel that fires off fine when a button is clicked and it shows "Processing request. Please wait...."

All fine and dandy.

Certain actions may take a while and I would like to be able to change the message content (attempting through threading and delegates) with status updates as to the background process.

Is this even remotely possible?

AjaxLoadingPanel

answered on 24 Sep 2020