jQWidgets Forums

jQuery UI Widgets › Forums › Grid › how to display a Edit link column

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 12 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    how to display a Edit link column Posts
  • July 19, 2012 at 7:35 am how to display a Edit link column #6129

    mohan raj
    Member

    Hi,

    I need to display a edit link along with a texbox in a single column. On click of edit link i need to display a popup window. Please provide some information.

    Thanks,
    mohanraj

    July 19, 2012 at 12:44 pm how to display a Edit link column #6143

    Peter Stoev
    Keymaster

    Hi mohan raj,

    I have prepared for you a sample which demonstrates how to open a popup window when “Edit” link is clicked.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = getTheme();
                // prepare the data
                var data = generatedata(200);
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata) {
                        // synchronize with the server - send update command   
                    }
                };
                // initialize the input fields.
                $("#firstName").addClass('jqx-input');
                $("#lastName").addClass('jqx-input');
                $("#product").addClass('jqx-input');
                $("#firstName").width(150);
                $("#firstName").height(23);
                $("#lastName").width(150);
                $("#lastName").height(23);
                $("#product").width(150);
                $("#product").height(23);
                if (theme.length > 0) {
                    $("#firstName").addClass('jqx-input-' + theme);
                    $("#lastName").addClass('jqx-input-' + theme);
                    $("#product").addClass('jqx-input-' + theme);
                }
                $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
                $("#price").jqxNumberInput({ width: 150, height: 23, theme: theme, spinButtons: true });
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editrow = -1;
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 190 },
                      { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                      { text: 'Edit', datafield: 'Edit', cellsrenderer: function () {
                          return "<a style='margin: 4px; margin-left: 35px; float: left; position: relative;' href=''>Edit</a>";
                      } 
                      },
                    ]
                });
                $("#jqxgrid").bind('cellclick', function (event) {
                    if (event.args.datafield == 'Edit') {
                        // open the popup window when the user clicks a button.
                        editrow = event.args.rowindex;
                        var offset = $("#jqxgrid").offset();
                        $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                        // get the clicked row's data and initialize the input fields.
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                        $("#firstName").val(dataRecord.firstname);
                        $("#lastName").val(dataRecord.lastname);
                        $("#product").val(dataRecord.productname);
                        $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                        $("#price").jqxNumberInput({ decimal: dataRecord.price });
                        // show the popup window.
                        $("#popupWindow").jqxWindow('show');
                    }
                });
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({ width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                $("#Cancel").jqxButton({ theme: theme });
                $("#Save").jqxButton({ theme: theme });
                // update the edited row when the user clicks the 'Save' button.
                $("#Save").click(function () {
                    if (editrow >= 0) {
                        var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                            quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                        };
                        $('#jqxgrid').jqxGrid('updaterow', editrow, row);
                        $("#popupWindow").jqxWindow('hide');
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid"></div>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent"></div>
                <div style="margin-top: 10px;" id="cellendeditevent"></div>
           </div>
           <div id="popupWindow">
                <div>Edit</div>
                <div style="overflow: hidden;">
                    <table>
                        <tr>
                            <td align="right">First Name:</td>
                            <td align="left"><input id="firstName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Last Name:</td>
                            <td align="left"><input id="lastName" /></td>
                        </tr>
                        <tr>
                            <td align="right">Product:</td>
                            <td align="left"><input id="product" /></td>
                        </tr>
                        <tr>
                            <td align="right">Quantity:</td>
                            <td align="left"><div id="quantity"></div></td>
                        </tr>
                        <tr>
                            <td align="right">Price:</td>
                            <td align="left"><div id="price"></div></td>
                        </tr>
                        <tr>
                            <td align="right"></td>
                            <td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
                        </tr>
                    </table>
                </div>
           </div>
        </div>
    </body>
    </html>

    Hope this helps you.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.