Search Panel and toolbar template

12 posts, 0 answers
  1. Morten
    Morten avatar
    347 posts
    Member since:
    Jul 2012

    Posted 20 Sep 2019 Link to this post

    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

     

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    969 posts

    Posted 24 Sep 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Morten
    Morten avatar
    347 posts
    Member since:
    Jul 2012

    Posted 26 Oct 2019 in reply to Alex Hajigeorgieva Link to this post

    Thanks Alex. Works great.
  4. Morten
    Morten avatar
    347 posts
    Member since:
    Jul 2012

    Posted 29 Oct 2019 in reply to Alex Hajigeorgieva Link to this post

    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

  5. Tsvetomir
    Admin
    Tsvetomir avatar
    605 posts

    Posted 29 Oct 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Neil
    Neil avatar
    35 posts
    Member since:
    Dec 2019

    Posted 18 Feb in reply to Tsvetomir Link to this post

    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.
  7. Morten
    Morten avatar
    347 posts
    Member since:
    Jul 2012

    Posted 18 Feb in reply to Neil Link to this post

    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);
    } }

     

  8. Tsvetomir
    Admin
    Tsvetomir avatar
    605 posts

    Posted 19 Feb Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Neil
    Neil avatar
    35 posts
    Member since:
    Dec 2019

    Posted 01 Mar in reply to Tsvetomir Link to this post

    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>);
    )
        

  10. Tsvetomir
    Admin
    Tsvetomir avatar
    605 posts

    Posted 02 Mar Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Neil
    Neil avatar
    35 posts
    Member since:
    Dec 2019

    Posted 02 Mar in reply to Tsvetomir Link to this post

    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..
  12. Tsvetomir
    Admin
    Tsvetomir avatar
    605 posts

    Posted 04 Mar Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top