Update panel on Telerik control - c#

In my asp.net application there are several dropdown and textbox control which creates dynamically. So on select of dropdown while data is being fetched I want to show update progress on div. Also I dont want to post back call so whole page should not be refreshed.
Here is my code
<div class="col-md-2">
<div class="filter-section">
<table>
<tr>
<td>
<asp:Panel ID="ControlsParent" ViewStateMode="Enabled" ClientIDMode="Static" runat="server"></asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Button ID="BtnShowReport" runat="server" ClientIDMode="Static" CssClass="btn btn-primary btn-block" Text="Show Report" OnClick="BtnShowReport_Click" />
</td>
</tr>
</table>
</div>
</div>
I am new to Telerik so dont have idea to use.

Put the code insiode the Update Panel, I am using Simple asp and haven't used Telerik in following:
// you code codes here
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DynamicLayout="true" ID="upProgSearch" DisplayAfter="1500" runat="server" >
<ProgressTemplate>
<div id="progressBackgroundFilter"></div>
<div id="processMessage" style="width:100px;">
<asp:Image ID="Image1" ImageUrl="~/images/Loading.gif" runat="server" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
for preventng auto postback use <triggers> tags in update panel and use <asp:AsyncPostBackTrigger> and specify the event name that causes postback and you don't want .

Related

Need to add 'for' attibutes to labels inside a ListView control of an ASP.NET page

I have something like this
<asp:ListView ID="lvOptions" runat="server"">
<LayoutTemplate>
<p>Select an option<span>*</span></p>
<div class="row">
<asp:Literal runat="server" ID="groupPlaceHolder"></asp:Literal>
</div>
<div class="row">
<div class="w100">
<label>
Other types:</label>
<asp:DropDownList ID="ddlOtherTypes" runat="server" DataTextField="Description" DataValueField="Id"
AutoPostBack="true" Enabled="false"
</asp:DropDownList>
</div>
</div>
</LayoutTemplate>
<GroupTemplate>
<asp:Literal runat="server" ID="itemPlaceHolder"></asp:Literal>
</GroupTemplate>
<ItemTemplate>
<span class="wrap-w50">
<asp:RadioButton runat="server" ID="rdbOption" AutoPostBack="true" />
<label>
<%# Eval("Description") %></label>
</span>
</ItemTemplate>
</asp:ListView>
And I got here two labels, one fot the Other types DropDownList, and another for each RadioButton.
For this labels, I need to add a "for" attribute, and I need the clientID but, if I try to write the attibute like:
for="<%= ddlOtherTypes.ClientID %>"
for="<%= rdbOption.ClientID %>"
I got the error: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Any suggestions please?
Thank you in advance.

Is it possible to add a hyperlink to ASP LinkButton

I have a link button that I want to put a hyperlink to that a popup div is called when the button is clicked.
The asp linkbutton is declared as such:
<TD Class="SpreadSheet"<ASP:LinkButtonID="lbtnViewUsers_Edit" Text="Edit" Runat="Server" onclick="#Upload"/></TD>
and the popup to be called is
<div id="Upload" class="overlay" runat="server">
<div class="popup">
<h2>Edit User &nbsp </h2>
<a class="close" href="#">×</a>
<div class="content">
<!-- content -->
</div>
</div>
</div>
Is there a way to put a sort of href = "#Upload" to the link button?
What you are looking for is a model pop. Asp.net Ajax tool kit has one, you can learn more about it at here . I created a simple sample of how to use this model pop-up. Bear in mind you first have to add the tool kit to your asp.net project (you can use nuget package manager for this) and register the control to page using
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
use the properties of Model pop extender to show and save your per record data.
<asp:Panel ID="pnlpopup" runat="server" Width="400px">
<asp:Panel ID="headerPanel" runat="server">Header text Here </asp:Panel>
<div class="form-group">
<asp:Label ID="Label1" runat="server" Text="lable 1"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="form-group">
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</div>
</asp:Panel>
<div class="form-group">
Other data values here
<asp:LinkButton ID="lbEdit" runat="server">Edit</asp:LinkButton>
</div>

