1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. How to reset the value of dropdownlist in ej2 in javascript

How to reset the value of dropdownlist in ej2 in javascript

Below is the code for dropdown . i had implemented this in dialog ej2.But when i open and select the value from dropdown . and Close the dialog and again open the dialog then i want to show the initial value to be the value in dropdown.:

let linePatterns = [
{value: "solid", text: "durchgezogene Linie"},
{value: "dot", text: "gepunktete Linie"},
{value: "dash", text: "gestrichelte Linie"}
];
this.linePatternValue = 'stylebox_linePattern_val_' + this.featureType;
let linePatternElement = document.getElementById('stylebox_linePattern_val_' + this.featureType);
let defaultLinePattern = this.styleValues.linePattern; // Set the default value here
 let defaultLinePatternIndex = linePatterns.findIndex(pattern => pattern.value === defaultLinePattern);

linePatternElement.style.display = '';
let linePatternObj = new ej.dropdowns.DropDownList({
width: 180,
// cssClass: 'styleBoxDropdown',
 index: defaultLinePatternIndex, // Set the index of the default value
 // value: this.styleValues.linePattern,
 dataSource: linePatterns,
popupHeight: 'auto',
change: function(args) {
console.log('linePatternElement args', args);
let linePatternSelectedItem = linePatterns.find(pattern => pattern.text === linePatternObj.text);
let linePatternSelectedVal = linePatternSelectedItem ? linePatternSelectedItem.value : "";
that.submitChangeStyle('linePattern', linePatternSelectedVal);
}
});

linePatternObj.appendTo(linePatternElement);
// linePatternObj.appendTo(`#${this.linePatternValue}`);
 linePatternObj.value = linePatterns[defaultLinePatternIndex].value;

3 Replies
KP Kokila Poovendran Syncfusion Team July 19, 2023 01:59 PM UTC

Hi Harleen,


You can set the value property of the dropdown list when opening the dialog as shown below.

function dialogOpen(): void {
  games.value = 'CA';
}


Sample: https://stackblitz.com/edit/zilvaj-d2zhuh?file=index.ts,index.html


If we have misunderstood the issue you are facing, could you please modify the provided sample according to your specific scenario? Additionally, kindly provide us with step-by-step instructions to replicate the issue and, if possible, a video illustrating the problem.


Regards,

Kokila Poovendran.


HA Harleen July 20, 2023 12:17 PM UTC

This is my dialog code :

if(!this.dialog){
// let dialog = null;
 // Check if the dialog is already created
 that.dialog = new ej.popups.Dialog({
header: this.title,
width: '340px',
isModal: false,
showCloseIcon: true,
closeOnEscape: false,
position: {X: that.position.x, Y: that.position.y},
minWidth: 340,
minHeight: 100,
content: that.formHtml,
//footerTemplate: showFooter ? '#styleBox_footer' : undefined,
 buttons: [
{
buttonModel: {
content: tools.getLocalizedText("Delete", "delete"),
isPrimary: true
 },
click: function(e) {
console.log('button clicked', e, 'this.callbacks', that.callbacks);
that.callbacks.deleteFeature(e);
// if(that.callbacks && that.callbacks.deleteFeature === 'function'){
 // that.callbacks.deleteFeature(e);
 // }

 that.dialog.hide();
}
},
],
open: function() {
this.content = that.formHtml; // Set the content property here
 },
close: () => {
// dialog.hide(); // Close the dialog when the close event is triggered
 if (typeof that.callbacks.onClose === 'function') {
that.callbacks.onClose();
}
that.dialog.destroy();
jqDialogElement.remove();
that.dialog = null;
}
});

// that.dialog.content = that.formHtml;
 that.dialog.appendTo(jqDialogElement);
//that.dialog.show(that.isFullScreen());
}
that.dialog.show();

let linePatterns = [
{value: "solid", text: "durchgezogene Linie"},
{value: "dot", text: "gepunktete Linie"},
{value: "dash", text: "gestrichelte Linie"}
];
this.linePatternValue = 'stylebox_linePattern_val_' + this.featureType;
let linePatternElement = document.getElementById('stylebox_linePattern_val_' + this.featureType);
let defaultLinePattern = this.styleValues.linePattern; // Set the default value here
 let defaultLinePatternIndex = linePatterns.findIndex(pattern => pattern.value === defaultLinePattern);

linePatternElement.style.display = '';
let linePatternObj = new ej.dropdowns.DropDownList({
width: 180,
// cssClass: 'styleBoxDropdown',
 index: defaultLinePatternIndex, // Set the index of the default value
 // value: this.styleValues.linePattern,
 dataSource: linePatterns,
popupHeight: 'auto',
change: function(args) {
console.log('linePatternElement args', args);
let linePatternSelectedItem = linePatterns.find(pattern => pattern.text === linePatternObj.text);
let linePatternSelectedVal = linePatternSelectedItem ? linePatternSelectedItem.value : "";
that.submitChangeStyle('linePattern', linePatternSelectedVal);
}
});

linePatternObj.appendTo(linePatternElement);
// linePatternObj.appendTo(`#${this.linePatternValue}`);
 linePatternObj.value = linePatterns[defaultLinePatternIndex].value;



KP Kokila Poovendran Syncfusion Team July 25, 2023 08:30 AM UTC

Hi Harleen,


We apologize for any inconvenience you've experienced. Based on the code you provided, we have created a new sample to better understand the issue you're facing. However, we suspect that the problem might be related to how the dialog content is loaded from another page. To assist you further, could you please share the code that handles the content property? This will provide us with more insights into the situation.


In our investigation, we noticed that in our code, we ensure the dialog is destroyed each time it's closed, and then re-rendered when opened again. It would be helpful if you could confirm whether you are implementing a similar approach. If you have a runnable sample, kindly share it with us so that we can better understand your specific requirements.


To further assist you, we have prepared a sample that you can access here: 

Sample: https://stackblitz.com/edit/zilvaj-bgvtko?file=index.ts,index.html,dataSource.json


Loader.
Up arrow icon