I have a grid and I am using the jQuery code below to to highlight the row that the user selected.
But it's taking some time to select the row.
How can I optimize it?
function hightlightrow() {
var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
$("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
if ($(this).attr('onclick')) {
if ($(this).attr('onclick').indexOf(index) > 0) {
$(this).addClass("highlight");
} else {
$(this).removeClass("highlight");
}
}
});
You may be able to optimize slightly by storing the result of $(this) into a local variable. That way, it is not building a new jquery object each time.
function hightlightrow() {
var index = "'Select$"+ $("#<%= highlightedRow.ClientID%>").val() +"'";
$("#<%= UltraWebGrid1.ClientID%>").find("tr").each(function () {
var $row = $(this);
if ($row.attr('onclick')) {
if ($row.attr('onclick').indexOf(index) > 0) {
$row.addClass("highlight");
} else {
$row.removeClass("highlight");
}
}
});
}
Or, you could try something like this:
$("#<%= UltraWebGrid1.ClientID%> tr").click(function(event) {
// Remove the highlight class from all rows up front
$("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight");
$(event.target).addClass("highlight");
});
You could use GridView.SelectedRowStyle property instead of javascript.
For example use declarative syntax:
<asp:GridView runat="server" ID="UltraWebGrid1">
<!-- ... -->
<SelectedRowStyle CssClass="highlight" />
<!-- ... -->
</asp:GridView>
Or set the property programmatically while initialization:
UltraWebGrid1.SelectedRow.CssClass = "highlight";
Try this:
function hightlightrow() {
$("#<%= UltraWebGrid1.ClientID%> tr").removeClass("highlight");
$("#<%= UltraWebGrid1.ClientID%> tr[onclick*='" + $("#<%= highlightedRow.ClientID%>").val() + "']").first().addClass("highlight");
}
It will remove the highlight class everywhere, then will add it to the first tr which contain the $("#<%= highlightedRow.ClientID%>") value in its onclick attribute.
It should be faster than a loop.
If you want to add class highlight whenever user click on Table Row and, remove same class when user again click on same table row then here's the code
$("YourGridviewControl").on('click', 'tr', function () {
$(this).toggleClass("highlight");
});
Or If you want to remove Class From all rows and add only on one selected row, then your code looks like.
$("YourGridviewControl").on('click', 'tr', function () {
$("YourGridviewControl tr").removeClass("highlight");
$(this).addClass("highlight");
});
Related
I have an Asp gridview that I am hiding elements in using a css class. When a row on the grid is selected I have a jQuery function that adds a selected_row class and changes the color. I am trying to find the data for the rows that are selected, and hidden. My function looks like this
$(function() {
$("[id*=MainContent_grvAccounts] td").bind("click", function() {
var row = $(this).parent();
$("[id*=MainContent_grvAccounts] tr").each(function() {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("selected_row");
} else {
var hiddenElements = $("body").find(".hidden-field").not("script");
console.log(hiddenElements);
var myElements = Array.from(hiddenElements, element => element.innerHTML);
console.log(myElements);
}
});
$("td", row).each(function() {
if (!$(this).hasClass("selected_row")) {
$(this).addClass("selected_row");
} else {
$(this).removeClass("selected_row");
}
});
});
In the DOM I can see that they have a class name of "hidden-field selected_row".
When I try to filter using jQuery grep my data returns empty.
I need the var hiddenElements to only contain elements with class name hidden-field selected_row
I ended up using
var hiddenElements = row.find(".hidden-field");
To get my data.
Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));
I have the following jQuery function below:
$("[id*=gridView1] td").on("click", function () {
var row = $(this).parent();
$("[id*=gridView1] tr").each(function () {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("gridView1_selectedRow");
}
});
var done = 0;
$("td", row).each(function () {
if (!$(this).hasClass("gridView1_selectedRow")) {
$(this).addClass("gridView1_selectedRow");
}
else {
$(this).removeClass("gridView1_selectedRow");
}
});
});
What it does is it will add a css class on the selected row, adding highlight.
My problem is I don't want my user to highlight or select the last row of my gridview because it will be a row of page number, not data row.
I tried using this:
$("[id*=gridView1] tr:not(:last-child)")
But I ended up highlighting the whole gridview or all rows.
Any help would be appreciated.
Thanks!
Have you tried: $("[id*=gridView1] tr:not(:last)")?
It would make your entire script something like this:
$("[id*=gridView1] tr:not(:last)").on("click", function () {
$(this).parent().find(".gridView1_selectedRow").removeClass("gridView1_selectedRow");
$(this).addClass("gridView1_selectedRow")
});
This might be easy but I am having trouble in getting it to work. I am using .each() to iterate through a list. I was wondering if it is possible to remove a class using the index.
eg. If there were 10 items in the list and I want to remove the class from the 5th element when I click the 8th element for example.
$(function () {
var items = $('#v-nav>ul>li').each(function (index) {
$(this).click(function () {
if (index = 8)
{
$(#5).removeClass('class');
}
});
});
Anyone with any ideas? Thank you
Change
$(#5).removeClass('class');
To
$('#v-nav>ul>li:eq(4)').removeClass('class');
Its better to assign the element returned by your selector to do the same processing again to get desired element.
$(function () {
var items = $('#v-nav>ul>li')
$('#v-nav>ul>li').click(function () {
if ($(this).index() = 8)
{
$(items).eq(4).removeClass('class');
}
});
});
There's no need to iterate with each(), as each element already has an index, and using eq() will let you select elements based on the index they have in the DOM. This solution is dependant on the elements being siblings() etc.
$(function () {
var elems = $('#v-nav>ul>li');
elems.on('click', function() {
if ($(this).index()==8) elems.eq(4).removeClass('class');
});
});
You could also just bind the click to that one element:
$(function () {
$('#v-nav>ul>li:eq(7)').on('click', function() {
$(this).siblings().filter(':eq(4)').removeClass('class');
});
});
Otherwise I would just do:
$(function () {
var elems = $('#v-nav>ul>li');
$.each(elems, function(idx, elm) {
if (idx==8) elems.eq(4).removeClass('class');
});
});
As a sidenote ID's consisting of just a number (or starting with a number) is invalid.
Actually you don't need to iterate over all the li elements, instead you can do it like this way
$(function(){
$('#v-nav>ul>li').eq(7).on('click', function(){ // eq(7) is 8th li
$(this).closest('ul').find('li').eq(4).removeClass('cls'); //eq(4) is 5th li
});
});
DEMO.
Currently I have two tables
I have select-all functions on the top left checkboxes, but clicking on one select-all highlights all checkboxes in BOTH tables, whereas I only want all boxes to be selected in the specific 'check-all' clicked.
Also, when I do select all and click one of the directional buttons < or >, it drags all the rows fine but drags the headers with it as shown here:
My JQuery is quite simple at the moment but I'm obviously missing out on something -
$('#select-all').click(function (event) {
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = false;
});
});
Where 'select-all' is the id of the select-all checkbox in the 'tarifs de quittancement'.
Any help is appreciated
EDIT
My JQuery for the > button code is as follows :
$("#move-to-1").on("click", function () {
var selected = $("#table2").find("input:checked");
selected.each(function (idx, elem) {
$(elem).closest("tr").detach().appendTo($("#table1 tbody"));
});
});
This works fine to move all from one table to the other, but I don't want the row containing the select-all checkbox/table headers to move with the rest of the row data. How can this be done?
Thanks again.
Further Edit
Now it's all sorted, except for a small bug where selecting one checkbox row (not select-all) and moving it < or > results in ALL rows being moved.
JQuery in use:
$('#move-to-1').on('click', function () {
var selected = $('#table2').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tbody').find('tr').detach().appendTo($("#table1 tbody"));
$('input[type=checkbox]').attr('checked', false);
});
});
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
You only need to modify the checkboxes inside the current table. Since you haven't shown your markup it is extremely hard to guess how the proper selector might look or whether you are using tables at all but try like this:
$('#select-all').click(function (event) {
$(this).closest('table').find(':checkbox').prop('checked', this.checked);
});
UPDATE:
To address your second question, assuming you have separated the headers from the body inside those tables using the <thead> and <tbody> sections which is the correct way, you could adapt your selector:
$('#move-to-1').on('click', function () {
var selected = $('#table2 tbody').find('input:checked');
selected.each(function (idx, elem) {
$(elem).closest('tr').detach().appendTo($("#table1 tbody"));
});
});
$('#select-all').click(function (event) {
// mention the table
var table = $('selector_to_your_table');
if (this.checked) {
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = true;
});
}
else
// Iterate each checkbox
table.find(':checkbox').each(function () {
this.checked = false;
});
});
Note
In latest version of jQuery :checkbox is deprecated. See here..
Instead of :checkbox use input[type=checkbox].
Instead of:
$(':checkbox').each(function () {
this.checked = true;
});
Do:
$('some_sort_of_selector :checkbox').attr('checked', true);
You don't need that each() loop - jQuery does it automatically. You need some kind of selector to limit which checkboxes are changed.
I notice you have #select-all - and yet you say you have two select-all checkboxes. You can't do that. ID's must be unique.