Bind Image in Image control on Bootstrap DataTable row Button Click using jQuery in ASP.Net

Last Reply one month ago By jovceka

Posted one month ago

i am able to bind text from datatable row to edit controls. how can i bind image

reference from 

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

<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 image = data.eq(3).html();
                $('[id*=txtId]').val(id);
                $('[id*=txtName]').val(fname);
               
		  $("#imageview").attr('src', 'data:image/jpeg;base64,' + image);
            });
        });
    </script>
</head>

 

Posted one month ago

hi

replace 

var image = data.eq(3).html();

and

$("#imageview").attr('src', 'data:image/jpeg;base64,' + image);

with

$('#imageview').attr('src',data.find('img').attr('src'));

and we can load image from datatable table row to image control outside datatable.

thank you.