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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Search Filter on js Grid Dropdown

Thread ID:

Created:

Updated:

Platform:

Replies:

142860 Feb 22,2019 12:31 PM UTC Mar 6,2019 09:24 AM UTC JavaScript 7
loading
Tags: ejGrid
Simon Bunya
Asked On February 22, 2019 12:31 PM UTC

{ 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

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Simon Bunya
Replied On 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

Vignesh Natarajan [Syncfusion]
Replied On 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. 


Simon Bunya
Replied On 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 }
                    ]
                });

Vignesh Natarajan [Syncfusion]
Replied On 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. 
 


Simon Bunya
Replied On 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

Vignesh Natarajan [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;