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:

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 ):

Hello svejk,

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

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.

Thanks Radoslav,

The problem I am facing is that the table is empty and will remain empty when the grid is binded. (your examples starts with an empty table but it is populater using the AdventureWorks JSON before the grid is binded)

So this will be the table HTML at the time the grid needs to be binded: (Sorry but I do not know how to insert HTML snippets in a forum post)

table id=t1 
   theader 
      tr th Product Id /th th Product Name /th th Product Number /th /tr 
   /theader 
   tbody /tbody 
/table 

Manually creating a datasource and assigning it to the grid does not creates the grid I was expecting. If I comment the lines in the $(window).load() function in your example, then I get an empty grid, without any column headers:

$('#dataBindBtn').live({
	click: function (e) {
	    var ds = new $.ig.DataSource({ type: "htmlTableDom", dataSource: $("#t1")[0] });
	    ds.dataBind();
	    $("#grid1").igGrid({
	        autoGenerateColumns: true,
	        dataSource: ds,
	        height: '400px'
	    });
	}
});

Also when using this approach (manually creating the datasource), if the table is not empty I get the column header names as "1", "2", "3" instead of "Product Id", "Product Name", "Product Number" (as were set in the theader element of table t1).

Do you know if there is a way I can bind a grid to an empty html table like "t1" above, without manually specifying the columns in the igGrid function?

Hello,

I’ve tested a few scenarios:

1.       Bind the grid to an existing table which I confirm that it works as is shown  in our examples (in case there is well formatted html table)

2.       I’ve tested initializing the grid with empty table  (<table id=’t2’> </table>), then giving as a datasource of the grid another existing table which works fine as well.

3.       Initializing the grid with empty table and do not providing any datasource , then upon button click bind the grid with existing table works as well.  

4.       If I bind the grid without specifying the columns  to html table it doesn't work, I will contact our dev guys about this:

here is the code:

Here's the tables:

Many thanks for that, Radoslav

I am actually generating some MVC views from a custom tool, ideally I would have avoided the definition of the columns in the grid initialization.

Its not the end of the world really, but I wanted to check if I was doing something wrong in the grid initialization or if that scenario wasnt currently supported and I should provide the columns definition instead.

I Will keep an eye open for any response from the dev team.

Cheers,

Daniel

Hello Daniel,

Sorry for the delay, I have a word from engineering team about this. It's not supported scenario binding the grid to a html table without defining the columns first.

Hi 

i have this in my code  but somhow it does not load the new data to the grid

i don't understand, it gets the new data but fail to load it

please help:

$("#grid").igGrid({

......

features: [
   { name: "Filtering", mode: "advanced", dataFiltering: handler },

......

function handler(event, args) {

$.ajax({
   url: "CLUSTER_ListByFiter",
   type: "POST",
   data: jtSorting='',
   contentType: 'application/json; charset=utf-8',
   success: function (data) {
   if (data.Result == "OK")
   {
         $("#grid").igGrid("dataSourceObject", data.Records);
         $("#grid").igGrid("dataBind");
   }
   else
         alert(data.Result);
   }
});
//alert('kookoo After');
}

SERVER:

[HttpPost]
public JsonResult CLUSTER_ListByFiter(string ObjId = "", string InstanceName = "", int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = "")
{
try
{
int recordsCount;
List<CLUSTER> records;
if (ObjId != "")
{
recordsCount = _repository.ClusterRepository.GetCountByFilter("CLUSTER_ID", ObjId.ToString());
records = _repository.ClusterRepository.GetByFilter("CLUSTER_ID", ObjId.ToString(), jtStartIndex, jtPageSize, jtSorting);
}
else
{
recordsCount = _repository.ClusterRepository.GetCount();//.GetCountByFilter("INSTANCE_NAME", InstanceName);
records = _repository.ClusterRepository.GetByFilter("CLUSTER_NAME", "", jtStartIndex, jtPageSize, jtSorting);
}

return Json(new { Result = "OK", Records = records, TotalRecordCount = recordsCount });
}
catch (Exception ex)
{
return Json(new { Result = "ERROR", Message = ex.Message });
}
}