I am currently working on a script that adjusts the size of filtering-inputs based on the width of gridview columns. Initially, it only involved textboxes, and I managed to make it work adequately:
Script Snippet:
$("#<%= myGridView.ClientID %> th").each(function (index) {
$('input[type="text"]:eq(' + index + ')').css('width', $(this).width() + 1.5);
$('input[type="text"]:eq(' + index + ')').css('padding', '0');
});
However, it later came to light that column number 5 should only contain a set number of values and therefore needs to be a dropdown list. I attempted the following approach:
$("#<%= myGridView.ClientID %> th").each(function (index) {
if (index === 5) {
$('select').css('width', $(this).width() + 1.5);
$('select').css('padding', '0');
}
else {
$('input[type="text"]:eq(' + index + ')').css('width', $(this).width() + 1.5);
$('input[type="text"]:eq(' + index + ')').css('padding', '0');
}
});
The outcome was not as desired. Can anyone pinpoint what could be going wrong in this scenario?
ASP Code:
--><input type="text" id="id1"/><!--Comments are needed to get rid of whitespace between text boxes
--><input type="text" id="id2" /><!--
--><input type="text" id="id3"/><!--
--><%/*<input type="text" id="id4" />*/ %>
<select>
<option value="blank"></option>
<option value="True">True</option>
<option value="False">False</option>
</select><!--
--><input type="text" id="id5" /><!--
--><input type="text" id="id6"/>
<input type="button" id="clearFilters" value="Clear filters" style="position: relative; top: -3px; height: 19px; "/>
<br />
<asp:GridView ID="myGridView" runat="server" blablabla>etc.etc.</asp:GridView>