JQXCOMBOX AND GRID

[nyaupane37Participant]

I have Combobox inside my grid column While editing data I have to show selected according as id received from api.
The item_id column in grid does not set value (is empty), and combobox didn’t set selected.

 Getting data from api..
 
  this.rdmservice.show(id).subscribe(
      result => { 

        this.requisition_item = result;
        this.source.localdata = this.requisition_item;
        this.myGrid.updatebounddata("cells");
      }, 
      error => { 
        console.log(error);
      }
    );
    data receiced from api...
    [
        {  item_id: 2, quantity: 66, unit_id: 66, remarks: "Good",…},
        { item_id: 2, quantity: 66, unit_id: 66, remarks: "Good",…}
    ]
    

 this.gridSource =
    {
        localdata: {},// data from api..
        datatype: "json",
        datafields:
        [
            { name: "item_id", type: "string"},
            { name: "quantity", type: "number" },
            { name: "unit_id", type: "number" },
            { name: "remarks", type: "string" },
        ],
        id:"item_id"
    };
  
    this.dataAdapter = new jqx.dataAdapter(this.gridSource);

    this.comboboxSource =
    {
        datatype: "json",
        datafields: [
            { name: "id" },
            { name: "name" },
            ],
        async: false,
        url: this.apiUrl+"item?limit=all"
    };
    this.comboboxAdapter = new jqx.dataAdapter(this.comboboxSource, {
      autoBind:true,
      downloadComplete: (data, status, xhr) => {
        let tData = data.data;
        return tData;
    }
    });
data for combobox received from api:
    [
        {id: 1, code: "22", name: "xyzSection", …}
       ,
        {id: 2, code: "34", name: "ABC Section",…},
       
        {id: 3, code: "67", name: "nnn",…},
       
        {id: 4, code: "hh", name: "hh", …}
        
    ]

    this.columns =
    [
        { text: "Item Name", datafield: "item_id", displayfield:"name", columntype: "combobox", width: 120 ,
          initeditor: (row: number,cellvalue:string, editor: any,celltext:string,cellwidth:number,cellheight:number): void => {
              editor.jqxComboBox({
                source: this.comboboxAdapter,
                displayMember: "name",
                valueMember: "id"
              });
          }
         },
        { text: "Quantity", datafield: "quantity", width: 120 },
        { text: "Unit", datafield: "unit_id", columntype: "textbox", width: 70 },
        { text: "Remarks", datafield: "remarks", columntype: "textbox", width: 120 },
    ];

[HristoParticipant]

Hello nyaupane37,

You could use only createeditor callback of that column.
Please, take a look at this demo (‘Ship City’ column):
https://www.jqwidgets.com/angular/angular-grid/angular-grid-customizededitors.htm

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts