Custom Toolbar with Excel/PDF toolbars

[Debo]

I am trying to include the Excel and PDf toolbar buttons in my custom template (see below) as suggested by this thread http://www.telerik.com/forums/custom-toolbar-with-excel. However when i add the markup the whole grid does not load (take out the markup and the grid loads with the search box). This is in javascript not mvc wrapper. Any recommendations will be appreciated

template

<script type="text/x-kendo-template" id="searchtemplate">    
      <div class="toolbar">  

         <div>

           <a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Export to Excel</a>

           <a class="k-button k-button-icontext k-grid-pdf" href="#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>

        </div>
        <div class="padding-all" style="float:right;padding-right:10px;">
            <label id="search">Search:&nbsp;&nbsp;</label>
            <input type="search" id="searchTerm" style="width: 230px;" />
        </div>
    </div>

</script>

 

Grid

 $("#grid").kendoGrid({
        toolbar: kendo.template($("#searchtemplate").html()),
        excel: {
            fileName: "​bzbdfb",
            filterable: true,
            allPages: true
        },
        pdf: {
            allPages: true,
            fileName: " fvbfdb"
        },
        dataSource: {
            type: "json",
            transport: {
                //get grid data transport
                read: {
                    url: "mvc ​controller",
                    datatype: "json",
                    type: "post",
                    data: data
                }
            },
            //data schema
            schema: {
                data: function (response) {
                    return response;
                }
            }, requestStart: function () {
                if (initialLoad)
                    kendo.ui.progress($("#grid"), true);
            },
            requestEnd: function () {
                if (initialLoad)
                    kendo.ui.progress($("#grid"), false);
                initialLoad = false;

            },
            pageSize: 10
        },
        sortable: true,
        selectable: "multiple cell",
        allowCopy: true,
        pageable: {
            pageSizes: [10, 25, 50, 100],
            buttonCount: 10
        },
        noRecords: true,
        columns: GenerateColumns(getAttendedUsers),
        pdfExport: function (e) {
            $("tr:nth-last-child(1)").hide();
            e.promise
            .progress(function (e) {
                console.log(kendo.format("{0:P} complete", e.progress));
            })
            .done(function () {
                $("tr:nth-last-child(1)").show();
            });
        }
    });

[Debo]

Any suggestions?

[Kostadin]

Hello Debo,

The reason for that issue is the # sign that you are using in your toolbar template. If you ever need # in your template, you need to escape them using backslashes. Please check out the following code.

<script type="text/x-kendo-template" id="searchtemplate">
       <div class="toolbar">
       <div>
         <a class="k-button k-button-icontext k-grid-excel" href="\#"><span class="k-icon k-i-excel"></span>Export to Excel</a>

         <a class="k-button k-button-icontext k-grid-pdf" href="\#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>

      </div>
      <div class="padding-all" style="float:right;padding-right:10px;">
          <label id="search">Search:  </label>
          <input type="search" id="searchTerm" style="width: 230px;" />
      </div>
  </div>
</script>

Regards,
Kostadin
Telerik

 

 

[Debo]

Thank you that did it. Cant believe i missed that.