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 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.
Thanks in advance,Martin PavlovInfragistics, Inc.
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.
Were you able to resolve your issue? If not, can you please look at the sample that I've attached in my previous post.
Best regards,Martin PavlovInfragistics, Inc.