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> </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
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
Hi Nidhi,
Thank you for the shared solution with the community.
Regards,
Svetoslav Manchev
Telerik