Q:
I have a gridview which contains text box as a template field.The grid view exists in an update panel . My problem is:
When the text changed event has fired , feel like a jumpof the browser similar to the behavior of (post back).but it isn't a post back. I don't know why this strange behavior happened.
my aspx:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl_research" runat="server" CssClass="pnl">
<div id="detailsDiv" align="center" style="width: 800px;">
<table border="0" width="98%">
<tr>
<td align="center">
<div class="grid" dir="rtl">
<div class="grid" dir="rtl">
<div class="rounded">
<div class="top-outer">
<div class="top-inner">
<div class="top">
<h2>
<asp:Label ID="Label35" runat="server" Text="جدول التقييم العام"></asp:Label></h2>
</div>
</div>
</div>
<div class="mid-outer">
<div class="mid-inner">
<div class="mid">
<asp:GridView Width="100%" ID="gv_Evaluation" CssClass="datatable" AllowSorting="True"
runat="server" AutoGenerateColumns="False" AllowPaging="True" GridLines="None"
OnRowDataBound="gv_Evaluation_RowDataBound">
<EmptyDataTemplate>
<table style="width: 100%;">
<tr>
<td>
</tr>
<tr>
<td align="center">
<asp:Label ID="Label4" runat="server" Font-Size="16pt" Text="لا يوجد بيانات"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</EmptyDataTemplate>
<Columns>
<asp:TemplateField HeaderText="م">
<ItemTemplate>
<asp:Label ID="lblSerial" runat="server"></asp:Label></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="نوعية النشاط" DataField="activityType" />
<asp:BoundField HeaderText="أوزان النشاط" DataField="activityWeight" />
<asp:TemplateField HeaderText="التقييم">
<ItemTemplate>
<telerik:RadTextBox ID="txt_evaluateWeights" runat="server" AutoPostBack="True" OnTextChanged="txt_evaluateWeights_TextChanged"
hideData='<%#((GridViewRow)Container).RowIndex%>'>
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txt_evaluateWeights"
Display="Dynamic" ErrorMessage="*" SetFocusOnError="True"></asp:RequiredFieldValidator></ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="التقييم الذاتي" DataField="activitySelf" />
<asp:BoundField HeaderText="تقييم رئيس القسم" DataField="activityBoss" />
<asp:BoundField HeaderText="تقييم العميد" DataField="activityDean" />
</Columns>
<RowStyle VerticalAlign="Top" CssClass="row" />
</asp:GridView>
</div>
</div>
</div>
<div class="bottom-outer">
<div class="bottom-inner">
<div class="bottom">
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
EDIT:
I remove
this line hideData='<%#((GridViewRow)Container).RowIndex%>'
protected void txt_evaluateWeights_TextChanged(object sender, EventArgs e)
{
calc();
int index = ((System.Web.UI.WebControls.GridViewRow)(((RadTextBox)sender).Parent.NamingContainer)).DataItemIndex;
//int index = int.Parse(((RadTextBox)sender).Attributes["hideData"]);
((RadTextBox)gv_Evaluation.Rows[index + 1].Cells[3].FindControl("txt_evaluateWeights")).Focus();
}
still the same problem!!
EDIT2:
protected void gv_Evaluation_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lblSerial = (Label)e.Row.FindControl("lblSerial");
lblSerial.Text = ((gv_Evaluation.PageIndex * gv_Evaluation.PageSize) + e.Row.RowIndex + 1).ToString();
RadTextBox txt = e.Row.FindControl("txt_evaluateWeights") as RadTextBox;
ScriptManager.GetCurrent(this).RegisterAsyncPostBackControl(txt);
}
}
still the same problem!!
EDIT3:
I knew the problem , but i don't know how to fix it:
the problem is as a result of this line:
((RadTextBox)gv_Evaluation.Rows[index + 1].Cells[3].FindControl("txt_evaluateWeights")).Focus();
but i need this line of code. How to prevent the Focus() method from making a jump to the top of the page.
Is the # symbol necessary here (line 2 below):
<telerik:RadTextBox ID="txt_evaluateWeights" runat="server" AutoPostBack="True" OnTextChanged="txt_evaluateWeights_TextChanged" hideData='
<%#((GridViewRow)Container).RowIndex%>'>
If you use a blank # aka html name anchor in a link it makes the page jump to the top.
ex. Top
would make a link that when clicked on would jump you to the top of the page. Your OnTextChange event looks like it contains a # that might be causing your issue.
Are you sure this is not a Postback? You should define your triggers.
I believe this might be a similar problem, with a solution:
Full postback triggered by LinkButton inside GridView inside UpdatePanel
Related
I have a bootstrap modal pop up. Inside that there are many controls and submit button. So after successfully submitting I want to close that pop up. Below is the code which shows the message as Record Saved successfully.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
}
But with this, I want to close the modal popup which I am unable to. here is that div
<div class="modals">
<form id="frmFileUpload" runat="server">
<div class="col-sm-6">
<asp:HiddenField ID="hdnFileInfo" runat="server" />
<asp:HiddenField ID="hdnClose" runat="server" />
<label>Sap ID</label>
<asp:Label ID="lblSapId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Candidate ID</label>
<asp:Label ID="lblCandidateId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Technical Feasible</label>
<div class="selectWraper">
<asp:DropDownList ID="ddlTechFeasible" runat="server">
<asp:ListItem Text="Select" Value="Select" />
<asp:ListItem Text="YES" Value="YES" />
<asp:ListItem Text="NO" Value="NO" />
</asp:DropDownList>
</div>
</div>
<div class="col-sm-6">
<div class="upload">
<label>Upload Document</label>
<asp:HiddenField ID="hdnGetFileName" runat="server" />
<div id="dvFileUpload">
<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" CssClass="chooseFile" />
</div>
</div>
</div>
<div class="col-sm-6">
<label>Remarks</label>
<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine" />
</div>
<div class="col-sm-6" style="overflow: auto; height: 100px;">
<asp:GridView ID="grdFilesInfo" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="Text" HeaderText="Uploaded Files" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" ToolTip="download files" CssClass="fa fa-download" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" ToolTip="delete files" CssClass="fa fa-trash-o" CommandArgument='<%# Eval("Value") %>' runat="server" OnClientClick="if (!confirm('Are you sure you want delete the file?')) return false;" OnClick="lnkDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="clearfix"></div>
<div class="modalButton">
<asp:Button ID="btnSaveDraft" runat="server" Text="Save as Draft" OnClick="btnSaveDraft_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" data-dismiss="modal" OnClick="btnSubmit_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
</div>
</form>
</div>
JQuery and Ajax are your friend here.
You could just add this inside a document.ready...
$(document).ready(function() {
$('#<%= btnSubmit.ClientID %>').on('click', function () {
$('.modals').hide(); // hides anything with 'modals' as the class
}
}
You could also just give the modal an ID and use $('#ModalID').hide();
You could assign a static id to the submit button, but the <%= btnSubmit.ClientID %> will pull out the ID for you.
Is this an ajax operation? From the code you have there it looks like it would perform a postback and reload the page anyway.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Popup", "closePopUP();", true);
}
function closePopUP(){
$(".modals").modal('hide');
}
I have requiredFieldValidator for a dropdownlist inside a panel. If there is no data selected in the dropdown btnSubmitReport works fine to validate and display *. Once data is selected and btnSubmitReport is clicked to display data it still works fine. Now if you unselect the dropdown and hit btnSubmitReport it does not do validation anymore. This is because first time btnSubmitReport_Click is clicked, it checks to see if Page.IsValid and calls JavaScript code, but subsequent calls are just calling JavaScript code and btnSubmitReport_Click is not being called to see if the page is Valid. Please suggest. Here is the sample code on the aspx page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="testValidator.aspx.cs"
MasterPageFile="~/Site.master" Inherits="textXslt.testValidator" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script src="Styles/Reports.js" type="text/javascript"></script>
<h3>
<asp:Label ID="lblHeader" runat="server" Text="Reporting Filter"></asp:Label>
</h3>
<div style="text-align: right">
<input id="lnkShowFilter" type="button" value="Show Filter" onclick="ShowF()" class="btn" />
<input id="lnkHideFilter" type="button" value="Hide Filter" onclick="HideF()" class="btn" />
</div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="divFilter">
<asp:UpdatePanel ID="uplMain" runat="server">
<ContentTemplate>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<table>
<tr>
<td valign="top">
<table>
<tr>
<td>
<asp:CheckBox ID="chkBusiness" runat="server" Text="Business Division" CssClass="chkbox" />
</td>
<td>
<asp:DropDownList ID="ddlBusiness" runat="server" AppendDataBoundItems="true" AutoPostBack="true"
CausesValidation="True" OnSelectedIndexChanged="ddlBusiness_SelectedIndexChanged"
ValidationGroup="grpSubmit" Width="350px">
<asp:ListItem Selected="True" Value="-1">--- SELECT ---</asp:ListItem>
<asp:ListItem>Orange</asp:ListItem>
<asp:ListItem>Apple</asp:ListItem>
<asp:ListItem>Mango</asp:ListItem>
</asp:DropDownList>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBusiness" runat="server" ControlToValidate="ddlBusiness"
Enabled="true" ToolTip="Please select a Business." ErrorMessage="*" InitialValue="-1"
ForeColor="Red" CssClass="required" Display="Dynamic" ValidationGroup="grpSubmit">
</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:PlaceHolder>
<hr size="1" />
<div style="text-align: center">
<table style="width: 10%">
<tr>
<td>
<asp:Button ID="btnHome" runat="server" Text="Home" OnClick="btnHome_Click" CssClass="btn" />
</td>
<td>
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click"
ValidationGroup="grpSubmit" CssClass="btn" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="divResult">
<asp:UpdatePanel ID="uplGrid" runat="server">
<ContentTemplate>
Here go Results of grid
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
Here is the code behind:
protected void btnSubmitReport_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
btnSubmitReport.Attributes["onclick"] = "javascript:SubmitF();";
}
//then do rest of the processing to display grid results
}
and here is Reports.js file:
function ShowF() {
$('#lnkShowFilter').hide();
$('#divFilter').show();
$('#lnkHideFilter').show();
$('#divResult').hide();
$('#MainContent_lblHeader').text("Reporting Filter");
}
function HideF() {
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#').show();
$('#MainContent_lblHeader').text("Report Result");
}
function SubmitF() {
// alert("SubmitF");
$('#lnkShowFilter').show();
$('#divFilter').hide();
$('#lnkHideFilter').hide();
$('#divResult').show();
$('#MainContent_lblHeader').text("Report Result");
}
well, I was able to solve the issue by using client-side validation. So I created a function
<script type="text/javascript">
function ValidateAndShowPopup() {
if (Page_ClientValidate('grpSubmit')) {
SubmitF();
}
}
And added both OnclientClick and OnClick to the submit button
<asp:Button ID="btnSubmitReport" runat="server" Text="Submit" OnClick="btnSubmitReport_Click" ValidationGroup="grpSubmit" OnClientClick="ValidateAndShowPopup()" CssClass="btn" />
Included below is my markup for a page I have using a FineUploader control. I've abridged the code to only include the important parts. This page is two parts that both reside in an UpdatePanel. The first part is a simple table that contains rows of data, the last column of each row is a asp:LinkButton. The second part is a nested UpdatePanel that contains a div in which the FineUploader control is rendered when the page is first loaded (because the FineUploader control is strictly javascript and does not further exist in the code-behind). Also, when the LinkButton is pressed this.Page.IsPostBack is false.
The problem is that any time a LinkButton in the first part of the page is pressed, the FineUploader control simply disappears. I cannot get the code to re-render from the code-behind (with things like ClientScript.RegisterStartupScript/RegisterClientScriptBlock). I've also tried various setups with wrapping Part 1 with an UpdatePanel but still it wipes out my FineUploader control. I'm thinking I'm using update panels incorrectly, but am not sure (ASP.NET is not usually what I work in).
As an added detail, if I click a button inside the Part 2 nested UpdatePanel, my FineUploader control magically reappears.
Markup (for visibility important parts are marked with multi-line, mostly empty comment blocks):
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Setup.aspx.cs" Inherits="Some_Portal.Pages.Setup" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<div id="locationInfo">
<br class="clearfloat" />
<!-- Main Screen Display breaking down the types of information -->
<asp:UpdatePanel runat="server" ID="updExtensions">
<Triggers>
<asp:PostBackTrigger ControlID="btnDownloadCall" />
</Triggers>
<ContentTemplate>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.filename {
visibility: hidden;
height: 0;
width: 0;
display: block;
}
</style>
<!-- This portion is to enable the file uploader: -->
<link href="../js/fineuploader/fineuploader-3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="../js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var uploader = new qq.FineUploader({
element: $('#fine-uploader')[0],
request: {
endpoint: 'AccountSetup.aspx'
},
autoUpload: true,
multiple: false,
text: {
uploadButton: '<asp:Button ID="fineUploadButton" runat="server" CssClass="button" style="width:6;5" Text="Browse" />'
},
validation: {
allowedExtensions: ['mp3', 'wav']
}
});
});
</script>
<!-- -->
<!-- -->
<!-- Part 1 -->
<!-- -->
<!-- -->
<table width="100%" cellpadding="0" border="0px" style="border-color:white;">
<tr>
<th>Extensions</th>
</tr>
<tr>
<td style="width: 100%; border:0; border-bottom-color:white; border-bottom-style:none;">
<asp:DataGrid ID="dgExtensions" runat="server" AllowSorting="true" AllowPaging="true" PagerStyle-BorderStyle="None" PagerStyle-BorderColor="white" PagerStyle-BorderWidth="0px"
AutoGenerateColumns="false" PageSize="10" DataKeyField="id" OnPageIndexChanged="dgExtensions_OnPageIndexChanged"
PagerStyle-Mode="NumericPages" PagerStyle-HorizontalAlign="Right" OnSortCommand="dgExtensions_OnSortCommand"
Width="100%" BorderColor="White"
HeaderStyle-CssClass="GridHeader"
ItemStyle-CssClass="GridItem"
AlternatingItemStyle-CssClass="GridAltItem">
<Columns>
<asp:BoundColumn DataField="number" HeaderText="Number" SortExpression="number">
<ItemStyle HorizontalAlign="center" Width="8%" />
<HeaderStyle HorizontalAlign="center" Width="8%" />
</asp:BoundColumn>
<asp:BoundColumn DataField="extensionType" HeaderText="Type" SortExpression="extensionType">
<ItemStyle HorizontalAlign="center" Width="18%" />
<HeaderStyle HorizontalAlign="center" Width="18%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Description" SortExpression="description">
<HeaderStyle Width="25%" CssClass="dgLeftPad" />
<ItemStyle Width="25%" CssClass="dgLeftPad" />
<ItemTemplate>
<asp:Literal runat="Server" ID="litExtensionDescription" Text='<%# Eval("description").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionID" Value='<%# Eval("id").ToString() %>' />
<asp:HiddenField runat="server" ID="hidExtensionTypeID" Value='<%# Eval("extensiontypeid").ToString() %>' />
<asp:HiddenField runat="server" ID="hidPrevDescription" Value='<%# Eval("description").ToString() %>' />
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="status" HeaderText="Status" SortExpression="status">
<ItemStyle HorizontalAlign="center" Width="24%" />
<HeaderStyle HorizontalAlign="center" Width="24%" />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="">
<HeaderStyle Width="10%" />
<ItemStyle Width="10%" HorizontalAlign="center" />
<ItemTemplate>
<!-- -->
<!-- -->
<!-- Clicking this makes the Fine -->
<!-- Uploader control go away. -->
<!-- -->
<!-- -->
<asp:LinkButton runat="Server" ID="lbEditExtension" CommandArgument='<%# Eval("id").ToString() %>'
OnCommand="EditExtension" Text="Edit" Visible='<%# SetEditEnabled(Eval("extensiontypeid").ToString()) %>'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<HeaderStyle BackColor="#eeeeee" />
<PagerStyle HorizontalAlign="Right" Mode="NumericPages" />
</asp:DataGrid>
</td>
</tr>
<tr>
<asp:Panel runat="server" ID="pnlNoExtensions">
<td colspan="3" align="center" style="color: Red;">
There are no extensions established for your account
</td>
</asp:Panel>
</tr>
</table>
<br />
<!-- -->
<!-- -->
<!-- Part 2 -->
<!-- -->
<!-- -->
<asp:Panel runat="server" ID="Panel1" Width="100%">
<asp:UpdatePanel runat="server" ID="updRouteGroup" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnDisableOnHold" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlImpExcel" runat="Server" >
<div style="width:100%">
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
On Hold Music
</th>
</tr>
<tr>
<!-- -->
<!-- FineUploader Control -->
<!-- -->
<td align="left" valign="middle"><div id="fine-uploader"></div></td>
<td align="center" valign="middle"><asp:Label ID="lblOnHoldFile" runat="server" Text="Current file: none"/></td>
<td align="right" valign="middle"><asp:Button ID="btnDisableOnHold" runat="server" style="margin-right:7px;width:87px;" Text="Disable Hold Music" CssClass="button" OnClick="btnDisableOnHold_OnClick" /></td>
</tr>
<tr><td colspan ="2" align="center"><asp:Label runat="server" ID="lblUploadError" style="color: Red;" Visible="false" /></td></tr>
</table>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<!-- The Operator Extension Panel -->
<asp:Panel runat="server" ID="Panel2">
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnOperatorUpdate" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel3" runat="Server" >
<div>
<table colspan="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<th colspan="3">
Operator Extension
<asp:Button ID="btnOperatorUpdate" runat="server" Text="Save" CssClass="button" style="margin-right:2px;width:87px;float:right;padding-right:10px;" OnClick="btnOperatorUpdate_OnClick" />
<asp:DropDownList runat="Server" ID="ddlOperatorExtension" style="float:right;margin-right:10px;" Width="250px" AutoPostBack="false" />
</th>
</tr>
</table>
<br />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
How can I make my FineUploader control stay visible?
EDIT 1:
Considering this might be a page life cycle issue, I attempted a manual render of the control by adding the following:
protected void Page_Init(object sender, EventArgs e)
{
string script = "<script type=\"text/javascript\">" +
" alert('oh hey');" +
" $(document).ready(function () {" +
" var uploader = new qq.FineUploader({" +
" element: $('#fine-uploader')[0]," +
" request: {" +
" endpoint: 'AccountSetup.aspx'" +
" }," +
" autoUpload: true," +
" multiple: false," +
" text: {" +
" uploadButton: '<asp:Button ID=\"fineUploadButton\" runat=\"server\" CssClass=\"button\" style=\"width:6;5\" Text=\"Browse\" />'" +
" }," +
" validation: {" +
" allowedExtensions: ['mp3', 'wav']" +
" }" +
" });" +
" });" +
"</script>";
ClientScript.RegisterClientScriptBlock(this.GetType(), "HideOnPostback", script, false);
System.Diagnostics.Debug.WriteLine("Page_Init() run");
}
The result was that if I click the "Edit" LinkButton in Part 1, I see "Page_Init() run" in debug output, but the control still goes away and the "oh hey" js alert is never displayed. However, if I click the other button in Part 2, I see "Page_Init() run" in the debug output, I see the "oh hey" alert and the FineUploader button remains visible.
I believe you are experiencing this issue because you are loading the FineUploader control too late in the page lifecycle for it to properly load the ViewState. Clicking the button is triggering a postback which restarts the lifecycle for the page. ViewState is loaded before Page_Load() so try to add the control to the page during Page_Init() instead so that the ViewState can be loaded.
I have a radcombobox with checkboxes turned on. I wrote a jQuery script to add a click event to all of them. What I need to move on to the next step is a way to get the combobox in which that item/checkbox resides. Something like this:
$(."comboBoxTag.find(":checkbox").click(
function(){
var cboObject = $(this).???
});
this way I can do things like access the telerik api methods like cboObject.get_items();
I have the control tagged with a CSS class called "AssigneeTag", but doing a .closest(".AssigneeTag") isn't returning anything...
any ideas?
UPDATE:
As requested:
<h1>Tickets Assigned to Me</h1>
<rad:RadListView runat="server" ID="lsvTickets">
<ItemTemplate>
<div id="divContainer" class="divContainer">
<div id="divTicketHeader" class="divTicketHeader">
<asp:Table runat="server" ID="tblTicketHead" Width="100%" CellSpacing="0" CellPadding="5" HorizontalAlign="Center">
<asp:TableRow HorizontalAlign="Left">
<asp:TableCell Width="25%">
<asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true" />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblStatus" runat="server" Text='<%#Eval("Status.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblReportedBy" runat="server" Text='<%#Eval("CreatedBy.Key") %>' />
</asp:TableCell><asp:TableCell Width="25%">
<asp:Label ID="lblDateOpened" runat="server" Text='<%#Eval("DateOpened") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div><div id="divTicketBody" class="divComments">
<rad:RadListView runat="server" ID="lsvActions" DataSource='<%#Eval("Comments") %>' ItemPlaceholderID="ph1" ClientIDMode="Static">
<ItemTemplate>
<div id="divComment" class="divComment">
<asp:Table runat="server" ID="tblComment" CellPadding="5">
<asp:TableRow>
<asp:TableCell Width="15%" HorizontalAlign="Center">
<rad:RadBinaryImage runat="server" ID="imgCommenter" Width="50" Height="50" /><br />
<asp:Label ID="Label5" runat="server" Text="[action author]" /><br />
<asp:Label ID="Label6" runat="server" Text='<%#Eval("CreateDate", "{0:MMM d, yyy hh:mm}") %>'
CssClass="commenterText"/><br />
</asp:TableCell><asp:TableCell>
<asp:Label ID="Label7" runat="server" Text='<%#Eval("CommentText") %>' />
</asp:TableCell></asp:TableRow></asp:Table></div></ItemTemplate><LayoutTemplate>
<center>
<div id="divAddComment" style="width: 500px;" class="CommentTopLevel">
<div id="divCommentControls" style="margin: 8px 0px 8px 0px;">
<asp:HiddenField runat="server" ID="hfID" Value='<%#Eval("TicketID") %>' />
<rad:RadComboBox runat="server" ID="cboStatus" DataSource='<%#GetStatuses() %>' DataTextField="Status" DataValueField="Support_StatusID" CssClass="StatusTag" EnableViewState="true" />
<rad:RadCombobox runat="server" ID="cboAssignTo" DataSource='<%#GetAssignees() %>' DataTextField="Name" DataValueField="Guid" ItemDataBound="Assignees_Bound" CssClass="AssigneeTag" CheckBoxes="true" OnItemChecked="AssigneeChecked" />
<rad:RadTextBox runat="server" ID="txtComment" TextMode="MultiLine" Width="500" Height="100" CssClass="CommentBox" /><br />
</div>
<div style="height: 35px;">
<div style="float:right; margin: 3px 0 0 0; ">
<rad:RadButton runat="server" CssClass="submitTag" ID="btnSubmit" Text="Submit" /><br />
<div class="SubmitStatus"></div>
</div>
</div>
</div>
</center>
<asp:PlaceHolder ID="ph1" runat="server" />
</LayoutTemplate>
</rad:RadListView>
</div>
</div>
</ItemTemplate>
</rad:RadListView>
This is a listview with another listview nested in the itemtemplate. in the itemtemplate of the inner list resides the controls. The combobox im referring to is named cboAssignTo. It is a Telerik combobox, so it does not work like a traditionial DropDown menu, which I think is what is really complicating this on top of the fact that the comboboxes are dynamically generated. I was able to do things like $(this).closest(".rcbTag") to get the values of the other combobox called cboStatus, but this other combobox involves a bit more as it has checkboxes.
EDIT:
Here is a watered down easier to read version of what stage I'm at. This is the HTML generated by a single instance of this combobox:
<div id="lsvTest" class="RadComboBox RadComboBox_Default RcbTag" style="width:160px;">
<table summary="combobox" style="border-width:0;border-collapse:collapse;table-layout:fixed;width:100%">
<tr class="rcbReadOnly">
<td style="margin-top:-1px;margin-bottom:-1px;width:100%;" class="rcbInputCell rcbInputCellLeft">
<input name="lsvTest" type="text" class="rcbInput" id="lsvTest_Input" value="" style="display: block;" readonly="readonly" />
</td>
<td style="margin-top:-1px;margin-bottom:-1px;" class="rcbArrowCell rcbArrowCellRight">
<a id="lsvTest_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a>
</td>
</tr>
</table>
<!-- 2012.1.215.40 -->
<div class="rcbSlide" style="z-index:6000;">
<div id="lsvTest_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="float:left;display:none;">
<div class="rcbScroll rcbWidth" style="width:100%;">
<ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;">
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />One</li>
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Two</li>
<li class="rcbItem "><input type="checkbox" class="rcbCheckBox" />Three</li>
</ul>
</div>
</div>
</div>
<input id="lsvTest_ClientState" name="lsvTest_ClientState" type="hidden" />
</div>
Just looking at this, I feel like clicking a checkbox and then using $(this).closest(".RcbTag") should traverse all the way to the top and grab the outer div, but it is not.
As with the other question, I think your life will be easier if you stick with the Telerik-sanctioned methods. Here is how you could do it using them:
<script language="javascript" type="text/javascript">
function OnClientItemChecked(sender, eventArgs) {
var item = eventArgs.get_item();
var combo = item.get_comboBox(); // Now you have a reference to the parent ComboBox
}
</script>
And the RadComboBox itself:
<telerik:RadComboBox ID="RadComboBox1" runat="server"
OnClientItemChecked="OnClientItemChecked" CheckBoxes="true">
</telerik:RadComboBox>
I solved similar issues using jQuery parent() calls, did you try this?
Using teleriks drag and drop demo I'm able to reproduce the functionality, however, what I want to do is if the browser isn't HTML5 compliant I want to load a different function. Below is the code i'm using.
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
}
}
</script>
I realize that you want to replace this section with the code you want:
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
How do I include whats below in this in the .replaceWith(
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
<div style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
</div>
This is how I did it, by creating additional divs and hiding elements based on divs
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$(""));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
$(".nonHTML5").replaceWith(
$(""));
}
}
</script>
<div class="wrapper">
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
</div>
<div class ="nonHTML5" style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
</tr>