Tabulator: Columns Width not working on rows

[cemmons]

I have this behavior

The rows are not getting the same width as the headers.

This is the Code

[olifolkerd]

could you past a text version of your code so i can test with it.

Thanks

[olifolkerd]

is the table visible when it is created and when the data is loaded?

if it is hidden it wont be able to calculate the widths properly as hidden elements have no widths.

you can use the redraw function if this is the case, just call it when you make the element visible again:

$("#example-table").tabulator("redraw");

[cemmons]

Yes, the main form is that grid, and i also have a modal with a grid inside that is not visible. Let me get a text version..

[cemmons]

js.txt
html.aspx.txt

[olifolkerd]

It turns out you managed to find a bug in Tabulator there, Good Spot!!! there was an issue rendering column widths after hidden columns, in tables with fitColumns disabled.

I have just committed a fix, download the latest version and you should be all set.

Thanks for pointing it out.

Cheers

Oli

[cemmons]

Great, Thanks a lot! It's good to know that I'm collaborating at least with finding bugs xD

Now it is working all right, But the other grid.. I don't know if i'm doing something wrong.

I'm adding a new record so, i pull up the modal, and it should show the grid with the headers. I load the tabulator on first page load and not when i pull up the modal.

This is the behavior.

[olifolkerd]

The issue you have there is that the tabulator in the dialog cannot properly calculate it layout because it is initialised when it is hidden (hidden elements have no height or width).

In the function where you show the dialog you need to call the redraw function on the table just as it becomes visible, this will cause it to adjust its layout to match its size:

$("#example-table").tabulator("redraw");

[cemmons]

Excellent, thanks a lot.. i have been working a lot recently with tabulator.. so i'm new to this xD

[olifolkerd]

Always happy to help.

Let me know if there are any feature you think need adding.

Cheers

Oli

[cemmons]

Hi again it's me...

I rewrite the code but it is not working

` function CreateDetailGrid() {

    var catalogGroupDetCols = [
   {
       title: "Catalog", field: "catCode", width: "70%", editable: true, editor: function (cell, value, data) {
           var editor = $('#dropcatalog').clone();

           var dat = value;

           editor.val(dat);


           editor.css({
               "padding": "3px",
               "width": "100%",
               "box-sizing": "border-box",
           })


           if (cell.hasClass("tabulator-cell")) {
               setTimeout(function () {
                   editor.focus();
               }, 100);
           }

           editor.on("change blur", function (e) {
               cell.trigger("editval", editor.val());
           });
           return editor;
       }
   },
   { title: "Order", field: "cgdOrder", width: "20%", editable: true, align: "right", editor: "number" },
    {
        formatter: "buttonCross", width:"10%", align: "center", onClick: function (e, cell, val, data) {

            bootbox.confirm("Desea borrar el Catalogo: " + data.catCode + "  ", function (result) {
                if (result) {
                    $("#gridCatalogGroupDetail").tabulator("deleteRow", cell.closest(".tabulator-row"));
                }
            });
        }
    },
    ]

    $("#gridCatalogGroupDetail").tabulator({
        height: "300px",
        fitColumns: false,
        colResizable: false,
        columns: catalogGroupDetCols

    });
}




$("#newCatalogGroupDetail").click(function () {

    addDetailrow();

});

$("#btnAddCatalogGroup").click(function () {
    $("#txtCatalogGroupCode").prop('disabled', false);
    $('#modalCatalogGroupDetail').modal('show');


    $("#modalCatalogGroupDetail").on('shown.bs.modal', function () {
        $("#gridCatalogGroupDetail").tabulator('redraw');
    });
});`

[olifolkerd]

try:

$("#gridCatalogGroupDetail").tabulator('redraw', true);

[cemmons]

Thanks a lot again!! That worked like a charm.

[kenseii]

table.redraw(true); in case you are using tabulator in raw js