1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid with DropDown list from Docs produces double labels in Add / Edit Dialog

Grid with DropDown list from Docs produces double labels in Add / Edit Dialog

So copying the code from the example here - of which, this example does not render in the preview tab within the syncfusion site:  https://ej2.syncfusion.com/javascript/documentation/grid/edit/?no-cache=1#dialoginline-template

Produces double field labels in the Add / Edit popup dialog.  If you set the dropdown placeholder to '', then only one is shown but then the grid column label does not float.

Code:

columns: [
    { field: 'category_id', headerText: 'Category', allowGrouping: true,
        validationRules: { required: true }},

function actionComplete(args) {
    // console.log(resolveReferences(args));
    if (args.requestType === 'beginEdit'||args.requestType === 'add') {
        new ej.dropdowns.DropDownList({value: args.rowData.category_id,
            dataSource: categories, fields: {text: 'name', value: 'id'}, popupHeight: '200px', floatLabelType: 'Always',placeholder: 'Category'}, args.form.elements.namedItem('category_id'));



Generated Output:


<div class="e-float-input e-control-wrapper"><div class="e-float-input e-control-wrapper e-input-group e-ddl e-lib e-keyboard" tabindex="0" aria-disabled="false" aria-owns="Gridcategory_id_options" role="listbox" aria-haspopup="true" aria-expanded="false" aria-activedescendant="null" aria-live="polite" aria-labelledby="label_Gridcategory_id" value="" e-mappinguid="grid-column169" style="width: 100%;"><select aria-hidden="true" tabindex="-1" class="e-ddl-hidden" name="category_id" id="Gridcategory_id_hidden"></select><input class="e-field e-defaultcell e-lib e-dropdownlist e-control" type="text" value="" e-mappinguid="grid-column169" id="Gridcategory_id" style="" aria-labelledby="label_Gridcategory_id" role="textbox" readonly="" tabindex="-1" aria-disabled="false"><span class="e-float-line"></span><label class="e-float-text e-label-top" id="label_Gridcategory_id" for="Gridcategory_id">Category</label><span class="e-input-group-icon e-ddl-icon e-search-icon"></span></div><span class="e-float-line"></span><label class="e-float-text e-label-top" id="label_Gridcategory_id" for="Gridcategory_id">Category</label></div>


Also, maybe I am dumb, but how do we format code in the forum edit window?  Is it back ticks or what?  The UI doesn't show any tools for that and sometimes when I copy paste, it looks correct and then sometimes not.

Thank you all for your hard work!!!



3 Replies
MA Mark March 1, 2020 07:08 PM UTC

Meant to add, we solved it by not using actionComplete at all and just added the below code to our columns.  The only issue though, is in the grid, it displays the value but not the text.  Is that possible to achieve?


{ field: 'category_id', headerText: 'Category', allowGrouping: true,
    validationRules: { required: true },editType: 'dropdownedit', edit: {
        params: {
            query: new ej.data.Query(),
            dataSource: categories,
            fields: { value: 'id', text: 'name' },
            allowFiltering: true
        }
    }},

MA Mark March 1, 2020 07:20 PM UTC

And this was all solved by just using the foreign key field options for a column.  Due to this, the docs then become a bit confusing as to why you would use one over the other.  None the less, we are working although the sample docs do need to be fixed.

{ field: 'category_id', headerText: 'Category', allowGrouping: true,
    validationRules: { required: true },dataSource: categories, foreignKeyField:'id',foreignKeyValue:'name'},


RR Rajapandi Ravi Syncfusion Team March 2, 2020 01:27 PM UTC

Hi Mark, 

Greetings From Syncfusion Support. 

Query#: this example does not render in the preview tab within the syncfusion 

Sorry for the inconvenienced caused  

We have logged an improvement feature task and it will be refreshed in online ASAP. 

Query#: Produces double field labels in the Add / Edit popup dialog. 

Based on your query we have prepared a sample and tried to reproduce the issue but it works fine from our end. Please refer the below demo sample for more information. 


If you still have the issue please reproduce the issue in our below attached sample that will be helpful for us to provide better solution. 


Query#: we solved it by not using actionComplete at all and just added the below code to our columns 

We checked the code example and found that you are using a edit params property for the category_id column. In dialog template the editors will be display in dialog that you defined in the template. So, the edit params will work for the inline editing not for the dialog template.  

To convert the form editors to EJ2 controls, we need to use the actionComplete event. In actionComplete event with the requestType as “add” or “beginEdit” we will convert the form editors to EJ2 controls. 

Regards,
Rajapandi R 


Loader.
Up arrow icon