[Solved] Bootstrap DataTable row Button Click not working in Mobile View in ASP.Net

Last Reply 4 months ago By pandeyism

Posted 5 months ago

hi...

bootstrap edit modal in datatable is not working in mobile view. in normal view we can bind data to edit controls in modal from datatable row but in mobile view(with + and -.to expand and collapse),

when edit row is clicked modal pop up opens but data is not available in bootstrap modal controls.

how can i solve this?

Edit Update jQuery DataTables row in Bootstrap Modal Popup using Ajax JSON and WebService in ASP.Net

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <!-- Bootstrap --> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title></title> 
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <script src="../js/bootstrap.min.js"></script>
    <script  src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script  src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script  src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
             <%--   url: '<%= Page.ResolveUrl("/WebServicedemo.asmx/GetFiles")%>',--%>
                url: "/WebServicedemo.asmx/GetFiles",
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        "processing": true,
                        "paging": true,
                        "searching": { "regex": true },
                        data: data,
                        columns: [
                            { 'data': 'ID' },
                            { 'data': 'F_Name' },
                            { 'data': 'L_Name' },
                              { 'data': 'Email_ID' },
                          
                            {
                                "data": null,
                                "defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
                            }
                        ]
                    });
                }, error: function (response) {
                    alert(response.responseText);
                }
            });

            $('body').on('click', '[id*=btnEdit]', function () {
                var data = $(this).parents('tr').find('td');
                $('[id*=tbtUpdate]').show();
                var id = data.eq(0).html();
                var fname = data.eq(1).html();
                var lname = data.eq(2).html();
                var email = data.eq(3).html();
                $('[id*=txtId]').val(id);
                $('[id*=txtName]').val(fname);
                $('[id*=txtLink]').val(lname);
                $('[id*=txtemail]').val(email);
            });
        });
    </script>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
    <table id="tbtUpdate" class="table">
        <tr>
            <td>Id</td>
            <td><asp:TextBox ID="txtId" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>f_name</td>
            <td><asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td>l_name</td>
            <td><asp:TextBox ID="txtLink" runat="server"></asp:TextBox></td>
        </tr>
         <tr>
            <td>email</td>
            <td><asp:TextBox ID="txtemail" runat="server"></asp:TextBox></td>
        </tr>
        <tr>
            <td align="center"><asp:Button Text="Update" runat="server" class="btn btn-primary" /></td>
            <td></td>
        </tr>
    </table>
    <br />
    <div style="width: 100%; border: 1px solid black; padding: 3px">
        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>f_Name</th>
                    <th>l_name</th>
                     <th>emailid</th>
                        <th>Edit</th>
                </tr>
            </thead>
        </table>
    </div>
    </form>
</body>
</html>

 

    public class File
    {
        public int ID { get; set; }
        public string F_Name { get; set; }
       public string L_Name { get; set; }
       public string Email_ID { get; set; }
    }

    [System.Web.Services.WebMethod]
    public void GetFiles()
    {
        string cs = ConfigurationManager.ConnectionStrings["conn"].ConnectionString;
        List<File> files = new List<File>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT ID,F_Name,L_Name,Email_ID FROM Employee", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                File file = new File();
                file.ID = Convert.ToInt32(rdr["ID"]);
                file.F_Name = rdr["F_Name"].ToString();
                file.L_Name = rdr["L_Name"].ToString();
                file.Email_ID = rdr["Email_ID"].ToString();
                files.Add(file);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(files));
    }

 

You are viewing reply posted by: pandeyism 4 months ago.
Posted 4 months ago Modified on 4 months ago

Hi jovceka,

Refer below sample.

You need to check width of windows and according to that have to find tr and td.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"
        type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({
                url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $('#datatable').dataTable({
                        "processing": true,
                        "paging": true,
                        "searching": { "regex": true },
                        "responsive": true,
                        data: data,
                        columns: [
                            { 'data': 'Id' },
                            { 'data': 'Name' },
                            {
                                'data': 'Data',
                                'render': function (Data) {
                                    if (!Data) {
                                        return 'N/A';
                                    }
                                    else {
                                        var img = 'data:image/png;base64,' + Data;
                                        return '<img src="' + img + '" height="50px" width="50px" />';
                                    }
                                }
                            },

                            {
                                "data": null,
                                "defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
                            }
                        ]
                    });
                }, error: function (response) {
                    alert(response.responseText);
                }
            });

            $('body').on('click', '[id*=btnEdit]', function () {
                var data;
                if ($(window).width() > 320) {
                    data = $(this).parents('tr').find('td');
                } else {
                    data = $(this).parents('tr').prev().eq(0).find('td');
                }
                var id = data.eq(0).html();
                var fname = data.eq(1).html();
                var lname = data.eq(2).html();
                var email = data.eq(3).html();
                $('[id*=txtId]').val(id);
                $('[id*=txtName]').val(fname);
                $('[id*=txtemail]').val(email);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="tbtUpdate" class="table">
        <tr>
            <td>
                Id
            </td>
            <td>
                <asp:TextBox ID="txtId" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Name
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Data
            </td>
            <td>
                <asp:TextBox ID="txtLink" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td align="center">
                <asp:Button ID="Button1" Text="Update" runat="server" class="btn btn-primary" />
            </td>
            <td>
            </td>
        </tr>
    </table>
    <br />
    <div style="width: 100%; border: 1px solid black; padding: 3px">
        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
            cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>
                        f_Name
                    </th>
                    <th>
                        Data
                    </th>
                    <th>
                        Edit
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    </form>
</body>
</html>

WebService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{

    public class File
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Data { get; set; }
    }

    [WebMethod]
    public void GetFiles()
    {
        string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        List<File> files = new List<File>();
        using (SqlConnection con = new SqlConnection(cs))
        {
            SqlCommand cmd = new SqlCommand("SELECT TOP 2 id,Name,Data FROM tblFiles WHERE ContentType = 'image/jpeg'", con);
            cmd.CommandType = CommandType.Text;
            con.Open();
            SqlDataReader rdr = cmd.ExecuteReader();
            while (rdr.Read())
            {
                File file = new File();
                file.Id = Convert.ToInt32(rdr["id"]);
                file.Name = rdr["Name"].ToString();
                file.Data = Convert.ToBase64String((byte[])rdr["Data"]);
                files.Add(file);
            }
        }
        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(files));
    }
}

Screenshot