Dear JS-Support,
I need your help:
Background: I would like to share with CSHTML5 community an alternative datagrid with better performance: https://datatables.net
(free, open source, very mature high performance solution, strong community support and with comprehensive documentation).
Our problem is: everything is working perfectly, EXCEPT: no styling !!
Our code skeleton:
At page load:
await CSHTML5.Interop.LoadJavaScriptFile("ms-appx:///Client/javascripts/jquery-3.1.1.min.js"); // DataTable dependency
CSHTML5.Interop.ExecuteJavaScript(@"jQuery.noConflict()");
await CSHTML5.Interop.LoadCssFile("ms-appx:///Client/javascripts/datatables.min.css");
await CSHTML5.Interop.LoadJavaScriptFile("ms-appx:///Client/javascripts/datatables.min.js");
Under custom control (public class DataTableControl : Control) constructor:
// note: init with custom unique id : 'table_id'
public DataTableControl()
{
string html = @"<table id=""table_id"" class=""stripe hover cell-border order-column"" cellspacing=""0"" width=""100%""><thead><tr><th>Firstname</th><th>Lastname</th><th>Age</th></thead></table>";
CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, html);
}
To test:
-init DataTable: // note: you must use the same unique id : 'table_id' as set under SetHtmlRepresentation
CSHTML5.Interop.ExecuteJavaScriptAsync(@"jQuery(document).ready( function () {
jQuery('#table_id').DataTable();
} );");
-put some data from code behind:
CSHTML5.Interop.ExecuteJavaScriptAsync(@"var table = jQuery(""#table_id"").DataTable();
table.row.add( [ 1, 2, 3 ] ).draw();
");
So, the problem is: stripe (means alternate zebra striper), hover (row color change when mouse hover above a row), cell-border (means border line around cells) doesn't work at all !! (
Seems like under the SetHtmlRepresentation string this parts is not working -and we do not no way ?? -is it a problem/bug with SetHtmlRepresentation or a wrong order of initialisation (I mean first the DataTableControl loaded and only after that is jQuery and DataTable css and js) or other problem/misuse.
Would you be so kind to help us to find a solution for this problem ?
Really waiting for your kind help and for your cooperation,
Have a nice day !
Péter