Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Daniel
155
Iggrid client side binding and empty table
posted

Hi,

I am using iggrid and client side binding to an existing HTML table, as in your example https://www.igniteui.com/help/iggrid-binding-to-html-table-data 

I am having some trouble when the HTML table has no data.

These are the approaches that I have tried:

1. No tbody segment. (as in <table><thead> ... </thead></table>)

 2. Empty tbody segment (as in <table><thead> ... </thead><tbody /></table>)

3. Empty body segment (as in <table><thead> ... </thead><tbody></tbody></table>)

The result in all of those cases is that I get 2 headers for each column. One is a plain HTML header and the other seems the Infragistics header. Also if sorting is enabled, I get some errors when clicking in those additional HTML headers " 'currentSortDirection' is null or not an object"

I used a test page where I just include the base ig.ui.min.css file, the theme file jquery.ui.custom.min.css, the javascript ig.ui.min.js file and jquery 1.5.1/jqueryUI 1.8.11

Is there any special way I should treat empty tables regarding iggrid client side binding? Is this scenario not supported or maybe I should avoid it until a next release?

 

Cheers,

Daniel

Parents
No Data
Reply
  • 12679
    posted

    Hello,

    Thank you for posting in the Community,

    I’ve been looking at your scenario and I run a test based on our samples and I confirm  that the grid works well with empty tables.

    1. $('#dataBindBtn').live({
    2.       click: function (e) {
    3.           var ds = new $.ig.DataSource({ type: "htmlTableDom", dataSource: $("#t1")[0] });
    4.           ds.dataBind();
    5.           $("#grid1").igGrid({
    6.               autoGenerateColumns: false,
    7.               columns: [
    8.                       { headerText: "Product ID", key: "ProductID", dataType: "number" },
    9.                       { headerText: "Product Name", key: "Name", dataType: "string" },
    10.                       { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
    11.                       { headerText: "Reorder Point", key: "ReorderPoint", dataType: "number" },
    12.                       { headerText: "Standard Cost", key: "StandardCost", dataType: "number" },
    13.                   ],
    14.               dataSource: ds,
    15.               height: '400px'
    16.           });
    17.       }
    18.   });

     Here's the table:

    1. <table id="grid1"> </table>

    The code above is from the demo samples installed on my machine "C:\Program Files (x86)\Infragistics\NetAdvantage 2011.2\jQuery\demos" Pleaes check them out, I belive that's the easies way to get started.

    Feel free to  contact me if you still have any issues.

     

Children