1. Home
  2. Forum
  3. Vue
  4. Search not working in offline dropdown list in edit dialog

Search not working in offline dropdown list in edit dialog

I'm having issues with filtering a dropdown list as the user types in an option in a vue edit dialog from the ejs-grid.  The list is populated with all the right values (~ 840 
values) but as the user types anything it says "No Records Found". My column and supporting properties looks like :

<e-column field='Company' headerText='Company' width="130" editType='dropdownedit' :edit='companyParams'></e-column>

private companyDataBinding = new DataManager({
    url: "api/Product/GetCompanies",
    adaptor: new UrlAdaptor(),
    offline: true,
    crossDomain: true,
    headers: [{ "Authorization" : getAuthHeader() },
    { 'Content-Type': 'application/json' }]
  });

  private companyParams = {
          params:   {
            allowFiltering: true,
            dataSource: this.companyDataBinding,
            fields: {text:"CompanyName", value:"CompanyName"},
            query: new Query(),
            actionComplete: () => false
          }
  };

I'm only wanting to hit the database one time to get the initial list for this dropdown and after that I want to do client side filtering.  I'm using this version of syncfusion:

"@syncfusion/ej2-vue-grids": "^18.1.59"


5 Replies 1 reply marked as answer
RS Rajapandiyan Settu Syncfusion Team July 1, 2020 12:08 PM UTC

Hi Colew, 

Greetings from syncfusion support. 

Query : user types anything it says "No Records Found" 
 
On validating your query we found that you were used different field name in both grid column and edit dropdown. Refer the below screenshot. 

 
By default while on dropdown editing in a column, we need to use same field name in both grid column and dropdown control, then only we can fetch correct value of column and bind it to the dropdown. Since this is the behavior dropdown edit. So we suggest you to use same field name in both column and dropdown. Please refer the below screenshot. 

 
<e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' :edit='ddParams1' width=150></e-column>   
 
ddParams1: { 
                        params: { 
                            allowFiltering: true, 
                            dataSource: dropdownDataSource, 
                            fields: { text: "ShipCountry", value: "ShipCountry" }, 
                            query: new ej.data.Query(), 
                            actionComplete: () => false }  
}, 

Screenshot : Fetch the column field value and bind it to the dropdown
 

Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S 


CO colew July 1, 2020 09:19 PM UTC

I actually did change that after I submitted the ticket but I'm still seeing the same issues with the dropdown.  Before I changed that that column it was obviously all blank in my grid since I didn't have it mapped appropriately but when I went to edit a record or add a new one I was seeing the behavior originally described.  After I changed the field to be "CompanyName" the grid populated correctly but the dropdown during edit/add operations still had the same behavior.  Here is what I updated it to:

<e-column field='CompanyName' headerText='Company' width="130" editType='dropdownedit' :edit='companyParams'></e-column>

I did not change anything besides this but if it helps here are my grid settings also that this column is a part of.

<ejs-grid :dataSource="productDataBinding"
                :allowPaging="true"
                :pageSettings="pageSettings"
                :allowSorting='true'
                :allowFiltering='true'
                :allowResizing="true"
                :allowExcelExport="true"
                :allowPdfExport="true"
                :allowReordering="true"
                :filterSettings='filterSettings'
                :showColumnMenu='true'
                :enablePersistence='true'
                :editSettings="editSettings"
                :sortSettings="defaultSortOptions"
                ref="productGrid"> 
  private filterSettings = {
    type: "Excel"
  }

  private defaultSortOptions = { 
    columns: [{ field: 'Id', direction: 'Descending' }] 
  };

  private editSettings = { 
    allowEditing: true, 
    allowAdding: true, 
    allowDeleting: true,
    mode: "Dialog",
    showDeleteConfirmDialog: true
  };

RS Rajapandiyan Settu Syncfusion Team July 2, 2020 05:04 PM UTC

Hi Colew, 
 
Thanks for your update. 
 
Query : We are facing Look and feel issue with respect to downloaded pdf file in the Production Mode 
 
