sub grid not displaying properly

[powenMember]

I have some code that I have been working on (enclosed below) that is experiencing some odd behavior. The grid is rendered properly on load. However, when the sub grid is selected for display the main grid rows beneath it disappear. when the sub grid is unselected and reselected the rows below it are rendered properly. Any thoughts on why this is happening or a better way to do this? Here is the code with some example data:

NC GENES

var parentdata={"data":[{"BinType":"Diagnostic","BinName":"Breast Cancer","type":"del","tag":null,"acc_num":null,"loc_var_id":"8801267","hgnc_gene":"SDHB","Class":"F","variant_effect":"intron","max_allele_freq":0.506629,"HGVSgenomic":null,"Verify":1,"Complete":null,"Confirmed":null},{"BinType":"Diagnostic","BinName":"Breast Cancer","type":"del","tag":null,"acc_num":null,"loc_var_id":"8801269","hgnc_gene":"SDHB","Class":"F","variant_effect":"intron","max_allele_freq":0.471008,"HGVSgenomic":null,"Verify":null,"Complete":null,"Confirmed":null},{"BinType":"Diagnostic","BinName":"Breast Cancer","type":"ins","tag":null,"acc_num":null,"loc_var_id":"8942007","hgnc_gene":"EPCAM","Class":"F","variant_effect":"intron","max_allele_freq":0.114607,"HGVSgenomic":null,"Verify":null,"Complete":null,"Confirmed":null}]};
var detaildata={"data":[{"ID":13677,"loc_var_id":"8801267","Class":"F","transcr":"NM_003000.2","loc_type":"intron","strand":"-","intron_exon_dist":680,"variant_effect":"intron","HGVScds":null,"HGVStranscript":null,"HGVSprotein":null},{"ID":17405,"loc_var_id":"8801269","Class":"F","transcr":"NM_003000.2","loc_type":"intron","strand":"-","intron_exon_dist":-3576,"variant_effect":"intron","HGVScds":null,"HGVStranscript":null,"HGVSprotein":null},{"ID":15821,"loc_var_id":"8942007","Class":"F","transcr":"NM_002354.2","loc_type":"intron","strand":"+","intron_exon_dist":1057,"variant_effect":"intron","HGVScds":null,"HGVStranscript":null,"HGVSprotein":null}]};
$(document).ready(function () {
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'BinType'},
            { name: 'BinName'},
            { name: 'type'},
            { name: 'tag'},
            { name: 'acc_num'},
            { name: 'loc_var_id'},
            { name: 'hgnc_gene'},
            { name: 'Class'},
            { name: 'variant_effect'},
            { name: 'max_allele_freq'},
            { name: 'HGVSgenomic'},
            { name: 'Verify'},
            { name: 'Complete'},
            { name: 'Confirmed'}
        ],
        id: 'loc_var_id',
        localdata: parentdata,
        root: 'data',
        async: false,
        updaterow: function (rowid, rowdata)
        {
		var data = "update=true&roleID=9&" + $.param(rowdata);
		$.ajax({
           dataType: 'json',
           url: 'BinData.php',
           data: data,
           success: function (data, status, xhr) {}});
        }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    dataAdapter.dataBind();
    var detailsource =
    {
        datatype: "json",
        datafields: [
            { name: 'ID'},
            { name: 'loc_var_id'},
            { name: 'Class'},
            { name: 'transcr'},
            { name: 'loc_type'},
            { name: 'strand'},
            { name: 'intron_exon_dist'},
            { name: 'variant_effect'},
            { name: 'HGVScds'},
            { name: 'HGVStranscript'},
            { name: 'HGVSprotein'}
        ],
        id: 'ID',
        localdata: detaildata,
        root: 'data',
        async: false
    };
    var dataAdapterSub = new $.jqx.dataAdapter(detailsource);
    dataAdapterSub.dataBind();
    var initrowdetails = function (index) 
    {
    	var record = $("#jqxgrid").jqxGrid('getrowdata', index);
    	var id = record.uid;
    	var grid = $($.find('#grid' + index));
    	var detailsbyidarr = new Array();
		var i=0;
		var records = dataAdapterSub.records;
		var length = records.length;
		var found = false;
		for (var j = 0; j < length; j++) 
		{
			var detail = records[j];
			if(detail.loc_var_id == id)
			{
				detailsbyidarr[i++] = detail;
				found = true;
			}
			else if(found == true)
			{
				break;
			}
		}
    	var detailssource = 
    	{
    		datatype: "array",
    		localdata: detailsbyidarr
    	}
    	if (grid != null) 
    	{
    		grid.jqxGrid(
    		{ source: detailssource, theme: 'darkblue', width: 690, height: 150,
    			columns: [
    			{ text: 'Class', datafield: 'Class', width: 50},
    			{ text: 'transcr', datafield: 'transcr', width: 110},
    			{ text: 'Loc type', datafield: 'loc_type', width: 70},
    			{ text: 'strand', datafield: 'strand', width: 50},
    			{ text: 'Intron exon dist', datafield: 'intron_exon_dist', width: 70},
    			{ text: 'Effect', datafield: 'variant_effect', width: 50},
    			{ text: 'HGVS cds', datafield: 'HGVScds', width: 90},
    			{ text: 'HGVS transcript', datafield: 'HGVStranscript', width: 110},
    			{ text: 'HGVS protein', datafield: 'HGVSprotein', width: 90}
    			]
   	 	});
		}
	}
	$("#jqxgrid").jqxGrid(
	{
		width: 775,
        source: dataAdapter,
        theme: 'darkblue',
        rowdetails: true,
        autoheight: true,
        initrowdetails: initrowdetails,
        editable: true,
        sortable: true,
        altrows: true,
        pageable: true,
        selectionmode: 'singlecell',
        ready: function()
        {
       	$("#jqxgrid").jqxGrid('beginupdate'); 
        	var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
        	for (i = 0; i < datainformation.rowscount; i++)
        	{
        		$(&quot;#jqxgrid&quot;).jqxGrid('setrowdetails', i, &quot;<div style='margin: 3px'></div>", 170, true);
        	}
           $("#jqxgrid").jqxGrid('resumeupdate'); 
			var divLoading = document.getElementById('divLoading');
			divLoading.style.display = "none";
        },
        columns: [
          { text: 'Type', editable: false, datafield: 'type', width: 40},
          { text: 'Tag', editable: false, datafield: 'tag', width: 50},
          { text: 'ACC num', editable: false, datafield: 'ACC num', width: 70},
          { text: 'Loc Var ID', editable: false, datafield: 'loc_var_id', width: 75},
          { text: 'HGNC gene', editable: false, datafield: 'hgnc_gene', width: 80},
          { text: 'Class Rank', editable: false, datafield: 'Class', width: 80},
          { text: 'Effect Rank', editable: false, datafield: 'variant_effect', width: 80},
          { text: 'Max allele freq', editable: false, datafield: 'max_allele_freq', width: 90},
          { text: 'HGVS genome', editable: false, datafield: 'HGVSgenomic', width: 95},
      { text: 'Verify', datafield: 'Verify', columntype: 'checkbox', width: 85}
      ]
    });        
});

Loading please wait…

 

[Peter StoevKeymaster]

Hi powen,

I tested the jqxGrid with the provided code and I confirm the rendering issue. The reported rendering issue will be resolved in the next release.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[powenMember]

Thanks for looking into this.

After some observing the behavior a bit, it seems to be getting the index of the row to expand incorrect.

[Author]

Posts