A GridView will list rows which have to be approved/rejected. First column is named 'Action', which when clicked will display the ajax popupcontrolextender panel with two links (Approve/Reject). After the link is clicked, I need to update the status in the DB & refresh the GridView. ObjectDataSource is used to Bind the GridView. I have used the below code inside RowCommand event:
Dim index As Integer = Convert.ToInt32(e.CommandArgument)
Dim gvRow As GridViewRow = GridView1.Rows(index)
If e.CommandName = "Approve" Then
BusinessLogicLayer.UpdateFileStatus(sID, Approve)
ElseIf e.CommandName = "Reject" Then
BusinessLogicLayer.UpdateFileStatus(sID, Reject)
End If
GridView1.DataBind()
DirectCast(gvRow.FindControl("pceMenu"), AjaxControlToolkit.PopupControlExtender).Cancel()
HTML of the TemplateField 'Action':
<asp:TemplateField HeaderText="Action" >
<ItemTemplate>
<ajax:PopupControlExtender ID="pceMenu" runat="server" TargetControlID="imgMenu" PopupControlID="pnlMenu" Position="Right" >
</ajax:PopupControlExtender>
<asp:Image ID="imgMenu" runat="server" ImageUrl="~/Images/gear.png" CssClass="popupImage" />
<asp:Panel ID="pnlMenu" runat="server" CssClass="popupControl" Width="85px" Height="50px" style="display:none;">
<div class="menu-row" style="border-top: none;">
<asp:Image ID="imgApprove" runat="server" ImageUrl="~/Images/tick.png" style="float:left;"/>
<asp:LinkButton ID="lnkApprove" runat="server" Text="Approve" ToolTip="Approve" style="margin-left:10px;" CommandName="Approve" />
</div>
<div class="menu-row">
<asp:Image ID="imgReject" runat="server" ImageUrl="~/Images/delete16.png" style="float:left;"/>
<asp:LinkButton ID="lnkReject" runat="server" Text="Reject" ToolTip="Reject" style="margin-left:10px;" CommandName="Reject" />
</div>
</asp:Panel>
</ItemTemplate>
<HeaderStyle HorizontalAlign="Left"/>
<ItemStyle HorizontalAlign="Center" Width="5%"/>
</asp:TemplateField>
Tried the below methods, but no success:
Suppress the panel's visibility using style="display:'';"
Called the Cancel() method of the PopupControlExtender
Note: The pop-up disappears if I don't bind the GridView inside the RowCommand event. But, I need to refresh the results displayed after Approve/Reject.
Appreciate any help. Thanks!
Hi you can hide ajax control toolkit's modal popup extender from code behind try this code:
IdOfYourModelPopup.Hide();
Related
It is a strange problem. I am setting the pagesize of gridview in dropdownlist selectedindexchanged which is i gridview pager template. Here is my html source
<PagerTemplate>
<div class="grid-footer">
<div class="gridfooter_size"> <asp:DropDownList ID="pageSize2" runat="server" AutoPostBack="true"
onselectedindexchanged="pageSize2_SelectedIndexChanged">
<asp:ListItem Value="10" Selected="True">10</asp:ListItem>
<asp:ListItem Value="25">25</asp:ListItem>
<asp:ListItem Value="50">50</asp:ListItem>
<asp:ListItem Value="100">100</asp:ListItem>
</asp:DropDownList>
</div>
<div class="gridfooter_info">
<asp:Label ID="lblSummary" runat="server"></asp:Label>
</div>
<div class="gridfooter_paginate">
<asp:LinkButton ID="lnkFirstbnt" runat="server" CommandName="Page" CssClass="pagerclass-nxt"
CausesValidation="false" CommandArgument="First">First</asp:LinkButton>
<asp:LinkButton ID="lnkPrevbnt" runat="server" CommandName="Page" CssClass="pagerclass-prev"
CausesValidation="false" CommandArgument="Prev">Previous</asp:LinkButton>
<asp:Label ID="CurrentPage" CssClass="pagerclass-number" Visible="false" runat="server"
Text="Label"></asp:Label>
<asp:LinkButton ID="lnkNextbnt" runat="server" CommandName="Page" CssClass="pagerclass-next"
CausesValidation="false" CommandArgument="Next">Next</asp:LinkButton>
<asp:LinkButton ID="lnkLastbnt" runat="server" CommandName="Page" CssClass="pagerclass-last"
CausesValidation="false" CommandArgument="Last">Last</asp:LinkButton>
</div>
</div>
</PagerTemplate>
Here is my code behind
Protected Sub pageSize2_SelectedIndexChanged(sender As Object, e As System.EventArgs)
Dim gvr2 As GridViewRow = GridView2.BottomPagerRow
Dim ddPageSize2 As DropDownList = DirectCast(gvr2.Cells(0).FindControl("pageSize2"), DropDownList)
GridView2.PageSize = Convert.ToInt32(ddPageSize2.SelectedValue)
Call GetDataTables2()
End Sub
When post back is occured the pageSize2_SelectedIndexChanged event is firing for all the selectd values of dropdownlist, but the page is not rendering. It is jumping from the pageSize2_SelectedIndexChanged event Call GetDataTables2() method. If the dropdownlist selectd value is 10, then the page is rendering, it strange. What might be the problem, Please suggest solution
The problem is, I am using two gridviews in the same update panel. And those two gridviews having the controsl with same IDs under the templates of two gridviews. This might be a bug in visual studio. It did not tell me any compile time exception and not even in runtime until I remove the updatepanel. I ahve changed the control IDs. Now it is working fine.
I am new to Vb.net.
I am using gridview and binding it a resultset from database. I am trying to use asp button and associate a codebehind function with it.
But since the rows are generating dynamically, ids of button are incrementing accordingly.
Here is the code -
'<asp:GridView ID="grdProjects" runat="server" CssClass="q_acontent" Width="990px"
AutoGenerateColumns="false" CellPadding="2" ClientIDMode="static" ViewStateMode="Enabled">
<asp:TemplateField HeaderText="Document Name">
<ItemTemplate>
<asp:Button ID="Button3" runat="server" Text='<%# (Convert.ToString(DataBinder.Eval(Container.DataItem, "Data_text")))%>'/>
</ItemTemplate>
<ItemStyle Width="5%" HorizontalAlign="Center" CssClass="conatact_phone breakword" />
</asp:TemplateField>
</asp:GridView>'
Please help me how to associate codebehind function and pass its corresponding button text to it.
Use the OnCommand event of button controls and Set the CommandArgument property of the button to your DataItem value as:
<ItemTemplate>
<asp:Button ID="Button3" runat="server"
Text='<%# (Convert.ToString(DataBinder.Eval(Container.DataItem,"Data_text")))%>'
OnCommand="Button3_Command"
CommandArgument='<%# (Convert.ToString(DataBinder.Eval(Container.DataItem,
"Data_text")))%>'
/>
</ItemTemplate>
OnCommand event in your code behind file:
Public Sub Button3_Command(sender As Object, e As CommandEventArgs)
Dim _dataText As String = e.CommandArgument.ToString()
End Sub
Hi all I have a simpe ASP button inside a grid. But the onclick event doesn't seem to fire. Where did I go wrong?
Here's the first line of my aspx page.
<%# Page Title="Trainer Data" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeFile="TrainerData.aspx.vb" Inherits="TrainerData"%>
And the button inside my gridview..
<asp:GridView ID ="gvExecSummary" runat="server" CssClass="gridview" AllowSorting="false" AllowPaging="false" AutoGenerateColumns="false" Width="98%" >
<RowStyle Height="22px" />
<AlternatingRowStyle Height="22px" CssClass="bg" BackColor="LightGray"/>
<HeaderStyle Height="22px" BackColor="#4b6c9e" Font-Bold="true"/>
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="5%" HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate" OnClientClick="btnExecutiveGenerate_Click" />
</ItemTemplate>
</asp:TemplateField>
P.S. I tried even onclick but it doesn't work either.
EDIT: My code for server side.
Protected Sub btnExecutiveGenerate_Click(sender As Object, e As EventArgs)
Dim gvrow As GridViewRow = CType(CType(sender, Control).Parent.Parent, GridViewRow)
Dim lblSchoolId As System.Web.UI.WebControls.Label = gvrow.FindControl("lblSchoolMasterID")
Dim lblFacultyId As System.Web.UI.WebControls.Label = gvrow.FindControl("lblFacultyMasterID")
Dim btnExecutiveGenerate As System.Web.UI.WebControls.Button = gvrow.FindControl("btnExecutiveGenerate")
PDF_Creation_Executive(Val(lblSchoolId.Text), Val(lblFacultyId.Text))
End Sub
Use Command Argumnet,
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="AddButton" runat="server"
CommandName="AddToCart"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="Add to Cart" />
</ItemTemplate>
</asp:TemplateField>
add code page side
Protected Sub GridView1_RowCommand(ByVal sender As Object, _ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)
If (e.CommandName = "AddToCart") Then
' Retrieve the row index stored in the CommandArgument property.
Dim index As Integer = Convert.ToInt32(e.CommandArgument)
' Retrieve the row that contains the button
' from the Rows collection.
Dim row As GridViewRow = GridView1.Rows(index)
' Add code here to add the item to the shopping cart.
End If
End Sub
You need to handle the button click event of Gridview in RowCommand event
NOTE: Please see the CommandName & CommandArgument properties added to the button.
<asp:GridView ID ="gvExecSummary" runat="server" CssClass="gridview" AllowSorting="false" AllowPaging="false" AutoGenerateColumns="false" Width="98%" >
<RowStyle Height="22px" OnRowCommand="gvExecSummary_RowCommand" />
<AlternatingRowStyle Height="22px" CssClass="bg" BackColor="LightGray"/>
<HeaderStyle Height="22px" BackColor="#4b6c9e" Font-Bold="true"/>
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="5%" HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate" CommandName="GenerateExecutive" CommandArgument="<%#((GridViewRow)Container).RowIndex %>" />
</ItemTemplate>
</asp:TemplateField>
And and RowCommand event will be..
protected void gvExecSummary_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "GenerateExecutive")
{
// button click code goes here
}
}
change OnClientClick event to OnClick if btnExecutiveGenerate_Click is vb.net event handler
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate"
OnClick="btnExecutiveGenerate_Click"/>
OnClientClick event use to execute client-side script, if you have given OnClientClick event with OnClick event, then if OnClientClick return true only it will call OnClick event.
so make sure you are returning true or false from OnClientClick event if you using it.
note that if you are loading data in page laod, do as below
Sub Page_Load
If Not IsPostBack
LoadGridViewData()
End If
End Sub
This may help someone, but I was experiencing edit buttons not firing the event within rows (and not footer).
The cause was a gridview containing a label, which had the same ID as one elsewhere on the page.
Seemingly this did not cause problems for the footer row, which did not contain any such labels.
I hope this helps someone.
I need to show an AjaxControlToolkit ModalPopupExtender control, when user checks/unchecks a CheckBox control that is inside a GridView as a TemplateField.
-- Updated on 24/05/2013
See final solution here...
We finally solved the problem. So I decided to post here the complete solution and the final code.
The GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID"/>
<asp:BoundField DataField="COLUMN_A" SortExpression="COLUMN_A" HeaderText="COLUMN_A" />
<asp:BoundField DataField="COLUMN_B" SortExpression="COLUMN_B" HeaderText="COLUMN_B" />
<!-- TemplateField with the CheckBox and the ModalPopupExtender controls -->
<asp:TemplateField HeaderText="Check" SortExpression="CHECK_COLUMN">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server"/>
<!-- Modal Popup block -->
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" DropShadow="True" TargetControlID="CheckBox1" PopupControlID="panModalPopup" CancelControlID="CancelButton"/>
<asp:Panel ID="panModalPopup" runat="server" style="display:none; text-align:left; width:400px; background-color:White; border-width:2px; border-color:#40A040; border-style:solid; padding:10px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="ConfirmButton" runat="server" Text="Confirm" OnClick="ConfirmButton_Click" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ID") %>'/>
<asp:Button ID="CancelButton" runat="server" Text="Cancel"/>
</div>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
The code behind
protected void gvDocs_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType.Equals(DataControlRowType.DataRow))
{
// Setting the CheckBox check reading the state from DB
CheckBox CheckBox1 = (CheckBox)e.Row.FindControl("CheckBox1");
CheckBox1.Checked = DataBinder.Eval(e.Row.DataItem, "CHECK_COLUMN").ToString() == "Y"; // Or any other value that works like true/false
}
}
protected void ConfirmButton_Click(object sender, EventArgs e)
{
string id = ((Button)sender).CommandArgument; // Get the ID column value
// Update the CHECK_COLUMN value on the DB or do whatever you want with the ID...
BindData(); // Method that do the GridView DataBind after the changes applied to the DB
}
Some things to know
1) The ModalPopupExtender1 control is inside the GridView TemplateField because it needs to have access to the CheckBox1 and its click event. It's probably not the best solution ever, but it works and so it would not affect to much on performance if your GridView is not too complicated and if it is paged.
2) In order to catch the ConfirmButton Click event, you have to remove the OKControlID property from the ModalPopupExtender control settings.
-- END
-- Updated on 22/05/2013
Then I need the ID of the corresponding row to make an UPDATE on the DB.
-- END
This is the GridView
<asp:GridView ID="gvDocs" runat="server" CssClass="grid" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true"
OnPageIndexChanging="gvDocs_PageIndexChanging"
OnSorting="gvDocs_Sorting"
OnRowDataBound="gvDocs_RowDataBound">
<AlternatingRowStyle CssClass="grid_row_alternate"/>
<HeaderStyle CssClass="grid_header" />
<RowStyle CssClass="grid_row" />
<SelectedRowStyle CssClass="grid_row_selected" />
<Columns>
<asp:BoundField DataField="ID_DOCUMENTO" Visible="False"/>
<asp:BoundField DataField="NUM_PROT" SortExpression="NUM_PROT" HeaderText="N. Prot." />
<asp:BoundField DataField="DATE_PROT" SortExpression="DATE_PROT" HeaderText="Data Prot." />
... some other BoundFields ...
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server" AutoPostBack="True" OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
And this is the ModalPopup block
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="panModalPopup" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px; background-color:White; border-width:2px; border-color:Black; border-style:solid; padding:20px;">
Are you sure?
<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma" OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla" OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Now, I want to show the ModalPopup each time a checkbox is checked/unchecked and that popup have to show a confirmation message with 2 buttons: Confirm and Cancel.
Confirm have to do an update on the DB and then postback.
Cancel have only to hide the popup without postback.
I know that ModalPopupExtender listens to OnClick events. So, do I necessary need a Button, LinkButton, ImageButton, etc. or can I do what I want?
You are right, it listens to onclick events, but client-side ones, so, the target control of the extender can be anything you can click on, even a div or a label.
try to show/hide ModalPopupExtender1 from chkArchiviare_CheckedChanged event like this.
ModalPopupExtender1.show();
and
ModalPopupExtender1.hide();
take one Hidden button and make it as TargetControlID like this.
<asp:HiddenField ID="btnHiddenDtl1" runat="Server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True" TargetControlID="btnHiddenDtl1" PopupControlID="panModalPopup" OkControlID="btnConferma" CancelControlID="btnAnnulla" />
you need not to call cancel button click event to hide ModalPopupExtender1.
You no need to include ModalPopup Extender inside your GridView. You can bind check box control in template field in GridView and use OnCheckedChanged property in it...So template would be like below
<asp:TemplateField HeaderText="Da archiviare" SortExpression="DA_ARCHIVIARE">
<ItemStyle HorizontalAlign="Center"/>
<ItemTemplate>
<asp:CheckBox ID="chkArchiviare" runat="server"
OnCheckedChanged="chkArchiviare_CheckedChanged"/>
</ItemTemplate>
</asp:TemplateField>
After this you have to call show function on chkArchiviare_CheckedChanged event...like this
ModalPopupExtender1.Show();
Here ModalPopupExtender1 is ID of you ModalPopupExtender control.
One more thing you have to remember use one button on .aspx page. And pass this button ID into ModalPopupExtender TargetControlID... Like this
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" DropShadow="True"
TargetControlID="btnShowModalPopup" PopupControlID="panModalPopup"
OkControlID="btnConferma" CancelControlID="btnAnnulla" />
<asp:Panel ID="panModalPopup" runat="server" style="display:none; width:400px;
background-color:White; border-width:2px; border-color:Black; border-
style:solid; padding:20px;"> Are you sure?<br /><br />
<div style="text-align:right;">
<asp:Button ID="btnConferma" runat="server" Text="Conferma"
OnClick="btnConferma_Click"/>
<asp:Button ID="btnAnnulla" runat="server" Text="Annulla"
OnClick="btnAnnulla_Click" />
</div>
</asp:Panel>
Here Why Iam using this button?....There is no use of this button because we are using show() in codebehind...but if we are not pass button Id to ModapPopupExtender TargetControlId property. It will give you an error.
So using ModalPopupExtender in this way...you can use it with LinkButton, Label, Button. For more details with example, you can check the below link....
How to Use ModalPopup Extender into GridView
I hope this article will clear your all doubts....Enjoy and share this with others...Thanks!
I have a gridview with Template field. I add a checkbox in templatefield . Autopostback is true for checkbox .
I fill grid in Load-page and creted column dynamic .
if (!IsPostBack)
{
FillGrid();
}
I use update panel
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<SharePoint:SPGridView ID="grid" AllowSorting="true" AllowFiltering="true" CssClass="ms-listviewtable"
runat="server" AutoGenerateColumns="false">
<RowStyle CssClass="ms-alternating" Height="10px" />
<Columns>
<asp:TemplateField>
<ItemTemplate >
<asp:CheckBox ID="select" runat="server"
OnCheckedChanged="select_CheckedChanged" AutoPostBack="true" />
<input id="Display" type="hidden" runat="server" />
<input id="itemID" type="hidden" runat="server" />
<asp:Image ID="icon" runat="server" Height="10px" Visible="false" />
</ItemTemplate>
<ItemStyle Width="35px" />
</asp:TemplateField>
<asp:TemplateField >
</asp:TemplateField>
</Columns>
</SharePoint:SPGridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="select" EventName="OnCheckedChanged" />
</Triggers>
</asp:UpdatePanel>
but show error :A control with ID 'select' could not be found for the trigger in UpdatePanel 'UpdatePanel1'.
My problem is : When checkbox is change, page refresh
I don't want to refresh page after checkedchange!
you have to set autopostback="false" or remove autopostback property in checkbox. autopostback actully refresh the page.
So what happens if you set the autopostback property of the checkbox to false?
Also if you are actually looking to handle the onchange event of the checkbox you could wrap the grid with an UpdatePanel; the user wouldn't see a postback but you still get the flexibility of serverside event handling.
First of all you need changes templetecolumn as below
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkselect" runat="server" />
<input id="Display" type="hidden" runat="server" />
<input id="itemID" type="hidden" runat="server" />
<asp:Image ID="imgicon" runat="server" Height="10px" Style="display: none;" ImageUrl="~/images/arrow_left.jpg" />
</ItemTemplate>
<ItemStyle Width="35px" />
</asp:TemplateField>
Now handle itemdatabound event in server side code
Protected Sub SPGridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvBanner.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim chkselect As CheckBox = e.Row.FindControl("chkselect")
Dim imgicon As Image = e.Row.FindControl("imgicon")
If chkselect IsNot Nothing Then
chkselect.Attributes.Add("onclick", "javascript:DoMyTask(this,'" + imgicon.ClientID + "')")
End If
End If
End Sub
Now specify JavaScript function in aspx page as below.
<script type="text/javascript" language="javascript">
function DoMyTask(obj, imgid) {
var objCheck = obj.checked;
var objimg = document.getElementById(imgid)
if (objCheck == true) {
objimg.style.display = "block";
//set more attributes over here
}
else {
objimg.style.display = "none";
//set more attributes over here
}
var count = $(":checkbox:checked").length;
alert('you have selected ' + count + ' Rows');
}
</script>
Hope this will help you...happy coding ..