How to code datalistbox onchange to clear a Zen tablepane?

I have a tablepane in my Zen page that is tied to a class query.  When the page first loads, the table is empty.  A button onclick event causes the tablepane query to execute and load query results into the table.  I want an onchange event from a datalistbox to clear the tablepane so that it looks empty as it was when the page first loaded.  I have had no luck fiddling with javascript in the datalistbox's onchange.

  • 0
  • 0
  • 161
  • 1
  • 0

Comments

This should accomplish what you want:

var tablePane = zen('yourTablePaneId');

// Don't actually execute the query the next time the table is rendered.
tablePane.setProperty('initialExecute',false);

// Clear the snapshot (cached results of the query, used for quick pagination) before re-rendering.
// This is irrelevant if the tablePane isn't using snapshots.
tablePane.setProperty('clearSnapshot',true);

// Regenerate HTML for the tablePane - it'll be empty.
tablePane.refreshContents();

Or, a bit more simply:

var tablePane = zen('yourTablePaneId');

// Don't actually execute the query the next time the table is rendered.
tablePane.setProperty('initialExecute',false);

// Re-execute the query (this also clears the snapshot if snapshots are in use)
tablePane.executeQuery();

If refreshContents() / executeQuery() is called again, query results will be shown, because initialExecute is set to true each time the tablePane is drawn.