UpdatePanel AsyncPostBackTrigger does Postback

I've below design code containing updatepanel to the gridview and buttons as shown below -
<asp:ScriptManager ID="scrptmanager" runat="server"></asp:ScriptManager>
<div>
<asp:HiddenField ID="hdnSortValue" runat="server" />
</div>
<div class="current-btns" style="float: left !important;">
<div id="divFitnessSortBy" runat="server" class="fit-sort">
<table>
<tr>
<td>
<b>Sort by :</b>
</td>
<td>
<asp:Button ID="btnMostRecent" Text="Most Recent" class="button action sortcomments"
runat="server" OnCommand="btnMostRecent_Click" CommandArgument="date" />
</td>
<td>
<asp:Button ID="btnMostViewed" Text="Most Viewed" class="Comments" runat="server"
OnCommand="btnMostViewed_Click" CommandArgument="views" />
</td>
</tr>
</table>
</div>
<div class="clear">
</div>
</div>
<div class="hr">
</div>
<div class="BlogsPostHolderDiv" id="divPagination">
<asp:UpdatePanel ID="updtpanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvBlogsPost" runat="server" DataKeyNames="PostID" AutoGenerateColumns="False"
AllowPaging="false" Width="100%" OnRowDataBound="gvBlogsPost_Bound" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="current-articles">
<div class="current-thumb">
<a id="lnkThumbnail" runat="server" rel="nofollow">
<asp:Image ID="imgThumbnail" runat="server" Height="135px" Width="186px" />
</a>
</div>
<div class="current-list">
<h2>
<a id="lnkArticle" runat="server">
<%# DataBinder.Eval(Container.DataItem, "Subject")%></a>
</h2>
<div class="views-comments">
<h5>
<asp:Label runat="server" ID="lblNewsletterDate" ForeColor="#808080"><%# DataBinder.Eval(Container.DataItem, "PostDate")%></asp:Label>
<span class="gray">|</span> <span id="spnViews" runat="server"><span>
<%#Convert.ToInt64(DataBinder.Eval(Container.DataItem, "TotalViews")).ToString("#,#")%>
Views </span></span>
</h5>
</div>
<asp:Label ID="lblShortDescription" runat="server"><%#DataBinder.Eval (Container.DataItem, "Body")%> </asp:Label>
</div>
<div class="clear">
</div>
</div>
<div class="hr">
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnMostRecent" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnMostViewed" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<input type="hidden" id="hdnLastArticle" value="10" />
When i click on btnMostRecent or btnMostViewed the page does postback which should not be the case...am i missing something here?
Expected - When i click on any of the given button only gvBlogsPost gridview should be updated without the whole page postback
Help and thanks in advance...!
It looks the only thing you have to do is make sure the triggers are in the same naming container.
According to MSDN:
The control that the AsyncPostBackTrigger control references must be
in the same naming container as the update panel for which it is a
trigger. Triggers that are based on controls in other naming
containers are not supported.

Update Panel - The ScriptManager must appear before any controls that need it

