Styjun

Why will we fail creating a self sustaining off world colony?

How does mmorpg store data?

ESTA Elegible after Qatar?

How would one prevent political gerrymandering?

Installed software from source, how to say yum not to install it from package?

Having to constantly redo everything because I don't know how to do it

Tricolour nonogram

Could all three Gorgons turn people to stone, or just Medusa?

Russian equivalents of 能骗就骗 (if you can cheat, then cheat)

Equatorial oceanic river caused by tides

Why wasn't ASCII designed with a contiguous alphanumeric character order?

How far can gerrymandering go?

Calculus, water poured into a cone: Why is the derivative non-linear?

What does 5d4 x 10 gp mean?

Robots in a spaceship

How useful would a hydroelectric power plant be in the post-apocalypse world?

Automorphisms and epimorphisms of finite groups

German idiomatic equivalents of 能骗就骗 (if you can trick, then trick)

Reusable spacecraft: why still have fairings detach, instead of open/close?

How does the 'five minute adventuring day' affect class balance?

What was the first science fiction or fantasy multiple choice book?

Could you fall off a planet if it was being accelerated by engines?

The alcoholic village festival

Why was Pan Am Flight 103 flying over Lockerbie?

Tabulator table inside a JQuery UI dialog opens collapsed

Add table row in jQueryHow to remove close button on the jQuery UI dialog?JQuery dialog opens collapsedjQuery dialog not opening from subsequent datatables pagesHow to open a Bootstrap modal window using jQuery?jQuery timepicker not working after opening different jQuery Dialogstable columns hide when button is clicked using jquerySet textbox fields with values inside jquery dialogIs it possible to open a table with its columns uncollapsed?Tabulator leaves the changes made after Tabulator loading

0

A Tabulator table put inside a JQuery UI Dialog opens collapsed (no rows visible). After clicking on a column header the table unrolls. Am I missing a setting?

This is for an ASP.Net web application, the table is defined as a within the dialog.

CustomerDataSet below is a JSON array of objects. The data mapping appears to work fine as the table opens after a click on a table heading.

var patTable = new Tabulator("#ptlist-table", 
 selectable: 1,
 data: CustomerDataSet, 
 columns: [
 title: "Name", field: "name" ,
 title: "Customer ID", field: "id" ,
 title: "Location", field: "location" ,
 title: "Detail", field: "detail" ,
 title: "Order date/time", field: "timestamp" ,
 ],
 );

$("#dialog-id").dialog("open"); // The table shows inside the dialog.

I expect the table to show in full upon the dialog opening.
Instead, the table shows collapsed until I click on a column heading.

jquery tabulator

share|improve this question

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

add a comment | 

0

A Tabulator table put inside a JQuery UI Dialog opens collapsed (no rows visible). After clicking on a column header the table unrolls. Am I missing a setting?

This is for an ASP.Net web application, the table is defined as a within the dialog.

CustomerDataSet below is a JSON array of objects. The data mapping appears to work fine as the table opens after a click on a table heading.

var patTable = new Tabulator("#ptlist-table", 
 selectable: 1,
 data: CustomerDataSet, 
 columns: [
 title: "Name", field: "name" ,
 title: "Customer ID", field: "id" ,
 title: "Location", field: "location" ,
 title: "Detail", field: "detail" ,
 title: "Order date/time", field: "timestamp" ,
 ],
 );

$("#dialog-id").dialog("open"); // The table shows inside the dialog.

I expect the table to show in full upon the dialog opening.
Instead, the table shows collapsed until I click on a column heading.

jquery tabulator

share|improve this question

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

add a comment | 

A Tabulator table put inside a JQuery UI Dialog opens collapsed (no rows visible). After clicking on a column header the table unrolls. Am I missing a setting?

This is for an ASP.Net web application, the table is defined as a within the dialog.

CustomerDataSet below is a JSON array of objects. The data mapping appears to work fine as the table opens after a click on a table heading.

var patTable = new Tabulator("#ptlist-table", 
 selectable: 1,
 data: CustomerDataSet, 
 columns: [
 title: "Name", field: "name" ,
 title: "Customer ID", field: "id" ,
 title: "Location", field: "location" ,
 title: "Detail", field: "detail" ,
 title: "Order date/time", field: "timestamp" ,
 ],
 );

$("#dialog-id").dialog("open"); // The table shows inside the dialog.

I expect the table to show in full upon the dialog opening.
Instead, the table shows collapsed until I click on a column heading.

