Hello, im new to infragistics and im having trouble getting my igGrid to render properly in the second panel of my igSplitter. I followed the examples about the nested splitter and basic vertical splitter as best i could.
here is my code.
<div id="splitter"> <div><ul id="tree"></ul></div> <div><table id="gridSplit"></table></div> </div>
<script>
var list = [{ Text: "IgGrid", ID: "1", Data: [{ Name: "data1", Nid: "1", Year: "1234" }, { Name: "data2", Nid: "2", Year: "1234" }, { Name: "data3", Nid: "3", Year: "1234" }, { Name: "data4", Nid: "4", Year: "1234" }] }, { Text: "IgHiGrid", ID: "2", Data: [{ Name: "data5", Nid: "5", Year: "1234" }, { Name: "data6", Nid: "6", Year: "1234" }, { Name: "data7", Nid: "7", Year: "1234" }, { Name: "data8", Nid: "8", Year: "1234" }] }];
$(function () { $("#splitter").igSplitter({ height: "300px", panels: [{ size: 160, min: 100, max: 250 }] }); $('#tree').igTree({
dataSource: list, dataSourceType: "json", bindings: { textKey: "Text", valueKey: "ID", childDataproperty: "Data" } });
$("#tree").on("igtreeselectionchanged", function (sender, eventArgs) { var node = eventArgs.selectedNodes[0]; if (node.data.Data) { $("#gridSplit").igGrid({ width: "100%", height: "100%", dataSource: node.data.Data, dataSourceType: "json", autoGenerateColumns: false, primaryKey: "Name", columns: [ { headerText: "ID", key: "Nid", dataType: "number" }, { headerText: "Name", key: "Name", dataType: "string" }, { headerText: "year", key: "Year", dataType: "date" }, ], }); }
});
}); </script>
Any help or advice would be appreciated , thanks.
Hello David,
What is the issue that you observe. What I can see from your code is that the igGrid gets a horizontal scroll bar when splitter is re-sized to the right. If this is the issue then set widths in percents to your grid columns.
Hope this helps,Martin Pavlov
The main problem i seem to be having is that when i have the igGrid in the igSplitter rendered on the screen and i decrease the browser page width , the grid disappears but return if i increase the browser page width, it reappears
I don't seem to reproduce this issue. Which browser are you using? Can you try my sample on your end to see if you can replicate it.
Thanks in advance,Martin PavlovInfragistics, Inc.
I am testing on IE, chrome and firefox. The code example you send me work on my machine. The way i have mine set up is I have this code in a partial view , and im calling it on a main view , and whenever i click a button, it preforms an AJAX call to render my partial view inside a div on my main view.
Can you provide a sample for me to investigate.
Main view:
<button id="partial1b" value="Load Grid" >load grid</button><button id="partial2b"value="Load HiGrid" >load higrid</button><button id="partial3b"value="Load SplitGrid" >load splitgrid</button><div id="partial1" style="height:300px;" ></div>
var w = $(window).width(); $(window).resize(function () { var w = $(window).width(); $('#partial1').css('width', w); });
$("#partial1b").click(function (e) { $.ajax({ type: 'POST', url:' @Url.Action("LoadGrid","MainMenu")', success: function (data) { var test = data; $('#partial1').html( data); } }); });
$("#partial2b").click(function (e) { $.ajax({ type: 'POST', url: ' @Url.Action("LoadHiGrid","MainMenu")', success: function (data) { var test = data; $('#partial1').html(data); } }); });
$("#partial3b").click(function (e) { $.ajax({ type: 'POST', url: ' @Url.Action("LoadTreeGrid","MainMenu")', success: function (data) { var test = data; $('#partial1').html(data); } }); });
</script>
Partial view:
<div id="splitter" style="overflow:auto;"> <div> <ul id="tree"></ul> </div> <div id="gridDiv" style="overflow:auto;"> <table id="gridSplit"></table> </div> </div>
$(function () { $("#splitter").igSplitter({ height: "100%", width: "100%", panels: [{ size:"10%", min: 100 ,max:250 }], }); $('#tree').igTree({
dataSource: list, dataSourceType: "json", bindings: { textKey: "Text", valueKey: "ID", //childDataproperty: "Data" } });
$("#tree").on("igtreeselectionchanged", function (sender, eventArgs) { var node = eventArgs.selectedNodes[0]; if (node.data.Data) { $("#gridSplit").igGrid({ width: "100%", height: "100%", dataSource: node.data.Data, dataSourceType: "json", autoGenerateColumns: true, // rest: true, primaryKey: "Nid", columns: [ { headerText: "ID", key: "Nid", dataType: "number", }, { headerText: "Name", key: "Name", dataType: "string", }, { headerText: "year", key: "Year", dataType: "date", }, ], features: [ { name: "Sorting", type: "local", applySortedColumnCss :false, mode: "single" } ] }); }
I still have no success to reproduce it. I'm attaching my sample for your reference.
Best regards, Martin Pavlov Infragistics, Inc.