jqxgrid is enlarged when loaded in a boostrap modal

[NovatoParticipant]

Hi, I hope you can help me with this problem because I searched the forums but I can not find something similar to my problem.

I have a grid that contains a column of type button, when I click on a button in the column I load the data of the row in another grid inside a modal with tabs of boostrap 4.

When the modal is launched, the grid is displayed but the modal limit is passed and then it is adjusted to the size of the modal.

Do you know why this happens and how can I solve it?

My modal grid has the property width as a percentage.

Thank you very much for your help.

/*****************  This is my principal grid   *************************************************************************/

function obtener_datos() {

    var persona = $("[id*=ddlPersona]").val();
    var Sucursal = "";
 
    if (persona != 0) {
       
        var valores;
        var datafields = new Array();
        var columns = new Array();
        var columnsArray = [];
      
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmPersona.aspx/Intervalo",
            contentType: "application/json; charset=utf-8",
            data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}',
            async: false,

            success: function(data) {

                if (data != '') {
          
                    valores = JSON.parse(valores[0]);

                    for (var i in valores[0]) {
                        datafields.push({ name: i, type: 'string' });
                        columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 });
                       
                    }

                    for (var j = 1; j < columns.length; j++) {
                        columnsArray.push(columns[j]);
                      
                    }

                }

                var gridSource =
                {
                    datatype: "json",
                    datafields: datafields,
                    localdata: valores, 
                    async: false
                   
                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);

/****************************************************************************************************************************************************/
                      // Here I have my button to consult
/****************************************************************************************************************************************************/
                columnsArray.push({ text: 'Consult', datafield: 'Consult', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button',  
                    cellsrenderer: function() { },
                    buttonclick: function(row) {
                 
                   //  Here I get the function and show it in my popup  
                     Grid_in_modal(parameter_1, parameter_2);
                      $("#Popup_Consult").modal('show');
                    }
                });
	
                $("#gvDatos").jqxGrid({
                    source: gridDataAdapter,
	            editable:true,
                    width: '100%',
                    columnsresize: true,
                    autoheight: false,
                    autorowheight: false,
                    pageable: true,
                    showfilterrow: true,
                    filterable: true,
                    rowdetails: true,
                    initrowdetails: initrowdetails_BI2,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true },
                 
                    handlekeyboardnavigation: function(event) {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key == 13) {
                           
                            return true;
                        }
                        else if (key == 27) {
                         
                            return true;
                        }
                    },

                    columns: columnsArray

                });
            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });

    }
    else {
      
        $('#PopupDatos').modal('show');
    }
}

/**************************************************************************************************************************************/

function Grid_in_modal(parameter_1, parameter_2) 
{
...

// Properties of the grid shown in the modal
 $("#gvDatos2").jqxGrid(
                {
                    source: gridDataAdapter,                   
                    width: '100%',                                
                    columnsresize: true,                   
                    autorowheight: false,
                    altrows: true,                 
                    pageable: true,                   
                    filterable: true,
                    columns: columns
                });

}

[HristoParticipant]

Hello Novato,

I would like to mention a few important things.
When you create different grids you should use a separated jqxDataAdapters for each one.
You use the bootstrap tab as I understand from your description and we cannot guarantee about the final result.
We provide a jqxTabs and when you use it to create widget inside it you should use the “initTabContent” callback.
Where the widgets for each one specific tab is initialized.
On this point I would like to mention another important thing – the initialization should happen just once.
I saw that you use different functions for different grids.
You should be sure these functions are invoked once a while.

Especially about the question with adjustment, it seems the jqxGrid take the size of its parents because you set its width to “100%”.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Hristo

I have managed to solve this, thank you very much for your help.

[Author]

Posts