jQuery UI Widgets › Forums › Plugins › AngularJS › button in docking layout

Tagged: , , , , , , , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 8 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    button in docking layout Posts
  • June 13, 2016 at 6:57 am button in docking layout #85056

    shinhwap
    Participant

    I had created a docking layout and a jqxgrid in one of Document1Panel.
    Now I want to create a button in the same Document1Panel.
    When I used <jqx-button ng-click=”add()”>Add Row</jqx-button> to create button, the button cannot be clicked in Document1Panel.
    When I used <<button ng-click=”add()”>Add Row</button> or <input value=”add” type=”button” id=”addRow”/>, the button did not call the function
    whether $scope.addRow or $(“#addRow”).on(‘click’, function ()).

    Can you give a solution or example for this issue?

    June 14, 2016 at 4:44 am button in docking layout #85088

    Dimitar
    Participant

    Hello shinhwap,

    Please make sure you are using $.jqx.angularCompile. If the issue persists, please share a jsEditor/JSFiddle example reproducing the reported behaviour.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    June 14, 2016 at 5:30 am button in docking layout #85091

    shinhwap
    Participant

    Here is my code
    HTML

    
<body>
<div ng-controller="AppCtrl">
    <jqx-docking-layout jqx-settings="settings" id="jqxLayout">
    <div data-container="SolutionExplorerPanel">
        <div id="jqxTree" style="border: none;">
        </div>
        <div id='jqxMenu' style="visibility: hidden;">
            <ul>
                <li>Properties</li>
                <li>Remove Item</li>
            </ul>
        </div>
    </div>
    <div data-container="Document1Panel">
        <table class="table">
            <thead>
            <tr>
                <th>ID</th>
                <th>Data</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input class="form-control"  ng-model="contact.id" maxlength="9"></input></td>
                <td><input class="form-control" jqx-ng-model ng-model="contact.data1" maxlength="3"></input></td>
                <td><input value="Add" type="button" ng-click="addRow()" /></td>
                <td><button ng-click="addRow()">Add Row</button></td>
                <td><jqx-button jqx-on-click="addRow()">Cancel</jqx-button></td>
            </tr>
            </tbody>
        </table>
        <jqx-grid id="jqxgrid"></jqx-grid>
    </div>
    <div data-container="ErrorListPanel">
        List of errors</div>
    <div data-container="OutputPanel">
    </div>
    <div data-container="PropertiesPanel">
        List of properties</div>

</jqx-docking-layout>

    JS

    
angular.module('exampleApp')
    .controller('AppCtrl',['$scope', '$http','$interval', 'uiGridGroupingConstants','socket',  function($scope,$http,socket) {
 
function generaterow() {
            var row = {};
            row["CAN_ID"] = $scope.contact.id;
            row["Type"] = "Extended Frame";
            row["Length"] = '1';
            row["Data"] = $scope.contact.data1;
        }
        $scope.source =
        {
            datatype: "local",
            datafields:
                [
                    { name: 'CAN_ID', type: 'number' },
                    { name: 'Type', type: 'string' },
                    { name: 'Length', type: 'number' },
                    { name: 'Data', type: 'number' }
                ],
            addrow: function (rowid, rowdata, position, commit) {
                commit(true);
            }
        };
        var dataAdapter = new $.jqx.dataAdapter($scope.source);

        $scope.layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
                    type: 'tabbedGroup',
                    width: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Solution Explorer',
                        contentContainer: 'SolutionExplorerPanel'
                    }]
            }, {
                type: 'layoutGroup',
                orientation: 'vertical',
                width: 800,
                items: [{
                    type: 'tabbedGroup',
                    height: 600,
                    minHeight: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Document 1',
                        contentContainer: 'Document1Panel',
                        initContent: function(){
                            // initialize jqxGrid
                            $("#jqxgrid").jqxGrid(
                                {
                                    width: '100%',
                                    height: '100%',
                                    source: dataAdapter,
                                    showtoolbar: true,
                                    showfilterrow: true,
                                    filterable: true,
                                    sortable: true,
                                    groupable: true,
                                    rendertoolbar: function (toolbar) {
                                        var me = this;
                                        var container = $("<div style='margin: 5px;'></div>");
                                        toolbar.append(container);
                                        container.append('<input id="addrowbutton" type="button" value="Add New Row" />');

                                        $("#addrowbutton").jqxButton();
                                        // update row.
                                        // create new row.
                                        $("#addrowbutton").on('click', function () {

                                            var datarow = generaterow();
                                            var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                                        });
                                    },
                                    columns: [
                                        { text: 'CAN ID', datafield: 'CAN_ID', width: '20%' },
                                        { text: 'Type', datafield: 'Type', width: '25%' },
                                        { text: 'Length', datafield: 'Length', width: '10%' },
                                        { text: 'Data', datafield: 'Data', width: '45%', cellsalign: 'right' }
                                    ]
                                })
                        }
                    }]
                }, {
                    type: 'tabbedGroup',
                    height: 200,
                    pinnedHeight: 30,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Error List',
                        contentContainer: 'ErrorListPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Output',
                        contentContainer: 'OutputPanel',
                        selected: true
                    }]
                }]
            }]
        }];
        $scope.settings = { width: 1000, height: 800, layout: $scope.layout, theme: "darkblue"};

        $scope.addRow = function () {
         console.log('test');
        };

    I try to use button to call addRow() function, but none of above button can do that.
    How should I set my button script?
    And I also use a toolbar button to add row in the jqxgrid.
    There are two input in the Document1Panel and I want to add these input value in grid when I click button.
    It works if I add constant, but it will have Uncaught TypeError: Cannot read property ‘id’ of undefined and ‘data1’ of undefined in the function generaterow() if I add the variable $scope.contact.id and $scope.contact.data1.
    I had found the answer jqx-data but I really dont know how to do that.
    Please help.

    June 15, 2016 at 4:55 am button in docking layout #85113

    Dimitar
    Participant

    Hello shinhwap,

    If you wish Angular directives to work for elements inside the structure of jqxDockingLayout, you would have to use the aforementioned $.jqx.angularCompile, which we also discussed in another topic.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.