Search Panel and toolbar template

[Morten]

Hi Support.

The Search panel is a great new feature (https://demos.telerik.com/kendo-ui/grid/search-panel).

Will it work together with the toolbar template?

Best regards

Morten

 

 

 

[Alex Hajigeorgieva]

Hello, Morten,

The handler for the search functionality is executed on the ".k-grid-search input" selector so as long as you have HTML that will match the selector in the grid toolbar template, the functionality will work as expected. As a minimum, an element with class "k-grid-search" should be a a parent to an input. Here is the built-in HTML:

<span class="k-textbox k-grid-search k-display-flex">
	<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
  <span class="k-input-icon">
  	<span class="k-icon k-i-search"></span>
  </span>
  </span>

Below you can find a runnable Dojo with a grid toolbar template and a grid search for your convenience:

https://dojo.telerik.com/@bubblemaster/AXilOVUR/2

Let us know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Morten]

Thanks Alex. Works great.

[Morten]

Hi Alex.

I'm adding a hidden close icon (.k-i-close .k-i-x) next to the k-i-search and toggle visibility of the two icons depending on the content in the input element (length>0 only show close icon, else only show search icon).

Clicking the close icon I remove the value of the input element. However, how do I trigger the search to clear set filters?

Thank you in advance.

Best regards

Morten

[Tsvetomir]

Hi Morten,

My name is Tsvetomir and I will carry on the communication over this thread.

I believe that the value of the input is cleared in the click event handler of the span, is that correct? If so, the expression that is built to filter the data source would not be cleared because it is built in the input event handler of the input. Therefore, I can suggest clearing out the value and triggering the input event as follows:

$(".k-grid-toolbar .k-grid-search input").val("").trigger("input")

Let me know in case the issue is still present.

 

Kind regards,
Tsvetomir
Progress Telerik

[Neil]

Where is that search panel that when empty, "the search icon" is seen, and as you start to type the "close icon" appears..
and when you click the "close icon" the input field will be cleared?  That simple.

[Morten]

Neil, here is what I do including highlighting search results:

<script id="grid-toolbar-tmpl" type="text/x-kendo-template">
<span class="k-textbox k-grid-search k-display-flex" style="margin-left:3px;"> <input id="search-grid" autocomplete="off" placeholder="Search..." class="k-input"> <span class="k-input-icon"><span class="k-icon k-i-search"></span></span> </span> </script>

<script type="text/javascript" src="~/Scripts/jquery.mark.min.js"></script>

$("#grid").kendoGrid({ toolbar: [ { template: window.kendo.template($("#grid-toolbar-tmpl").html()) } ],
...
dataBound: function(e) {
var searchString = $("input#search-grid").val();
if (searchString.length > 0) {
setTimeout(function() {
$(e.sender.tbody).mark(searchString, { "element": "span", "className": "highlight", "exclude": [ ".label", "button" ] }); }, 300);
} }

 

[Tsvetomir]

Hi Morten and Neil,

The Kendo UI SearchPanel does not interchange the "X" and search icons. The search icon is part of the template that is initially rendered for the search panel of the grid. 

As an alternative, you could swap the two icons dynamically based on the count of characters within the input. For the clear icon, you would have to handle the respective field and clear out the input.

 

Regards,
Tsvetomir
Progress Telerik

[Neil]

The searchbox and the close icon works for me, but i lost my "Add Button".. 
this mean, i cannot do this?

.ToolBar(tool =>
    tool.Create();
    tool.Template(<template here>);
)
    

[Tsvetomir]

Hi Neil,

When the Toolbar template of the grid has utilized any options except the "Template" one will be ignored. If you would like to have the Create functionality in a toolbar template, you should add a button with class "k-grid-add" and "k-button". Mimicking the rendered HTML from the create button will automatically make the button behave like the built-in one. 

Let me know in case additional assistance is needed.

 

Regards,
Tsvetomir
Progress Telerik

[Neil]

This(see attached) what happen when I mimic the create functionality, the appearance is distorted... 
Actually, my original intention is to have that "x" button in the searchbox. As the user types in, the "x" should display and be able to clear the field when the user click.. I posted in the forum, they said that I am going to use a template, so i did, and i customized it's functionality. It worked, but I cannot see the "Add New" button anymore. Is there a possibility the "x" button functionality in the searchbox?.. I can see it in the demo page's search box..

[Tsvetomir]

Hi Neil,

Via the default options of the Kendo UI Grid, you could include the two options in the toolbar:

        .ToolBar(t => { t.Search(); t.Create(); })

I went ahead and checked out the forum thread of interest and I have noticed that the following suggestion is provided:

        .Events(ev=>ev.DataBound("onDataBound"))

    <script>
        function onDataBound(e) {
            var grid = e.sender;
            var clearButton = '<span class="k-link k-link-clear" aria-label="Clear the DateTimePicker"><span unselectable="on" class="k-icon k-i-close" aria-controls="dtp_timeview"></span></span>';

            grid.wrapper.find(".k-grid-search").append(clearButton);
            $(".k-link.k-link-clear").on("click", function (e) {
                $(".k-grid-toolbar .k-grid-search input").val("")
                $(".k-grid-toolbar .k-grid-search input").trigger("input")

            });
        }
    </script>

Is this approach applicable to you? Also, could you point me to the forum thread that suggests you make use of a toolbar template?

Furthermore, the Search panel of the grid does not implement the "X" icon, by default. Can you send me back the live demo from which you have seen the functionality?

Looking forward to your reply.

 

Regards,
Tsvetomir
Progress Telerik

[XOLISANI]

KendoGrid asp.net mvc .ToolBar(t => t.Search()) is not available

GridToolBarCommandFactory does not contain a definition for 'Search'

[Tsvetomir]

Hi,

The Search panel functionality of the Kendo UI Grid is relatively new functionality and is not available with older versions. Could you upgrade to the latest version and see if that resolves the error?

 

Regards,
Tsvetomir
Progress Telerik