Export Grid to Excel Event

2 posts, 0 answers
  1. Jako
    Jako avatar
    107 posts
    Member since:
    Apr 2012

    Posted 26 Sep 2014 Link to this post

    Hi everyone

    I have a view that have multiple charts and a grid on it. When I try and export the data of the grid, it seems that its trying to bind my onDataBound event to all my charts as well?
    Here is my view and JS
    <div class="col-lg-12">
        <h3>Overall</h3>
        <h5>Value</h5>
        @(Html.Kendo().Chart(Model.LineChartDataVALTOT)
             .Name("TOTVALLineChart")
             .Theme("Silver")
             .ChartArea(chartArea => chartArea
                 .Background("white")
             )
             .DataSource(dataSource => dataSource
                 .Group(group => group.Add(model => model.Element))
                 .Sort(sort => sort.Add(model => model.TransactionDate).Ascending())
             )
             .HtmlAttributes(new { style = "height:250px;" })
             .Series(series =>
             {
                 series.Line(model => model.Value, categoryExpression: model => model.TransactionDate)
                     .Name("#= group.value #");
             })
             .Legend(legend => legend
                 .Visible(false)
             )
             .ValueAxis(axis => axis.Numeric("Value")
                 .Labels(labels => labels
                     .Format("R {0:N}")
                     .Skip(2)
                     .Step(2)
                 )
             )
             .CategoryAxis(axis => axis
                 .Categories(model => model.TransactionDate)
                 .Date()
                 .BaseUnit(ChartAxisBaseUnit.Days)
                 .BaseUnitStep(7)
     
             ).Tooltip(tooltip => tooltip
                 .Visible(true)
                 .Format("R {0:N}")
             )
        )
    </div>
     
        <div>
            @(Html.Kendo()
               .Grid<TitleListModel>()
               .Name("TitleList")
               .ToolBar(toolBar => toolBar.Custom()
                                  .Text("Export To Excel")
                                  .HtmlAttributes(new { id = "export" })
                                  .Url(Url.Action("ExportNominalReportTitleGrid", "Dashboard", new { storeId = @Model.Stores.SelectedStoreId, page = 1, pageSize = "~", filter = "~", sort = "~" })))
        
               .Columns(columns =>
               {
                   columns.Bound(c => c.ISBN13);
                   columns.Bound(c => c.Title);
                   columns.Bound(c => c.Author);
                   columns.Bound(c => c.Publisher);
                   columns.Bound(c => c.Value).Format("R {0:n2}").Title("Value");
                   columns.Bound(c => c.Quantity).Format("{0:n0}").Title("Quantity");
                   columns.Bound(c => c.ASP).Format("R {0:n2}").Title("ASP");
     
               })
               .Events(ev => ev.DataBound("onDataBound"))
               .Scrollable()
               .Groupable()
               .Sortable()
               .Pageable(pageable => pageable
                         .Refresh(true)
                         .PageSizes(true)
                         .ButtonCount(3))
               .DataSource(dataSource => dataSource
                             .Ajax()
                             .PageSize(20)
                             .Read(read => read.Action("NominalReportTitleGrid", "Dashboard", new { storeId = @Model.Stores.SelectedStoreId })))
             )
        </div>
    function onDataBound(e) {
        var grid = $('#TitleList').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');
        //console.log("EXPORT" + href);
         
        // Update the 'page' parameter with the grid's current page
        href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');
     
        // Update the 'sort' parameter with the grid's current sort descriptor
        href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');
     
        // Update the 'pageSize' parameter with the grid's current pageSize
        href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize);
     
        //update filter descriptor with the filters applied
     
        href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));
     
        // Update the 'href' attribute
        //console.log("EXPORT" + href);
        $exportLink.attr('href', href);
    }
    The error I am getting is:
    ReferenceError: onDataBound is not defined
    ...tion(){jQuery("#TOTVALLineChart").kendoChart({"chartArea":{"background":"white"}...
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 30 Sep 2014 Link to this post

    Hello Jako,

    I'm afraid that it is not obvious what the cause of such error may be looking at the provided information. Therefore, could you please provide more details about the scenario's implementation, such as the entire View and/or a small runnable sample which demonstrates the issue locally.

    Regards,
    Rosen
    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.

     
Back to Top