More details:
Currently cell renders the data like this. But my requirement is If cell value is A source will be like as shown in below. If cell value is B then source will be B.
{data: ‘VPAfter’, width: ‘75px’, source: this.drpdwnData.filter(x => x[‘dropdown’] == ‘A’)[0][‘val’].split(’,’), renderer: this.selectBoxRenderer, editor: false, type: ‘dropdown’},
selectBoxRenderer = function (instance, td, row, col, prop, value, cellProperties) {
var param = false;;
if (td.innerHTML === undefined || td.innerHTML === null || td.innerHTML === "") {
param = true;
}
var flag = cellProperties.readOnly;
if (flag) {
td.innerHTML = '';
$(td).addClass('htDimmed');
return td;
} else {
$(td).css({
overflow: 'visible'
});
var selectbox = "<select id='" + col + "multi-select" + instance.container.parentElement.id + "-" + row + "' class='multi-select' multiple='multiple' >";
var options = '';
var possibleVals = cellProperties.source;
var currentVals;
if (value == null)
currentVals = [];
else
currentVals = value.split(';');
for (var x = 0; x < possibleVals.length; x++) {
if (currentVals.indexOf(possibleVals[x]) != -1)
options = options + "<option value = '" + possibleVals[x] + "' selected> " + possibleVals[x] + " </option>"
else
options = options + "<option value = '" + possibleVals[x] + "'> " + possibleVals[x] + " </option>"
}
selectbox = selectbox + options + '</select>';
td.innerHTML = selectbox;
//if ($('#'+col + 'multi-select' + instance.container.parentElement.id + '-' + row).parent().parent().click == null)
selectChange(col + 'multi-select' + instance.container.parentElement.id + '-' + row, instance, row, col, param);
//alert(instance);
return td;
}
};