gridview buttons and client side scripting
-
Hi everyone! I'm working with a data grid and I would like to tie in some javascript. I have a field with a label that will have a numerical value. Two buttons are also in this cell and I want one to increase that number and the other to decrease it. Is there a way during the grid.databind event that I can add the client side onclick event to the buttons which will in turn be able to find the current row's label control client ID? This way, I can have each button call a single javascript function but pass it the row's label control that I want it to affect. I've done this before with static controls on the page, but I'm not sure how to start this one because (I'm assuming) each label on the gridview will have a different client side ID. Thanks!
Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
-
Hi everyone! I'm working with a data grid and I would like to tie in some javascript. I have a field with a label that will have a numerical value. Two buttons are also in this cell and I want one to increase that number and the other to decrease it. Is there a way during the grid.databind event that I can add the client side onclick event to the buttons which will in turn be able to find the current row's label control client ID? This way, I can have each button call a single javascript function but pass it the row's label control that I want it to affect. I've done this before with static controls on the page, but I'm not sure how to start this one because (I'm assuming) each label on the gridview will have a different client side ID. Thanks!
Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
Its easy... First write your javascript that might change the value of a textbox, say like this:
function increaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) + 1;
}
function decreaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) - 1;
}Now in your
GridView.RowDataBoundevent write :TextBox tb = e.Item.FindControl("tbValue") as TextBox;
Button btnIncr = e.Item.FindControl("btnIncr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:increaseValue('" + tb.ClientID + "');");Button btnDecr = e.Item.FindControl("btnDecr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:decreaseValue('" + tb.ClientID + "');");Now you see when the page is rendered it will hold the buttons with appropriate Onclick Event handlers to process the textbox tb. Hope you like this solution. :rose::rose:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
-
Its easy... First write your javascript that might change the value of a textbox, say like this:
function increaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) + 1;
}
function decreaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) - 1;
}Now in your
GridView.RowDataBoundevent write :TextBox tb = e.Item.FindControl("tbValue") as TextBox;
Button btnIncr = e.Item.FindControl("btnIncr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:increaseValue('" + tb.ClientID + "');");Button btnDecr = e.Item.FindControl("btnDecr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:decreaseValue('" + tb.ClientID + "');");Now you see when the page is rendered it will hold the buttons with appropriate Onclick Event handlers to process the textbox tb. Hope you like this solution. :rose::rose:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
Oh! slap me in the forehead! I was thinking of the gridview as a whole and how the heck I would find the controls after it's completed. I didn't even think of attacking it at the RowDataBound level. Thanks for the nudge in the right direction!!!
Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
-
Oh! slap me in the forehead! I was thinking of the gridview as a whole and how the heck I would find the controls after it's completed. I didn't even think of attacking it at the RowDataBound level. Thanks for the nudge in the right direction!!!
Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
:laugh: :laugh: It happens to all of us.. ;P ;P
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
-
Its easy... First write your javascript that might change the value of a textbox, say like this:
function increaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) + 1;
}
function decreaseValue(textId)
{
var elem = document.getElementById(textId);
if(!!elem)
elem.value = parseInt(elem.value) - 1;
}Now in your
GridView.RowDataBoundevent write :TextBox tb = e.Item.FindControl("tbValue") as TextBox;
Button btnIncr = e.Item.FindControl("btnIncr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:increaseValue('" + tb.ClientID + "');");Button btnDecr = e.Item.FindControl("btnDecr") as Button;
btnIncr.Attributes.Add("onclick", "javascript:decreaseValue('" + tb.ClientID + "');");Now you see when the page is rendered it will hold the buttons with appropriate Onclick Event handlers to process the textbox tb. Hope you like this solution. :rose::rose:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
Just wanted to update incase anyone else needs to do something similar. I found this site to be helpful as well: GridView and Javascript Also, For some reason the page continued to post back and cause an invalid post back error on the server, but this is resolved by adding the following parameters to the buttons:
buttonPlus.PostBackUrl = "javascript:;";
buttonMinus.PostBackUrl = "javascript:;";Also, you might need to do
e.Row.FindControlife.Item.FindControlis unavailable. Thanks!!!Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
-
Just wanted to update incase anyone else needs to do something similar. I found this site to be helpful as well: GridView and Javascript Also, For some reason the page continued to post back and cause an invalid post back error on the server, but this is resolved by adding the following parameters to the buttons:
buttonPlus.PostBackUrl = "javascript:;";
buttonMinus.PostBackUrl = "javascript:;";Also, you might need to do
e.Row.FindControlife.Item.FindControlis unavailable. Thanks!!!Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
Yes.. you are right ... Thanks for update. cheers. :rose::rose:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
-
Yes.. you are right ... Thanks for update. cheers. :rose::rose:
Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
Hi Abhishek, Actually, I believe I spoke too soon! Turns out it fixed the post back problem but broke the rest of my server side asp.Button controls on this page (after I issue the very first javascript command that is). I was playing around with one of my other sites and tried using a server side button that calls a validation javascript function. I got it to call the function but it acted quite similar to this issue in that it would either call the function but still issue the post back to the server each time (without having
button.postbackurl="javascript:;";) or would call the function but then never actually post back once the validation boolean was set to true (button.postbackurl="javascript:;";The only way I've found around this so far is to not use an asp.net button control and just create the , but that only works with the static pages. I've been googling it for the past day now, but any documentation or references I find give me the impresion that it should just work. Have you ever run into an issue like this? I'm thinking there's a parameter that I'm overlooking, but I can't find it. I've tried settingbutton.UseSubmitBehavior = true;and / orbutton.CausesValidation = false;but they just end up causing required validation problems.Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
-
Hi Abhishek, Actually, I believe I spoke too soon! Turns out it fixed the post back problem but broke the rest of my server side asp.Button controls on this page (after I issue the very first javascript command that is). I was playing around with one of my other sites and tried using a server side button that calls a validation javascript function. I got it to call the function but it acted quite similar to this issue in that it would either call the function but still issue the post back to the server each time (without having
button.postbackurl="javascript:;";) or would call the function but then never actually post back once the validation boolean was set to true (button.postbackurl="javascript:;";The only way I've found around this so far is to not use an asp.net button control and just create the , but that only works with the static pages. I've been googling it for the past day now, but any documentation or references I find give me the impresion that it should just work. Have you ever run into an issue like this? I'm thinking there's a parameter that I'm overlooking, but I can't find it. I've tried settingbutton.UseSubmitBehavior = true;and / orbutton.CausesValidation = false;but they just end up causing required validation problems.Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.
yes. .For <asp:button use
btn.Attributes.Add("onclick", "javascript:");this is the best option to have client side event. Otherwise in the designer you might useonClientClick="javascript:":cool:Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
-
yes. .For <asp:button use
btn.Attributes.Add("onclick", "javascript:");this is the best option to have client side event. Otherwise in the designer you might useonClientClick="javascript:":cool:Abhishek Sur
My Latest Articles **Create CLR objects in SQL Server 2005 C# Uncommon Keywords Read/Write Excel using OleDB
**Don't forget to click "Good Answer" if you like to.
dang..it is calling the javascript but still issuing the post back to the server and throwing a validation error. I did view the source and I believe the problem lies in the fact that all of the buttons are of type "submit". Is there a way I can programatically change them to type="button" instead? I tried
button.Attributes.Add("type", "button")but they are still ending up in the browser as type="submit". Doesn't make any sense. I've seen a ton of forums and articles now indicating that what you've suggested should just work. [UPDATE] It dawned on me that it was probably because I never changed the UseSubmitBehavior parameter on the button. If I change this to false, then the javascript fires without trying to submit, however it is still posting back and refreshing the page, causing my javascript changes to dissapear during the server's page load. The only way I've found so far to keep the page from refreshing is adding the PostBackURL parameter, but if I do that then all of my buttons on the page seem to "inherit" this and then they won't work. grr!if (e.Row.RowType == DataControlRowType.DataRow)
{
Label lb1 = (Label)e.Row.FindControl("label1");
Button btminus = (Button)e.Row.FindControl("minus_qty");
btminus.UseSubmitBehavior = false;
btminus.Attributes.Add("onclick", "javascript:decreaseQuantity('" + lb1.ClientID + "');");
Button btplus = (Button)e.Row.FindControl("plus_qty");
btplus.UseSubmitBehavior = false;
btplus.Attributes.Add("onclick", "javascript:increaseQuantity('" + lb1.ClientID + "');");
}Knowledge is not power, however, the acquisition and appropriate application of knowledge can make you a very powerful individual.