Prepopulate selected item in dropdownlist

[Walter Konnerth]

Hi,

I have a grid in which a field is an edit type like this:

this.batches = {

create: () => {

this.batchElem = document.createElement('input');

return this.batchElem;

},

destroy: () => {

this.batchObj.destroy();

},

read: () => {

return this.batchObj.text;

},

write: (args) => {

var index = undefined;

var query = new Query();

var isEnabled = false;

if (args.rowData.batch_detail_batch) {

for (let i = 0; i < this.state.batches.length; i++) {

if (this.state.batches[i].batch === args.rowData.batch_detail_batch) {

isEnabled = true;

query = new Query().where('product_id', 'equal', this.state.batches[i].product_id);

index = i; // not valid if query is applied => how to compute it correctly?

break;

}

}

}

this.batchObj = new DropDownList({

dataSource: new DataManager(this.state.batches),

enabled: isEnabled,

fields: { value: 'id', text: 'batch' },

floatLabelType: 'Auto',

placeholder: 'Selecteaza lotul',

allowFiltering: true,

query: query,

actionComplete: () => false,

// index:index,

change: function (e) {

const tempQuery = new Query().where("id", "equal", e.value);

var findData = new DataManager(this.state.batches).executeLocal(tempQuery);

var editform = e.element.closest(".e-gridform").ej2_instances[0];

if (findData && findData.length > 0) {

var batch_detail_expiration_date = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "batch_detail_expiration_date")[0];

if (batch_detail_expiration_date) {

batch_detail_expiration_date.value = findData[0].expiration_date;

}

var price = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "price")[0];

if (price) {

price.value = findData[0].price;

}

var VAT = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "VAT")[0];

if (VAT) {

VAT.value = findData[0].VAT;

}

var quantity = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "quantity")[0];

var vatValue = findData[0].VAT ? findData[0].VAT : 0 ;

var priceValue = findData[0].price ? findData[0].price : 0 ;

var quantityValue = quantity.value ? quantity.value : 0 ;

var value_VAT = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "value_VAT")[0];

if (value_VAT) {

var vatTotalValue = ((vatValue * priceValue) / 100) * quantityValue;

value_VAT.value = vatTotalValue;

}

var value_total = [].slice

.call(editform.inputElements)

.filter(x => x.getAttribute("name") === "value_total")[0];

if (value_total) {

var totalValue = vatTotalValue + (priceValue * quantityValue);

value_total.value = totalValue;

}

}

}.bind(this),

});

this.batchObj.appendTo(this.batchElem);

},

}

The question is: how can I populate the field on edit? If I don't apply the query, the computed index is OK.

But when I apply the query (of course) the index will be different.

Can you please help me with this?

Thanks,

[Sujith Kumar Rajkumar]

Hi Walter, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we suspect that your requirement is to display the current cell value by default in the edited dropdown. If so, the row data can be retrieved in the edit params write method which can be assigned to the dropdown list’s text property to achieve it. This is demonstrated in the below code snippet, 

 

this.dropDownEdit = { 

    create: () => { 

        this.elem = document.createElement('input'); 

        return this.elem; 

    }, 

    destroy: () => { 

        this.dropObj.destroy(); 

    }, 

    read: () => { 

        return this.dropObj.value; 

    }, 

    write: (args) => { 

        this.dropObj = new DropDownList({ 

            dataSource: data, 

            fields: { text: 'ShipCountry', value: 'ShipCountry' }, 

            // Current cell value is set as dropdown selected text 

            text: args.rowData[args.column.field] 

        }); 

        this.dropObj.appendTo(this.elem); 

    } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/react-qrd3yd?file=index.js  

 

API link: https://ej2.syncfusion.com/react/documentation/api/drop-down-list#text  

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R