This is a migrated thread and some comments may be shown as answers.

Combining toolbar.Search and my toolbar.ClientTemplateId

5 Answers 725 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 09 Feb 2020, 02:04 PM
Hi All,
Just wanted to ask how can I combine toolbar.Search and my toolbar.ClientTempalteId.
I need the functionality of Search but I also need to have custom dropdown as well for my toolbar.
Also how can my Custom dropdown template positioned on the left and my search be on the right of the toolbar.

Thanks,
Ryan

5 Answers, 1 is accepted

Sort by
0
Ryan
Top achievements
Rank 1
answered on 09 Feb 2020, 06:09 PM

Got it.

Although I have additional question. how to resize the searchbox and how to filter based on selected item on the combobox?

Please see image attached.

Thanks!

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 11 Feb 2020, 02:24 PM

Hi, Ryan,

To have the search functionality in the toolbar template, just include its markup:

https://www.telerik.com/forums/search-panel-and-toolbar-template#0ijru8paOkCBDfAt0n8YIg

In case you have any difficulties, please provide a code snippet of the toolbar template as text so I can test it locally.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ryan
Top achievements
Rank 1
answered on 11 Feb 2020, 06:25 PM

Hi Alex Hajigeorgieva,

If you look check the attachment, youll see that the search is bigger than the dropdown and menu button

I have added style="font-family: verdana,arial,sans-serif; font-size: 12px;" to dropdown and it became smaller see below.

<input id="dropdownSource" style="width:200px; display:none; font-family: verdana,arial,sans-serif; font-size: 12px;" />

but for search I cant seem to make it smaller.

<span class="k-textbox k-grid-search k-display-flex" style="float:right"><input title="Search..." class="k-input" placeholder="Search..." autocomplete="off" style="font-family: verdana,arial,sans-serif; font-size: 12px;"><span class="k-input-icon"><span class="k-icon k-i-search"></span></span></span>

 

 

 

 

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 13 Feb 2020, 03:35 PM

Hi, Ryan,

If you are using the suggested HTML, then the following CSS rules should help make the search and search icon smaller:

  <style>
    .k-grid-search, .k-icon.k-i-search {
      font-size:10px;
    }
  </style>

Here is a test Dojo: https://dojo.telerik.com/eRiwusEG/2

Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
0
Ryan
Top achievements
Rank 1
answered on 16 Feb 2020, 04:47 PM
Thank You Alex!
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or