Forum Replies Created

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts

  • alexisdcarvajaln
    Participant

    Is it possible to set the identifier of a grid generated by code ?, for example in my html I have the following:
    <jqxGrid #GridReference [width]=200 [columns]="columns></jqxGrid>
    so I can access the properties and methods of the grid through its identifier that is GridReference, but if I create my grid using code,
    in my html I would have:
    <div id"spaceGrid"></div>
    In my ts file I would create it as follows:

    ngAfterViewInit(){
        let xd : jqwidgets.jqxGrid =  jqwidgets.createInstance("#spaceGrid",'jqxGrid', this.settingGrid);
      }
    
    files = [
                  {
                    name:'Juan',
                    address: "abc"
                  },
                  {
                    name:'Camilo',
                    address: "xyz"
                  }
                ]
      source =
            {
              datafields: [
                  { name: 'name' },
                  { name: 'address' }
              ],
              localdata: this.files
            };
    
      dataAdapterGrid = new jqx.dataAdapter(this.source);
      settingGrid : jqwidgets.GridOptions = {
        source: this.dataAdapterGrid,
        width: 300,
        columns: [
          { text: 'Name', datafield: 'name', width: "60%"},
          { text: 'Address', datafield: 'address', width:"40%"},
        ]
      }
    

    In this case I put the properties in the settingGrid variable, but how do I set this #GridReference identifier inside the settingGrid variable?
    I know that I could access through the variable xd and would have to put it as global, but in one case I might have a certain number of Grids and I would not want to place an identifier for each of them. Is there a more dynamic way to do it?

    • This reply was modified 5 months, 2 weeks ago by  alexisdcarvajaln. Reason: add details

    alexisdcarvajaln
    Participant

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


    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.


    alexisdcarvajaln
    Participant

    Some example that you can share would be very helpful


    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.

    in reply to: Grid Grid #107620

    alexisdcarvajaln
    Participant

    Excellent, it was what I was looking for, thank you very much.

    in reply to: Grid Grid #107598

    alexisdcarvajaln
    Participant

    Hello, I have a grid where one of its columns is a checkbox type, all columns have their editing disabled except the checkbox column, I would like to know how can I enable a cell in the row when checking or unchecking the checkbox?

    in reply to: Nested Grid Nested Grid #107184

    alexisdcarvajaln
    Participant

    It is important that when adding a row to the nestedGrid you save that row either at the time of creating it or with a button in an arrangement and the name of that arrangement should go in this line let orders = this.ordersDataAdapter.records; and instead of calling this variable this.ordersDataAdapter.records you could put something like this: let orders = this.myArray; it worked for me
    because when creating a new row the nestedGrid is instantiated again and since it has nothing added to the origin then it leaves you empty.

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