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

Custom Toolbar with Excel/PDF toolbars

3 Answers 666 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Debo
Top achievements
Rank 1
Debo asked on 28 Jul 2015, 07:09 PM

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

3 Answers, 1 is accepted

Sort by
0
Debo
Top achievements
Rank 1
answered on 29 Jul 2015, 12:51 PM
Any suggestions?
1
Accepted
Kostadin
Telerik team
answered on 30 Jul 2015, 08:35 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Debo
Top achievements
Rank 1
answered on 30 Jul 2015, 03:18 PM
Thank you that did it. Cant believe i missed that.
Tags
Grid
Asked by
Debo
Top achievements
Rank 1
Answers by
Debo
Top achievements
Rank 1
Kostadin
Telerik team
Share this question
or