Multiple user controls and clientid asp.net JS - javascript

I am following the post:
http://mosesofegypt.net/post/GridView-with-Select-All-CheckBox-using-JQuery.aspx
to create a checkbox column in asp.net gridview with select/deselect all functionality.
In my case, the gridview and the javascript (JQuery) code lies inside a dynamically load usercontrol, and there are more than one instances of that user control. The select/deselect functionality works only in the last usercontrol created on page.
In other words, the gvProducts.ClientId in the js script knows only about the last gridview.
Any ideas how can I get reference to the ClientIds of gridview inside other usercontrol (i.e. other than the last) ?
Any help would be most appreciated.
EDIT : This question is essentially the same as asked in this post : Multiple user control instances and ClientID in JS
but there are no helping answers for it.
Thanks,
Ali

You could add a CssClass to the GridView and base your jQuery selector off of that.
Script:
<script type="text/javascript">
$(function () {
$(".t th input:checkbox").click(function () {
var $checkbox = $(this).closest('table').find(':checkbox:not(:first)');
$checkbox.attr('checked', $(this).attr('checked'));
});
});
</script>
2 tables with the same class name:
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>
<br /><br /><br />
<table class="t">
<tr>
<th align="left" scope="col">Category</th>
<th align="left" scope="col">Product</th>
<th align="right" scope="col">Unit Price</th>
<th align="left" scope="col">Supplier</th>
<th scope="col">
<input type="checkbox" name="select-all" />
</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox" /></td>
</tr>
</table>

Related

jquery automatically check checkbox with values in array

