How to keep Tab Pane Focus afer save.

[datacrunch]

Hello,

I have a grid component with a detail view. On that detail view I have several tabs. If I save the record on tab 2, 3 or 4 I takes me back to the tab 1.

How do I keep the focus on the current tab after save?

Thanks

[christappan]

Re: How to keep Tab Pane Focus afer save.

I was thinking about this earlier this week and just tried my hand at it but to no avail. I could use javascript to identify which tab was selected and I could use javascript to display the tab contents but I was missing the javascript that should have been used... Anyone else have ideas?

[mikeallenbrown]

Re: How to keep Tab Pane Focus afer save.

I'm interested in this as well.

-Mike

[Clipper87]

Re: How to keep Tab Pane Focus afer save.

In every field of your first pane put this code in the onmouseover event: window.curtab = '1';
In every field of your second pane put this code in the onmouseover event: window.curtab = '2';
etc...

Each time you hover over a field in a certain tab pane it saves the current tab to the window variable window.curtab and in order to edit a field you have to hover over it so it will always happen.

In the afterDetailViewSubmit clientside event put this code: window['GRID1_DVTAB_1R_1Obj'].select(window.curtab);

There may be a smarter way to find out which tab pane is currently selected, don't know

[TheSmitchell]

Re: How to keep Tab Pane Focus afer save.

Use tabObj.value to get the current tab. And, I suppose in your can submit event, grab the current value and then in the after submit function, set it again.

// Look up the actual details for your tab ID in FireBug. It may not match
var tabObj = window['{grid.componentName}_DVTAB_1R_1Obj'];

//Currently Selected Tab
var currentTab = tabObj.value;

//Set Tab; select takes a value starting at 1 to total number of tabs
tabObj.select(currentTab);

[Clipper87]

Re: How to keep Tab Pane Focus afer save.

Sarah,

If you define currentTab in the canDetailViewSubmit event it will not exist anymore in the afterDetailViewSubmit event I think

using a window variable solves the issue:

This code in the canDetailViewSubmit event:

var tabObj = window['{Grid.ComponentName}_DVTAB_1R_1Obj'];
//Currently Selected Tab
window.currentTab = tabObj.value;

And this code in the afterDetailViewSubmit event

window['{Grid.ComponentName}_DVTAB_1R_1Obj'].select(window.currentTab);

[TheSmitchell]

Re: How to keep Tab Pane Focus afer save.

Nope Variables inside events don't exist outside those events. Wasn't providing a solution. Just an example of value & select for tab objects.

[christappan]

Re: How to keep Tab Pane Focus afer save.

Thanks so much to you both, I've got it.

Rather than Frank's probably-effective-but-intensive javascript on every control in the tab object, we can just put this in each tab's onChange event:

//get tab object
var tabObj = window['{grid.componentName}_TAB.1R_1Obj'];

//Currently Selected Tab
var currentTab = tabObj.value;

//set state variable as current tab
{Grid.object}.setStateInfo({curTab: currentTab});

Then, in the afterDetailViewSubmit:

//get tab object
var tabObj = window['{grid.componentName}_TAB.1R_1Obj'];

//get state variable of current tab number
var curTab = {Grid.Object}.stateInfo.curTab;

//select current tab number
tabObj.select(curTab);

Because the afterDetailViewSubmit requires a curTab value, we can go ahead and set the default value so that if the user doesn't switch tabs before submitting, there's already a value. And, it resets it so that if a different record is being opened after the curTab state variable was set in a previous record. So in the afterDetailViewOpen:

//set default tab as state variable for current tab so that
//if user doesn't switch tabs from default it's already set
{Grid.object}.setStateInfo({curTab: '1'});

CORRECTION: Instead of the above, set the default tab pane in the detail view tab properties to a blank value, then use the afterDetailViewOpen to select the default tab the same as above:

var tabObj = window['{grid.componentName}_TAB.1R_1Obj'];

//get state variable of current tab number
var curTab = '2'; //here the default tab for the detail view is the second tab

//select current tab number
tabObj.select(curTab);

Thanks again to you both. Never would've gotten there.

[datacrunch]

Re: How to keep Tab Pane Focus afer save.

Thanks to everyone for helping. :)

[jennygong]

Re: How to keep Tab Pane Focus afer save.

if i want to focus on a tab, then whenever user point to any record from grid, detail view should be display detail of that record, but focus on that tab, until user change tab.

What should i do? I try to put code in onRowSelect, not working correctly.

[lvasic]

Re: How to keep Tab Pane Focus afer save.

Thanks Frank. I just used your code and it works great!

[jennygong]

Re: How to keep Tab Pane Focus afer save.

I have the same problem, but my tab is in UX component,

i copied the following code, AND replade "gird" with "dialog", which is not working. Does anyone know what is the correct syntax in UX component? Thank you!!!

var tabObj = window['{grid.componentName}_TAB.1R_1Obj'];

//get state variable of current tab number
var curTab = '2'; //here the default tab for the detail view is the second tab

//select current tab number
tabObj.select(curTab);

[Simone]

Re: How to keep Tab Pane Focus afer save.

Thanks a lot for your solution, Chris!

I thought I'd add my version for the case where:

• we have a grid with a detail view that contains a tab control
• we want the current tab to remain open when
  • the user saves data
  • and when the user navigates through grid records by using the navigation buttons on the detail view

//------------------------------------------------------
//afterDetailViewOpen

//It seems that we must set the initial tab pane in the detail view's tab control
// - otherwise we get an error. It can be anything. The following code will override it.
var tabToShow = '1'; //set this to what we want to be the initial tab

//The first time we get here, i.e. when the detail view is opened, the onChange 
//events of the tab panes have not fired.

//In the onChange events we set stateInfo.paneChangeFired to 'yes' which allows us to 
//detect if we are here for the first time or not. If the user changed tabs we also
//captured the new tab in the stateInfo object. 
if ({Grid.Object}.stateInfo.paneChangeFired === 'yes') {
	tabToShow = {Grid.Object}.stateInfo.currentTab;
}

//get the tab object and set the pane to show
var tabObj = window['{grid.componentName}_DVTAB_1R_1Obj'];
tabObj.select(tabToShow); //note: this will fire the onChange event of the initial tab pane


//------------------------------------------------------
//Tabe Panes' onChange events

//get the tab object
var tabObj = window['{grid.componentName}_DVTAB_1R_1Obj'];

//store the current tab in a state variable
{Grid.object}.setStateInfo({currentTab: tabObj.value});
{Grid.Object}.setStateInfo({paneChangeFired: 'yes'});


//------------------------------------------------------
//afterDetailViewSubmit

//the following exists because we set the initial tab in the 
//afterDetailViewOpen event which caused the tab's onChange even to fire
var tabToShow = tabToShow = {Grid.Object}.stateInfo.currentTab;

//get the tab object and set the pane to show
var tabObj = window['{grid.componentName}_DVTAB_1R_1Obj'];
tabObj.select(tabToShow);