locked
Set table columns invisible - is it possible RRS feed

  • Question

  • User-1697400506 posted

    Is it possible to 'hide' some of the table columns?

    Thursday, July 14, 2011 1:34 AM

Answers

  • User348806598 posted

    Hi,

    You do someting like below-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><title>
    	Untitled Page
    </title>
     
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
     
        <script type="text/javascript">
            function ConfirmMessage() {
                var message = 'sure';
                return confirm(message);
            }
            $(document).ready(function() {
                // The code block is used to ignore case
                $.extend($.expr[":"], {
                    "containsNC": function(elem, i, match, array) {
                        return (elem.textContent || elem.innerText || "").toLowerCase
                        ().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });
                // End The code block is used to ignore case
     
                //If you want to maintain case, use :contains( instead of :containsNC( below-
                $("input.selectorCSS[type=text]").keyup(function() {
                    var id = $(this).attr("id");
                    id = id.substring(id.lastIndexOf('_'));
                    $("span[id*=" + id + "]").closest("tr").show();
                    if ($.trim($(this).val()) != "")
                        $("span[id*=" + id + "]:not(:containsNC(" + $(this).val() + "))").closest("tr").hide();
                });
                //column visibility. This hides the third column
                $("table[id*=GridView1] tr").each(function(index, item) {
                    $(item).children("th:eq(2), td:eq(2)").hide();
                });
            });
        </script>
     
    </head>
    <body>
        <form name="form1" method="post" action="how to filter gridview columns data based on textbox event onkeyup.aspx" id="form1">
     
        <div>
    
    	<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    		<tr>
    			<th scope="col">
                        <input name="GridView1$ctl01$Ministry" type="text" id="GridView1_ctl01_Ministry" class="selectorCSS" />
                    </th><th scope="col">
                        <input name="GridView1$ctl01$Title" type="text" id="GridView1_ctl01_Title" class="selectorCSS" />
                    </th><th scope="col">
                        <input name="GridView1$ctl01$Criteria" type="text" id="GridView1_ctl01_Criteria" class="selectorCSS" />
                    </th><th scope="col">&nbsp;</th>
    
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl02_Ministry">Ministry 0</span>
                    </td><td>
                        <span id="GridView1_ctl02_Title">Title 0</span>
                    </td><td>
                        <span id="GridView1_ctl02_Criteria">Criteria 0</span>
    
                    </td><td>
                        <input type="image" name="GridView1$ctl02$ImageButton2" id="GridView1_ctl02_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl03_Ministry">Minis try 1</span>
                    </td><td>
                        <span id="GridView1_ctl03_Title">Title 1</span>
                    </td><td>
    
                        <span id="GridView1_ctl03_Criteria">Criteria 1</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl03$ImageButton2" id="GridView1_ctl03_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl04_Ministry">Mi nis try sfd 2</span>
                    </td><td>
                        <span id="GridView1_ctl04_Title">Title 2</span>
    
                    </td><td>
                        <span id="GridView1_ctl04_Criteria">Criteria 2</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl04$ImageButton2" id="GridView1_ctl04_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl05_Ministry">Minis try fdsf sdf 3</span>
                    </td><td>
    
                        <span id="GridView1_ctl05_Title">Title 3</span>
                    </td><td>
                        <span id="GridView1_ctl05_Criteria">Criteria 3</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl05$ImageButton2" id="GridView1_ctl05_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl06_Ministry">Mini stryd dd 4</span>
    
                    </td><td>
                        <span id="GridView1_ctl06_Title">Title 4</span>
                    </td><td>
                        <span id="GridView1_ctl06_Criteria">Criteria 4</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl06$ImageButton2" id="GridView1_ctl06_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
    
                        <span id="GridView1_ctl07_Ministry">Min is tryf 5</span>
                    </td><td>
                        <span id="GridView1_ctl07_Title">Title 5</span>
                    </td><td>
                        <span id="GridView1_ctl07_Criteria">Criteria 5</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl07$ImageButton2" id="GridView1_ctl07_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl08_Ministry">Mini stry 6</span>
                    </td><td>
                        <span id="GridView1_ctl08_Title">Title 6</span>
                    </td><td>
                        <span id="GridView1_ctl08_Criteria">Criteria 6</span>
    
                    </td><td>
                        <input type="image" name="GridView1$ctl08$ImageButton2" id="GridView1_ctl08_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr>
    	</table>
    </div>
        </form>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 14, 2011 1:50 AM

All replies

  • User82239924 posted

    Where do u want hide columns? Whether is SQL server or somewhere else.

    Thursday, July 14, 2011 1:39 AM
  • User348806598 posted

    Hi,

    You do someting like below-

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><title>
    	Untitled Page
    </title>
     
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
     
        <script type="text/javascript">
            function ConfirmMessage() {
                var message = 'sure';
                return confirm(message);
            }
            $(document).ready(function() {
                // The code block is used to ignore case
                $.extend($.expr[":"], {
                    "containsNC": function(elem, i, match, array) {
                        return (elem.textContent || elem.innerText || "").toLowerCase
                        ().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
                });
                // End The code block is used to ignore case
     
                //If you want to maintain case, use :contains( instead of :containsNC( below-
                $("input.selectorCSS[type=text]").keyup(function() {
                    var id = $(this).attr("id");
                    id = id.substring(id.lastIndexOf('_'));
                    $("span[id*=" + id + "]").closest("tr").show();
                    if ($.trim($(this).val()) != "")
                        $("span[id*=" + id + "]:not(:containsNC(" + $(this).val() + "))").closest("tr").hide();
                });
                //column visibility. This hides the third column
                $("table[id*=GridView1] tr").each(function(index, item) {
                    $(item).children("th:eq(2), td:eq(2)").hide();
                });
            });
        </script>
     
    </head>
    <body>
        <form name="form1" method="post" action="how to filter gridview columns data based on textbox event onkeyup.aspx" id="form1">
     
        <div>
    
    	<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    		<tr>
    			<th scope="col">
                        <input name="GridView1$ctl01$Ministry" type="text" id="GridView1_ctl01_Ministry" class="selectorCSS" />
                    </th><th scope="col">
                        <input name="GridView1$ctl01$Title" type="text" id="GridView1_ctl01_Title" class="selectorCSS" />
                    </th><th scope="col">
                        <input name="GridView1$ctl01$Criteria" type="text" id="GridView1_ctl01_Criteria" class="selectorCSS" />
                    </th><th scope="col">&nbsp;</th>
    
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl02_Ministry">Ministry 0</span>
                    </td><td>
                        <span id="GridView1_ctl02_Title">Title 0</span>
                    </td><td>
                        <span id="GridView1_ctl02_Criteria">Criteria 0</span>
    
                    </td><td>
                        <input type="image" name="GridView1$ctl02$ImageButton2" id="GridView1_ctl02_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl03_Ministry">Minis try 1</span>
                    </td><td>
                        <span id="GridView1_ctl03_Title">Title 1</span>
                    </td><td>
    
                        <span id="GridView1_ctl03_Criteria">Criteria 1</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl03$ImageButton2" id="GridView1_ctl03_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl04_Ministry">Mi nis try sfd 2</span>
                    </td><td>
                        <span id="GridView1_ctl04_Title">Title 2</span>
    
                    </td><td>
                        <span id="GridView1_ctl04_Criteria">Criteria 2</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl04$ImageButton2" id="GridView1_ctl04_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl05_Ministry">Minis try fdsf sdf 3</span>
                    </td><td>
    
                        <span id="GridView1_ctl05_Title">Title 3</span>
                    </td><td>
                        <span id="GridView1_ctl05_Criteria">Criteria 3</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl05$ImageButton2" id="GridView1_ctl05_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl06_Ministry">Mini stryd dd 4</span>
    
                    </td><td>
                        <span id="GridView1_ctl06_Title">Title 4</span>
                    </td><td>
                        <span id="GridView1_ctl06_Criteria">Criteria 4</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl06$ImageButton2" id="GridView1_ctl06_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr><tr>
    			<td>
    
                        <span id="GridView1_ctl07_Ministry">Min is tryf 5</span>
                    </td><td>
                        <span id="GridView1_ctl07_Title">Title 5</span>
                    </td><td>
                        <span id="GridView1_ctl07_Criteria">Criteria 5</span>
                    </td><td>
                        <input type="image" name="GridView1$ctl07$ImageButton2" id="GridView1_ctl07_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    
    		</tr><tr>
    			<td>
                        <span id="GridView1_ctl08_Ministry">Mini stry 6</span>
                    </td><td>
                        <span id="GridView1_ctl08_Title">Title 6</span>
                    </td><td>
                        <span id="GridView1_ctl08_Criteria">Criteria 6</span>
    
                    </td><td>
                        <input type="image" name="GridView1$ctl08$ImageButton2" id="GridView1_ctl08_ImageButton2" src="images/DELETE.GIF" onclick="return ConfirmMessage();" style="border-width:0px;" /></td>
    		</tr>
    	</table>
    </div>
        </form>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 14, 2011 1:50 AM