+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Datatables.js in widget not working

Datatables.js in widget not working

6 posts, 0 answered
  1. Belinda
    Belinda avatar
    12 posts
    Registered:
    26 Sep 2013
    19 Feb 2015
    Link to this post

    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="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
    <link href="http://cdn.datatables.net/1.10.5/css/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!

  2. Belinda
    Belinda avatar
    12 posts
    Registered:
    26 Sep 2013
    18 Mar 2015
    Link to this post
    Anyone have an idea on what is going wrong with this?? Any help would be greatly appreciated.
  3. Nidhi
    Nidhi avatar
    40 posts
    Registered:
    20 Jul 2010
    12 Aug 2015
    Link to this post

    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??

  4. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    06 Dec 2016
    14 Aug 2015
    Link to this post
    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
     
  5. Nidhi
    Nidhi avatar
    40 posts
    Registered:
    20 Jul 2010
    17 Aug 2015 in reply to Svetoslav Manchev
    Link to this post
    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 : http://requirejs.org/docs/api.html#config
  6. Svetoslav Manchev
    Svetoslav Manchev avatar
    735 posts
    Registered:
    06 Dec 2016
    17 Aug 2015
    Link to this post
    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
     
6 posts, 0 answered