locked
Gridview button not trigger with bootstrap 4.2.1 RRS feed

  • Question

  • User1487175000 posted

    Hi,

    Button inside gridview to select to mark gridview view row selected is not trigger. I am using  bootstrap in my web application. I am new to bootstrap as well.

    My finding is if i place a Select button inside the span then click event is not trigger. If i move outside the span click event is trigger. 

    I dont understand why its not trigger when its inside span. I think display block property is making not trigger because if i remove display property then its work fine.

                    <div class="row">
                        <div class="col-sm-12 offset-sm-1">
                            <asp:GridView ID="gvAvailableRooms" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" GridLines="None"
                                CssClass="table table-responsive table-striped table-hover" Width="100%" ShowHeader="False" OnRowCommand="gvAvailableRooms_RowCommand">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Image ID="imgRoomMainPic" runat="server" ImageUrl="~/Media/RoomPicturesGallery/Strandvagen/Bocander/boka_visning_office_01.jpg" CssClass="img-fluid rounded float-left" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <h2>
                                                <asp:Label ID="lbRoomName" runat="server" Text='<%# Bind("RumName") %>'></asp:Label></h2>
                                            <small>
                                                <asp:Label ID="lbRoomDescription" runat="server" Text="Our office solutions at 7A Strandvägen areclassic rooms with a view over the water of Nybroviken/Artillerigatan or the park."></asp:Label></small>
                                            <hr />
                                            <span class="h6">Sitnning:</span>&nbsp;<asp:Label ID="lbRoomCapacity" runat="server" Text="3"></asp:Label><hr />
                                            <span class="h6">Hyra:</span>&nbsp;<asp:Label ID="lbRoomRent" runat="server" Text="330 SEK/hour"></asp:Label>
                                            <asp:CheckBox ID="cbRoomSelected" runat="server" Visible="false" />
                                            <span style="text-align: right; padding-right: 10px; display:block;">
                                                <asp:Button CssClass="btn btn-primary" ID="btnSelect" runat="server" CausesValidation="False" CommandName="Select" Text="BOKA" CommandArgument="<%# Container.DataItemIndex %>" UseSubmitBehavior="false" />
                                            </span>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
    
                            </asp:GridView>
                        </div>
                    </div>
                </div>

    Wednesday, February 13, 2019 10:44 PM

Answers

  • User1341756031 posted

    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 19, 2019 10:03 AM

