How to Hide CheckBox of Selected Row from GridView using Javascript?

Question

I have a GridView with CheckBox in first column and Button on SecondLast column. When user Clicks on Button the CheckBox of current row must be Invisible using Javascript.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true"
    PageSize="100" AllowSorting="true" DataSourceID="sqlUsers" DataKeyNames="ttppcid"
    Width="100%" OnRowCommand="GridView1_RowCommand" EmptyDataText="No Data Found"
    OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" Visible="true">
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" Height="30" class="mychk" rowid="<%# Container.DataItemIndex+1 %>" />
            </ItemTemplate>
        </asp:TemplateField>
//some more templates here
        <asp:TemplateField HeaderText="" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center"
            HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:Button ID="BtnSource" runat="server" Text="Source" rowid="<%# Container.DataItemIndex+1 %>"
                    class="showButton" OnClick='<%# "return SetRowValues("+Eval("ttppcid")+",this.id,"+Eval("Fair")+","+Eval("Good")+","+Eval("Mint")+","+Eval("Poor")+","+Eval("Fair")+")"%>' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Javascript:

function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) {
    var rowid = $("#" + controlid).attr("rowid");
    var chkBoxID;
    var chkRowid;
    $('.mychk').css("display", "block");

    $('.mychk').each(function() {

        chkBoxID = this.id;
        alert(chkBoxID);
        chkRowid = $("#" + chkBoxID).attr("rowid");
        alert(chkBoxID + " ROW :" + chkRowid);


        if (chkRowid == rowid) {
            $("#" + chkBoxID).css("display", "none");
        }
        else {
            $("#" + chkBoxID).css("display", "block");

        }
    });
return false;
}

All works fine just here in alert i get empty. NOT able to get the ID of the CheckBox Control

Also Tried With:

<script type="text/javascript">
    $(document).ready(function() {
    $(function() {
        $(".showButton").on("click", function() {
            alert(".showButton clicked");
            $(this).closest("tr").find(":checkbox").hide();
        });
    });
    });
</script>

Rendered CheckBox:

<td align="center" style="width: 30px; display: block;">
   <span class="mychk" rowid="1" style="display: block; height: 30px;"><input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_chkSelect" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$chkSelect"></span>
</td>

Rendered Button in Grid:

<td align="center" style="width: 70px; display: block;">
 <input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource" value="Source" onclick="return SetRowValues(6,this.id,222.0000,222.0000,222.0000,222.0000,222.0000);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder1_GridView1_ctl03_BtnSource" class="showButton" rowid="1" style="">
</td>

Any Idea?

Help Appreciated!

After you run the application what is the final html? Can you paste the html output? — Md Rahatur Rahman
– Md Rahatur Rahman, Commented Jan 30, 2014 at 13:43
You can not achieve this with javascript if i understood you correctly. The asp-button will make a postback and the hidden checkbox will be visible again. If you don't want to make a postback, use html-button. — Esko
– Esko, Commented Jan 30, 2014 at 13:46
hi @Esa, their is not postback as my return statement returns 'false' always. all works fine as i need just not able to hide checkbox. — SHEKHAR SHETE
– SHEKHAR SHETE, Commented Jan 30, 2014 at 13:48
You are using OnClick-property which is server side, do you mean OnClientClick instead? Anyway if you don't want postback, don't use asp-button in the first place. — Esko
– Esko, Commented Jan 30, 2014 at 13:50
@SHEKHARSHETE, please check this piece of code: chkBoxID = this.id; Is this the id of the checkbox passed to the js function? Also if you have the 'rowId' why dont you use that? — Md Rahatur Rahman
– Md Rahatur Rahman, Commented Jan 30, 2014 at 13:55

SHEKHAR SHETE · Accepted Answer · 2014-01-31 08:56:11Z

2

Here is my Complete Solution:

function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) {
var rowid = $("#" + controlid).attr("rowid");
var chkBoxID;
var chkRowid;
$('span.mychk').each(function() {
 chkBoxID = $(this).attr('id');
  chkRowid = $(this).attr('rowid');
  if (chkRowid == rowid) {
       $(this).hide();
       $(this).closest("td").css("border","none");
  }
  else {
       $(this).show();
       $(this).closest("td").css("border", "1px solid grey");
   }
});
return false;
}

Thanks to all..! :)

answered Jan 31, 2014 at 8:56

SHEKHAR SHETE

6,08215 gold badges89 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C Sharper Over a year ago

glad u found the solution, but as if var rowid = $("#" + controlid).attr("rowid"); with this it was not taking control's id in ur previous code.. now how it started working?

SHEKHAR SHETE Over a year ago

hey @SagarS.Dhanorkar, all the code is same the only change is the way i selected attribute for the .mychk checkbox was wrong. so, it wont worked. have you noticed that in previous post i have used 'this.id' which is wrong it must be $(this).attr('id'). But after selecting the attribute i get the row id too..and it worked...! :D

C Sharper · Accepted Answer · 2014-01-31 05:04:08Z

0

Try with below:

var result = $('#<%=GridView1.ClientID %> tr td input[id*="chkSelect"][type=checkbox]:checked').map(function () {

    return $(this).closest('tr').find('td').eq(2).text();

    }).get().join();

answered Jan 31, 2014 at 5:04

C Sharper

8,66430 gold badges96 silver badges158 bronze badges

2 Comments

SHEKHAR SHETE Over a year ago

hi @Sagar S.Dhanorkar, i have pasted this in SetRowValues() javascript method. but it wont work..! any thing i am doing wrong plz let me know..!

SHEKHAR SHETE Over a year ago

will you plz explain the code i have not understood the thing .get(), .map & join() these are new to me..! so..?

Esko · Accepted Answer · 2014-01-31 06:09:48Z

First to do this without postback, change the asp-button to, input type=button or a html-button:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true"
    PageSize="100" AllowSorting="true" DataSourceID="sqlUsers" DataKeyNames="ttppcid"
    Width="100%" OnRowCommand="GridView1_RowCommand" EmptyDataText="No Data Found"
    OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound">
    <Columns>
        <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" Visible="true">
            <ItemTemplate>
                <asp:CheckBox ID="chkSelect" runat="server" Height="30" class="mychk" rowid="<%# Container.DataItemIndex+1 %>" />
            </ItemTemplate>
        </asp:TemplateField>
//some more templates here
        <asp:TemplateField HeaderText="" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center"
            HeaderStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <input type="button" class="showButton" value="Source"/>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

and then use a script like this to hide the checkbox. You don't need the id of the checkbox for this, simply find the parent row and hide the checkbox:

$(function() {
    $(".showButton").on("click", function() {
          $(this).closest("tr").find(":checkbox").hide();
    });
});

Collectives™ on Stack Overflow

How to Hide CheckBox of Selected Row from GridView using Javascript?

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related