javascript - how to use Jquery Datatables Ellipsis renderer for template field link button?

Question

When I am using that with Asp-bound field it's working perfectly

look column one is Ellipsed

But when using on template field link button it's returning blank

see it's blank I don't know what should I do to apply the same on the link button columns fields any suggestion?

my script for Eclipsed

function pageLoad() {
            var table = $('#gvTest  ').DataTable({
                select: true,
                pageLength: 15,
                lengthChange: false,
                scrollY: "400px",
                scrollX: true,
                scrollCollapse: false,
                order: [15],
                fixedColumns: true,
                columnDefs: [ 
                    { targets: 0, render: $.fn.dataTable.render.ellipsis(7, true) },
                    { targets: 1, render: $.fn.dataTable.render.ellipsis(10, true) },                        
                 ],
                fixedColumns:   {
                    leftColumns: 1,
                }
            });
            $('#BtnReport').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
                });
                var suid = ids;
                var usr = document.getElementById("lblUser").innerText;
                var url2 = "/report/FinalizedReport.aspx?UID=" + suid + "&" + "user=" + usr;
                window.open(url2, '_blank');
                 return false;
            });
            $('#btnAssign').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                 var usr = document.getElementById("lblUser").innerText;
                var url2 = "/PatientAssignment/PatientAssignPage.aspx?UID=" + suid + "&" + "user=" + usr;
                window.location.assign(url2);
                 return false;
            });
             $('#btnAttach').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/Attachment/PatientAttachmentPage.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
             $('#btnHistory').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var arun = ids;
                if (arun) {
                 var width = 700;
                 var height = 350;
                 var left = (screen.width - width) / 2;
                 var top = (screen.height - height) / 2;
                 var params = 'width=' + width + ', height=' + height;
                 params += ', top=' + top + ', left=' + left;
                 params += ', directories=no';
                 params += ', location=no';
                 params += ', menubar=no';
                 params += ', resizable=no';
                 params += ', scrollbars=no';
                 params += ', status=no';
                 params += ', toolbar=no';
                 var strWindowFeatures = params;
                 var URL = "/History/WriteHistory.aspx?";
                 var usr = document.getElementById("lblUser").innerText;
                 URL = URL + "pattUID=" + arun + "&" + "user=" + usr; +"&" + "url=" + location.href;
                 var win = window.open(URL, "_blank", strWindowFeatures);
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
              $('#btnEmergency').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnEM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $('#btnRemoveEm').click(function () {
           var ids = $.map(table.rows('.selected').data(), function (item) {
               return item[14];
              });
                var suid = ids;
                  if (suid) {
                      document.getElementById("pattUID").value = suid;
                      $('#hdnREM').trigger('click');
                      return false;
             }
             else {
                 var a = "Select  Patient";
                 alert(a);
             }
                 return false;
            });
            $.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
    var esc = function ( t ) {
        return t
            .replace( /&/g, '&' )
            .replace( /</g, '&lt;' )
            .replace( />/g, '&gt;' )
            .replace( /"/g, '&quot;' );
    };

    return function ( d, type, row ) {
        // Order, search and type get the original data
        if ( type !== 'display' ) {
            return d;
        }

        if ( typeof d !== 'number' && typeof d !== 'string' ) {
            return d;
        }

        d = d.toString(); // cast numbers

        if ( d.length < cutoff ) {
            return d;
        }

        var shortened = d.substr(0, cutoff-1);

        // Find the last white space character in the string
        if ( wordbreak ) {
            shortened = shortened.replace(/s([^s]*)$/, '');
        }

        // Protect against uncontrolled HTML input
        if ( escapeHtml ) {
            shortened = esc( shortened );
        }

        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
    };
};
         }

below is my grid view

<asp:GridView  ID="gvTest" Width="100%" runat="server"  CssClass="display" AutoGenerateColumns="False" >
   <Columns>
     <asp:BoundField  DataField="PatientID"  HeaderText="Patient ID" >
     </asp:BoundField>
     <asp:TemplateField   HeaderText="Patient Name" SortExpression="PatientName">
    <ItemTemplate  >                
       <asp:LinkButton  ID="lnkVwr"   Text='<%#Eval("PatientName") %>'   OnClientClick = "return imgViewer(this)"  runat="server"    ></asp:LinkButton
       </ItemTemplate>
       </asp:TemplateField>
    </Columns>
 </asp:GridView>

How can I use this on link button field? Is there any way to do that?

Answer 1

A link in the GridView should look like this:

<a onclick="return imgViewer(this);" id="lnkVwr" href="javascript:__doPostBack(&#39;ctl00$gvTest$ctl11$lnkVwr&#39;,&#39;&#39;)">VDWWD</a>

But after Ellipsis, it looks like this:

<span class="ellipsis" title="<a onclick=&quot;return imgViewer(this);&quot; id=&quot;lnkVwr&quot; href=&quot;javascript:__doPostBack('ctl00$gvTest$ctl11$lnkVwr','')&quot; style=&quot;color:#000000!important&quot;>VDWWD</a>"><a&#8230;< span=""></a&#8230;<></span>

As you can see, it made a complete mess of the HTML and it's no wonder the browser does not know what to do with it.

On top of that, it seems that this function doesn't do anything or does not gets called:

.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml )

Take a look on this page how it is done.

I made the following snippet. It checks if an href is present in the string and if there is, it skips the trimming of the string.

<script type="text/javascript">
    function pageLoad() {
        var table = $('#gvTest').DataTable({
            fixedColumns: true,
            columnDefs: [
                { targets: 0, render: $.fn.dataTable.render.ellipsis() },
                { targets: 1, render: $.fn.dataTable.render.ellipsis() },
            ],
        });
    }

    $.fn.dataTable.render.ellipsis = function () {
        return function (data, type, row) {
            if (type !== 'display') {
                return data;
            }

            if (data.length > 10 && !data.includes("href")) {
                return data.substr(0, 10) + '…';
            } else {
                return data;
            }
        }
    };
</script>