jQWidgets Forums

jQuery UI Widgets › Forums › Grid › How can i add a delete column to a jqxgrid

Tagged: , , , , , , , , , ,

This topic contains 17 replies, has 5 voices, and was last updated by  Dimitar 9 years, 8 months ago.

Viewing 3 posts - 16 through 18 (of 18 total)
1 2
  • Author
    How can i add a delete column to a jqxgrid Posts
  • November 17, 2014 at 10:41 am How can i add a delete column to a jqxgrid #62841

    Dimitar
    Participant

    Hi learner,

    In your project do you wish to open a “details” grid in the pop-up (as in our example) or some other elements (you have a table with inputs in the window’s content)? Please clarify.

    Best Regards,
    Dimitar

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

    August 6, 2015 at 5:56 am How can i add a delete column to a jqxgrid #74562

    mailstoakhil
    Participant

    hello,i need a help in adding the delete button to my grid.i am just a newbee in jquery so forgive me if i had made a mistake.i have added the code from above solution,i could get a column named ‘delete’ but cant find the button in the column for delete.also each time i click the rows to select it,only one row is selected and even when i click other rows only the first selected row remains selected. thanks in advance.

    My code:

    <!DOCTYPE html>

    <html lang=”en”>
    <head>
    <!– The jQuery library is a prerequisite for all jqSuite products –>
    <script type=”text/ecmascript” src=”jquery-1.11.0.min.js”></script>
    <!– This is the Javascript file of jqGrid –>
    <script type=”text/ecmascript” src=”jquery.jqGrid.min.js”></script>
    <!– This is the localization file of the grid controlling messages, labels, etc.
    <!– We support more than 40 localizations –>
    <script type=”text/ecmascript” src=”grid.locale-en.js”></script>
    <script type=”text/javascript” src=”jqxbuttons.js”></script>
    <script type=”text/javascript” src=”jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”jqxgrid.selection.js”></script>
    <!– A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom –>
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”jquery-ui.css” />
    <!– The link to the CSS that the grid needs –>
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid.css” />

    <link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid-bootstrap-ui.css” />
    <link rel=”stylesheet” type=”text/css” media=”screen” href=”ui.jqgrid-bootstrap.css” />
    <meta charset=”utf-8″ />
    <title>jqGrid Loading Data – JSON</title>
    </head>
    <body>

    <div class=”container-fluid”>
    <div class=”row well”>
    <h3 class=”heading” style=”margin-left:10px;”>Dashboard</h3>
    <br>
    <br>
    <table id=”application-list” style=””>
    <script type=”text/javascript”>

    var applicationGrid = $(“#application-list”),
    myData = [];

    applicationGrid.jqGrid({
    datatype: “local”,
    data: myData,
    colNames: [‘id’, ‘Product’, ‘qty’, ‘free’,’Delete’],
    colModel: [
    { name: ‘id’, hidden: true },
    { name: ‘Product’, width: 750 },
    { name: ‘Qty’, width: 200 ,align: ‘center’ },
    { name: ‘Free’, width: 200, align: ‘center’ },
    { text: ‘Delete’, datafield: ‘Delete’, columntype: ‘button’, cellsrenderer: function () {
    return “Delete row”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    id = $(“#jqxgrid”).jqxGrid(‘getrowid’, row);
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60}

    });
    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘show’);
    }
    },

    ],
    rowNum: 10,
    rowList: [5, 10, 20],
    pager: ‘#application-list-pager’,
    gridview: true,
    rownumbers: true,
    autoencode: true,
    ignoreCase: true,
    sortname: ‘created_at’,
    viewrecords: true,
    sortorder: ‘desc’,
    autowidth: true,
    height: ‘auto’,
    caption: ‘Ordered Products’,

    });
    $(“#popupWindow”).jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton:

    $(“#Cancel”), modalOpacity: 0.01 });
    $(“#del”).jqxButton({ theme: theme });
    $(“#cancel”).jqxButton({ theme: theme });
    $(“#del”).click(function () {
    $(‘#jqxgrid’).jqxGrid(‘deleterow’, id);
    $(“#popupWindow”).jqxWindow(‘hide’);
    });
    $(“#cancel”).click(function () {
    $(“#popupWindow”).jqxWindow(‘hide’);
    });

    $(window).on(“resize”, function () {
    var newWidth = $(“#application-list”).closest(“.ui-jqgrid”).parent().width();
    applicationGrid.jqGrid(“setGridWidth”, newWidth, true);
    });

    function addRow(){
    jQuery(“#application-list”).addRowData(“3″, {id:”0”,Product: $(“#Pro”).val(),Qty:$(“#qty”).val(),Free:”0″});

    }

    </script>
    </table>
    <div id=”application-list-pager”>
    </div>
    <br>
    </div>
    </div>
    <div style=”display: inline-block;”>
    Product : <input type=”text” id=”Pro” size=”35%” >
    Qty : <input type=”text” id=”qty” size =”15%”>
    <input type=”submit” id =”btn” onclick=”addRow()” value=”Add” >
    </div>
    </body>
    </html>

    August 6, 2015 at 6:25 am How can i add a delete column to a jqxgrid #74564

    Dimitar
    Participant

    Duplicate post: http://www.jqwidgets.com/community/topic/help-in-adding-delete-button-and-selectring-row/.

  • Author
    Posts
Viewing 3 posts - 16 through 18 (of 18 total)
1 2

You must be logged in to reply to this topic.