Search Filter on js Grid Dropdown

[Simon Bunya]

{ 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]

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. 

 

sample Link: https://jsplayground.syncfusion.com/2tgvtf0l 

Refer our API documentation for your reference 

https://help.syncfusion.com/api/js/ejgrid#members:columns-editparams  

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan. 

[Simon Bunya]

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]

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]

 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]

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]

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]

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. 

Sample: https://jsplayground.syncfusion.com/ybk1yj3s  

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. 

 

[sowmi manchim]

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

[Gowri Loganathan]

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.  

[sowmi manchim]

Hi Gowri,

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

[Manivannan Padmanaban]

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.