Dynamically Changing Data Table in a Grid App

Scriptcase 8 Discussion
#1

I have a need to dynamically alter the main data table of a grid app.

I find this is nested 2 levels down from the uppermost table of the grid app and has no id of its own i.e. main-table-grid > table > table (the outermost table has an id of ‘main-table-grid’.)

Just as a first step to testing it will even work, I’m trying the following in AppInit:

echo “<script>
$(document).ready(function() {
console.log( “ready!” );
$(‘main-table-grid’).hide();
});
</script>”;

Result: table does not get hidden, console log shows ‘ready!’ yet no error.

This is not an HTML/CSS forum but I’d appreciate help to know the right element I should be grabbing.

1 Like
#2

mmm, u know you can always use the scriptcase show and hide macro right?.

sc_block_display(Block_Name, on/off)
Dynamically determines the display fields of a specific block.

By default all the blocks are displayed (“on” condition).

Ex. 1:
if ({type_customeri} == “personal”)
{
sc_block_display(company, off);
}
else
{
sc_block_display(personal, off);
}

Obs: In grids, this macro only works with “slide” orientation.

Regards

#3

[QUOTE=kafecadm;38341]mmm, u know you can always use the scriptcase show and hide macro right?.

sc_block_display(Block_Name, on/off)
Dynamically determines the display fields of a specific block.

By default all the blocks are displayed (“on” condition).

Ex. 1:
if ({type_customeri} == “personal”)
{
sc_block_display(company, off);
}
else
{
sc_block_display(personal, off);
}

Obs: In grids, this macro only works with “slide” orientation.

Regards[/QUOTE]

My end game is to restyle the grid to be responsive, not just toggle the table on/off. Have you noticed how the main menu app scrolls off the screen when viewing a grid app with a large number of fields on an iPad? It’s not very nice and screen real estate too large to waste on a full screen mobile menu.
Not having deep CSS skills, I’m simply experimenting with grabbing the actual table and possibly restyling dynamically. The fisrst step is to even grab the item in screen which is not happening. Perhaps the best thing possible is to wrap header and footer templates in a bootstrap div so the scrolling is contained but trying to play with some real responsive type tables.

#4

[QUOTE=scriptcaser;38300]I have a need to dynamically alter the main data table of a grid app.

I find this is nested 2 levels down from the uppermost table of the grid app and has no id of its own i.e. main-table-grid > table > table (the outermost table has an id of ‘main-table-grid’.)

Just as a first step to testing it will even work, I’m trying the following in AppInit:

echo “<script>
$(document).ready(function() {
console.log( “ready!” );
$(‘main-table-grid’).hide();
});
</script>”;

Result: table does not get hidden, console log shows ‘ready!’ yet no error.[/QUOTE]

Did you copy-pasted the echo statement?

The way you wrote the jquery .hide() statement, you’re asking for a DOM element of type main-table-grid as if in the HTML there were some tag like this:

<main-table-grid> Some content here, maybe some <b>format</b> and the end.</main-table-grid>

You should use the jquery selector by class or by id.
If “main-table-grid” is a “class” attribute, you reference it by “$(’.main-table-grid’)”
If “main-table-grid” is an “id” attribute, you reference it by “$(’#main-table-grid’)”

Remember that any javascript statement called by a $most times is supported by the jquery library. It’s not a native javascript code.

#5

Will give this a try, thanks