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

Adding custom toolbar command to Export

1 Answer 96 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bharathi
Top achievements
Rank 2
Bharathi asked on 20 May 2014, 03:59 PM

Hi, 

       
<script>
 
$(function () {
    $("#grid").kendoGrid({
        height: 600,     
        columns: [
            { field: "ENTITY_CATEGORY", width: "250px" },
            { field: "ENTITY_CODE", width: "250px" }    
            { command: ["edit"], title:" ", width:"200px"}],     //["edit","destroy"]
 
            editable: {
            mode: "popup",           
            confirmation: "Are you sure you want to delete this record?",
            confirmDelete: "Delete",
            cancelDelete: "Cancel",          
            template: kendo.template($("#popup_editor").html())
        },
        pageable: true,
        sortable: true,
        filterable: true,
        toolbar: ["create"], // specify toolbar commands
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
//                errors : "error",        
                model: {
                    id: "ENTITY_KEY",
                    fields: {
                        ENTITY_KEY: { editable: false, nullable: true },
                        ENTITY_CATEGORY: { validation: { required: true } },
                        ENTITY_CODE: { validation: { required: true } }
                                              
                    }
                }
            },
 
            batch: true,
             
            transport: {
                create: {
                    url: "@Url.Action("Create_Entity", "Load")",
                    type: "POST"
                },
                read: {
                    url: "@Url.Action("Read_Entity", "Load")",
                    contentType: "application/json",
                    type: "POST"
                },
                update: {
                    url:"@Url.Action("Update_Entity", "Load")",
                    type: "POST"
                },
                destroy: {
                    url: "@Url.Action("Destroy_Entity", "Load")",
                    type: "POST"
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        var result = {};
                            for (var i = 0; i < data.models.length; i++) {
                            var entity = data.models[i];
                            for (var member in entity) {
                                result["newEntity[" + i + "]." + member] = entity[member];
                            }
                        }
                        return result;
 
                    }
                    else {
                         return JSON.stringify(data)
                    }
                }
            }
        }
    });
});
</script>
 
 
 
<script type="text/javascript">
        function onDataBound(e) {
            var grid = $('#grid').data('kendoGrid');
 
            // ask the parameterMap to create the request object for you
            var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
                .options.parameterMap({
                    page: grid.dataSource.page(),
                    sort: grid.dataSource.sort(),
                    filter: grid.dataSource.filter()
                });
 
            // Get the export link as jQuery object
            var $exportLink = $('#export');
 
            // Get its 'href' attribute - the URL where it would navigate to
            var href = $exportLink.attr('href');
 
            // Update the 'sort' parameter with the grid's current sort descriptor
            href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
 
            //update filter descriptor with the filters applied
 
            href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
 
            // Update the 'href' attribute
            $exportLink.attr('href', href);
        }
 
        $(function () {
            $("#export").on("click", function () {
                var grid = $('#grid').data('kendoGrid');
                var href = this.href;
                this.href = href.replace(/columns=([^&]*)/, 'columns=' + kendo.stringify(grid.columns));
            });
        })
 
        function getColumns(gridColumns) {
            var columns = [];
            for (var i = 0; i < gridColumns.length; i++) {
                if (gridColumns[i].field && !gridColumns[i].hidden) {
                    columns.push(gridColumns[i].field)
                }
            }
            return columns.join(",");
        }
</script>

 
I trying to add  custom toolbar button for Export to Excel in the toolbar and call the onDataBound function How do i add them ?

1 Answer, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 22 May 2014, 12:04 PM
Hi,

Please check the example below:
Regards,
Vladimir Iliev
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Bharathi
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Share this question
or