Site Search:
Sign in | Join | Help
4Penny.net

ASP.NET

Notes, Tricks and Tips on ASP.NET Coding

ComponentArt Grid with a Modal Delete box

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
    <script type="text/javascript">
        //  keeps track of the delete button for the row
        //  that is going to be removed
        var _source;
        // keep track of the popup div
        var _popup;
        
        function showConfirm(source){
            this._source = source;
            this._popup = $find('mdlPopup');
            
            //  find the confirm ModalPopup and show it    
            this._popup.show();
        }
        
        function okClick(){
            //  find the confirm ModalPopup and hide it    
            this._popup.hide();
            //  use the cached button as the postback source
            
            __doPostBack(this._source.name, '');
        }
        
        function cancelClick(){
            //  find the confirm ModalPopup and hide it 
            this._popup.hide();
            //  clear the event source
            this._source = null;
            this._popup = null;
        }
    </script>
    
    
    <div class="subHeader">
        Users
    </div>
    
    <div class="contentnew">
    
    <asp:LinkButton ID="lnkAddUser" runat="server" Text="Add a User" />
    <asp:LinkButton ID="pop" runat="server" Text="Popup" />
            
        
                <ComponentArt:Grid ID="grdUser" RunningMode="Client" CssClass="Grid" ShowHeader="false"
            SearchTextCssClass="GridHeaderText" HeaderCssClass="GridHeader" FooterCssClass="GridFooter"
            GroupByCssClass="GroupByCell" GroupByTextCssClass="GroupByText" PageSize="15"
            PagerStyle="Numbered" PagerTextCssClass="GridFooterText" GroupingPageSize="5"
            PreExpandOnGroup="true" ImagesBaseUrl="~/images/" TreeLineImagesFolderUrl="~/images/lines/"
            TreeLineImageWidth="22" TreeLineImageHeight="19" IndentCellWidth="22" GroupingNotificationTextCssClass="GridHeaderText"
            GroupBySortAscendingImageUrl="Group_asc.gif" GroupBySortDescendingImageUrl="Group_desc.gif"
            GroupBySortImageWidth="10" GroupBySortImageHeight="10" Width="300px" Height="100"
            runat="server">
            <Levels>
                <ComponentArt:GridLevel DataKeyField="UserID" ShowTableHeading="false" ShowSelectorCells="false"
                    RowCssClass="Row" ColumnReorderIndicatorImageUrl="reorder.gif" DataCellCssClass="DataCell"
                    HeadingCellCssClass="HeadingCell" HeadingCellHoverCssClass="HeadingCellHover"
                    AllowGrouping="false" HeadingCellActiveCssClass="HeadingCellActive" HeadingRowCssClass="HeadingRow"
                    HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow" GroupHeadingCssClass="GroupHeading"
                    SortAscendingImageUrl="asc.gif" SortDescendingImageUrl="desc.gif" SortImageWidth="10"
                    SortImageHeight="19">
                    <Columns>
                        <ComponentArt:GridColumn Visible="false" DataField="UserID" />
                        <ComponentArt:GridColumn DataField="UserName" HeadingText="User Name" />
                        <ComponentArt:GridColumn DataCellServerTemplateId="DeleteTemplate" />
                    </Columns>
                </ComponentArt:GridLevel>
            </Levels>
            <ServerTemplates>
                <ComponentArt:GridServerTemplate ID="DeleteTemplate">
                    <Template>
                        <asp:Button ID="delete" class="gridButton" runat="server" Text="Delete" OnClientClick="showConfirm(this); return false;" CommandName="Delete" CommandArgument='<%# Container.DataItem("UserID") %>' />
                    </Template>
                </ComponentArt:GridServerTemplate>
                
            </ServerTemplates>
        </ComponentArt:Grid>        
            
    </div>
    
    <asp:Panel ID="Panel1" runat="server" style="width:200px;height:125px;display: none; background-color: Silver;">
        <asp:Panel ID="Panel3" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black" runat="server">
            <div class="modalHeader">
                Are you sure?
            </div>
        </asp:Panel>
        <div class="modalBody">
            <span style="text-align:left;">Are you sure that you want to delete the selected user?<p />
            <asp:Button cssClass="modalButton" ID="OkButton" Text="OK" runat="server" />
            <asp:Button ID="CancelButton" Text="Cancel" runat="server" />
        </div>
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" 
        BehaviorID="mdlPopup"
        TargetControlID="Panel1"
        PopupControlID="Panel1" 
        BackgroundCssClass="modalBackground" 
        OkControlID="OkButton"
        CancelControlID="CancelButton" 
        DropShadow="true"
        OnOkScript="okClick();"
        OnCancelScript="cancelClick();"
        PopupDragHandleControlID="Panel3" />
    
</asp:Content>

 

Imports Microsoft.ApplicationBlocks.Data
Imports System.Web.UI.WebControls


Partial Class Admin_Users
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load


        If Not IsPostBack Then
            bindGrid()
        End If


    End Sub


    Public Sub bindGrid()
        grdUser.DataSource = SystemUser.getUserList().Tables(0)
        grdUser.DataBind()
    End Sub


    Protected Sub grdUser_ItemCommand(ByVal sender As Object, ByVal e As ComponentArt.Web.UI.GridItemCommandEventArgs) Handles grdUser.ItemCommand
        If CType(e.Control, Button).CommandName = "Delete" Then
            SystemUser.delete(CType(e.Control, Button).CommandArgument)
            bindGrid()
        End If
    End Sub


    Protected Sub lnkAddUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkAddUser.Click
        Response.Redirect("UserNew.aspx")
    End Sub
End Class

Comments

No Comments