I have a table like so
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
I have a jquery array where there some ids stored of those rows example
id= [123,431,213]
what I want is when my page loads the ids which are inside the array to be already checked
$(document).ready(function () {
//code
});
I do not know how to go about this any help would be helpful
Iterate over each row in the table body and for each take the text value of the first cell and check to see if your array includes it.
const arr = [ 431, 123, 888 ];
// Iterate over the rows
$('tbody tr').each((i, el) => {
// Grab the first cell's text and coerce it to a number
const number = Number($(el).find('td').first().text());
// If the value is in the array
if (arr.includes(number)) {
// Find the input and check it
$(el).find('input[type="checkbox"]').prop('checked', 'checked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td>431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>124</td>
<td>Bob</td>
<td>23</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td>123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>
var ids = ['431', '132'];
$( document ).ready(function() {
$('td.id').each(function( index ) {
if (ids.includes($(this).text())){
$( "input.checkboxes" ).eq( index ).prop( "checked", true );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
<th>action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">431</td>
<td>Ana</td>
<td>22</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
<tr>
<td class="id">123</td>
<td>tom</td>
<td>21</td>
<td><input type="checkbox" name="action[]" class="checkboxes" /></td>
</tr>
</tbody>
</table>

Copy Paste multiple rows from CSV to input fields in an HTML Form

I am trying to copy paste data from a CSV file to an HTML form using Jquery. My form has an array of input fields so I can do multiple inserts at the same time on submit
Now, suppose I copy paste multiple rows from a CSV file to the second column of the first row in the form, the first row of the form shows data correctly but in the second row, the data pasted starts from the first column itself, wherein it should start from the second row as it did on the first row of the form
CSV rows and cells
1 4 a
2 5 b
3 6 c
Screenshot
function csv_paste_datagrid(event){
$(document).ready(function() {
$('input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().parent().parent().parent().parent().next().find('input');
} else{
input = input.parent().parent().parent().parent().parent().parent().next().find('input').first();
}
}
}, 0);
});
});
HTML
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<table style="display : inline;width : 100%;"></table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=" " id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[1]" style="">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[1]" style="">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td style=" " id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]" style="">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value=""> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" style="" value="Back" onclick="" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" style="" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" onclick="" style="" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
Right, I had to clear a few double ids from your HTML first and also added a class attribute (contTD) to your "main" container <td>s. After that the whole thing fell into place fairly easily:
to prevent the actual TSV text from being pasted directly into the first input field I used e.preventDefault()
I then used .split() twice on the TSV string to turn it into the 2D array vals
I identified the .closest() td.contTD element (--> td) and its column and row numbers (col and row) by finding the .index() of td and its parent row.
starting form the .closest('tbody')I then worked my way down again through the .slice()of rows starting with row and its (sliced) child input elements starting at column col.
in an .each() loop I then assigned the value of the vals-array to the input element, but only if val[i][j] exists!
There could be further improvements to the script, as it will run trhough all <tr>s of the table from row row to the end. But I hope this is a starting point for you and has given you a few more ideas on how to work with jquery.
In my script I used a delegated paste-event-binding to the <form> element. This should work well with a dynamic table. I did not pack it into an extra function. But, of course, when you use it in your site it should be placed in your onload section.
And lastly: in my second .split() I am looking for a tab character as column separator, so this example will work with a TSV file format. If you want to apply it on space or comma separated values you should adapt the regular expression there to something like /\s/ or /,/ .
$('form').on('paste', 'input', function (e) {
e.preventDefault(); // do not paste the contents into the first cell ...
// convert TSV from clipboard into a 2D array:
let vals=event.clipboardData.getData('text').trim().split(/\r?\n */).map(r=>r.split(/\t/));
let td=$(this).closest('.contTD'); // closest container TD and work from there
let col=td.index(), row=td.parent().index(), tbdy=td.closest('tbody');
// modify input fields of rows >= row and columns >= col:
tbdy.children('tr').slice(row).each((i,tr)=>{
$(tr).find('td input:text').slice(col).each((j,ti)=>{
if(vals[i]&&vals[i][j]!=null) ti.value=vals[i][j] }
)});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="width : 100%;" id="system_validations" name="system_validations" accept-charset="utf-8" method="POST" class="form-control" enctype="multipart/form-data">
<label>sample data for copying and pasting via clipboard:</label>
<table>
<tr><td>1</td><td>4</td><td>a</td></tr>
<tr><td>2</td><td>5</td><td>b</td></tr>
<tr><td>3</td><td>6</td><td>c</td></tr>
</table>
<table id="" class="system_form_tables_parent">
<tbody>
<tr>
<th></th>
<td>
<table id="form_table[0]" class="system_form_tables_child" style="margin-left:auto; margin-right:auto;">
<tbody>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[0]">
<table>
<tbody>
<tr id="tr_validation_options[0]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[0]" name="validation_options[0]" placeholder="" class="" value="01"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[0]">
<table>
<tbody>
<tr id="tr_validation_display[0]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[0]" name="validation_display[0]" placeholder="" class="" value="02"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[0]">
<table>
<tbody>
<tr id="tr_blocked_modules[0]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[0]" name="blocked_modules[0]" placeholder="" class="" value="03"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="contTD"><table>
<tbody><tr><th class="th_class1"><span class="">extra column</span></th></tr>
<tr><td class="td_class"><input type="text" value="00A"> </td></tr>
<tr><th></th></tr>
<tr><th></th></tr>
<tr><td class="val_error"></td></tr></tbody>
</table></td>
<td class="contTD" id="container_validation_options[1]">
<table>
<tbody>
<tr id="tr_validation_options[1]">
<th class="th_class1"><span class=""> validation_options </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_options[1]" name="validation_options[1]" placeholder="" class="" value="04"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_validation_display[1]">
<table>
<tbody>
<tr id="tr_validation_display[1]">
<th class="th_class1"><span class=""> validation_display </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="validation_display[1]" name="validation_display[1]" placeholder="" class="" value="05"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
<td class="contTD" id="container_blocked_modules[1]">
<table>
<tbody>
<tr id="tr_blocked_modules[1]">
<th class="th_class1"><span class=""> blocked_modules </span></th>
</tr>
<tr>
<td class="td_class"> <input type="text" id="blocked_modules[1]" name="blocked_modules[1]" placeholder="" class="" value="06"> </td>
</tr>
<tr>
<th></th>
</tr>
<tr>
<th></th>
</tr>
<tr>
<td class="val_error"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="text-align : left;padding-left:0.5em">
<table id="submit_table">
<tbody>
<tr>
<td><input type="button" class="common_button" id="system_validations_back" name="system_validations_back" value="Back" title="Back">
<input type="reset" class="common_button" id="system_validations_reset" name="system_validations_reset" value="Reset" title="Reset">
<input type="button" class="common_button" id="submit" name="system_validations_submit" value="Submit" title="Submit">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>

select all checkboxes in FooTable with pagination and filtering

I am currently working on a FooTable project where I am trying to create a 'select all' checkbox. I have run in to two issues and I cannot figure out how to proceed;
I can select all items, either ALL items (irrespective of filtering)
or just the items on the page.
I can get all the rows to show up, and select, but It will not filter.
I can apply a filter, and still selects all rows.
What I am looking for is a way to only select the filtered rows checkboxes, even if the rows are on different pages. I figured a cheaky way to accomplish this would be:
increase pageSize to more than the amount of filtered rows
select all checkboxes in shown rows
revert back to OG pageSize
<table class="tg" data-paging="true" data-paging-size="3" data-filtering="true">
<thead>
<tr>
<td>ID</td>
<td>Name</td>
<td>Select All:<input type="checkbox" class="check-all"></td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>10</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td><input type="checkbox" class="check-one"></td>
</tr>
</tbody>
</table>
jQuery(function($) {
$('.tg').footable();
function changePageSize(qs_table, num_rows_page) {
let newSize = num_rows_page;
FooTable.get(qs_table).pageSize(newSize);
}
function checkedAll(qs_table, qs_checkbox, num_column, checked) {
var ft = FooTable.get(qs_table)
ft.pageSize(11);
FooTable.init(qs_table);
let rows = ft.rows.all;
rows.forEach(function(row) {
row.draw(); //REQUIRED for js rendering row, else selected only chockboxes on the active page
$(qs_checkbox, row.cells[num_column].$el[0]).prop('checked', checked);
});
}
$(document).on("change", ".check-all", function() {
checkedAll(".tg", ".check-one", 2, $(this).prop('checked'));
});
});
Here is my JSFiddle: https://jsfiddle.net/T3DDIE_B3AR/pe2usL5r/

How to multiply two value on focus of any text box using javascript?

I have a table in which I have some columns:
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td><input type="number"></td>
<td><input type="number"></td>
</tr>
</tbody>
</table>
If a user adds some value in the "Price" column then I multiply "Quantity" and "Price" and show the result in the third column "Total" in the same row. It will have to run time. Please give me a solution in javascript or jQuery.
You can do it like this :
$("#TableID1").find("input").change(function(){
var getVal = $(this).parent().index();
var multiply = Number($(this).parent().parent().find("td").eq(getVal-1).text()) * $(this).val();
$(this).parent().parent().find("td").eq(getVal+1).find("input").val(multiply)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>
Hope it helps :)
Attach input event handler and update the input based on the value.
$(document).ready(function() {
$('tr td:nth-child(5) input').on('input', function() {
// get input in last column and set value
$(this).closest('tr').find('td:nth-child(6) input').val(
// get value from input, and use `+` to convert string to number
+$(this).val() *
// get quantity value and multiply
+$(this).closest('tr').find('td:nth-child(4)').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="TableID1">
<thead>
<tr>
<th>Sr. No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Quantity</th>
<th width="10%">Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>TE0011200MAH3VG00</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
<tr>
<td>6</td>
<td>SG0246100KAD1HG10</td>
<td>3 d1,</td>
<td>12</td>
<td>
<input type="number">
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
</table>

How to retrieve td input textbox value?

In the follwing table,on click function(removeRow), I want to retrieve value of textbox (txtTotalAmount).
I wrote this
function removeRow(name) {
$(name).parent().parent().remove();
var total = $(name).parent().parent().siblings().find("input .classTotalAmount").val();
alert(total);// shows only undefined in alert box
}
Here is my table
<table id="tblitems" cellpadding="0" cellspacing="0" border="0" class="additemtb">
<tbody>
<tr>
<th>Item Name</th>
<th>Item Code</th>
<th>Unit Price</th>
<th>Qty</th>
<th>UOM</th>
<th>Amount</th>
<th>Minimal Order Qty</th>
<th>FOC</th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="width:90px;">
Copy
delete
add
</td>
</tr>
<tr>
<td></td>
<td >Total Amount</td>
<td>
<asp:TextBox ID="txtTotalAmount" CssClass="classTotalAmount number" Columns="8" runat="server" ></asp:TextBox>
<asp:Label ID="Label2" runat="server" CssClass="classCurrency3" />
</td>
<td> </td>
</tr>
</tbody>
</table>
var amount = $("#txtTotalAmount").val();

Categories