[alexisdcarvajalnParticipant]

myJqxLoader.open();
 myServcie.saveData(object).subscribe(()=>{
  myJqxLoader.close();
 });

The requested service delays and takes time to make changes to the server.
This being the case, the user should not interact with the elements on the screen until the process is finished. So jqxLoader in modal mode gives me that functionality except if I press the ESC key and the functionality stops serving.

[alexisdcarvajalnParticipant]

I do not have much experience with this, but I have investigated and seen that mostly css frameworks block the keyboard in general so that it is not interacted from there. Of course this is the modal mode. I use angular and in it rxjs to make get and post requests to the server, the service takes its time to make those requests and that is where I use the jqxLoader, before sending to record I open it with its .open () method and when it is ends its process, the jqxLoader closes automatically using the .close () method. More than anything it is only visualization so that the user cannot interact with the elements of the screen until the process of my services is finished.

[alexisdcarvajalnParticipant]

Hi, i’ve question.
When I press the ‘Esc’ key with the jqxLoader in modal mode, it disappears. There is a way around this.

[alexisdcarvajalnParticipant]

I have a question.
I want to create jqxInput component with this sentence:

jqwidgets.createInstance("#txtInputCosto",'jqxInput',{ height:50 });

In my file html I have this
<div id="txtInputCosto"></div>

But in the console show me this.

core.js:15724 ERROR Error: jqxInput: Missing Text Input in the Input Group
    at c.<computed>.render (jqxinput.js:8)
    at c.<computed>.createInstance (jqxinput.js:8)
    at Object.push../node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js.b.jqx.applyWidget (jqxcore.js:15)
    at HTMLDivElement.<anonymous> (jqxcore.js:15)
    at Function.each (jqxcore.js:8)
    at init.each (jqxcore.js:8)
    at init.b.fn.<computed> [as jqxInput] (jqxcore.js:15)
    at Object.createInstance (jqxcore.js:15)
    at SafeSubscriber._next (detalle-registro-tramite.component.ts:382)
    at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:192)

Can you help me?

[alexisdcarvajalnParticipant]

what it is trying to say is that before sending the file to the server we could somehow manipulate it, that is, perhaps convert it into blob format and from there be able to send it to the server or identify if the file to upload is of type image and how much is the file size and weight.

If that were possible it would help us a lot.

[alexisdcarvajalnParticipant]

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?

[alexisdcarvajalnParticipant]

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

[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.

[alexisdcarvajalnParticipant]

Some example that you can share would be very helpful

[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.

[alexisdcarvajalnParticipant]

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

[alexisdcarvajalnParticipant]

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?

[alexisdcarvajalnParticipant]

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.

[Author]

Posts