Add button to grid that generates a PDF

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

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