Iggrid client side binding and empty table

155

Daniel posted over 12 years ago

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

12679

[Infragistics] Radoslav Minchev posted over 12 years ago in reply to Daniel
Hello svejk,

Thanks for the clarifying information. I've slightly modified the attached example, hope it helps, that's the code:

<script type="text/javascript">

    var adventureWorks;

    var ds = null;

    $(window).load(function () {

        $("#dataBindBtn").igButton({ labelText: $("#dataBindBtn").val() });

        ds = new $.ig.DataSource({ type: "json",

                                   dataSource: adventureWorks,

                                   responseDataKey: "Records" });

                                   ds.dataBind();

        $("#t1 tbody").empty();

        $("#tableTemplate").tmpl(ds.dataView()).appendTo("#t1 tbody");

    });

    $('#dataBindBtn').live({

        click: function (e) {

            var ds = new $.ig.DataSource({ type: "htmlTableDom", dataSource: $("#t1")[0] });

            ds.dataBind();

            $("#grid1").igGrid({

                autoGenerateColumns: true,

                /*

                columns: [

                { headerText: "Product ID", key:"ProductID" , dataType:"number"},

                { headerText: "Product Name", key: "Name", dataType: "string" },

                { headerText: "Product Number", key: "ProductNumber", dataType: "string" },

                { headerText: "Reorder Point", key: "ReorderPoint", dataType: "number" },

                { headerText: "Standard Cost", key: "StandardCost", dataType: "number" },

                ],*/

                dataSource: ds,

                height: '400px'

            });

        }

    });

</script>

When you unzip the attachment, please put it in the following location in order to work:

"C:\Program Files (x86)\Infragistics\NetAdvantage 2011.2\jQuery\demos\igGrid" because there're some css and js dependencies needed.
TableDOM_Test.zip
Cancel
Reply

Cancel
155

Daniel posted over 12 years ago in reply to [Infragistics] Radoslav Minchev
Thank you Radoslav, but I completely forgot to mention in the original post that I was auto-generating the columns!

Let me clarify it.

This is the grid configuration:

$("#t1").igGrid({ autoGenerateColumns: true, defaultColumnWidth: 150, features: [ { name: 'Sorting', type: 'local' } ] });

The following table is displayed correctly:

Product ID Product Name Product Number

1 Adjustable Race AR-5381

While the following empty table is not (It has theader elements, so I was expecting the grid to use that and the default width for the grid column headers ):

Product ID Product Name Product Number

PS. How do I insert the HTML and code snippets?
Cancel
Reply

Cancel
12679

[Infragistics] Radoslav Minchev posted over 12 years ago
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.

$('#dataBindBtn').live({

      click: function (e) {

          var ds = new $.ig.DataSource({ type: "htmlTableDom", dataSource: $("#t1")[0] });

          ds.dataBind();

          $("#grid1").igGrid({

              autoGenerateColumns: false,

              columns: [

                      { headerText: "Product ID", key: "ProductID", dataType: "number" },

                      { headerText: "Product Name", key: "Name", dataType: "string" },

                      { headerText: "Product Number", key: "ProductNumber", dataType: "string" },

                      { headerText: "Reorder Point", key: "ReorderPoint", dataType: "number" },

                      { headerText: "Standard Cost", key: "StandardCost", dataType: "number" },

                  ],

              dataSource: ds,

              height: '400px'

          });

      }

  });

Here's the table:

<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.
Cancel
Reply

Cancel
24671

Alexander Todorov posted over 12 years ago

hi,

Could you let me know what your grid configuration looks like? what does your dataSource option point to ?

Thanks,

Angel
Cancel
Reply

Cancel