I have figured out so far how to make rows in the web grid green, but I have not figured out how to show dropdownlist boxes on the row that I check of a checkbox as of yet. Any help would be appreciated greatly! I would like to be able to select the dropdown list location on the same row that I check and have the data on that row move to the location section of the empty row. J-Query seems to be the easiest way, but any other ways of learning to do this would be awesome! I can make the dropdown boxes show at the very top, but have no idea how to make them show up on the row I checked???
[Code]
//================== Checkbox Selection/Control =====================
//First hide all the listboxes in the webGrid.
$(".RowLocationDropDownList").hide();
$(".RowSectionDropDownList").hide();
//Check the box and the row turns red that is checked.
$('.SelectedMoveIsChecked').click(function () {
var backgroundColor = $(this).is(":checked") ? "#EE4B2B;" : ""; //Red Color.
$(this).closest('tr').attr('style', 'background-color: ' + backgroundColor + '');
$(document).filter('#TrailerNumber'!='').find('.SelectedMoveIsChecked[type="checkbox"]:checked').closest(function () {
$('#RowLocationDropDownList').show(),
$('#RowSectionDropDownList').show();
}).change();
//================ Change Background Color upon Selection ==============
//Turns all rows Green that have empty TrailerNumber values.
$("#content tbody tr").each(function (i, row) {
var $actualRow = $(row);
if ($actualRow.find('#TrailerNumber').val() == '') {
$actualRow.css('background-color', '#AFE1AF'); //Green Color.
}
});
});
//Change the background colors using checkbox based on conditions.
$('input[type=checkbox]').click(function () {
$(this).closest('tr')
.find('input[type=checkbox]').prop('background-color', '#AFE1AF')//Green
.attr('enabled', this.not.checked);
//Added for when the checkbox is checked.
var tdIndex = $(this).closest('td').index();
$('table').find("tr (" + tdIndex + ")")
.attr('enabled', this.checked);
//======================== Control elements not checked =======================
//Hide elements that are not checked.
$(document).ready(function () {
$('input[type=checkbox]').each(function () {
//Check if the box is checked
var x = $(this).is(':checked');
//if checkbox is NOT checked
if (x === false) {
//Hide the choice
$(this).is(':checked');
$(this).parent().hide();
document('.SelectedMoveIsChecked').onclick = function () {
$('.RowSectionDropDownList').fadeIn(200);
};
}
});
})
});
[/Code]
How this works: The user changes the list shown using the Section boxes at the top and/or two drop-down boxes at the top.
The drop-down boxes on the row (to be shown) where the checkbox is checked (not at the top of the list). I cannot figure out how to show the drop-down list boxes (Location and Section) on the row that I checked??? Any help would be greatly appreciated!
//================== Checkbox Selection/Control =====================
//First hide all the listboxes in the webGrid.
$(".RowLocationDropDownList").hide();
$(".RowSectionDropDownList").hide();
//Check the box and the row turns red that is checked.
$('.SelectedMoveIsChecked').click(function() {
var backgroundColor = $(this).is(":checked") ? "#EE4B2B;" : ""; //Red Color.
$(this).closest('tr').attr('style', 'background-color: ' + backgroundColor + '');
$(document).filter('#TrailerNumber' != '').find('.SelectedMoveIsChecked[type="checkbox"]:checked').closest(function() {
$('#RowLocationDropDownList').show(),
$('#RowSectionDropDownList').show();
}).change();
//================ Change Background Color upon Selection ==============
//Turns all rows Green that have empty TrailerNumber values.
$("#content tbody tr").each(function(i, row) {
var $actualRow = $(row);
if ($actualRow.find('#TrailerNumber').val() == '') {
$actualRow.css('background-color', '#AFE1AF'); //Green Color.
}
});
});
//Change the background colors using checkbox based on conditions.
$('input[type=checkbox]').click(function() {
$(this).closest('tr')
.find('input[type=checkbox]').prop('background-color', '#AFE1AF') //Green
.attr('enabled', this.not.checked);
//Added for when the checkbox is checked.
var tdIndex = $(this).closest('td').index();
$('table').find("tr (" + tdIndex + ")")
.attr('enabled', this.checked);
//======================== Control elements not checked =======================
//Hide elements that are not checked.
$(document).ready(function() {
$('input[type=checkbox]').each(function() {
//Check if the box is checked
var x = $(this).is(':checked');
//if checkbox is NOT checked
if (x === false) {
//Hide the choice
$(this).is(':checked');
$(this).parent().hide();
document('.SelectedMoveIsChecked').onclick = function() {
$('.RowSectionDropDownList').fadeIn(200);
};
}
});
})
});.woops{color:red;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woops">I have to imagine the HTML, please update me<div>
Figured it out to where when TrailerNumber is populated the drop-down list boxes show there.
WebGrid CHTML Page: