We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Search Filter on js Grid Dropdown

{ field: "product_code", width: 200, headerText: "Product", isPrimaryKey: true, editType: "dropdownedit", foreignKeyValue: "product_description", editParams: { fields: { value: "product_code", text: "product_description", groupBy: "Classification" }, dataSource: mProducts }, enableFilterSearch: true, },


Hello,
how can i enable a search in a grid drop-down, refference to the code above using ", enableFilterSearch: true," it has refused to active the search in the drop-down
Many Thanks

11 Replies

VN Vignesh Natarajan Syncfusion Team February 25, 2019 11:21 AM UTC

Hi Simon, 
 
Thanks for contacting Syncfusion support. 
 
Query: how can i enable a search in a grid drop-down, refference to the code above using ", enableFilterSearch: true," it has refused to active the search in the drop-down 
 
From the shared code example, we could see that you have defined the enableFilterSearch property outside the editparams (i.e. instead of defining the enableFilterSearch property within the editparams you have defined it in the column definition ) due to this the searchbar is not enabled. Refer the below code and sample link, 
 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                  ................ 
                columns: [ 
                  { field: "EmployeeID", foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: window.employeeView, width: 75, headerText: "First Name" ,editType:"dropdownedit",editParams: { enableFilterSearch: true }}, 
                  { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric,  width: 80, format: "{0:c2}" }, 
                ] 
            }); 
        }); 
    </script> 
 
Refer the below link for the modified sample. 
 

Refer our API documentation for your reference 


Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 



SB Simon Bunya February 26, 2019 05:46 AM UTC

Many Thanks Vignesh,
it worked out well, 

one more thing i want to sort the rows on a dialog grid such that the last added row comes on top not down of the grid 

Thanks


VN Vignesh Natarajan Syncfusion Team February 27, 2019 10:34 AM UTC

Hi Simon, 
 
Thanks for the update. 
 
Query: “i want to sort the rows on a dialog grid such that the last added row comes on top not down of the grid” 
 
Before proceeding with your query, kindly share the following details 
 
  1. Share the grid rendering.
  2. Details regarding your dataSource (local or remote). Mention the adaptor type(if any).
  3. Because by default for local data, newly added record will be inserted in the first. And for remote data, it will be based on the action in server side.
  4. Share more details regarding your requirement(do you wan to sort the Grid or move the inserted record alone to top).
 
Requested details will be helpful for us to validate the reported issue at our end. 
 
Regards, 
Vignesh Natarajan. 



SB Simon Bunya February 27, 2019 12:08 PM UTC

 Hello Vignesh,

Below is the code i'm using, and whenever i add a new on the grid, it shows on top instead of being down   

Many Thanks



  $("#order_grid").ejGrid({
                    dataSource: ej.DataManager({ url: "GetOrderCustom", batchUrl: "UpdateCustom", adaptor: "UrlAdaptor" }),
                    query: new ej.Query().addParams('param_on', order_no),
                     allowGrouping: false,
                     toolbarSettings: { showToolbar: true, toolbarItems: ["add", "delete", "cancel"] },
                    editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true, editMode: 'batch' },
                    allowScrolling: true,
                    scrollSettings: { width: "100%", height: "auto" },
                    allowPaging: false,
                    enableAltRow: true,
                    allowTextWrap: true,
                    textWrapSettings: { wrapMode: "both" },
                    allowResizeToFit: true,
                    showStackedHeader: true,
                    isResponsive: true,
                    enableResponsiveRow: true,
                    allowScrolling: true,
                    allowKeyBoardNavigation: true,
                     columns: [
                         { field: "product_code", width: 200, headerText: "Product", foreignKeyValue: "product_description", editType: "dropdownedit", editParams: { fields: { value: "product_code", text: "product_description", groupBy: "Classification" }, enableFilterSearch: true}, dataSource: mProducts},
                        { field: "Quantity_Required_Current_Patients", headerText: "Quantity Required", allowEditing: true, width: 80, editType: ej.Grid.EditingType.Numeric, editParams: { minValue: 0 } },
                        { field: "Notes", headerText: "Notes",  width: 200, allowEditing: true },
                        { field: "RFSONotes", headerText: "SCTO Notes",   width: 200, allowEditing: false }
                    ]
                });


