Trouble using SplitAt on DhtmlXGridObject object

[immune]

Hello,

I’m having a problem adding a split to one of my grid objects and was wondering if you could help.

I have attached the file that can reproduce the problem for reference. Essentially, I have a grid that is working exactly as expected, but when I try to add a split on the first column (or any column for that matter) the page hangs for a few minutes and then returns a malformed grid. It occasionally throws an “Uncaught RangeError: Maximum call stack size exceeded” in the console as it seems to be caught in an infinite loop calling setSizes.

Interestingly, if I comment out the line

grid.enableAutoWidth(true, 500, 400);

then the split is correctly added to the grid, however I do need to keep this line for formatting. Are these two functions not compatible with each other?

I have also attached screenshots for reference.

Any help you could offer would be much appreciated.

Thanks in advance.
SplitAtError.zip (657 Bytes)

[sematik]

Unfortunately the split mode is incompatible with teh autoWidth mode.
Could you clarify what behavior do you expect from from such a combination.
In case of using the autoWidth mode the grid container will fit it’s width to the columns width so that there is no horizontal scrollbar in your grid.
In case of using the split mode grid is divided in two parts so that the user may see the left side of the grid dragging the horizontal scroll bar to the right.
If you have no horizontal scrollbar there is no need in the split.

[immune]

Hi there. Thanks for the reply, that’s useful.

I’m hoping to be able to set the width of the grid so that it fills the width of it’s parent container whilst maintaining the frozen columns. Would you be able to give me some pointers? Thanks.

[sematik]

Please, try to set the sizes of your dhtmlxgrid container in the percentages of it’s parent container:

[immune]

I’ve set the container to have a width of 100% which is fine, however when I call setSizes() on the grid itself, the width is set to a value of 0. I have confirmed that the grid does have data at this point, and if I manually increase the width of the grid in the browser developer tools it looks fine. Is there something I should be doing before calling setSizes()?

Here is the snippet I’m talking about:

if (this.settings.splitAt === "") {
    this.grid.enableAutoWidth(true, $('#gridBox-' + this.settings.hash).closest(".container-table").width() - 50);
    $('div[id^="gridBox-"]').width($('div[id^="gridBox-"]').width() + 5);
} else {
    $('#gridBox-' + this.settings.hash).css("width", "100%");
}
        
this.grid.enableAutoHeight(true, $('#gridBox-' + this.settings.hash).closest(".container-table").height() - 130, true);
this.grid.setSizes();

After setting the width to roughly 600px, calling setSizes() causes the width to be set to 0.

[sematik]

Please, provide with the code snippet of your grid initialization.
Or share with a demo link/provide with a simple complete demo, where the problem can be reproduced.

[immune]

Here is the initialisation code:

this.grid = new dhtmlXGridObject("gridBox-" + this.settings.hash);
this.grid.setImagePath("/dhtmlx/codebase/imgs/");

var hdr = this.settings.headings.split(",");
var hdrAlign = new Array();
for (var i = 0; i < hdr.length; i++) {
    hdrAlign[i] = "text-align:center;";
}

this.grid.setHeader(this.settings.headings, null, hdrAlign);

if (this.settings.subHeadings !== "") {
    this.grid.attachHeader(this.settings.subHeadings, hdrAlign);
}

this.grid.setInitWidths(this.settings.width, null);
this.grid.setSkin("dhx_web", null);
this.grid.setColSorting("daye,date", null);
this.grid.setColTypes(this.settings.dataType, null);
this.grid.setColumnColor(this.settings.columnColour, null);

var columnFormat = this.settings.columnFormat;
var columnFormatArray = columnFormat.split(",");

for (var i = 1; i <= columnFormatArray.length; i++) {
    switch (columnFormatArray[i]) {
        case "d":
            this.grid.setNumberFormat("0,000.00", i, ".", ",");
            break;
        case "i":
            this.grid.setNumberFormat("0,000", i, ".", ",");
            break;
        case "s":
    }
}

var align = "left";

if (this.settings.align !== "") {
    align = this.settings.align;
}

if (this.settings.sort !== "") {
    this.grid.setColSorting(this.settings.sort);
}

this.grid.setColAlign(align);
this.grid.attachEvent("onRowDblClicked", this.queryGridDblClick.bind(this));
this.grid.attachEvent("onRowSelect", this.queryGridRowSelect.bind(this));
this.grid.attachEvent("onXLS", this.displayProgress.bind(this));
this.grid.attachEvent("onXLE", this.hideProgress.bind(this));
this.grid.attachEvent("onresizeend", this.onresizeend.bind(this));
this.grid.csv.cell = "\t";
this.grid.enableMultiselect(true);
this.grid.setStyle("font-weight:bold;", "", "", "");

this.grid.init();

if (this.settings.splitAt !== "") {
    this.grid.splitAt(this.settings.splitAt);
}

[sematik]

Unfortunately the problem cannot be reproduced with the provided code.
If the issue still occurs for you please, provide with a complete demo or share with a demo link, where the problem can be reconstructed.