Bind javascript with GridView button dynamically

Question

I've been trying to do this for the past hour and still got nothing. I'll try to explain it so please stay with me:

I'm trying to create a sort of summary shopping cart by creating an HTML table using javascript and adding rows every time an item is selected from the gridview.

I have a gridview with a TemplateField containing a button. The gridview looks like this:

Property | Quantity | Order | Action
Pencil | 10 | (textbox) | (button)
Pen | 5 | (textbox) | (button)

Supposedly, the button has an onclientclick event which will insert a new row to the HTML table (summary shopping cart).

<SCRIPT language="javascript">
        function addRow(tableID,property,order) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        cell1.innerHTML = property;

        var cell2 = row.insertCell(1);
        cell2.innerHTML = order;

    }

I don't know how to bind this javascript to the (button) in my GridView though. I can't bind it on the DataBound event because I'll have to pass the value of (textbox).

Jake · Accepted Answer · 2011-12-14 18:38:45Z

2

This sounds like you need jquery live to make this happen. After adding a class name to the button field, and assuming 'grid1' is the id name of your grid, The way this would work is:

$('#<%=grid1.ClientID %> .buttonClassName').live('click', function(){
     var next = $(this).closest('tr');// this line should find the previous tr

     next.after('<tr><td>first cell</td><td>Second Cell</td></tr>');
 });

answered Dec 14, 2011 at 18:38

Jake

1,3325 gold badges23 silver badges36 bronze badges

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

4 Comments

Pod Mays Over a year ago

Thanks mate, I'll try this when I get back. BTW, I did a quick search and found out that live is discontinued?

Pod Mays Over a year ago

Thanks, this works. But how could I pass some variables from the GridView cell to the javascript? For example, I wanted to change "first cell" in the code with a Text inside a certain row in GridView.

Jake Over a year ago

For your first comment, you're right its being replaced by .on() which I have no experience with yet, but I am not understanding your second comment/question

Jake Over a year ago

This answer is for people using jquery version pre 1.7 if using 1.7+ then look into using .on() instead of .live()

kvc · Accepted Answer · 2011-12-14 16:49:39Z

0

Do you want to attach the event after the gridview is rendered? Is it possible for you to use the jQuery?

http://forums.asp.net/t/1194696.aspx

The above solution might help you.The idea is to pass the grid and rowindex to javascript method when button clicked.In the javascript method using rowindex we can navigate to the desired cell and get the control.we can use jquery instead javascript in addRow then ,which will simplify the code.

edited Dec 14, 2011 at 16:49

answered Dec 14, 2011 at 16:20

kvc

1,1372 gold badges7 silver badges21 bronze badges

1 Comment

Pod Mays Over a year ago

yes jquery is also an option. I don't think I can attach it after rendering, because the user can input value in the (textbox) in the gridview, so I guess the only way is executing the javascript after the (button) is clicked. That's what I can't seem to do.

Collectives™ on Stack Overflow

Bind javascript with GridView button dynamically

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related