I tried to put an update panel in my aspx form, but it keeps on showing this error. The ScriptManager must appear before any controls that need it
This is my aspx
<form id="Form1" runat="server" class="form-horizontal">
<div class="col-lg-6">
<%--<asp:Panel id="pnlExisting" runat="server">
<div class="alert alert-danger" role="danger">
<i class="glyphicon glyphicon-exclamation-sign"></i> <asp:Label ID="recordCheck" runat ="server"> </asp:Label>
</div>
</asp:Panel>--%>
<div class="form-group">
<label class="control-label col-lg-4">Project</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddlProjects" runat="server" class="form-control" AutoPostBack="true"
onselectedindexchanged="ddlProjects_SelectedIndexChanged" /><br />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-4">Project Code</label>
<div class="col-lg-8">
<asp:Textbox ID="txtProjectCode" runat="server" class="form-control" required />
</div>
</div>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Price</label>
<div class="col-lg-8">
<asp:Textbox ID="txtPrice" runat="server" class="form-control" Textmode="Number" required />
</div>
</div>--%>
<%-- <div class="form-group">
<label class="control-label col-lg-4">Status</label>
<div class="col-lg-8">
<asp:Textbox ID="txtStatus" runat="server" class="form-control" required />
</div>
</div>--%>
</div>
<asp:UpdatePanel ID="upMaterialsList" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lvMaterialsList" EventName="PagePropertiesChanging" />
</Triggers>
<ContentTemplate>
<table class="table table-hover">
<thead>
<th>Material</th>
<th>Quantity</th>
<th>Status</th>
<th>Date Added</th>
<th>Date Modified</th>
<th></th>
</thead>
<tbody>
<asp:ListView ID="lvMaterialsList" runat="server" ondatabound="lvMaterialsList_DataBound"
onpagepropertieschanging="lvMaterialsList_PagePropertiesChanging" OnItemCommand="lvMaterialsList_ItemCommand">
<ItemTemplate>
<tr>
<td><%# Eval("SupplierProduct")%></td>
<td><%# Eval("Quantity") %></td>
<td><%# Eval("Status") %></td>
<td><%# Eval("DateAdded", "{0: MMMM dd, yyyy}") %></td>
<td><%# Eval("DateModified", "{0: MMMM dd, yyyy}") %></td>
<td>
<asp:Label ID="ltReqMat" runat="server" Text='<%# Eval("ReqMatID") %>' Visible="false" />
</td>
<td>
<asp:LinkButton Text="Approved" class="btn btn-success " ID="lbtnApproved" runat="server"
CommandName="Approve" > </asp:LinkButton>
<asp:LinkButton Text="Decline" class="btn btn-warning " ID="lbtnDecline" runat="server"
CommandName="Decline" > </asp:LinkButton>
</td>
</tr>
</ItemTemplate>
<EmptyDataTemplate>
<tr>
<td colspan="12"><h2 class="text-center">No records found.</h2></td>
</td>
</tr>
</EmptyDataTemplate>
</asp:ListView>
</tbody>
</table>
<div class="col-lg-12">
<center>
<asp:Button ID="btnReturn" runat="server" class="btn btn-default" Text="Back"
PostBackUrl="Default.aspx" formnovalidate />
</center>
</div>
<br />
<center>
<asp:DataPager ID="dpMaterialsList" runat="server" PageSize="10" PagedControlID="lvMaterialsList">
<Fields>
<asp:NumericPagerField ButtonType="Button"
NumericButtonCssClass="btn btn-default"
CurrentPageLabelCssClass="btn btn-success"
NextPreviousButtonCssClass="btn btn-default" />
</Fields>
</asp:DataPager>
</center>
</ContentTemplate>
</asp:UpdatePanel>
</form>
I want to know why it is not working properly
Add ScriptManager tags just below the <Form> tag of your page.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
You have to include the ScriptManager control in either your content page or Master page to enable ASP.NET AJAX features. So in your Master page you can place this control just after the form tag and ensure you put it before any ContentPlaceHolder control:-
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
By this all the content page which have the Master page set to the above master will automatically use this ScriptManager.
Apart from this, if at all you want to include any specific script reference in any of your content page then you can make use of ScriptManagerProxy control which at run time will combine the properties of both ScriptManager and ScriptManagerProxy.
According to ASP.NET AJAX:-
ScriptManager - A server control that makes script resources available
to the browser, including the Microsoft AJAX Library and the
functionality that enables partial-page rendering.
ScriptManagerProxy - A server control that enables nested components
to add script and service references if the page already contains a
ScriptManager control.

Button not firing onClick below Panel controls in IE

