i have a gridview with 6 columns in 5th column i have placed a text box, all the data are populating in the grid by executing stored procedure from database .
i have another textbox and ok button outside the gridview also.
Now i need to update the text box value in the gridview with the same text which is added to the outside the text box inside ok button click event ..
how can i do this without saving data to database?through javascript or jquery?
First thing if you are using ASP.NET 4 or above then you can set the ClientIDMode of your controls to Static so that it will be easier to work with the controls in jQuery. Alternatively you can also add custom attributes or class to your controls. Now since a gridview is rendered as html table in browser you can find the second row in the table (since first row is header row) and update the value like this:-
$(document).ready(function () {
$("#btnSubmit").click(function (e) {
e.preventDefault();
var firstRow = $('tr:nth-child(2)', $('#GridView1'));
var outsideText = $('#txtOutside').val();
$('#txtfoo', firstRow).val(outsideText);
});
}
Here I have considered that the ID of your gridview control is GridView1, the textbox which is outside is txtOutside, button is btnSubmit and the textbox which is outside is txtOutside.
Related
I have a dynamic grid in ASP.NET for which the data is being fetched Using Knockout.js, whenever a Search button is clicked. Once the grid is loaded the user can click on the any row to check the details related to that row in a popup.
What I want to implement here is, Once the Search button is clicked and the data in the grid is loaded the focus should be set to the first row and Enter Key should fire the click event (As when clicked by mouse which displays a pop up).
Thanks in advance!!
Note : Using Knockout js and jquery to fetch and bind data in asp.net
Try this:
$(document).ready(function(){
var column = $("#<%=GridView1.ClientID %>").find("tr:eq(1)");
column.focus();
});
If it fails
try
ClientIDMode="Static"
$("#search").click(function(){
$("#first-row").focus();
})
//active your row
if( $("#first-row").is(":focus")){
$("#first-row").addClass("active") //maybe a style for this active row
}
$(document).keypress(function(e) {
if(e.which == 13 && $("#first-row").hasClass("active")) {
//redirect or show a div..
}
});
Something like that ?
P.S : I don't know if it's possible to focus a div or tr ^^
You can use Knockouts hasFocus Binding
The hasFocus binding links a DOM element’s focus state with a viewmodel property. It is a two-way binding, so:
If you set the viewmodel property to true or false, the associated element will become focused or unfocused.
Link to Docs
Single Row Selections requirement:
My current gridview selects the row just on click on the row. Thus, if the user click 2nd row and then 3rd row, its just not the recent (3rd) row but also the 2nd row is shown as selected. Now the requirement is, when the user selects the 2nd row, and then click on 3rd row, only the 3rd row should be selected and not the 2nd row.
Multi Row Selection requirement:
Also, the user should be allowed to select multiple rows by clicking on "CTRL" key together with the left mouse click on the rows.
How to achieve this using JAVASCRIPT? I am new to Javascript and or Gridview stuffs. Could someone please help me with this code please?
Please remember, our application is based on 2.0
create global JS variable says , var rows_clicked = [].
Use following link to check how to detect CTRL + CLICK. We will use that in later step. - How to detect control+click in Javascript from an onclick div attribute?
Use this code to bind gridview row click event.
$('#<%=gvw.ClientID%> tr[id]').click(function() {
// row click handler , gridview id = gvw -- assumption
// check if it is clicked earlier using IsClicked()
// if clicked 1st time, then call OnRowClick, else OnRowDeselect
$(this).css("color","red");// set some css to look like selected.
});
function OnRowClick()
{
// detect if ctrl+clicked, then save that row's datakey to global
// if it is that, then
rows_clicked.push(datakey);
// and set clicked = true.
$(this).attr("clicked",true);
}
4.
function OnRowDeselect()
{
// remove that datakey from `rows_clicked`
}
5.
function IsClicked(element)
{
if($(element).attr("clicked")) // clicked is an attr to check if row clicked 1st time or deselected
return true;
else
return false;
}
Use this rows_clicked and set in hiddenfiled, and postback that to get selected rows in server side code.
i am using Asp.Net Grid View Control having Template Field Columns. Which have Asp.Net Literal,TextBox and CheckBox Controls. I want to add each row Received Amount value when checkbox is Checked in each row. Below is my GridView.
I have accessed the Received Amount columns by JavaScript, but it gives me the whole Textbox in Alert
I want to get Value of that Textbox having Id=txtFeeRecAmount, not whole Control..
Below is my Script..
<script type="text/javascript">
function AddAmount(lnk) {
var row = lnk.parentNode.parentNode;
var rowIndex = row.rowIndex;
alert(rowIndex);
var amount = row.cells[2].innerHTML;
alert(amount);
}
</script>
Any Help, I want to get Value of Received Amount Column, when the CheckBox is checked.
As, there can be multiple textboxes. there you need to get the current value by
using jquery, this should work;
var amount = $(row.cells[2]).find('input').val();
As you tagged this question with jQuery I assume you are using it:
I want to get Value of that Textbox having Id=txtFeeRecAmount
$("#txtFreeRecAmount").val();
I am trying to add a value to a gridView column on a specific row via Javascript. Previously I have done this via .NET.
But now I want to try this alternative:-
document.getElementById('<%=GridView1.ClientID%%>').rows[1].cells[1].value = IDentification#;
This is obviously not the correct syntax. Any ideas?
It should be innerHTML not value
document.getElementById('<%=GridView1.ClientID%>')
.rows[1]
.cells[1]
.innerHTML= yourvariable; //or "astring"
This will insert the text in your variable to 2nd row's 2nd column of the table rendered by the gridview.
I have an asp datalist that is setup as follows:
<asp:DataList ID="dlListItems" ClientIDMode="Static" Width="100%" runat="server" RepeatColumns="2" ItemStyle-BorderColor="#E8E6E7" ItemStyle-BorderStyle="Solid" ItemStyle-BorderWidth="1px"
RepeatDirection="Horizontal" RepeatLayout="Table">
Within the datalist each node contains a a div with the class "divList"
I need to be able to implement something so not all nodes are shown on load and a button to load more. No server side action needs to happen, simply the ability to show hidden rows.
I have managed to get it working by hiding and then showing 10 divs at a time. Whilst this works well the table rows from the datalist are still shown and you therefore get a big gap of empty rows at the bottom of the datalist.
$(function () {
$(".divList").slice(0, 10).show();
$("#load").click(function (e) {
e.preventDefault();
$(".divList:hidden").slice(0, 10).fadeIn(1500);
});
});
Was hoping someone might have some suggestions on how I can implement this on the table rows rather than the divs in order to prevent the empty spacing within the datalist. Bearing in mind (as far as I know) I can't assign any id's classes to the datalist generated rows.
You should try this
$(function(){
var trs = $("#dlListItems tr");
trs.hide();
trs.slice(0, 10).show();
$("#load").click(function (e) {
e.preventDefault();
$("#dlListItems tr:hidden").slice(0, 10).fadeIn(1500);
});
});
First make your all Table rows in your dlListItems hidden, then get trs which you want to show as you don't want to show those rows which have hidden divs.
Try this
$(function () {
$(".divList").parent().parent().hide();
$(".divList").parent().parent().slice(0, 5).show();
$("#load").click(function (e) {
e.preventDefault();
$(".divList:hidden").parent().parent().slice(0, 5).fadeIn(1500);
});
});
As dlListItems is an ID of a dynamic control it can change dynamically over client side (depending upon the nesting of your controls). So I guess this would be a better approach.