ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Sivakumar on April 16, 2020, 01:02:24 pm

Title: Unable to bidn grid in bootstrap modal
Post by: Sivakumar on April 16, 2020, 01:02:24 pm

Hi,
Can you please share a jsfiddle where we are using bootstrap modal and not jquery UI dialog to bind a grid?
I tried but all I was able to achieve is a line of the grid. Not sure what is the issue. Attached screenshot for reference.

Let me know if any more information is required from my end.

Thanks.

Title: Re: Unable to bidn grid in bootstrap modal
Post by: paramvir on April 16, 2020, 03:53:46 pm

pqGrid displays correctly only when its container is visible at time of initialization or refresh, so we take the help of shown.bs.modal event of bootstrap modal.

Code: [Select]

  //bootstrap modal
  $("#myBtn").click(function(){
    $("#myModal").modal("show");
  });
  $("#myModal").on('shown.bs.modal', function () {   
    if($("#grid_json").pqGrid('instance'))
    $("#grid_json").pqGrid('refresh');   
    else
    $("#grid_json").pqGrid(obj);
  });

https://jsfiddle.net/yp42zr5t/

Title: Re: Unable to bidn grid in bootstrap modal
Post by: Sivakumar on May 09, 2020, 11:00:22 am

Hi Paramvir,

I was able to get the grid on the fiddle link mentioned below:
https://jsfiddle.net/n16gjq9u/2/ (https://jsfiddle.net/n16gjq9u/2/)

But my requirement are few additional items that is shown in the code below:

Code: [Select]

var $Associate_DocumentsGridPartial;
var colM = [];
var primaryColumn;

function bindAssociateDocumentGridPartial(standardID, tableName, clasName) {
    var url = window.location.origin + "/Document/GetAllDocumentsAndAssociation";
    $("#DocumentListPartial").modal("show");

    var pData = { StandardID: standardID, TableName: tableName, ClasName: clasName };

    primaryColumn = "ID";

    $.post(url, pData, function (data, status) {
        var response = JSON.parse(data);
        if (jQuery.isEmptyObject(response)) {
            $("#DocumentListPartial").modal('hide');
            return false;

        }
        colM = [];
        colM.push({ title: '', dataIndx: 'ID', hidden: true });
        colM.push({ title: '', dataIndx: 'TableName', hidden: true });

        $.map(response.Table[0], function (v, k) {
            if (k.toUpperCase() == "ISASSIGNED") {
                colM.push({
                    title: '<b>' + toTitleCase(k) + '</b>', copy: false, dataIndx: k, halign: "center", width: 50, dataType: "integer", align: 'center', editable: true, menuIcon: false,
                    type: 'checkbox',
                    filter: { crules: [{ condition: "equal" }], options: [{ 0: 'UnCheck' }, { 1: 'Checked' }] },
                    cb:
                    {
                        all: true,
                        header: true,
                        check: 1,
                        uncheck: 0
                    },
                    editor: false
                });

            }
            else if (k.toUpperCase().indexOf("DOCUMENT_TYPE_NAME") > -1) {
                colM.push({ title: k, dataIndx: k, hidden: false, editor: false });
            }
            else {
                colM.push({ title: k, dataIndx: k, hidden: true, editor: false });
            }
        });

        var obj = {
            numberCell: { show: false },
            width: "100%",
            height: 400,
            resizable: true,
            title: "Grid From JSON",
            strNoRows: 'No Rows Found',
            showBottom: false,
            scrollModel: { autoFit: true },
            collapsible: { on: false, toggle: false },
            postRenderInterval: -1,
            trackModel: { on: true }, 
            colModel: colM,
            columnTemplate: { minWidth: '10%', maxWidth: '80%' },
            dataModel: {
                data: response,
                location: "remote",
                recIndx: primaryColumn
            },
            menuUI: {
                tabs: ['filter']
            },
            filterModel: {
                on: true,
                mode: "AND",
                header: true,
                menuIcon: true
            },
        };

        $("#DocumentListPartial").on('shown.bs.modal', function () {
            if ($("#dvDocumentsGridPartial").pqGrid('instance')) {
                $("#dvDocumentsGridPartial").pqGrid('refresh');
            }
            else
                $("#dvDocumentsGridPartial").pqGrid(obj);
        });
    });
   
}

The data is same as that in the jsfiddle link provided above.
Could you please help me with this?

Thanks in advance.

Regards,
Uttam