All replies

  • User839733648 posted

    Hi shahid.majeed,

    According to your description and code, I'm sorry that I could not reproduce your issue successfully.

    I just add a click event and test it. It works fine.

    Here is my tesing code.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="row">
                <div class="col-sm-12 offset-sm-1">
                    <asp:GridView ID="gvAvailableRooms" runat="server" AutoGenerateColumns="False" DataKeyNames="Eid" GridLines="None"
                        CssClass="table table-responsive table-striped table-hover" Width="100%" ShowHeader="False">
                        <Columns>
    ...
                            <asp:TemplateField HeaderText="Ename" SortExpression="Ename">
                                <ItemTemplate>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Ename") %>'></asp:Label>
                                    <asp:Label ID="lbRoomDescription" runat="server" Text="Our office solutions at 7A Strandvägen areclassic rooms with a view over the water of Nybroviken/Artillerigatan or the park."></asp:Label></small>
                                    <hr />
                                    <span class="h6">Sitnning:</span>&nbsp;<asp:Label ID="lbRoomCapacity" runat="server" Text="3"></asp:Label><hr />
                                    <span class="h6">Hyra:</span>&nbsp;<asp:Label ID="lbRoomRent" runat="server" Text="330 SEK/hour"></asp:Label>
                                    <asp:CheckBox ID="cbRoomSelected" runat="server" Visible="false" />                                
                                    <span style="text-align: right; padding-right: 10px; display: block;">
                                        <asp:Button CssClass="btn btn-primary" ID="btnSelect" runat="server" CausesValidation="False" CommandName="Select" Text="BOKA" CommandArgument="<%# Container.DataItemIndex %>" UseSubmitBehavior="false" OnClick="btnSelect_Click" />
                                    </span>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="age" SortExpression="age">
    ...
                        </Columns>
                    </asp:GridView>
                </div>
            </div>
        </form>
    </body>
    </html>

    the click event

            protected void btnSelect_Click(object sender, EventArgs e)
            {
               //get the index
                string rowIndex = (sender as Button).CommandArgument;
                ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Row Index: " + rowIndex + "');", true);
            }

    result:

    If possible, please provide more details about your requirement like your click event so that it will be easier to help with you.

    Best Regards,

    Jenifer

    Thursday, February 14, 2019 10:00 AM
  • User1487175000 posted

    I am using master pages as well.  Here is my complete master page markup and default page.

    Master page:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="kontor.Site" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
    <!DOCTYPE html>
    <html lang="sv-se">
    <head runat="server">
        <title><%: Page.Title %></title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="styles/default.css" rel="stylesheet" />
        <link href="styles/popupModal.css" rel="stylesheet" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"></asp:ScriptManager>
            <div>
                <div class="container-fluid">
                    <div class="row d-print-none">
                        <div class="col-sm-12">
                            <div class="navigation">
                                <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top rounded-top">
                                    <a class="navbar-brand" href="Default.aspx">
                                        <img src="images/logo.png" width="30" height="30" class="align-content-center" />
                                    </a>
                                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span class="navbar-toggler-icon"></span>
                                    </button>
                                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                                        <ul class="navbar-nav mr-auto">
                                            <li class="nav-item active">
                                                <a class="nav-link" href="Default.aspx"><i class="far fa-calendar-alt"></i>&nbsp;Boka<span class="sr-only">(current)</span></a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="Default.aspx"><i class="far fa-list-alt"></i>&nbsp;Bokningar</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#"><i class="far fa-envelope"></i>&nbsp;E-post</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#"><i class="fas fa-info-circle"></i>&nbsp;Kontakta oss</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="Logout.aspx">Logga ut&nbsp;<i class="fas fa-sign-out-alt"></i></a>
                                            </li>
                                        </ul>
                                        <div class="form-inline my-1">
                                            <asp:TextBox ID="txtGlobalSearch" runat="server" placeholder="Sök" aria-label="Search" class="form-control mr-sm-2"></asp:TextBox>
                                            <asp:Button ID="btnGlobalSearch" runat="server" class="btn btn-secondary text-white rounded-0" Width="100px" Text="Sök" OnClick="btnGlobalSearch_Click" />
                                        </div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <div style="background-image: url('http://localhost:62639/images/header1.jpg'); height: 300px; background-%; background-repeat: no-repeat; background-size: cover;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-12">
                            <span class="border-top-0">
                                <asp:ContentPlaceHolder ID="Content" runat="server">
                                </asp:ContentPlaceHolder>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12">
                        <ajax:ModalPopupExtender ID="modalPopUp" BackgroundCssClass="ModalPopupBG"
                            runat="server" OkControlID="btnOkay" TargetControlID="lbmsgError"
                            PopupControlID="Panel1">
                        </ajax:ModalPopupExtender>
                        <div id="Panel1" style="display: none;">
                            <div class="popup_Container">
                                <div class="popup_Titlebar" id="PopupHeader">
                                    <asp:Label ID="lbmsgHeader" runat="server" Text="Error" CssClass="modal-title"></asp:Label>
                                </div>
                                <div class="popup_Body">
                                    <p>
                                        <asp:Label ID="lbmsgError" runat="server" Text=""></asp:Label>
                                    </p>
                                </div>
                                <div class="popup_footer">
                                    <input id="btnOkay" value="Stänga" type="button" class="btn btn-light bg-warning" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
                <script src="bootstrap/js/bootstrap.min.js"></script>
            </div>
        </form>
    </body>
    </html>
    

    Default Page:

    <%@ Page Title="Hem" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="kontor.Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="d-block text-center">
                                <h4>KONTORSLOKALER MITT I STOCKHOLM</h4>
                                <small>CENTRALT BELÄGNA KONTORSRUM, ARBETSPLATSER OCH LOUNGER</small>
                            </div>
                        </div>
                    </div>
                    <div class="row text-center align-content-center mt-2">
                        <div class="col-sm-2 offset-sm-2 form-group bg-dark">
                            <div class="mb-2">
                                <asp:Label ID="lbStartDate" runat="server" Text="Checka In:" CssClass="col-form-label" ForeColor="White"></asp:Label>
                                <asp:TextBox ID="txtStartDate" runat="server" CssClass="form-control" placeholder="yyyy-MM-dd"></asp:TextBox>
                                <ajaxToolkit:CalendarExtender ID="ceStartDate" runat="server" TargetControlID="txtStartDate" Format="yyyy-MM-dd" />
                            </div>
                        </div>
                        <div class="col-sm-2 form-group bg-dark">
                            <asp:Label ID="lbStartTime" runat="server" Text="Tid" CssClass="col-form-label" ForeColor="White"></asp:Label>
                            <asp:DropDownList ID="ddStartTime" runat="server" CssClass="form-control">
                                <asp:ListItem Value="06:00">06:00</asp:ListItem>
                                <asp:ListItem Value="06:30">06:30</asp:ListItem>
                                <asp:ListItem Value="07:00">07:00</asp:ListItem>
                                <asp:ListItem Value="07:30">07:30</asp:ListItem>
                                <asp:ListItem Value="08:00" Selected="True">08:00</asp:ListItem>
                                <asp:ListItem Value="08:30">08:30</asp:ListItem>
                                <asp:ListItem Value="09:00">09:00</asp:ListItem>
                                <asp:ListItem Value="09:30">09:30</asp:ListItem>
                                <asp:ListItem Value="10:00">10:00</asp:ListItem>
                                <asp:ListItem Value="10:30">10:30</asp:ListItem>
                                <asp:ListItem Value="11:00">11:00</asp:ListItem>
                                <asp:ListItem Value="11:30">11:30</asp:ListItem>
                                <asp:ListItem Value="12:00">12:00</asp:ListItem>
                                <asp:ListItem Value="12:30">12:30</asp:ListItem>
                                <asp:ListItem Value="13:00">13:00</asp:ListItem>
                                <asp:ListItem Value="13:30">13:30</asp:ListItem>
                                <asp:ListItem Value="14:00">14:00</asp:ListItem>
                                <asp:ListItem Value="14:30">14:30</asp:ListItem>
                                <asp:ListItem Value="15:00">15:00</asp:ListItem>
                                <asp:ListItem Value="15:30">15:30</asp:ListItem>
                                <asp:ListItem Value="16:00">16:00</asp:ListItem>
                                <asp:ListItem Value="16:30">16:30</asp:ListItem>
                                <asp:ListItem Value="17:00">17:00</asp:ListItem>
                                <asp:ListItem Value="17:30">17:30</asp:ListItem>
                                <asp:ListItem Value="18:00">18:00</asp:ListItem>
                                <asp:ListItem Value="18:30">18:30</asp:ListItem>
                                <asp:ListItem Value="19:00">19:00</asp:ListItem>
                                <asp:ListItem Value="19:30">19:30</asp:ListItem>
                                <asp:ListItem Value="20:00">20:00</asp:ListItem>
                                <asp:ListItem Value="20:30">20:30</asp:ListItem>
                                <asp:ListItem Value="21:00">21:00</asp:ListItem>
                                <asp:ListItem Value="21:30">21:30</asp:ListItem>
                                <asp:ListItem Value="22:00">22:00</asp:ListItem>
                                <asp:ListItem Value="22:30">22:30</asp:ListItem>
                                <asp:ListItem Value="23:00">23:00</asp:ListItem>
                                <asp:ListItem Value="23:30">23:30</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-sm-2 form-group bg-dark">
                            <asp:Label ID="lbEndTime" runat="server" Text="Tid" CssClass="col-form-label" ForeColor="White"></asp:Label>
                            <asp:DropDownList ID="ddEndTime" runat="server" CssClass="form-control">
                                <asp:ListItem Value="06:25">06:25</asp:ListItem>
                                <asp:ListItem Value="06:55">06:55</asp:ListItem>
                                <asp:ListItem Value="07:25">07:25</asp:ListItem>
                                <asp:ListItem Value="07:55">07:55</asp:ListItem>
                                <asp:ListItem Value="08:25">08:25</asp:ListItem>
                                <asp:ListItem Value="08:55" Selected="True">08:55</asp:ListItem>
                                <asp:ListItem Value="09:25">09:25</asp:ListItem>
                                <asp:ListItem Value="09:55">09:55</asp:ListItem>
                                <asp:ListItem Value="10:25">10:25</asp:ListItem>
                                <asp:ListItem Value="10:55">10:55</asp:ListItem>
                                <asp:ListItem Value="11:25">11:25</asp:ListItem>
                                <asp:ListItem Value="11:55">11:55</asp:ListItem>
                                <asp:ListItem Value="12:25">12:25</asp:ListItem>
                                <asp:ListItem Value="12:55">12:55</asp:ListItem>
                                <asp:ListItem Value="13:25">13:25</asp:ListItem>
                                <asp:ListItem Value="13:55">13:55</asp:ListItem>
                                <asp:ListItem Value="14:25">14:25</asp:ListItem>
                                <asp:ListItem Value="14:55">14:55</asp:ListItem>
                                <asp:ListItem Value="15:25">15:25</asp:ListItem>
                                <asp:ListItem Value="15:55">15:55</asp:ListItem>
                                <asp:ListItem Value="16:25">16:25</asp:ListItem>
                                <asp:ListItem Value="16:55">16:55</asp:ListItem>
                                <asp:ListItem Value="17:25">17:25</asp:ListItem>
                                <asp:ListItem Value="17:55">17:55</asp:ListItem>
                                <asp:ListItem Value="18:25">18:25</asp:ListItem>
                                <asp:ListItem Value="18:55">18:55</asp:ListItem>
                                <asp:ListItem Value="19:25">19:25</asp:ListItem>
                                <asp:ListItem Value="19:55">19:55</asp:ListItem>
                                <asp:ListItem Value="20:25">20:25</asp:ListItem>
                                <asp:ListItem Value="20:55">20:55</asp:ListItem>
                                <asp:ListItem Value="21:25">21:25</asp:ListItem>
                                <asp:ListItem Value="21:55">21:55</asp:ListItem>
                                <asp:ListItem Value="22:25">22:25</asp:ListItem>
                                <asp:ListItem Value="22:55">22:55</asp:ListItem>
                                <asp:ListItem Value="23:25">23:25</asp:ListItem>
                                <asp:ListItem Value="23:55">23:55</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-sm-2 form-group bg-dark">
                            <asp:Label ID="lbTotalGuest" runat="server" Text="Gäster" CssClass="col-form-label" ForeColor="White"></asp:Label>
                            <asp:DropDownList ID="ddTotalPerson" runat="server" CssClass="form-control">
                                <asp:ListItem Value="1">1</asp:ListItem>
                                <asp:ListItem Value="2">2</asp:ListItem>
                                <asp:ListItem Value="3">3</asp:ListItem>
                                <asp:ListItem Value="4">4</asp:ListItem>
                                <asp:ListItem Value="5">5</asp:ListItem>
                                <asp:ListItem Value="6">6</asp:ListItem>
                                <asp:ListItem Value="7">7</asp:ListItem>
                                <asp:ListItem Value="8">8</asp:ListItem>
                                <asp:ListItem Value="9">9</asp:ListItem>
                                <asp:ListItem Value="10">10</asp:ListItem>
                                <asp:ListItem Value="11">11</asp:ListItem>
                                <asp:ListItem Value="12">12</asp:ListItem>
                                <asp:ListItem Value="13">13</asp:ListItem>
                                <asp:ListItem Value="14">14</asp:ListItem>
                                <asp:ListItem Value="15">15</asp:ListItem>
                                <asp:ListItem Value="16">16</asp:ListItem>
                                <asp:ListItem Value="17">17</asp:ListItem>
                                <asp:ListItem Value="18">18</asp:ListItem>
                                <asp:ListItem Value="19">19</asp:ListItem>
                                <asp:ListItem Value="20">20</asp:ListItem>
                            </asp:DropDownList>
                        </div>
                        <div class="col-sm-2 form-group bg-dark" style="padding-top: 20px;">
                            <asp:Button ID="btnSearchAvailableRooms" runat="server" CssClass="btn btn-warning col-sm-12" Text="Sök" OnClick="btnSearchAvailableRooms_Click" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12 offset-sm-1">
                            <asp:GridView ID="gvAvailableRooms" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" GridLines="None"
                                CssClass="table table-responsive table-striped table-hover" Width="100%" ShowHeader="False" OnRowCommand="gvAvailableRooms_RowCommand">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:Image ID="imgRoomMainPic" runat="server" ImageUrl="~/Media/RoomPicturesGallery/Strandvagen/Bocander/boka_visning_office_01.jpg" CssClass="img-fluid rounded float-left" />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <h2>
                                                <asp:Label ID="lbRoomName" runat="server" Text='<%# Bind("RumName") %>'></asp:Label></h2>
                                            <small>
                                                <asp:Label ID="lbRoomDescription" runat="server" Text="Our office solutions at 7A Strandvägen areclassic rooms with a view over the water of Nybroviken/Artillerigatan or the park."></asp:Label></small>
                                            <hr />
                                            <span class="h6">Sitnning:</span>&nbsp;<asp:Label ID="lbRoomCapacity" runat="server" Text="3"></asp:Label><hr />
                                            <span class="h6">Hyra:</span>&nbsp;<asp:Label ID="lbRoomRent" runat="server" Text="330 SEK/hour"></asp:Label>
                                            <asp:CheckBox ID="cbRoomSelected" runat="server" Visible="false" />
                                            <span class="fa-pull-right">
                                                <asp:Button CssClass="btn btn-primary" ID="btnSelect" runat="server" CausesValidation="False" CommandName="Select" Text="BOKA" CommandArgument="<%# Container.DataItemIndex %>" UseSubmitBehavior="false" />
                                            </span>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="text-center d-none d-sm-block">
                        <asp:Button ID="btnGetSelectedRooms" runat="server" Text="Selected" CssClass="btn btn-dark" OnClick="btnGetSelectedRooms_Click" />
                        <asp:Label ID="lbList" runat="server"></asp:Label>
                    </div>
                </div>
            </div>
        </div>
    </asp:Content>
    

    Thursday, February 14, 2019 10:27 AM
  • User839733648 posted

    Hi shahid.majeed,

    I've tried your code in MasterPage and the button works well.

    It could trigger the event successfully.(The style may be mess because losing some css style)

    I suggest that you could use breakpoint to check whether the click evnet is triggered.

    And you could check F12 Developer Tools to see if there is any information helpful to you solve the issue.

    Reference:

    Use breakpoints in the Visual Studio debugger

    Introduction to F12 Developer Tools

    Best Regards,

    Jenifer

    Friday, February 15, 2019 8:32 AM
  • User839733648 posted

    Hi shahid.majeed,

    I've also made a test using the gvAvailableRooms_RowCommand event.

    And it also works well on my side in Masterpage.

    Default.aspx

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="server">
    ...
                    <div class="row">
                        <div class="col-sm-12 offset-sm-1">
                            <asp:GridView ID="gvAvailableRooms" runat="server" AutoGenerateColumns="False" DataKeyNames="Eid" GridLines="None"
                                CssClass="table table-responsive table-striped table-hover" Width="100%" ShowHeader="False" OnRowCommand="gvAvailableRooms_RowCommand">
                                <Columns>
                                    <asp:BoundField DataField="Eid" HeaderText="Eid" SortExpression="Eid" />
                                    <asp:TemplateField HeaderText="Ename" SortExpression="Ename">
                                        <EditItemTemplate>
                                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Ename") %>'></asp:TextBox>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Ename") %>'></asp:Label>
                                            <asp:Label ID="lbRoomDescription" runat="server" Text="Our office solutions at 7A Strandvägen areclassic rooms with a view over the water of Nybroviken/Artillerigatan or the park."></asp:Label></small>
                                    <hr />
                                            <span class="h6">Sitnning:</span>&nbsp;<asp:Label ID="lbRoomCapacity" runat="server" Text="3"></asp:Label><hr />
                                            <span class="h6">Hyra:</span>&nbsp;<asp:Label ID="lbRoomRent" runat="server" Text="330 SEK/hour"></asp:Label>
                                            <asp:CheckBox ID="cbRoomSelected" runat="server" Visible="false" />
                                            <span style="text-align: right; padding-right: 10px; display: block;">
                                                <asp:Button CssClass="btn btn-primary" ID="btnSelect" runat="server" CausesValidation="False" CommandName="Select" Text="BOKA" CommandArgument="<%# Container.DataItemIndex %>" UseSubmitBehavior="false" />
                                            </span>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="age" SortExpression="age">
                                        <EditItemTemplate>
                                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("age") %>'></asp:TextBox>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("age") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="sex" SortExpression="sex">
                                        <EditItemTemplate>
                                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("sex") %>'></asp:TextBox>
                                        </EditItemTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("sex") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </div>
                    </div>
    ...
    </asp:Content>
    
    

    Default.aspx.cs

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    BindGrid();
                }
            }
            string constr = ConfigurationManager.ConnectionStrings["EmployeeManagementConnectionString"].ConnectionString;
            private void BindGrid()
            {
                using (SqlConnection con = new SqlConnection(constr))
                {
                    string myquery = "SELECT * FROM [tb_info]";
                    SqlCommand cmd = new SqlCommand(myquery, con);
                    con.Open();
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    sda.Fill(ds);
                    gvAvailableRooms.DataSource = ds;
                    gvAvailableRooms.DataBind();
                    con.Close();
                }
            }
    
            protected void gvAvailableRooms_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                if (e.CommandName == "Select")
                {
                    var eid = gvAvailableRooms
                        .Rows[Convert.ToInt32(e.CommandArgument)]//find the row with the clicked index
                        .Cells[0]//find the index of the cell
                        .Text;//grab the text
                    ClientScript.RegisterClientScriptBlock(this.GetType(), "alert", "alert('Eid: " + eid + "');", true);
                }
            }

    result:

    Best Regards,

    Jenifer

    Tuesday, February 19, 2019 9:04 AM
  • User1487175000 posted

    Hi, I have no idea why it does not work for me :(.

    Tuesday, February 19, 2019 9:21 AM
  • User1341756031 posted

    Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, February 19, 2019 10:03 AM
  • User1487175000 posted

    Hi lingmaaki,

    once i move jquery link to my master page head section then its working. So i think move jquery in head section solve the problem.

    Thanks

    /Shahid

    Tuesday, February 19, 2019 10:15 AM