jQuery UI Widgets Forums Navigation Tabs Possible to dynamically generate tabs?

This topic contains 10 replies, has 3 voices, and was last updated by  alexisdcarvajaln 5 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • Possible to dynamically generate tabs? #107306

    walker1234
    Participant

    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.

    Possible to dynamically generate tabs? #107326

    Hristo
    Participant

    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

    Possible to dynamically generate tabs? #107352

    walker1234
    Participant

    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?

    • This reply was modified 8 months ago by  walker1234.
    Possible to dynamically generate tabs? #107375

    Hristo
    Participant

    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

    • This reply was modified 7 months, 4 weeks ago by  Hristo.
    Possible to dynamically generate tabs? #108008

    alexisdcarvajaln
    Participant

    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.

    Possible to dynamically generate tabs? #108011

    Hristo
    Participant

    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

    Possible to dynamically generate tabs? #108027

    alexisdcarvajaln
    Participant

    Some example that you can share would be very helpful

    Possible to dynamically generate tabs? #108029

    Hristo
    Participant

    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

    Possible to dynamically generate tabs? #108036

    alexisdcarvajaln
    Participant

    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.

    Possible to dynamically generate tabs? #108060

    Hristo
    Participant

    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

    Possible to dynamically generate tabs? #108066

    alexisdcarvajaln
    Participant

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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.