I need some help with a Asp.net Gridview. My users need to click a button and have an Ajax Modal Popup window display with a Gridview that has Fixed Headers. I have tried this many times but no success. I have been able to use Java to make the headers fixed in a Gridview, but it does not work when displaying in a Ajax modal popup window. The header row duplicates on the Gridview. Again, thank everyone for the help.
Can anyone post some code using Asp.net/C#/Ajax.
function BindControlEvents() {
/*Code to copy the gridview header with style*/
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true);
/*Code to remove first ror which is header row*/
$(gridHeader).find("tr:gt(0)").remove();
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
/* Here Set Width of each th from gridview to new table th */
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
$("#controlHead").append(gridHeader);
$('#controlHead').css('position', 'absolute');
$('#controlHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
};
Related
I have built the following Gridview (Employees and their weekly target):
Desired result: I have a submit button at the bottom which will take all the data from the Gridview using jQuery and push it into my database.
At the moment, I cannot even retrieve the textbox values though, i have the following code:
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td").each(function () {
var value = $(this).text();
alert(value);
});
});
});
This Selects all the "Table Data" cells... It is selecting the names perfectly, but as soon as it gets to a textbox, it doesnt get the value I type in, it just alerts nothing.
I have tried the following too, each with different, but not the desired results:
.html
.val
.innerHTML
Would anyone be able to point out where I am going wrong please? please let me know if you need anymore info...
You have to check if the control exists in the table cells or not
Give this a try
var value = $(this).find('input').length > 0 ? $(this).find('input').val() : $(this).text();
Hope this will work!
You must select the input textbox in your selection as given below
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td input").each(function () {
var value = $(this).val();
alert(value);
});
});
});
I'm trying to get jQuery to bind an onClick function when the document loads to my radio buttons.
ASP goes back to the database and finds all the open markers and then it sends a response to the page with the raw HTML to make a radio button and an image of the marker. What I need to do is have jQuery (or anything for that matter) bind an onClick that will signal what one is clicked so I can send that markerId back to the database to attach it to a person.
Here is a rough jsFiddle of what I've tried so far. In debugging I added alerts in the each function and I see them 3x like I should but the attr('id') comes back undefined.
This is the html that puts the radio buttons on the form
<br />
<p>Select open marker for new user:
<% getMarkers(); %>
</p>
This is the codebehind for that call
while (reader.Read())
{
if (readIndex % 3 == 0)
markerTable += "<tr>";
string markerId = reader["marker_id"].ToString();
string fileName = reader["marker_filename"].ToString();
markerTable += "<td><input type=\"radio\" name=\"openMarker\" value=\"" + markerId + "\" " +
"id=\"oMrk" + markerId + "\"><label for=\"oMrk" + markerId + "\"><img src=\"/Markers/" +
fileName + "\" /></label></input></td>";
readIndex++;
if (readIndex % 3 == 0)
markerTable += "</tr>";
}
if (readIndex % 3 != 0)
markerTable += "</tr>";
markerTable += "</table>";
}
else
markerTable = "<p>No empty markers. Please delete a user to continue.</p>";
sCon.Close();
return markerTable;
The fiddle I posted has the source pasted into it from this function.
I have two questions.
Why does this not work? It seems like it should, I am getting 3 elements from my jQuery selector statement, It's being called from $(document).ready() why are the attributes undefined?
Is there a better way to do this? I was planning on putting the value in a page variable and then sending it with an ASP button back to the server to a stored procedure to add that marker with some text from another field back to the database. I realize I could add the onClick event into the response html, but dang it I need to understand why what I'm doing isn't working.
I'm pretty new to web, so if I am way off the mark procedurally, I am open for suggestion.
LINK
$(document).ready(function () {
$('input:radio').each(function (radElem) {
var radId = $(this).attr('id');
alert(radId);
});
$('input:radio').on('click', function () {
alert('Clicked');
});
});
$(document).ready(function () {
$('input:radio').on('click', function() {
alert($(this).attr('id'));
});
});
Do you need to send the value to the server while staying on the page? (via ajax)
or do you need to post the form to another page?
It doesn't work because you are trying to bind onClick instead of
just click
The other answers have provided the jQuery for you. In the each you
just need to use this keyword
I tested this in a fiddle, it works. Others have provided similar answers, but here's the fiddle anyway: THE FIDDLE
$(document).ready(function () {
$("input:radio").each(function () {
var radId = $(this).attr('id');
alert(radId);
$(this).on('click', function () {
alert('Clicked');
});
});
});
As for a better way to do what you are trying to accomplish, I do not have a firm grasp of what you are trying to do really, sorry. It feels though, like you should be initially populating this in asp.net, but the constraints of your page may not make this possible. I can't say.
Also, go ahead and pick one of the previous answers, I just wanted to explain to you why what you had wasn't working.
I using Gridview control on sharepoint. I'm Bind data to column Name of Gridview. And now, I want to click direct on row of column Name, program will display detail popup window of this row.
Thanks !
I dont know if I understand you right but you could try opening a ModalDialog directing to a custom .aspx Page to Display your Information
http://sqldev-samir.blogspot.de/2012/08/open-modal-dialog-in-serverside-code-in.html
Here is client-side code to open a dialog box that will point to a page which contains the detail (editform.aspx, in this example). This code also causes a postback so the grid gets updated with the changes the user makes on EditForm.aspx.
function CloseCallback(result, target)
{
eval(<%=Page.ClientScript.GetPostBackEventReference(new PostBackOptions(Button1))%>);
}
function OpenDialog(url)
{
var options = {
url: url,
title: '',
allowMaximize: true,
showClose: true,
width: 700,
height: 800,
dialogReturnValueCallback: CloseCallback
};
var dlg = SP.UI.ModalDialog.showModalDialog(options);
}
And here is the server-side code to add the hyperlink column to the grid (this happens to be a RadGrid instead of an SPGridView server control). This column will display a hyperlink that points to the above JavaScript function and when clicked opens EditForm.aspx with the data from the selected row item.
GridColumn fldEditLink = new GridHyperLinkColumn() { UniqueName = "Edit", Text = "Edit/View",DataNavigateUrlFields = new string[] { "ID" }, DataNavigateUrlFormatString =String.Format("javascript:OpenDialog('{0}/Lists/Events/EditForm.aspx?ID={{0}}');", web.Url) };
So I have a text box, where I add an onchange event of markAsException.
My javascript is -
function markAsException(recordID) {
//alert("Exception");
//mark exception column
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).innerText = "Exception";
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).style.color = "#FF0000";
document.getElementById("ctl00_cpMain_tdScrollException_" + recordID).style.backgroundColor = "#99CCFF";
//enable comments ddl and remove blank (first item)
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).disabled = false;
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).focus();
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).options[0] = null;
}
What I want to do is, when a user changes the value in a textbox, to mark a column as "Exception", and then focus a drop down list where they have to chose the reason for the exception.
This is what happens.. If I am on that text box and change it, then tab, it tabs to the drop down list.
However, if I change the value and then simply click in another text box on the form, I don't focus the drop down list.
How would I accomplish that?
I would suggest using JQuery's change() function.
The advantage is that it will be more stable across different browsers.
Something like:
$('#<%= TextBox1.ClientID %>').change(function(){
// extract the recordID from the textbox - perhaps with an attribute?
markAsException(recordID);
});
My comment was getting longer so I'm expanding:
Take a look at the JQuery documentation for setting this up as the page finishes loading. If tb is the ID of your textbox your selector would be
$('#<%= tb.ClientID %>')
I would suggest you replace your code and use
tb.Attributes.Add("recordID", recordId.ToString());
This will add the ID you need onto the textbox tag. Once you're in the function I outlined above you can use the following selector to get the recordID in javascript
var recordID = $('#<%= TextBox1.ClientID %>').attr('recordID');
All together
$(document.ready(function(){
$('#<%= tb.ClientID %>').change(function(){
var recordID = $('#<%= tb.ClientID %>').attr('recordID');
if(recordID){
markAsException(recordID);
}
});
});
Currently I have an aspx page that contains a dropdown list and four buttons.
Based on the selection made in the dropdown list then a combination of the buttons are displayed.
I currently have this implemented so that when the user makes a selection I am using AutoPostBack and the selectedChanged server side event to determine which buttons to display and then set the Visible property of these buttons in this method.
Due to the fact that this posts back I don't think its a nice solution as the whole page is posting back. I would prefer to do this using JSON.
I made the following attempt but it doesn't seem to work:
$(document).ready(function () {
jQuery("#<%= MyDropdownList.ClientID %>").change(function () {
updateAvailableButtons(jQuery(this).val());
});
});
function updateAvailableButtons(selectedItemId) {
jQuery("h2").html("selectedItemId:" + selectedItemId);
jQuery.getJSON("MyPage.aspx/GetAvailableButtons?" + Id, function (data, textStatus) { debugger; });
}
Server side:
protected void GetAvailableButtons(int selectedItemId)
{
//based on the id here then then I show hide certain buttons.
button1.Visible = true;
button2.Visible = false;
button3.Visible = false;
button4.Visible = false;
}
I've never worked with JSON before so apologies if this is way off.
Similar task can be done using JavaScript. The problem is that you'll need to use a html control instead of an asp.net button control so that you can manipulate form the client side.