Grid toolbar with search bar identical to the one from docs.telerik.com

[syian]

Is there any documentation on how to implement the search bar that can be found on the telerik website? (see attachment)

The idea is to be able to accept users' input, while giving the option of limiting search in the different grid-columns, for example: All, Col1, Col2. 

 

Thanks in advance!

 

 

 

[syian]

Sorry, attachment did not work. Here is the link: https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdowntree 

[Preslav]

Hi Syian,

The search is a custom implementation of ours, and we do not have a similar widget.

I believe you can achieve similar behavior with a text input, a DropDownTree, and some custom JavaScript. The layout could look like - https://dojo.telerik.com/ugetAKOs

I hope this information is useful.

 

Regards,
Preslav
Progress Telerik

[syian]

Hi Preslav, 

thanks for your answer, it was really useful. 

I have one more question; how can I add the drop down arrow on the dropdowntree? Sorry, if that's obvious but I just started learning how kendo works. 

Thank you!

 

Regards, 

Syian

[Preslav]

Hello Syian,

Generally speaking, when the DropDownTree is used with checkboxes, it works like MultiSelect, and by design, it has no drop-down arrow. In this case, I understand that removing the "checkboxes" configuration is not an option. Thus, I believe we can add it with some custom CSS and JavaScript. For example:

      .k-dropdowntree-clearable .k-multiselect-wrap {
        padding-right: 3.5em;
      }
      
      .k-dropdowntree {
        position: relative;
      }
      
      .k-dropdowntree .extra-arrow {
        position: absolute;
        top: calc(1.14642857em - 10px);
        right: calc(1.14642857em - 7px);
      }
      
      .k-multiselect-wrap > .k-i-close {
        right: calc(2.64285714em - 7px)
      }

$("#dropdowntree").data("kendoDropDownTree").wrapper.append('<span class="k-icon k-i-arrow-60-down extra-arrow"></span>');

For a runnable example, check the modified Dojo: https://dojo.telerik.com/ugetAKOs/3

I hope this helps.

 

Regards,
Preslav
Progress Telerik

[syian]

Hi Preslav, 

your answer was again spot on! thanks :) 

I updated the kendo version to the latest (Kendo UI 2020 R1 SP1) and the dropboxes disappeared (see attachment). I read here that there was "a more modern approach to styling those components" introduced, but I couldn't find any detailed documentation regarding the changes.
Could you please shed some light on the matter? 

 

Regards, 

Savvas

[Preslav]

Hi Savvas,

In the Dojo from my last reply - https://dojo.telerik.com/ugetAKOs/3 I am using the Kendo UI 2020 R1 SP1 version. The checkboxes look okay to me with this version.

Having said that, did you updated both the Style(CSS) and the JavaScript of the Kendo library?

 

Regards,
Preslav
Progress Telerik

[syian]

Hi Preslav, 

sorry, it took me a while to get back to you.
Yes, we updated both the CSS and the JS of the Kendo library. It was a conflict problem between the Kendo CSS and ours. It is now resolved.
Thank you. :) 

Regards,

Syian