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 

Hello David,

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 Pavlov
Infragistics, 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.

Hello David,

Can you provide a sample for me to investigate.

Thanks in advance,
Martin Pavlov
Infragistics, 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>

<script>

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>

<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: "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"
}

]

});

}

});

});

</script>

Hello David,

I still have no success to reproduce it. I'm attaching my sample for your reference.

Best regards,
Martin Pavlov
Infragistics, Inc.

Hello David,

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 Pavlov
Infragistics, Inc.