jquery tabulator

share|improve this question

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

var patTable = new Tabulator("#ptlist-table", 
 selectable: 1,
 data: CustomerDataSet, 
 columns: [
 title: "Name", field: "name" ,
 title: "Customer ID", field: "id" ,
 title: "Location", field: "location" ,
 title: "Detail", field: "detail" ,
 title: "Order date/time", field: "timestamp" ,
 ],
 );

$("#dialog-id").dialog("open"); // The table shows inside the dialog.

share|improve this question

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

share|improve this question

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

edited Mar 25 at 15:50

bummi

25.4k88 gold badges5353 silver badges9292 bronze badges

asked Mar 25 at 15:48

user1733063user1733063

1

asked Mar 25 at 15:48

user1733063user1733063

1

2 Answers
2

active

oldest

votes

1

If the element you are initializing Tabulator with is initially hidden, you will have to call patTable.redraw(true) after it is shown. This is because when an element is hidden, JavaScript returns 0 for width and height.

So, when Tabulator is initialized, all the calculations it does for widths and heights for its internal elements will be incorrect and the table won't render as you expect. There are many other JS workarounds for this scenario if you wish to research it, but I suggest just asking Tabulator to redraw/re-render itself.

share|improve this answer

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

add a comment | 

-1

I was able to resolve it by a programmatic click on a table's column header when the dialog opens:

myDialog = $("#dialog-id").dialog({
...
...
open: function ()
$("#ptlist-table").find(".tabulator-col").first().click();
,
...

share|improve this answer

answered Mar 25 at 19:04

user1733063user1733063

1

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55341622%2ftabulator-table-inside-a-jquery-ui-dialog-opens-collapsed%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

If the element you are initializing Tabulator with is initially hidden, you will have to call patTable.redraw(true) after it is shown. This is because when an element is hidden, JavaScript returns 0 for width and height.

So, when Tabulator is initialized, all the calculations it does for widths and heights for its internal elements will be incorrect and the table won't render as you expect. There are many other JS workarounds for this scenario if you wish to research it, but I suggest just asking Tabulator to redraw/re-render itself.

share|improve this answer

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

add a comment | 

1

If the element you are initializing Tabulator with is initially hidden, you will have to call patTable.redraw(true) after it is shown. This is because when an element is hidden, JavaScript returns 0 for width and height.

So, when Tabulator is initialized, all the calculations it does for widths and heights for its internal elements will be incorrect and the table won't render as you expect. There are many other JS workarounds for this scenario if you wish to research it, but I suggest just asking Tabulator to redraw/re-render itself.

share|improve this answer

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

add a comment | 

If the element you are initializing Tabulator with is initially hidden, you will have to call patTable.redraw(true) after it is shown. This is because when an element is hidden, JavaScript returns 0 for width and height.

So, when Tabulator is initialized, all the calculations it does for widths and heights for its internal elements will be incorrect and the table won't render as you expect. There are many other JS workarounds for this scenario if you wish to research it, but I suggest just asking Tabulator to redraw/re-render itself.

share|improve this answer

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

share|improve this answer

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

answered Mar 25 at 19:57

haferjehaferje

60322 gold badges1111 silver badges1717 bronze badges

-1

I was able to resolve it by a programmatic click on a table's column header when the dialog opens:

myDialog = $("#dialog-id").dialog({
...
...
open: function ()
$("#ptlist-table").find(".tabulator-col").first().click();
,
...

share|improve this answer

answered Mar 25 at 19:04

user1733063user1733063

1

add a comment | 

-1

I was able to resolve it by a programmatic click on a table's column header when the dialog opens:

myDialog = $("#dialog-id").dialog({
...
...
open: function ()
$("#ptlist-table").find(".tabulator-col").first().click();
,
...

share|improve this answer

answered Mar 25 at 19:04

user1733063user1733063

1

add a comment | 

I was able to resolve it by a programmatic click on a table's column header when the dialog opens:

myDialog = $("#dialog-id").dialog({
...
...
open: function ()
$("#ptlist-table").find(".tabulator-col").first().click();
,
...

share|improve this answer

answered Mar 25 at 19:04

user1733063user1733063

1

share|improve this answer

answered Mar 25 at 19:04

user1733063user1733063

1

answered Mar 25 at 19:04

user1733063user1733063

1

answered Mar 25 at 19:04

user1733063user1733063

1