I have a button which is not working when placed below two panels. If I move it above the panels, it works.
It works either way in Firefox. It does not work in IE 8
The button runs this code
protected void Button2_Click(object sender, EventArgs e)
{
panelForm.Enabled = true; //input panel
panelOutput.Visible = false; //output panel
Button1.Visible = true; //input panel button
}
I have some workarounds, but was hoping to find the cause of the issue.
edit: here is the markup of the second panel and button. I've tried moving the button outside of the panel and get the same result.
<asp:Content ID="MainContent" Runat="Server" ContentPlaceHolderID="MainContentPlaceHolder">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="domainUserID" runat="server" Visible="false"></asp:TextBox>
<!-- gray bar and title -->
<table style="width:100%; border-style:none;">
<tr>
<td class="com_headline">
SQL Emergency Request [Home]
</td>
</tr>
<tr class="com_app_instructions">
<td>
<p>Words here</p>
</td>
</tr>
</table>
<!-- end title and gray bar -->
<asp:Panel ID="panelForm" runat="server" Visible="True" CssClass="myform">
<form method="post" action="Default.aspx" id="form">
<h1>Request Form</h1>
<p>Complete this form to be issued a login</p>
<table cellpadding="5px">
<tr>
<td>
IR Number
<br />
<span class="small">Obtain your IR number from
SMART</span>
</td>
<td>
<asp:TextBox ID="txtIR" runat="server"></asp:TextBox>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtIR" CssClass="errorMsg"
ErrorMessage="Please Enter Your IR Number">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Server
<br />
<span class="small">MSSQL5 is supported for now</span>
</td>
<td>
<asp:DropDownList ID="ddServer" runat="server" AutoPostBack="True"
Enabled="False" onselectedindexchanged="ddServer_SelectedIndexChanged">
<asp:ListItem>DEVMSSQL05</asp:ListItem>
<asp:ListItem Selected="True">MSSQL05</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="ddServer" CssClass="errorMsg"
ErrorMessage="Please Choose A Server">
</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Database
<br />
<span class="small">You have the role of 'Analyst' in these databases</span>
</td>
<td>
<asp:DropDownList ID="ddDatabase" runat="server" AppendDataBoundItems="true"
AutoPostBack="false" DataSourceID="DatabaseDropDownObjectDataSource"
DataTextField="DatabaseName" DataValueField="DatabaseName" Width="150">
</asp:DropDownList>
</td>
<td>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Button1" runat="server" CssClass="com_btn_flat"
onclick="Button1_Click" Text="Submit" />
</td>
<td>
<div id="loader">loading...</div>
</td>
</tr>
</table>
</form>
</asp:Panel>
<asp:Panel ID="PanelError" runat="server" Visible="false" CssClass="errorPanel">
<h1><asp:Label ID="txtErrorMsg" runat="server">error text</asp:Label></h1>
</asp:Panel>
<br />
<asp:Panel ID="panelOutput" runat="server" Visible="false" CssClass="panelOutput">
<h1>
<asp:Literal ID="Title" runat="server" Text=""/>
</h1>
<p>
<asp:Literal ID="Warning" runat="server" Text=""/>
</p>
<p>
<asp:Literal ID="LoginLifeHours" runat="server" Text=""/>
</p>
<p>
<span class="important">
<asp:Literal ID="Login" runat="server" Text="" />
</span>
</p>
<p>
<span class="important">
<asp:Literal ID="PWD" runat="server" Text="" />
</span>
</p>
<br />
<p>
<asp:Button ID="Button2" runat="server" Text="Request Another Login"
onclick="Button2_Click" CssClass="com_btn_flat" />
</p>
</asp:Panel>
This is the button that is not responding in IE
<p>
<asp:Button ID="Button2" runat="server" Text="Request Another Login"
onclick="Button2_Click" CssClass="com_btn_flat" />
</p>
The problem is that you are using a <form> tag within your content page. The master page already includes a <form> tag and IE appears to be balking at the form within a form. When I removed the <form> tag from your aspx, the button handler ran under IE8.
The sample code is Button2_Click, but your button markup outside of the panels has test_button_Click as the event handler? There are three buttons, so which one are you asking about, I assume the last?
I noticed that you have a tag inside your first panel (panelForm). Also, I don't see a a tag with a runat="server" attribute (although, it could be in a master page). And it doesn't look like your button is inside a form (unless the master page has a form).
The problem is that you can only have one form on a page in Asp.NET WebForms. If you don't have any <form runat="server"> tags on your page, then you buttons will not fire any events on the code-behind.

Categories

Resources