Grid Inline when dropdown change to textbox

Question

Hi, sorry for disturbing,

here I have an issued about dropdown change to textbox in grid when edit inline.

The attachment is my code in UI and script.

For an example if I choose other than Malaysia I want the state change to textbox.

Please help me with the issue, thank you.

Your cooperation very appreciated.

Regards,

Mira

Attachment: Code_9033fe61.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi Mira, 
 
Greetings from Syncfusion support. 
 
Based on the query, we suspect your requirement is to dynamically re-render the EJ2 Dropdown List or Text Box control(initially rendered using the columns edit params property) based on a particular dropdown value in its change event. If so this can be achieved by destroying and re-rendering the required control(Dropdown list or textbox) on the global element. This is demonstrated in the below code snippet, 
 




countryObj = new ej.dropdowns.DropDownList({ 
      dataSource: countryData, 
        fields: { value: 'ShipCountry', text: 'ShipCountry' }, 
        change: function (args) { 
            // Based on dropdown value the required control is created and appended to the corresponding element 
            if (args.value === 'Malaysia') { 
                // Previous control instance stored in the global variable is destroyed 
                cityObj.destroy(); 
                cityObj = new ej.dropdowns.DropDownList({ 
                    dataSource: cityData, 
                    fields: { value: 'ShipCity', text: 'ShipCity' }, 
                    enabled: true, 
                    placeholder: 'Select a city', 
                    floatLabelType: 'Never' 
                }); 
                cityObj.appendTo(cityElem); 
                var tempQuery = new ej.data.Query().where('ShipCountry', 'equal', countryObj.value); 
                cityObj.query = tempQuery; 
                cityObj.text = null; 
                cityObj.dataBind(); 
            } else { 
                // Previous control instance stored in the global variable is destroyed 
                cityObj.destroy(); 
                cityObj.enabled = true; 
                cityObj = new ej.inputs.TextBox({ 
                    placeholder: 'State Name', 
                    floatLabelType: 'Never' 
                }); 
                cityObj.appendTo(cityElem);  
            } 
      }, 
      placeholder: 'Select a country', 
      floatLabelType: 'Never' 
}); 
countryObj.appendTo(countryElem); 
 
On performing the above action please ensure the proper value is returned for the controls from the edit params read method. 
 




function CityRead() { 
      return cityObj.element.value; 
} 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/160251/ze/GridApplication2115525293  
 
If we misunderstood your query or if you require any further assistance, then please get back to us. 
 
Regards, 
Sujith R

Nurul Ain Amira Azhar · Answer

Hi Sujith,Thank you very much for helping me, the code very helpful me to find the solution.But I want to ask how to filter in dropdown list when edit in grid by using this code with type contains.Best Regards,Mira

Sujith Kumar Rajkumar · Answer

Hi Mira, 
 
You’re welcome. We are glad to hear that the provided solution helped resolve your query. 
 
As for this query – “But I want to ask how to filter in dropdown list when edit in grid by using this code with type contains.”, we could understand that your requirement is to enable filtering in the edit dropdown list with ‘contains’ filter type. The steps for achieving this requirement for the EJ2 Drop down list is documented in the below help documentation link, 
 
Documentation: https://ej2.syncfusion.com/javascript/documentation/drop-down-list/filtering/#change-the-filter-type  
 
You can use this code in the dropdown list rendered in the columns edit params to achieve the requirement. This is demonstrated in the below code snippet, 
 





function CountryWrite() { 
    countryObj = new ej.dropdowns.DropDownList({ 
        dataSource: countryData, 
        fields: { value: 'ShipCountry', text: 'ShipCountry' }, 
        allowFiltering: true, 
        //bind the filtering event handler 
        filtering: (e) => { 
            // load overall data when search key empty. 
            if (e.text == '') e.updateData(searchData); 
            else { 
                var query = new ej.data.Query().select(['ShipCountry']); 
                // The ‘contains’ operator is used for filtering the dropdown values 
                query = (e.text !== '') ? query.where('ShipCountry', 'contains', e.text, true) : query; 
                e.updateData(searchData, query); 
            } 
        }, 
    }); 
}  
 
We have modified the previously shared sample based on this for your reference. You can find it below, 
 
Sample: https://www.syncfusion.com/downloads/support/forum/160251/ze/GridUpdated-1154451877  
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R

Nurul Ain Amira Azhar · Answer

Hi Sujith,Thank you very much for helping me and quick respond, the code very helping me to solve my problem :)Best Regards,Mira

Nurul Ain Amira Azhar · Answer

Sorry for disturbing you,I have an issued to validate the field required when edit in gird by previous code that I shared, can you please assist me with this issue.Thank you, your cooperation really appreciated.Best Regards,Mira

Sujith Kumar Rajkumar · Answer

Hi Mira, You’re welcome. We are glad to hear that the provided code helped resolve your problem and we are always happy to assist you in your queries. As for this query – “I have an issued to validate the field required when edit in gird by previous code that I shared, can you please assist me with this issue.”, we could understand that your requirement is to perform validation for the dropdown fields created using edit params. You can achieve it by setting the validation rules to the corresponding column and since the edit control is dynamically destroyed and re-created in your scenario, please specify the column field to the input element’s name as based on this field name only the validation will be performed in the Grid. This is demonstrated in the below code snippet,

Nurul Ain Amira Azhar · Answer

Hi Sujith,Thank you very much for helping me fix for the issue and fast respond, your helping very appreciated.Best Regards,Mira

Sujith Kumar Rajkumar · Answer

Hi Mira, 
 
You’re welcome. We are glad to hear that the provided solution helped resolve your query. 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R