Page 1 of 1

alternative datagrid with better performance: datatables.net

Posted: Wed Oct 12, 2016 7:22 am
by Sesztak
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

Re: alternative datagrid with better performance: datatables.net

Posted: Tue Oct 25, 2016 6:05 am
by JS-Support @Userware
Dear Péter,

Thank you for your message.

Ok, I have looked into it. The issue was due to the fact that, when adding the element to the visual tree, CSHTML5 overrides the "class" property of the outer element. Therefore, the "stripe hover cell-border order-column" was lost. I noticed it by comparing the HTML tree (using the F12 developer tools) with that produced by the main sample at https://datatables.net/

You can easily fix the issue by placing a <div>...</div> around your <table> tag. This way, the CSHTML5 engine will modify the "class" property of the div instead of that of the <table>:

Code: Select all

string html = @"<div><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></div>";


The good news is that this change also makes the control work inside the Simulator.

Please find attached a working sample.

Looking forward to seeing your progress.

Thanks again.
Regards,
JS-Support

Re: alternative datagrid with better performance: datatables.net

Posted: Tue Oct 25, 2016 11:12 am
by Sesztak
Dear JS-Support,

Thanks for your kind help,
I've tried: with the plus surrounding extra <div> tag works perfectly !

Thanks again !

I hope your sample mini datatable program helps others to get a free & high performance datagrid.
I recommend to CSHTML5 & community as well as a recommended 3rd party datagrid.

Br,
P.