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
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.
Here's the 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.
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?
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:
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 }); } }
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.
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.