Toolbar Template and New SVG Icons

1 Answer 71 Views
Grid
Elisa
Top achievements
Rank 1
Iron
Elisa asked on 06 Nov 2023, 06:52 PM

With the new SVG icons, how can I migrate the following so the toolbar is rendered correctly when the grid is initialized? Even the demo for the toolbar template is broken with the 2023 SVG icon changes: https://demos.telerik.com/kendo-ui/grid/toolbar-template

<script id="toolbartemplate" type="text/html">
    <div class="flex toolbar">
        <div class="left flex">
            <span class="k-input k-input-sm k-rounded-lg k-input-solid k-grid-search">
                <span class="k-input-icon k-icon k-i-search"></span>
                <input autocomplete="off" placeholder="Search..." title="Search..." class="k-input-inner">
            </span>
            <a role="button" class="k-link k-button k-button-solid-base k-button-solid k-button-sm k-rounded-lg k-flat addrecord" title="Add User"><span id="add-icon" class="k-icon k-i-plus"></span></a>
        </div>
        <div class="right">
            <a role="button" class="k-link k-button k-button-solid-base k-button-solid k-button-sm k-rounded-lg k-flat fa-button resetgrid" href="\#" title="Reset Grid"><span class="k-button-icon k-icon fas fa-redo icon"></span></a>
        </div>
    </div>
</script>

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 09 Nov 2023, 11:45 AM

Hello Elisa,

I have answered this question in the support thread you have submitted but I will post the reply here so others can benefit from it as well.

This template, indeed, is relevant only when the font icons are used. For the new SVG icons you need to modify the template as follows:

      <script type="text/x-kendo-template" id="template">
      <div class="refreshBtnContainer">
				<button role="button" class="k-pager-refresh k-link k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-flat k-icon-button" title="Refresh" aria-label="Refresh">
					<span class="k-icon k-svg-icon k-svg-i-arrow-rotate-cw" aria-hidden="true">
  					<svg viewBox="0 0 512 512" focusable="false" xmlns="http://www.w3.org/2000/svg">
    					<path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112z">
        			</path>
        		</svg>
        	</span>
        </button>
       </div>

        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px"/>
        </div>
      </script>

Dojo demo: https://dojo.telerik.com/oJuxEfux

Regards,
Nikolay
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Grid
Asked by
Elisa
Top achievements
Rank 1
Iron
Answers by
Nikolay
Telerik team
Share this question
or