VN Vignesh Natarajan Syncfusion Team February 28, 2019 11:02 AM UTC

Hi Simon, 
 
Thanks for the update. 
 
Query: whenever i add a new on the grid, it shows on top instead of being down    
 
From your query, we understand that you understand that you need to insert the newly added in last position. By default the newly added record is inserted in the top of the grid for local data. And for remote data records will be instead in a position which we given in the server side. Since you are using remote data so you need to handle the new row add position in the server end insert method as like below solution. 
 
Refer the below code example 
 
  $("#order_grid").ejGrid({ 
………………………. 
            editSettings: { allowDeleting: true, allowEditing: true, allowAdding: true, editMode: 'batch', rowPosition: "bottom" }, 
            ……………. 
           columns: [ 
                { field: "OrderID", width: 200, isPrimaryKey: true }, 
                ……….. 
           ] 
        }); 
 
Server End 
 
    public ActionResult UpdateCustom(List<EditableOrder> changed, List<EditableOrder> added, List<EditableOrder> deleted) 
        { 
           ………………… 
           if (added != null) 
                OrderRepository.ComplexAdd(added); 
            var data = OrderRepository.GetComplexRecords(); 
            return Json(data, JsonRequestBehavior.AllowGet); 
        } 
 
  public static void ComplexAdd(List<EditableOrder> record) 
        { 
            int insertposition = GetAllRecords().Count(); // get the total record count 
            foreach (var temp in record) 
                GetComplexRecords().Insert(insertposition, temp); 
        } 
 
Note: Please refer the primaryKey  in order to achieve the edit action and by setting the rowPosition property of editSetting as bottom we can add the new row at bottom of grid content. 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 
 



SB Simon Bunya March 5, 2019 06:44 AM UTC

Many Thanks Vignesh Natarajan, this worked out well,

 allowKeyboardNavigation: true,

{ field: "Quantity_Required", headerText: "Quantity Required", allowEditing: true, width: 80, editType: ej.Grid.EditingType.Numeric, editParams: { minValue: 0 }  },


above is the code i use and i want to apply a keyboard navigation on a dialog JS grid, but its not working out  


Thanks


VN Vignesh Natarajan Syncfusion Team March 6, 2019 09:24 AM UTC

Hi Simon, 

Thanks for the update. 

Query : i want to apply a keyboard navigation on a dialog JS grid, but its not working out   

From your query, we understand that you are facing with keyboard navigation of ejGrid which inside the ejDialog. We have analyzed the issue by preparing a sample as per your suggestion and we are unable to reproduce the mentioned issue on our side.  

Please refer the below link for the sample. 


Please share the following details. 

  1. Share the video demo or screenshots of the issue you are facing.
  2. Share the scenario in which the keyboard navigation is not working.
  3. If possible please try to reproduce the issue in the attached sample.

Regards, 
Vignesh Natarajan. 
 



SM sowmi manchim March 2, 2020 11:27 AM UTC

Hi 
The Excel filter pop up is always displayed at one position only on click of any column. As shown in picture, the position is absolute and top left positions calculated default. Please help us to render the filter under the respective column clicked.

ej.web.all.min version used is 15.1.0.41

Attachment: SyncfsionExcelFilterPositionIssue_9cdf745d.zip


GL Gowri Loganathan Syncfusion Team March 3, 2020 10:49 AM UTC

Hi Sowmi, 

Thanks for using Syncfusion Products. 

Query#: Excel filter popup shown in topleft of column 

The reported issue is already a known issue and we have fixed it in our latest version. 

To avoid the reported issue, We request you to upgrade the Essential studio version from Minimum(v16.1.0.37) to Maximum (v17.4.0.46

Kindly get back to us, if you need more assistance on this. 

Regards, 
Gowri V L.  




SM sowmi manchim March 18, 2020 06:20 AM UTC

Hi Gowri,

The version update fixed the filter position issue. Thanks a lot.


MP Manivannan Padmanaban Syncfusion Team March 19, 2020 04:52 AM UTC

Hi Sowmi, 

Thanks for the update. 

We are glad to hear that the reported issue has been resolved. 

Please get back to us, if you need further assistance. 

Regards, 
Manivannan Padmanaban. 


Loader.
Live Chat Icon For mobile
Up arrow icon