JS code on clicking button inside GridView

Question

I have a GridView control,inside of which I am having a file upload control with a button to upload files, Each FileControl have its own upload button, I am uploading files using RowCommand Event.Now I have to show progress bar of file upload control which I have implemented like in this link's 3rd answer Link with some modification in JS

The problem I am facing is that if I click on 2nd Row's upload button of GridView,Its validating only Row's Control.

This is my Grid View

<asp:GridView ID="Grid1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Grid1_RowDataBound"
                                    OnRowCommand="Grid1_RowCommand" OnRowDeleting="Grid1_RowDeleting"
                                    CssClass="table">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Files" ItemStyle-HorizontalAlign="Left" HeaderStyle-CssClass="GridViewHeader">
                                            <ItemTemplate>
                                             <asp:FileUpload ID="File1" runat="server" Width="98%" CssClass="filestat" />
                                               <asp:Button ID="btnuploadfiles" runat="server" CommandName="upload" Text="Upload" OnClientClick="return ProgressBar('File1')" />
                                             </ItemTemplate>
                                        </asp:TemplateField>
                                         </Columns>
                                </asp:GridView>

and my JS code

function ProgressBar(Id) {
            var fileControl = GetClientID(Id).attr("id");
            if (document.getElementById(fileControl).value != "") {
                $("#divUpload").fadeIn("slow");
                $('#popup_box').fadeIn("slow");
                document.getElementById("divUpload").style.height = document.body.clientHeight + 'px';
                id = setInterval("progress()", 20);
                return true;
            }
            else {
                alert("Select a file to upload");
                return false;
            }

        }
//This function returns me ClientID of the server control       
        function GetClientID(id, context) {
            var el = $("#" + id, context);
            if (el.length < 1)
                el = $("[id$=_" + id + "]", context);
            return el;
        }

I also have tried setting OnClientClick from RowDataBound,but its still validating only first Row.

                               protected void Grid1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
    var btnupd = (Button)e.Row.FindControl("btnuploadfiles");

        btnupd.OnClientClick = "return ProgressBar('File1')";
    }
    }

What is the context by default, if you don't specify it? Have you checked that GetClientID returns the correct element (row), or always the first one? — cudahead
– cudahead, Commented Apr 16, 2014 at 8:47

Tassisto · Accepted Answer · 2014-04-16 09:15:07Z

1

Try something like the following;

$("#<%=Grid1.ClientID%> tr").click(function(){
   alert("Row clicked");
});

I think using the ClientID function would be more suitable and clear for you. Getting the tr clicked, you should be able to read the cells in the actual array of tds then.

Try adding this

protected void Grid1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var button = (Button)e.Row.FindControl("btnuploadfiles");
        var fileUpload = (FileUpload)e.Row.FindControl("File1");

        string className = "class_" + new Random().Next();

        button.Attributes.Add("class", "rowClick");
        fileUpload.Attributes.Add("class", "rowClick"); 

        button.Attributes.Add("customClass", className);
        button.Attributes.Add("customClass", className); 
    }
}

And for script add this:

<script>
  $(document).ready(function () {
      $(".rowClick").click(function () {
          var customClass = this.attr("customClass"); 
          alert("Now the current row you selected has this as a common class : " + customClass);
      });
  }); 
</script>

edited Apr 16, 2014 at 9:15

Tassisto

10.4k31 gold badges109 silver badges164 bronze badges

answered Apr 16, 2014 at 8:10

Mez

4,7364 gold badges32 silver badges58 bronze badges

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

2 Comments

Syed Salman Raza Zaidi Over a year ago

Thanks,how will I get that btnupload is clicked in this code?

Mez Over a year ago

Edited my answer. I have added a custom class for each FileUpload and button in each row. So now you would know which row you have selected, and what FileUpload you want to access depending on your current row.

Collectives™ on Stack Overflow

JS code on clicking button inside GridView

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related