Possible to dynamically generate tabs?

[walker1234Participant]

Is it possible or do you have any example showing dynamic generation of tabs?

https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtabs/jquery-tabs-getting-started.htm?search=tabs

I’m wondering how would the switch case statements would work and be defined if such thing has to happen.

[HristoParticipant]

Hello walker1234,

Maybe you are wondering how to initialize components in the newly added tab via the initTabContent callback.
In this case more suitable will be to use the addLast method and also, to have a number of all tabs.
When you have a new tab then its number should be increased but before that, you could implement the widgets in the new tab.
Please, clarify your case or describe your final goal.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Before that how can I even generate tabs since switch case statement is involved. I want make tab generation database driven approach.Could you give an example of it?

[HristoParticipant]

Hello walker1234,

Could you clarify it?
What data do you receive?
If you receive all data from the server then you could process it before create the jqxTabs.
Just extract tabs set different cases in an array to initialize each one tab.
For example, you could have an array with functions:

var initTabsContentArray = [initFirstTab, initSecondTab];
initTabContent: function (tab) {
    initTabsContentArray.forEach((item, index) => {
	//initTabsContentArray[index]();
	item();
    });
};

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alexisdcarvajalnParticipant]

The clear question would be:

I have a JSON with the following information:

[
	"universidad",
	"escuela",
	"colegio",
	"kinder"
]

I need to add the content of my JSON as tabs and suppose I need a jqxGrid within each one of them.
In a few words a tab with the name university, another with the name of school and so on.

[HristoParticipant]

Hello alexisdcarvajaln,

What is your issue?
You just need to generate a structure for the jqxTabs before you initialize it.
On the other side, if you want to add the mentioned options to the existing jqxTabs then you could use the “add-” methods.
For example, the addAt, addFirst, and addLast method.

Also, I would like to mention something when creating widgets inside the jqxTabs.
It is important to use the initTabConten callback.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alexisdcarvajalnParticipant]

Some example that you can share would be very helpful

[HristoParticipant]

Hello alexisdcarvajaln,

It will be better if you could provide us with more details about your scenario.
Please, clarify what you want to achieve.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alexisdcarvajalnParticipant]

Well, I managed to create it as I wanted there might be a better way to do it but this is what I have.
In my html file I have the following.
<div id="myTabs" style="margin: 10px 10px;width: 100%;height: 50;"></div>
In my ts file I have the following

//Array nameTabs
  initTabsContentArray = [{name:'Tab1'}, {name:'Tab2'},{name:'Tab3'}];
ngAfterViewInit(){
    this.createStructureForDynamicsTabs()
    jqwidgets.createInstance('#myTabs','jqxTabs',this.configTabs)
  }
createStructureForDynamicsTabs(){
    let _ul = document.createElement('ul')
    let _principal = document.getElementById('myTabs')
    document.getElementById('myTabs').appendChild(_ul)
    _ul.style.cssText = "margin-left: 10px;margin-bottom: 20px"
    
    for (let index = 0; index < this.initTabsContentArray.length; index++) {
      let _itemName = this.initTabsContentArray[index].name
      let _li = _ul.appendChild(document.createElement('li'))
      _li.innerHTML = _itemName;
      let _div = _principal.appendChild(document.createElement('div'))
      _div.id = <code>jqxGrid${index}</code>;
      _div.style.cssText = "overflow: hidden;margin: 10px 10px;"      
    }
  }
configTabs: jqwidgets.TabsOptions = {
    theme:'darkblue',
    initTabContent: (tab)=>{
      this.initGrid(tab);
    }
  }
initGrid(tab:any) {
    let files = [
      {
        Nombre:'Juan',
        P_500:'400',
        NASDAQ:'aaaa'
      },
      {
        Nombre:'Mario',
        P_500:'400',
        NASDAQ:'bbbb'
      }
    ]
    let source =
        {
          datafields: [
              { name: 'Nombre' },
              { name: 'P_500' },
              { name: 'NASDAQ' }
          ],
          localdata: files
        };
    let dataAdapter = new jqx.dataAdapter(source);
    let settingGrid = {
      width: '98%',
      height: '50%',
      source: dataAdapter,
      editable: true,
      theme:'darkblue',
      columns: [
        { text: 'Check', datafield: 'check', columntype: 'checkbox', width: 70 },
        { text: 'Name', datafield: 'Nombre', width: 250 },
        { text: 'S&P 500', datafield: 'P_500', width: 150 },
        { text: 'NASDAQ', datafield: 'NASDAQ' }
      ]
    }
    jqwidgets.createInstance(<code>#jqxGrid${tab}</code>, 'jqxGrid',settingGrid);
}

If you have a better suggestion I am open to options.

[HristoParticipant]

Hello alexisdcarvajaln,

You should use the additional container for the inner widgets as the jqxGrid.
For example, you could add an additional div container with the specific id name for the current iteration:

let currentContainer = document.createElement("div");
currentContainer.id = "jqxGrid" + index;
_div.appendChild(currentContainer);

After that, the initialization of the particular jqxGrid should be as you use it:
let myGrid: jqwidgets.jqxGrid = jqwidgets.createInstance("jqxGrid" + tab, "jqxGrid", settingGrid);
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alexisdcarvajalnParticipant]

Thanks, I missed that I could concatenate the name with the index

[Author]

Posts