Based on your query we could see that you have still face the same issue, filtering dropdown value is not working while on editing. We are unable to reproduce the reported issue at our end, filtering the dropdown value is working fine at our end. please refer the below code example and sample for more information. 
 
 
    <script> 
 
        let elem; 
        let dropdownObj; 
        let dropdownDataSource = new ej.data.DataManager({ 
            url: "/Home/UrlDatasourcedd", 
            adaptor: new ej.data.UrlAdaptor(), 
            offline: true, 
            crossDomain: true 
        }) 
 
        var templateGrid = Vue.component('ShowerTemplateList', { 
            template: ` 
                        <ejs-grid ref='grid' id='grid' :dataSource="data"  
                            :editSettings='editSettings' :toolbar='toolbar' :actionComplete='actionComplete' > 
 <e-columns> 
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=100></e-column> 
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
                <e-column field='ShipCountry' headerText='Ship Country' editType= 'dropdownedit' :edit='ddParams1' width=150></e-column> 
            </e-columns> 
                        </ejs-grid> 
                    `, 
            data: function () { 
                return { 
                    data: new ej.data.DataManager({ 
                        url: "/Home/UrlDatasourceone", 
                        updateUrl: "Home/Updateone", 
                        insertUrl: "Home/Insertone", 
                        removeUrl: "Home/Removeone", 
                        adaptor: new ej.data.UrlAdaptor() 
                    }), 
                    ddParams1: { 
                        params: { 
                            allowFiltering: true, 
                            dataSource: dropdownDataSource, // bind custom datasource 
                            fields: { text: "ShipCountry", value: "ShipCountry" }, // use field in both column and drodown 
                            query: new ej.data.Query(), 
                            actionComplete: () => false } }, 
                    editSettings: { 
                        allowEditing: true, 
                        allowAdding: true, 
                        allowDeleting: true, 
                        mode: "Dialog" 
                    }, 
                    toolbar: ["Add", "Edit", "Delete", "Update", "Cancel", 'ExcelExport', 'PdfExport', 'CsvExport'] 
                } 
            }, 
            methods: { 
            } 
        }); 
    </script> 
 
 
 
Note : From validating your code we see that you set enablePersistance as true in the grid. so changes made are not reflected in the grid (i.e. persist the initial rendering code ). we suggest you to modify the code with enablePersistance as false (or) run the sample in incognito window to see the changes we made in the grid. 
 
 
If you still face the same problem, please share the below details to validate further on this. 
 
  1. share the full code you have used.
  2. Share the packages version you have used for grid and dropdown controls
  3. If possible share the issue reproduced sample (or) make the issue in the given sample and share with us.
 
Regards, 
Rajapandiyan S 


Marked as answer
CO colew July 3, 2020 12:57 AM UTC

Your example helped.  It appears in my controller action I was just returning List<string> instead of a list of objects with a CompanyName property.  I resolved by my issue by changing my controller action from:

[HttpPost]
[Route("GetCompanies")]
public async Task<JsonResult> GetCompanies()
{
try
{
var productQueryable = this.servantsDbContext.Jobticket.AsQueryable();

var companies = await productQueryable.Select(x => x.Soldto)
  .Distinct()
  .ToListAsync();

return new JsonResult(companies);
}
catch (Exception ex)
{
logger.LogError(ex,
$"Failed to get companies");

return new JsonResult(new List<string>());
}
}

To:

[HttpPost]
[Route("GetCompanies")]
public async Task<JsonResult> GetCompanies()
{
try
{
var productQueryable = this.servantsDbContext.Jobticket.AsQueryable();

var companies = await productQueryable.Select(x => new
   {
   CompanyName = x.Soldto
   })
  .Distinct()
  .ToListAsync();

return new JsonResult(companies);
}
catch (Exception ex)
{
logger.LogError(ex,
$"Failed to get companies");

return new JsonResult(new List<string>());
}
}

Thank Syncfusion Team !

RS Rajapandiyan Settu Syncfusion Team July 3, 2020 05:02 AM UTC

Hi Colew, 

We are glad that you have resolved the reported problem with the provided sample. 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rajapandiyan S 


Loader.
Up arrow icon