Datatables.js in widget not working - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Datatables.js in widget not working

  • Datatables.js in widget not working
  • Hi-

    Trying to implement the Datatables jquery plugin into a template for a listing widget.  This is what I have in the template:

    <%@ Control Language="C#" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.PublicControls.BrowseAndEdit" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.ContentUI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Comments" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI.Fields" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="sf" Namespace="Telerik.Sitefinity.Web.UI" Assembly="Telerik.Sitefinity" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

      
    <sf:ResourceLinks id="resLinks" runat="server" UseEmbeddedThemes="true" Theme="Basic">
    <sf:ResourceFile JavaScriptLibrary="JQuery" />
    </sf:ResourceLinks>
        
    <script src="cdn.datatables.net/.../script>
    <link href="cdn.datatables.net/.../jquery.dataTables.css" rel="stylesheet" />
      
    <telerik:RadListView ID="dynamicContentListView" ItemPlaceholderID="ItemsContainer" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false">
        <LayoutTemplate>
          <p>&nbsp;</p>
       <div style="clear:both;" />
          <div>
     
          
            <table id="grid" class="stripe" style="float:left;width:100%;">
                <colgroup>
                        <col style="width:240px;"/>
                        <col style="width:240px;" />
                     <col style="width:100px;" />
                        <col style="width:60px;" />
                        <col style="width:100px;"/>
                        <col style="width:100px;" />
                </colgroup>
                    
                    <thead>
                        <tr>
                            <th data-field="Title">Course Title</th>
                            <th data-field="CourseProviderName">Course Provider</th>
                            <th data-field="CourseType">Course Type</th>
                            <th data-field="CEUs">CEUs</th>
                            <th data-field="ExpiresOn">Expiration</th>
                            <th data-field="RegistrationURL">Url</th>
                        </tr>
                    </thead>
                    <tbody>
                <asp:PlaceHolder ID="ItemsContainer" runat="server" />
              </tbody>
            </table></div>
          <br/><br/>
        </LayoutTemplate>
        <ItemTemplate>
          <tr>
            <td>
             <%# Eval("Title")%>
            </td>
            <td>
              <%# Eval("CourseProviderName")%>
            </td>
            <td>
              <%# Eval("CourseType")%>
            </td>
            <td>
              <%# Eval("CEUs")%>
            </td>
            <td>
                <%# Eval("ExpiresOn", "0:MM/dd/yyyy") %>
            </td>
          <td>
            <asp:HyperLink NavigateUrl='<%# Eval("RegistrationURL")%>' Visible='<%# string.IsNullOrEmpty(Eval("RegistrationURL").ToString()) ? false : true %>' Text="Website" runat="server" target="_blank" />
            </td>
          </tr>
         
        </ItemTemplate>
    </telerik:RadListView>
    <sf:Pager id="pager" runat="server"></sf:Pager>
    <asp:PlaceHolder ID="socialOptionsContainer" runat="server"></asp:PlaceHolder>
      
        <script>
          $(document).ready(function()
           
        $('#grid').dataTable();
            $('#grid th').css('border-top','1px solid #000000');
            $('.dataTables_filter').css('margin-bottom','5px');
           

          );
        </script> 
      
    But Sitefinity is overriding the Datatables jquery and neither functions or css is being applied. Anyone have any ideas what is going on.  (It shows fine in Preview mode BTW)

     

    Thanks!

  • Anyone have an idea on what is going wrong with this?? Any help would be greatly appreciated.
  • I am having the same problem. Page works fine if I am not logged into sitefinity. If I am logged in and view the public page, I get Uncaught TypeError: $(...).DataTable is not a function error.

     

    Anyone knows how to fix this??

  • Hi Nidhi,

    What is the jQuery version used, as Sitefinity loads jQuery 1.11.2 since version 8.0 and 1.8.3 on 6.x and 7.x. which could caused conflict.

    If so you can check this article:
    http://docs.sitefinity.com/for-developers-avoid-conflicts-when-loading-multiple-versions-of-jquery

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  • Hi Nidhi,

    Thank you for the shared solution with the community.

    Regards,
    Svetoslav Manchev
    Telerik
     
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
     
  • It turns out the conflict was not because of jQuery but because when logged in, SF loads requirejs and datatables doesn't support AMD. So the solution was a requirejs config for datatbles. You can get more details here : requirejs.org/.../api.html