jQuery UI Widgets › Forums › Grid › columnType Button in jqGrid

Tagged: , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    columnType Button in jqGrid Posts
  • July 19, 2016 at 10:28 am columnType Button in jqGrid #85847

    KBhima
    Participant

    Hi,

    I am looking for a property column where I can give the columnType as “button”.
    I looked in jqGrid’s Api behavior section for column, but did not see any columnType as button where as in we have other columnTypes as numberInput, textbox…

    Also I was looking into the following example which shows the columnType as button, but when I try to implement the same way, it gives me a button with the text false in it.

    http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/popupediting.htm.

    Is there any way I can achieve this behaviour.

    Thanks,

    July 19, 2016 at 12:26 pm columnType Button in jqGrid #85849

    Dimitar
    Participant

    Hi KBhima,

    Our product is named jqxGrid, not jqGrid, and it supports columntype: 'button' the way shown in the Popup Editing demo. If you are using jqxGrid and experience an issue with it, please share a jsEditor example reproducing it and we will review your code.

    Best Regards,
    Dimitar

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

    July 19, 2016 at 1:21 pm columnType Button in jqGrid #85852

    KBhima
    Participant

    I couldn’t do it in JSEditor, here is my piece of code and yes am using jqxGrid.
    `<!DOCTYPE>
    <html ng-app=”demoApp”> <!– ng-app directive links angularjs app to html –>
    <head>
    <title>Grid directive for AngularJS</title>
    <link rel=”stylesheet” type=”text/css” href=”resources/css/jqx.base.css” />
    <link rel=”stylesheet” href=”resources/css/jqx.classic.css”
    type=”text/css” />
    <script type=”text/javascript” src=”resources/js/lib/angular.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jquery-3.0.0.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxcore.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxinput.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxdata.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxgrid.js”></script>
    <script type=”text/javascript”
    src=”resources/js/lib/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxmenu.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxangular.js”></script>
    <script type=”text/javascript” src=”resources/js/lib/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript”>
    var demoApp = angular.module(“demoApp”, [“jqwidgets”]);

    //scopes are the objects that refer to the model and acts as a glue between controller and view.
    // controller maintains the application data and behavior using $scope object
    demoApp.controller(“demoController”, function ($scope) {

    // Grid data.
    $scope.client = [{
    ClientId: 1,
    ClientName: “ABC”
    }, {
    ClientId: 2,
    ClientName: “DEF”
    }, {
    ClientId: 3,
    ClientName: “XYZ”
    },
    {
    ClientId: 4,
    ClientName: “KLM”
    },{
    ClientId: 5,
    ClientName: “EFG”
    }];
    $scope.grid = {};
    // grid settings is used in jqx-settings attribute to call a method
    $scope.gridSettings =
    {
    altrows: false,
    sortable: true,
    //width: 500,
    //height: 200,
    disabled: false,
    columnsresize:true,
    ready: function()
    {
    source: datatype: “array”;
    dataFields:[
    {name: ‘ClientId’,type: ‘int’},
    {name: ‘ClientName’,type: ‘String’}
    ],
    $scope.grid.selectrow(0);
    },
    source: $scope.client,
    columns: [
    { text: ‘ClientId’, columntype: ‘textbox’, dataField: ‘ClientId’},
    { text: ‘ClientName’, columntype: ‘textbox’, dataField: ‘ClientName’ },
    { text: ‘Edit’, columntype: ‘button’, dataField: ‘Edit’ },
    { text: ‘Delete’, columntype: ‘button’, dataField: ‘Delete’ }
    ]

    };
    $scope.clientIdSettings = { width: 150, height: 30 };
    $scope.clientNameSettings = {
    created: function(args)
    {
    gridData= args.instance;
    },width: 150, height: 30};

    $scope.addSettings =
    {
    height: 30, width: 80

    };

    $scope.btnSettings = { height: 30, width: 80 };
    $scope.add = function () {
    //$(‘#input’).jqxInput(‘focus’);
    $scope.clientNameSettings.jqxInput(‘focus’);
    $scope.clientIdSettings.jqxInput(‘focus’);
    };

    $scope.edit = function()
    {
    var rowindex = $scope.gridSettings.jqxGrid(‘getselectedrowindex’);
    var data = $scope.gridSettings.jqxGrid(‘getrowdata’, rowindex);
    $scope.clientIdSettings.jqxInput(‘val’,data.ClientId);
    $scope.clientNameSettings.jqxInput(‘val’,data.ClientName);
    };

    $scope.delete = function ()
    {
    var selectedrowindex = $scope.gridSettings.jqxGrid(‘getselectedrowindex’);
    var rowscount = $scope.gridSettings.jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $scope.gridSettings.jqxGrid(‘getrowid’, selectedrowindex);
    var commit = $scope.gridSettings.jqxGrid(‘deleterow’, id);
    }
    };

    $scope.cancel = function (event) {
    event.cancel =true;
    };

    $scope.save = function()
    {
    var data = {
    ClientId: $scope.clientIdSettings.jqxInput(‘val’),
    ClientName: $scope.clientNameSettings.jqxInput(‘val’)
    };
    $scope.gridSettings.jqxGrid(‘addrow’, null, data);
    $scope.clientIdSettings.jqxInput(‘val’, ”);
    $scope.clientNameSettings.jqxInput(‘val’, ”);

    };

    });

    </script>
    </head>
    <body ng-controller=”demoController”>
    <div>
    <jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”add()”>New</jqx-button>

    <jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”edit()”>Edit</jqx-button>

    <jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”delete()”>Delete</jqx-button>
    </div>
    <br>

    <div >
    <jqx-grid jqx-instance=”grid” jqx-settings=”gridSettings”></jqx-grid>
    </div><br>

    <div><p>ClientID:
    <jqx-input jqx-settings=”clientIdSettings” jqx-create=”clientIdSettings”></jqx-input></p>
    <p>Client Name:<jqx-input jqx-settings=”clientNameSettings” jqx-create=”clientNameSettings”></jqx-input></p>
    </div><br>

    <div>
    <jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”save()”>Save</jqx-button>
    <jqx-button jqx-settings=”btnSettings” jqx-create=”btnSettings” jqx-on-click=”cancel()” style=”margin-left: 5px;”>Cancel</jqx-button>
    </div>

    </body>
    </html>

    July 19, 2016 at 8:10 pm columnType Button in jqGrid #85869

    KBhima
    Participant

    Never Mind, I was able to resolve this. I had to add cellsrenderer in columns.

    Thanks.

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

You must be logged in to reply to this topic.