|
code
newsgroups
|
|||||||||||||||||||||||
|
|||||||||||||||||||||||
How to add client script to a pushbutton in datagridHi there,
I hope I post this question to a right place. If not, please let me know. I am using a datagrid in my asp.net web app to show a user list. I put a pushbutton (could be linkbutton as well) for each row in the grid. I would like to have a javascript function linked to each button, so when user clicks the button, another pupup window shows up to show an image of the selected user in the list. I am looking for a way to add client side javascript function to each button and passing the each user's key to the function. Thanks in advance. Mike Hi Mike,
Welcome to the ASPNET newsgroup. As for the adding script behavior on buttons in datagrid rows, are you developing the page through ASP.NET 1.x or the new ASP.NET 2.0? I assume that you're using ASP.NET 1.x(Since datagrid is mostly replaced by GridView in 2.0). For ASP.NET 1.x, if you want to do some customization on the sub controls(like a button) in datagrid row, I suggest you consider using TemplateColumn since this can allow us to do much customization. And to add client-side script behavior for a certain control in the templatecolumn, there exists serveral approachs: 1. directly embeded the script in template through databinding expression(if the embeded script is not too complex to handle in databinding expression. e.g: =========================== <asp:DataGrid id="dgGrid" runat="server" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn DataField="Text" HeaderText="Text"></asp:BoundColumn> <asp:BoundColumn DataField="Value" HeaderText="Value"></asp:BoundColumn> <asp:TemplateColumn HeaderText="Ops"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <INPUT type="button" value="Button" onclick='pop_up("<%# DataBinder.Eval(Container.DataItem,"Value") %>");'/> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid> =============================== =======code behind======== private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here if(!IsPostBack) { ListItemCollection items = new ListItemCollection(); for(int i=0;i<10;i++) { items.Add("item_" + i); } dgGrid.DataSource = items; dgGrid.DataBind(); } } =========================== In above code I bind the grid with a simple ListItemcollection. and use some databindig expression to add the script behavior for the html button element(let it open a modeless dialog display the certain show picture page, by passing the userid). 2. we can use the datagrid's ItemDataBound or ItemCreated event to programmatically locate sub controls from DataGrid Cell and do some customization on them. e.g: ================ private void dgGrid_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { TextBox txt = e.Item.Cells[0].FindControl("txtXXX") as TextBox; //...... } } ==================== I use the ItemCreated event to locate a textbox control I defined in the datagrid's column 0 Hope this helps. If there's anything unclear, please feel free to let me know. Regards, Steven Cheng Microsoft Online Community Support ================================================== When responding to posts, please "Reply to Group" via your newsreader so that others may learn and benefit from your issue. ================================================== This posting is provided "AS IS" with no warranties, and confers no rights. Hi Steven,
Thanks a lot for your reply. Yes, you are right, I am using asp.net 1.1 and VS.NET 2003. I tried your solution and it works perfect. I just have another small question. As in my datagrid, for each user there might not be an image linked to it. If the user has an image, I would like to put a button there so you can click it to show the image. If the user doesn't have an image, I would like to hide the button or disable the button. I tried the following but it didn't work: <INPUT type="button" class="Button" disable="<%#DataBinder.Eval(Container.DataItem,"ImageId").ToString() == "" ? "false" : "true";%> value="View ID Image" onclick='ViewIDImage("<%#DataBinder.Eval(Container.DataItem,"ImageId")%>");'/> I also tried the following and it didn't work either: <%#DataBinder.Eval(Container.DataItem,"ImageId").ToString() == ""){%> <INPUT type="button" class="Button" value="View ID Image" onclick='ViewIDImage("<%#DataBinder.Eval(Container.DataItem,"ImageId")%>");'/> <%}%> As you can see, I have problem getting hold of the ImageId value. Any suggestion? Thanks, Mike Show quoteHide quote "Steven Cheng[MSFT]" wrote: > > Hi Mike, > > Welcome to the ASPNET newsgroup. > > As for the adding script behavior on buttons in datagrid rows, are you > developing the page through ASP.NET 1.x or the new ASP.NET 2.0? I assume > that you're using ASP.NET 1.x(Since datagrid is mostly replaced by GridView > in 2.0). For ASP.NET 1.x, if you want to do some customization on the sub > controls(like a button) in datagrid row, I suggest you consider using > TemplateColumn since this can allow us to do much customization. And to add > client-side script behavior for a certain control in the templatecolumn, > there exists serveral approachs: > > 1. directly embeded the script in template through databinding > expression(if the embeded script is not too complex to handle in > databinding expression. e.g: > > =========================== > <asp:DataGrid id="dgGrid" runat="server" AutoGenerateColumns="False"> > <Columns> > <asp:BoundColumn DataField="Text" HeaderText="Text"></asp:BoundColumn> > <asp:BoundColumn DataField="Value" > HeaderText="Value"></asp:BoundColumn> > <asp:TemplateColumn HeaderText="Ops"> > <HeaderTemplate> > > </HeaderTemplate> > <ItemTemplate> > <INPUT type="button" value="Button" onclick='pop_up("<%# > DataBinder.Eval(Container.DataItem,"Value") %>");'/> > </ItemTemplate> > </asp:TemplateColumn> > </Columns> > </asp:DataGrid> > =============================== > > =======code behind======== > private void Page_Load(object sender, System.EventArgs e) > { > // Put user code to initialize the page here > if(!IsPostBack) > { > ListItemCollection items = new ListItemCollection(); > for(int i=0;i<10;i++) > { > items.Add("item_" + i); > } > > dgGrid.DataSource = items; > dgGrid.DataBind(); > } > } > =========================== > > In above code I bind the grid with a simple ListItemcollection. and use > some databindig expression to add the script behavior for the html button > element(let it open a modeless dialog display the certain show picture > page, by passing the userid). > > 2. we can use the datagrid's ItemDataBound or ItemCreated event to > programmatically locate sub controls from DataGrid Cell and do some > customization on them. e.g: > > > ================ > private void dgGrid_ItemCreated(object sender, > System.Web.UI.WebControls.DataGridItemEventArgs e) > { > if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == > ListItemType.AlternatingItem) > { > TextBox txt = e.Item.Cells[0].FindControl("txtXXX") as TextBox; > //...... > } > } > ==================== > > I use the ItemCreated event to locate a textbox control I defined in the > datagrid's column 0 > > > Hope this helps. If there's anything unclear, please feel free to let me > know. > > > Regards, > > Steven Cheng > Microsoft Online Community Support > > > ================================================== > > When responding to posts, please "Reply to Group" via your newsreader so > that others may learn and benefit from your issue. > > ================================================== > > > This posting is provided "AS IS" with no warranties, and confers no rights. > > > > > > > Hi Mike,
Thanks for your response. As for the "disabled" attribute, if we put it on the html element, that element will be disabled, it is not used as true/false pair. So you can try using the following code to make the element disabled conditionally: ============================ <asp:TemplateColumn HeaderText="Ops"> <HeaderTemplate> </HeaderTemplate> <ItemTemplate> <INPUT type="button" value="Button" <%# HasImage(DataBinder.Eval(Container.DataItem,"Value")) %> onclick='pop_up("<%# DataBinder.Eval(Container.DataItem,"Value") %>");'/> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid> ===================== # "HasImage" is a custom helper function I defined in code behind(see below) ======code behind========== protected string HasImage(object obj) { string val = obj.ToString(); if(val.IndexOf("3") > -1) { return "disabled"; } return string.Empty; } =================================== Hope this also helps. Regards, Steven Cheng Microsoft Online Community Support ================================================== When responding to posts, please "Reply to Group" via your newsreader so that others may learn and benefit from your issue. ================================================== This posting is provided "AS IS" with no warranties, and confers no rights. Hi Steve,
This is excellent! It works perfect. Thanks very much. Mike Show quoteHide quote "Steven Cheng[MSFT]" wrote: > Hi Mike, > > Thanks for your response. > > As for the "disabled" attribute, if we put it on the html element, that > element will be disabled, it is not used as true/false pair. So you can try > using the following code to make the element disabled conditionally: > > ============================ > <asp:TemplateColumn HeaderText="Ops"> > <HeaderTemplate> > </HeaderTemplate> > <ItemTemplate> > <INPUT type="button" value="Button" > <%# HasImage(DataBinder.Eval(Container.DataItem,"Value")) %> > onclick='pop_up("<%# DataBinder.Eval(Container.DataItem,"Value") %>");'/> > </ItemTemplate> > </asp:TemplateColumn> > </Columns> > </asp:DataGrid> > ===================== > > # "HasImage" is a custom helper function I defined in code behind(see below) > > ======code behind========== > protected string HasImage(object obj) > { > string val = obj.ToString(); > > > if(val.IndexOf("3") > -1) > { > return "disabled"; > } > > return string.Empty; > } > =================================== > > Hope this also helps. > > Regards, > > Steven Cheng > Microsoft Online Community Support > > > ================================================== > > When responding to posts, please "Reply to Group" via your newsreader so > that others may > > learn and benefit from your issue. > > ================================================== > > > This posting is provided "AS IS" with no warranties, and confers no rights. > > You are welcome Mike,
Have a good day! Regards, Steven Cheng Microsoft Online Community Support ================================================== When responding to posts, please "Reply to Group" via your newsreader so that others may learn and benefit from your issue. ================================================== This posting is provided "AS IS" with no warranties, and confers no rights.
Bind data to control inside a Repeater
Master/Details cloning a record? GridView disapears after entering edit mode. ObjectDataSource method as another ObjectDataSource put control in a repeater cell from code behind Refreshing TreeView CrossPage Posting and the How Do I Webcast Intellisense question FileUpload name goes away Master Page - File References |
|||||||||||||||||||||||