Add button to grid that generates a PDF - Forum - Kendo UI Builder - Progress Community

Add button to grid that generates a PDF

 Forum

Add button to grid that generates a PDF

This question is answered

I'm new to Kendo and I'm trying to figure out how to:

1) add a button to a grid of orders that when pressed will

2) pass the order number to the server and

3) return a PDF file to the user.

Can someone please point me in the right direction?

Verified Answer
  • Hi Richard,

    Here is the code if you were to use the Stacked Grid template:

        onShow($scope) {
            console.log('Show');
            this.scope = $scope;
            $scope.vm.$window.showDetails = function showDetails(e) {
                e.preventDefault();
                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                var data = this.dataItem(tr);
                window.open('http://localhost:8810/static/' + data.CustNum + '.pdf', 'PDF Window', 'toolbar=no');
            };
            var newCommand = {command: { text: "View Details", click: showDetails }, title: " ", width: "180px" };
            this.$model.parentGridOptions.columns.push(newCommand);
        }
All Replies
  • Richard,

    Couple of questions to narrow this down:

    - Are you using the Templates in Kendo UI Builder?  Or the Blank Canvas (where you place the objects in the screen with drag and drop?  (I am almost certain you are using the templates)

    - What template are you using (Stacked Grid, Grid, Grid and Form)?

    I am asking because you would need write custom code to implement that functionality and the syntax will vary between using a Template and using the Blank Canvas.  I will can to write a sample for you, but I want to make sure I am using the same Template as you are (to make it easier for you to use my sample).

    Regards,

    Ricardo Perdigao

  • I am using the standard grid template but I can use the Blank canvas if needed.

  • Do you already have any buttons on that Grid Today (Edit/Delete buttons) ?

  • no

  • Richard,

    This sample still have a long way to go, but see if you can get this far:

    You will need to locate the controller.public.js file associated with the viewer.  It should be locate at:

    <<KUIB App Folder>>\<<Project>>\app\src\modules\<<Module>>\<<Viewer>>

    After that you will have to Edit the controller.public.js to write the JavaScript/Angular code to do what you want ...

    Please look for the onShow function and make it look like this:

        onShow($scope) {
    
            console.log('Show');
            this.scope = $scope;
    global.showDetails = function showDetails(e) { e.preventDefault(); alert (this.$angular_scope.vm.model.Name); // window.open('localhost:8810/.../test.pdf', 'PDF Window', 'toolbar=no'); }; var newCommand = {command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }; this.$model.options.columns.push(newCommand); }


    After you've done that:

    - Save

    - See if you get the extra column with the Button


    Still to be done:

    - Build the correct path for the PDF file pointing to a pdf file on your Tomcat/WebServer

    - Possibly building a backend logic to place the file there when needed

    - Open the PDF on the new Window based on the line selected by the user. 

  • Hi Richard,

    I've got the sample I was writing for you to get this far:

    - Query the row where you clicked the button

    - Place the content of that Row in a variable/object called data

    - Open a new Browser Window using the "CustNum" field from that row

    - Open a PDF file with the name <<custNum>>.pdf from my TOMCAT (webapps\ROOT\static)

    Here is the updated Onshow Logic:

        onShow($scope) {
    
            console.log('Show');
            this.scope = $scope;
            global.showDetails = function showDetails(e) {
                e.preventDefault();
                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                var data = this.dataItem(tr);
                window.open('http://localhost:8810/static/' + data.CustNum + '.pdf', 'PDF Window', 'toolbar=no');
            };
           
            var newCommand = {command: { text: "View Details", click: showDetails }, title: " ", width: "180px" };
            this.$model.options.columns.push(newCommand);
        }

    I am not an expert on Angular/JavaScript and this is based on my limited knowledge on that language ... But it worked on my environment. The only missing piece is that all PDF files would have to already be stored on the WebServer/Tomcat for this to work. An alternative would be to write something more complex to read the PDF from a Database BLOB field. Or only write the PDF to the WebServer once the customer Clicks on the button (I would use a single PDF that I would override over and over again). Hope this gets you started or on the correct direction ...

  • Thank you for example, this looks very helpful.

    I'm getting this error when it runs: TypeError: Cannot read property 'columns' of undefined

    It seems to have a problem with this line:

    this.$model.options.columns.push(newCommand);

  • Hi Richard,
     
    Would you be available to meet Today at 11am?  If too short notice, I am also available between 1pm and 3pm.  Please let me know.
     
    The objective of the meeting is to make that sample code work on your environment.  It is working on mine, so we need to figure out what is different on yours.
     
    Thanks in advance,
     
    Ricardo Perdigao
     
  • After nit picking this for an hour or so, I finally realized this is my bad.  While I had a grid only in this project, I had added the code to the Hierarchical data grid instead.  After moving it to the correct one.  It seems to have solved that error.  I have others but I hope to figure them out (or learn trying).

  • Hi Richard,

    Here is the code if you were to use the Stacked Grid template:

        onShow($scope) {
            console.log('Show');
            this.scope = $scope;
            $scope.vm.$window.showDetails = function showDetails(e) {
                e.preventDefault();
                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                var data = this.dataItem(tr);
                window.open('http://localhost:8810/static/' + data.CustNum + '.pdf', 'PDF Window', 'toolbar=no');
            };
            var newCommand = {command: { text: "View Details", click: showDetails }, title: " ", width: "180px" };
            this.$model.parentGridOptions.columns.push(newCommand);
        }
  • Please post the error messages you are getting and I will try to help you! On line 8, you will need to replace data.CustNum with the field you are using for order number:  data.<<field>> .

    All the best,

    Ricardo Perdigao