Current filter:
                                You should refresh the page.
                                  • Hello,
                                    Is it possible to make the matching  letters of a dxselectbox font bold when searchEnabled is true.
                                    For example: if I am typing  'ala' then the result of the search is displaying matching records containing 'ala' , what I need is the matching text of the result should be bold  .

                                    Second thing what I want to implement is I  want to show only top 10 matching records in the result set while searching,and a link button in the bottom of the result set(Button will be constant) with a click event.

                                    I have attached a DEMO jsfiddler, I will be thankful if you the necessary changes in the fiddler if possible.
                                • Kulasekaran K 08.02.2016
                                  I also want to implement the same for dxdatagrid lookup column too..Grid Example

                                  Please help me to resolve the same for both.

                                  I have also attached a screen shot containing button below the result set, where 'Advance Search' is a link button., which will be common to both dxselectbox and dxdatagrid lookup.

                                1 Solution

                                Creation Date Importance Sort by
                                Hi Kulasekaran,

                                You can accomplish this task by using dxSelectBox.itemTemplate as shown below. The main idea is to find the searched text in the item text. Wrap it with an element and apply a CSS rule that changes the font thickness. So, your code might be as follows:

                                $("#selectBox").dxSelectBox({ ..., itemTemplate: function(itemData, itemIndex, itemElement) { var text =, search = $("#selectBox").dxSelectBox('instance').option('text'), resElement = $('<span>') .text(; if (search.length) { var startPos = text.toLowerCase().indexOf(search.toLowerCase()), span = "<span class='highlight'>", spanLength = span.length, itemText = ""; if (startPos >= 0) { itemText = [ text.slice(0, startPos), span, text.slice(startPos, startPos + search.length), "</span>", text.slice(startPos + search.length) ].join(''); resElement = $('<span>') .html(itemText); } } return resElement; } });

                                The example shows this approach in action. You can use the same approach for dxSelectBox in your data grid.
                                Show all comments
                                • Kulasekaran K 08.02.2016
                                  Hello Nikolai,
                                  Thanks for the response, it works fine but how to show top 10 searched records in the result set of dxdatagrid, and how to show a button in the bottom of the result set,
                                • Nikolai (DevExpress Support) 08.03.2016

                                  Your idea is unclear. Would you please send us a mockup or screenshot that shows the desired layout?
                                • Kulasekaran K 08.03.2016

                                  Hello Nikolai,
                                  Please go through the requirement.
                                  1.I want to show a button in the dxdatagrid lookup dropdown like 'Advance Search'(Please go through the attached image) .
                                  2.Since the lookup is searched enabled, So if user types any thing the result set/dropdown list should display only top 10 records along with the      Advance Search button.
                                  3.If user types something in the lookup then the matching text in the dropdown list should be bold.

                                  I have also attached a screenshot of the requirement.
                                  Please provide a Fiddler example

                                • Gosha (DevExpress Support) 08.04.2016
                                  Hi Kulasekaran,

                                  To highlight a search text in the dxSelectBox dropdown, use the code Nikolai provided. To get an instance of dxSelectBox used in a cell, handle the onEditorPrepared event:

                                  onEditorPrepared: function(options) { if (options.parentType === 'dataRow' && options.dataField === 'formatID') selectBox = options.editorElement; }

                                  To limit the number of records dxSelectBox displays in its dropdown, wrap your data source into a instance and handle its postProcess event. In the event handler, you can return only first ten records. In the same way, you can add one more item that will work as the required "Advanced Search" button:

                                  var limitCount = function(data) { var result = data.slice(0, 9); result.push({command: "search", text: "Advanced Search", disabled: true}); return result; } var source = new{ store: formats, postProcess: limitCount });

                                  You can customize the item used for the "Advanced Search" button in the itemTemplate function of dxSelectBox:

                                  if (itemData.command && itemData.command === "search") { return $('<span>').html(itemData.text).css({ "margin": "0 auto", "display": "table" }).on("dxclick", function() { alert("Search"); }); }

                                  I've attached sample markup to illustrate this.

                                • Kulasekaran K 08.05.2016
                                  Hello Gosha,
                                  Thank's a lot for the help it works fine,but when I am clicking that 'Advanced Search' button the lookup should close just like when we select any value of the dropdown,which is not happening.

                                  what my actual scenario is when user clicks that advanced button the lookup should close and a poopup should appears  .
                                  I am able to show the popup but the look up is not closing.
                                  And also I want to clear the searched text at the same time
                                  Can you please suggest me to achieve so. 
                                • Kulasekaran K 08.08.2016
                                  Can some one please help me to short this out.
                                  I am still waiting for this from past three days. 
                                • Gosha (DevExpress Support) 08.08.2016

                                  Hi Kulasekaran,

                                  You can close the dxSelectBox dropdown by using the close method. To clear the search text, use the reset method. But at the moment, this raises an exception because of the dxDataGrid - The "Unable to get property 'searchValue' of undefined or null reference" error occurs when trying to call the cellValue method for an edit form editor bug fixed in version 16.1.6. You can upgrade your version to 16.1 and use the hotfix provided in that ticket. Or, you can wait until we fix this issue in version 15.2 as well.

                                • Kulasekaran K 08.08.2016
                                  Hello Gosha,
                                  Thanks a lot for the help it works fine with my project now.
                                  I need one more help,
                                  The popup which opens after clicking the advanced search button contains some dxselectbox,so after selecting the value in the selectbox and clicking submit the value is getting stored in the grid cell ,which I am able to implement.
                                  Problem what I am facing is after clicking the submit button in the popup the grid saves the data automatically,with that particular one value selected in the popup.
                                  what I want is  the row should be still in the edit mode with focus on other cell of the same row.
                                  can you please help me with this.
                                • Kulasekaran K 08.08.2016
                                  I tryed
                                  var dataGrid = $("#gridContainer").dxDataGrid({ onContentReady: function (e) { alert(shouldInvokeEditing) if (shouldInvokeEditing) { shouldInvokeEditing = false; e.component.editRow(0); var amountCell = e.component.getCellElement(0, 1); e.component.focus(amountCell); } }, }).dxDataGrid('instance');
                                  In Submit button click which is working but its removing the previous selected value.
                                • Gosha (DevExpress Support) 08.09.2016


                                  I've created a separate ticket on your behalf (T412755: How to change a grid cell value using a popup). It has been placed in our processing queue and will be answered shortly.