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

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

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author

  • Narendra
    Participant

    Hi

    I want to add delete column to a jqxgrid and when i click on particular delete button of a row then it want to show a popup yes and no like

    Are You sure to delete? when i press on yes it will delete from jqxgrid

    Plz provide me solution…

    Thanks in advance………


    Dimitar
    Participant

    Hello narendra.pvnb,

    Here is the solution:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
    To save the changes, click the 'Save' button in the popup dialog. To cancel the
    changes click the 'Cancel' button in the popup dialog.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.8.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 = "";
    // prepare the data
    var data = generatedata(200);
    var source =
    {
    localdata: data,
    datatype: "array",
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' }
    ],
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    }
    };
    // initialize the input fields.
    $("#firstName").addClass('jqx-input');
    $("#lastName").addClass('jqx-input');
    $("#product").addClass('jqx-input');
    $("#firstName").addClass('jqx-rc-all');
    $("#lastName").addClass('jqx-rc-all');
    $("#product").addClass('jqx-rc-all');
    $("#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);
    $("#firstName").addClass('jqx-rc-all-' + theme);
    $("#lastName").addClass('jqx-rc-all-' + theme);
    $("#product").addClass('jqx-rc-all-' + theme);
    }
    $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
    $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true });
    var dataAdapter = new $.jqx.dataAdapter(source);
    var id;
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    theme: theme,
    pageable: true,
    autoheight: true,
    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: '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');
    }
    },
    ]
    });
    // initialize the popup window and buttons.
    $("#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');
    });
    });
    </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>
    Delete row</div>
    <div style="overflow: hidden;">
    <p>
    Are you sure you would like to delete the selected row?</p>
    <button id="del">
    Yes</button>
    <button id="cancel">
    No</button>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Narendra
    Participant

    Thanks for reply.

    Its working………!


    fresher
    Participant

    How Can I add a link button to Jqxgrid row. I should get a popup window which should display another grid on button click

    How can i add a delete column to a jqxgrid #46328

    Dimitar
    Participant

    Hello fresher,

    Please take a look at the following example, based on the demo Popup Editing:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>In order to enter in edit mode, click any of the 'Edit' buttons.
            To save the changes, click the 'Save' button in the popup dialog. To cancel the
            changes click the 'Cancel' button in the popup dialog.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.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="../../jqwidgets/jqxinput.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 = "";
    
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    }
                };
    
                // initialize the input fields.
                $("#firstName").jqxInput({ theme: theme });
                $("#lastName").jqxInput({ theme: theme });
                $("#product").jqxInput({ theme: theme });
    
                $("#firstName").width(150);
                $("#firstName").height(23);
                $("#lastName").width(150);
                $("#lastName").height(23);
                $("#product").width(150);
                $("#product").height(23);
    
                $("#quantity").jqxNumberInput({ width: 150, height: 23, theme: theme, decimalDigits: 0, spinButtons: true });
                $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, theme: theme, spinButtons: true });
    
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editrow = -1;
    
                openPopup = function (row) {
                    // open the popup window when the user clicks a button.
                    editrow = row;
                    var offset = $("#jqxgrid").offset();
                    $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 120, 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('open');
                };
    
                var linkrenderer = function (row, column, value) {
                    return "<a href='#' onclick='openPopup(" + row + ")'>" + value + "</a>";
                };
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    theme: theme,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100, cellsrenderer: linkrenderer },
                      { 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', columntype: 'button', cellsrenderer: function () {
                          return "Edit";
                      }, buttonclick: function (row) {
                          openPopup(row);
                      }
                      }
                    ]
                });
    
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({
                    width: 250, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
                });
    
                $("#popupWindow").on('open', function () {
                    $("#firstName").jqxInput('selectAll');
                });
    
                $("#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'))
                        };
                        var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow);
                        $('#jqxgrid').jqxGrid('updaterow', rowID, 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>

    Best Regards,
    Dimitar

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

    How can i add a delete column to a jqxgrid #46450

    fresher
    Participant

    Thank You sir, but this is not which I exactly needed. In the below code it is for nested grid , the same I need in pop up window . How can i bind up another XML data corresponding to that row . In my Case to get product details when i click on product.

    <script type=”text/javascript”>
    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = “../sampledata/employees.xml”;
    var source =
    {
    datafields: [
    { name: ‘FirstName’ },
    { name: ‘LastName’ },
    { name: ‘Title’ },
    { name: ‘Address’ },
    { name: ‘City’ }
    ],
    root: “Employees”,
    record: “Employee”,
    id: ‘EmployeeID’,
    datatype: “xml”,
    async: false,
    url: url
    };
    var employeesAdapter = new $.jqx.dataAdapter(source);
    var orderdetailsurl = “../sampledata/orderdetails.xml”;
    var ordersSource =
    {
    datafields: [
    { name: ‘EmployeeID’, type: ‘string’ },
    { name: ‘ShipName’, type: ‘string’ },
    { name: ‘ShipAddress’, type: ‘string’ },
    { name: ‘ShipCity’, type: ‘string’ },
    { name: ‘ShipCountry’, type: ‘string’ },
    { name: ‘ShippedDate’, type: ‘date’ }
    ],
    root: “Orders”,
    record: “Order”,
    datatype: “xml”,
    url: orderdetailsurl,
    async: false
    };
    var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
    orders = ordersDataAdapter.records;
    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = id;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    // fill the orders depending on the id.
    var ordersbyid = [];
    for (var m = 0; m < orders.length; m++) {
    var result = filter.evaluate(orders[m][“EmployeeID”]);
    if (result)
    ordersbyid.push(orders[m]);
    }
    var orderssource = { datafields: [
    { name: ‘EmployeeID’, type: ‘string’ },
    { name: ‘ShipName’, type: ‘string’ },
    { name: ‘ShipAddress’, type: ‘string’ },
    { name: ‘ShipCity’, type: ‘string’ },
    { name: ‘ShipCountry’, type: ‘string’ },
    { name: ‘ShippedDate’, type: ‘date’ }
    ],
    id: ‘OrderID’,
    localdata: ordersbyid
    }
    if (grid != null) {
    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
    columns: [
    { text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
    { text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
    { text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
    { text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 150 },
    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
    ]
    });
    }
    }
    var photorenderer = function (row, column, value) {
    var name = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row).FirstName;
    var imgurl = ‘../../images/’ + name.toLowerCase() + ‘.png’;
    var img = ‘<div style=”background: white;”></div>’;
    return img;
    }
    var renderer = function (row, column, value) {
    return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
    }
    // creage jqxgrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    height: 365,
    source: source,
    theme: theme,
    rowdetails: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    ready: function () {
    $(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
    },
    columns: [
    { text: ‘Photo’, width: 50, cellsrenderer: photorenderer },
    { text: ‘First Name’, datafield: ‘FirstName’, width: 100, cellsrenderer: renderer },
    { text: ‘Last Name’, datafield: ‘LastName’, width: 100, cellsrenderer: renderer },
    { text: ‘Title’, datafield: ‘Title’, width: 180, cellsrenderer: renderer },
    { text: ‘Address’, datafield: ‘Address’, width: 300, cellsrenderer: renderer },
    { text: ‘City’, datafield: ‘City’, width: 170, cellsrenderer: renderer }
    ]
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=”jqxgrid”>
    </div>
    </body>

    How can i add a delete column to a jqxgrid #46452

    Dimitar
    Participant

    Hello fresher,

    Do you wish to load a grid in the popup window with the same data as the nested grid’s in the above example? Instead of opening in nested grid, you want it in a separate grid in the popup window? Have I understood your requirement correctly?

    Best Regards,
    Dimitar

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

    How can i add a delete column to a jqxgrid #46457

    fresher
    Participant

    Yes Sir.
    Thank You .Please provide a resource to expertise in using jqxgrids and jqxcharts.

    How can i add a delete column to a jqxgrid #46459

    Dimitar
    Participant

    Hi fresher,

    Please refer to the jqxGrid and jqxChart sections of the Documentation. The online grid and chart demos may also be helpful to you.

    Best Regards,
    Dimitar

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

    How can i add a delete column to a jqxgrid #46462

    fresher
    Participant

    Ok sir, please help me out for binding a grid in popup instead of nested

    How can i add a delete column to a jqxgrid #46464

    Dimitar
    Participant

    Hi fresher,

    Here is an example, based on the demos Nested Grids and Popup Editing. We hope it is helpful to you.

    <!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.10.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.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
    
                var url = "../sampledata/employees.xml";
    
                var source =
                {
                    datafields: [
                        { name: 'FirstName' },
                        { name: 'LastName' },
                        { name: 'Title' },
                        { name: 'Address' },
                        { name: 'City' }
                    ],
                    root: "Employees",
                    record: "Employee",
                    id: 'EmployeeID',
                    datatype: "xml",
                    async: false,
                    url: url
                };
    
                var employeesAdapter = new $.jqx.dataAdapter(source);
    
                var orderdetailsurl = "../sampledata/orderdetails.xml";
    
                var ordersSource =
                {
                    datafields: [
                        { name: 'EmployeeID', type: 'string' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    datatype: "xml",
                    url: orderdetailsurl,
                    async: false
                };
    
                var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
                orders = ordersDataAdapter.records;
    
                var photorenderer = function (row, column, value) {
                    var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                    var imgurl = '../../images/' + name.toLowerCase() + '.png';
                    var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                    return img;
                }
    
                var renderer = function (row, column, value) {
                    return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
                }
    
                // create main grid
                $("#jqxgrid").jqxGrid(
                {
                    width: 800,
                    autoheight: true,
                    source: source,
                    theme: theme,
                    rowsheight: 35,
                    columns: [
                          { text: 'Photo', cellsrenderer: photorenderer },
                          { text: 'First Name', width: 75, datafield: 'FirstName', cellsrenderer: renderer },
                          { text: 'Last Name', datafield: 'LastName', cellsrenderer: renderer },
                          { text: 'Title', datafield: 'Title', cellsrenderer: renderer },
                          { text: 'Address', datafield: 'Address', cellsrenderer: renderer },
                          { text: 'City', datafield: 'City', cellsrenderer: renderer },
                          { text: 'Edit', datafield: 'Edit', columntype: 'button', cellsrenderer: function () {
                              return "View details grid";
                          }, buttonclick: function (row) {
                              // open the popup window when the user clicks a button.
                              var offset = $("#jqxgrid").offset();
                              $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
                              // show the popup window.
                              $("#popupWindow").jqxWindow('open');
                              var id = (row + 1).toString();
                              loadDetailsGrid(id);
                          }
                          }
                      ]
                });
    
                // create popup window
                $("#popupWindow").jqxWindow({ width: 850, maxWidth: 850, height: 300, resizable: false, theme: theme, isModal: true, autoOpen: false, modalOpacity: 0.01 });
    
                // create details grid
                $("#detailsGrid").jqxGrid({ theme: theme, width: 800, autoheight: true,
                    columns: [
                              { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                              { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                              { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                              { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                              { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                    ]
                });
    
                var loadDetailsGrid = function (id) {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = id;
                    var filtercondition = 'equal';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    // fill the orders depending on the id.
                    var ordersbyid = [];
                    for (var m = 0; m < orders.length; m++) {
                        var result = filter.evaluate(orders[m]["EmployeeID"]);
                        if (result)
                            ordersbyid.push(orders[m]);
                    }
    
                    var orderssource = { datafields: [
                        { name: 'EmployeeID', type: 'string' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                        id: 'OrderID',
                        localdata: ordersbyid
                    }
    
                    var dataAdapter = new $.jqx.dataAdapter(orderssource);
    
                    $("#detailsGrid").jqxGrid({ source: dataAdapter });
                };
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
        <div id="popupWindow">
            <div>
                Details Grid</div>
            <div>
                <div id="detailsGrid">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    How can i add a delete column to a jqxgrid #62758

    learner
    Participant

    Hi, I went through all these links. I have been able to create a nested grid.Also I have been able to create a popup window when the edit button is clicked for the nested grid. But my problem is data is not being loaded on the popup window. Please help me to find what is missing or where am I mistaken.

    
    
    

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’> nested Grid plugins.</title>
    <link rel=”stylesheet” href=”~/Scripts/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”~/Scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxnumberinput.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.sort.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var url = “/Merchant1/GetRequestTypeList”;

    var source =
    {
    datafields: [
    { name: ‘RequestTypeId’ },
    { name: ‘RequestTypeName’ }
    ],
    //root: “Employees”,
    //record: “Employee”,
    id: ‘RequestTypeId’,
    datatype: “json”,
    async: false,
    url: url
    };

    // initialize the input fields.

    var employeesAdapter = new $.jqx.dataAdapter(source);

    var orderdetailsurl = “/Merchant1/GetRequestTypeList”;

    var ordersSource =
    {
    datafields: [
    { name: ‘RequestTypeId’, type: ‘integer’ },
    { name: ‘RequestDetailId’, type: ‘integer’ },
    { name: ‘RequestDetailName’, type: ‘string’ }

    ],
    //root: “Orders”,
    records: “RequestDetailId”,
    datatype: “json”,
    url: orderdetailsurl,
    async: false
    };

    var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
    var editrow = -1;
    orders = ordersDataAdapter.records;
    var nestedGrids = new Array();

    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, records) {
    var id = records.uid.toString();
    var grid = $($(parentElement).children()[0]);
    nestedGrids[index] = grid;
    var filtergroup = new $.jqx.filter();
    var filter_or_operator = 1;
    var filtervalue = id;
    var filtercondition = ‘equal’;
    var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    // fill the orders depending on the id.
    var ordersbyid = [];
    for (var m = 0; m < orders.length; m++) {
    var result = filter.evaluate(orders[m][“RequestTypeId”]);
    if (result)
    ordersbyid.push(orders[m]);
    }

    var orderssource = {
    datafields: [
    { name: ‘RequestTypeId’, type: ‘integer’ },
    { name: ‘RequestDetailId’, type: ‘integer’ },
    { name: ‘RequestDetailName’, type: ‘string’ },

    ],
    id: ‘RequestDetailId’,
    localdata: ordersbyid
    }
    // initialize the input fields.
    $(“#RequestDetailName”).jqxInput();
    $(“#RequestDetailName”).width(150);
    $(“#RequestDetailName”).height(23);

    $(“#RequestDetailId”).jqxNumberInput({ spinMode: ‘simple’, width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });

    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
    var editrow = -1;
    var idd;
    if (grid != null) {
    grid.jqxGrid({
    source: nestedGridAdapter, width: 780, height: 200,

    columns: [
    { text: ‘RequestDetailId’, datafield: ‘RequestDetailId’, width: 200 },
    { text: ‘RequestDetailName’, datafield: ‘RequestDetailName’, width: 200 },
    {
    text: ‘Edit’, datafield: ‘Edit’, width: 80, columntype: ‘button’, cellsrenderer: function () {
    return “Edit”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    editrow = row;
    idd = $(“#jqxgrid”).jqxGrid(‘getrowid’, row);
    // openPopup(row);
    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);
    $(“#RequestDetailName”).val(dataRecord.RequestDetailName);
    $(“#RequestDetailId”).jqxNumberInput({ decimal: dataRecord.RequestDetailId });

    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    //var id = (row + 1).toString();
    //loadDetailsGrid(id);
    }
    }
    ]
    });
    }
    }
    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    width: 350, resizable: true, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
    });

    $(“#popupWindow”).on(‘open’, function () {
    $(“#RequestDetailName”).jqxInput(‘selectAll’);
    });

    $(“#Cancel”).jqxButton();
    $(“#Save”).jqxButton();
    var renderer = function (row, column, value) {
    return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
    }

    // creage jqxgrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 850,
    height: 365,
    source: source,
    rowdetails: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    ready: function () {
    $(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
    },
    columns: [

    { text: ‘RequestTypeId’, datafield: ‘RequestTypeId’, width: 150, cellsrenderer: renderer },
    { text: ‘RequestTypeName’, datafield: ‘RequestTypeName’, width: 150, cellsrenderer: renderer }
    ]
    });
    });
    </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”>RequestDetailName:</td>
    <td align=”left”><input id=”RequestDetailName” /></td>
    </tr>

    <tr>
    <td align=”right”>RequestDetailId:</td>
    <td align=”left”><div id=”RequestDetailId”></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>`

    Thank you in advance.

    How can i add a delete column to a jqxgrid #62759

    Dimitar
    Participant

    Hello learner,

    Please re-post your code as it is in your development environment and remember to format it by selecting it and clicking the code button from the toolbar.

    Best Regards,
    Dimitar

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

    How can i add a delete column to a jqxgrid #62770

    learner
    Participant

    This is my formatted code. Please look at it.

    
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'> nested Grid plugins.</title>
        <link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="~/Scripts/jqwidgets/jqxgrid.sort.js"></script>
    
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "/Merchant1/GetRequestTypeList";
    
                var source =
                {
                    datafields: [
                        { name: 'RequestTypeId' },
                        { name: 'RequestTypeName' }
                    ],
                    //root: "Employees",
                    //record: "Employee",
                    id: 'RequestTypeId',
                    datatype: "json",
                    async: false,
                    url: url
                };
    
                // initialize the input fields.
    
                var employeesAdapter = new $.jqx.dataAdapter(source);
    
                var orderdetailsurl = "/Merchant1/GetRequestTypeList";
    
                var ordersSource =
                {
                    datafields: [
                        { name: 'RequestTypeId', type: 'integer' },
                        { name: 'RequestDetailId', type: 'integer' },
                        { name: 'RequestDetailName', type: 'string' }
    
                    ],
                    //root: "Orders",
                    records: "RequestDetailId",
                    datatype: "json",
                    url: orderdetailsurl,
                    async: false
                };
    
                var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
                var editrow = -1;
                orders = ordersDataAdapter.records;
                var nestedGrids = new Array();
    
                // create nested grid.
                var initrowdetails = function (index, parentElement, gridElement, records) {
                    var id = records.uid.toString();
                    var grid = $($(parentElement).children()[0]);
                    nestedGrids[index] = grid;
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = id;
                    var filtercondition = 'equal';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    // fill the orders depending on the id.
                    var ordersbyid = [];
                    for (var m = 0; m < orders.length; m++) {
                        var result = filter.evaluate(orders[m]["RequestTypeId"]);
                        if (result)
                            ordersbyid.push(orders[m]);
                    }
    
                    var orderssource = {
                        datafields: [
                          { name: 'RequestTypeId', type: 'integer' },
                        { name: 'RequestDetailId', type: 'integer' },
                        { name: 'RequestDetailName', type: 'string' },
    
                        ],
                        id: 'RequestDetailId',
                        localdata: ordersbyid
                    }
                    // initialize the input fields.
                    $("#RequestDetailName").jqxInput();
                    $("#RequestDetailName").width(150);
                    $("#RequestDetailName").height(23);
    
                    $("#RequestDetailId").jqxNumberInput({ spinMode: 'simple', width: 150, height: 23, min: 0, decimalDigits: 0, spinButtons: true });
    
                    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
                    var editrow = -1;
                    var idd;
                    if (grid != null) {
                        grid.jqxGrid({
                            source: nestedGridAdapter, width: 780, height: 200,
    
                            columns: [
                              { text: 'RequestDetailId', datafield: 'RequestDetailId', width: 200 },
                              { text: 'RequestDetailName', datafield: 'RequestDetailName', width: 200 },
                           {
                               text: 'Edit', datafield: 'Edit', width: 80, columntype: 'button', cellsrenderer: function () {
                                   return "Edit";
                               }, buttonclick: function (row) {
                                   // open the popup window when the user clicks a button.
                                   editrow = row;
                                   idd = $("#jqxgrid").jqxGrid('getrowid', row);
                                  // openPopup(row);
                                   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);
                                   $("#RequestDetailName").val(dataRecord.RequestDetailName);
                                   $("#RequestDetailId").jqxNumberInput({ decimal: dataRecord.RequestDetailId });
    
                                   // show the popup window.
                                   $("#popupWindow").jqxWindow('open');
                                   //var id = (row + 1).toString();
                                   //loadDetailsGrid(id);
                               }
                           }
                            ]
                        });
                    }
                }
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({
                    width: 350, resizable: true, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01
                });
    
                $("#popupWindow").on('open', function () {
                    $("#RequestDetailName").jqxInput('selectAll');
                });
    
                $("#Cancel").jqxButton();
                $("#Save").jqxButton();
                var renderer = function (row, column, value) {
                    return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
                }
    
                // creage jqxgrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    height: 365,
                    source: source,
                    rowdetails: true,
                    rowsheight: 35,
                    initrowdetails: initrowdetails,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                    ready: function () {
                        $("#jqxgrid").jqxGrid('showrowdetails', 1);
                    },
                    columns: [
    
                          { text: 'RequestTypeId', datafield: 'RequestTypeId', width: 150, cellsrenderer: renderer },
                          { text: 'RequestTypeName', datafield: 'RequestTypeName', width: 150, cellsrenderer: renderer }
                    ]
                });
            });
        </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">RequestDetailName:</td>
                            <td align="left"><input id="RequestDetailName" /></td>
                        </tr>
                       
                        <tr>
                            <td align="right">RequestDetailId:</td>
                            <td align="left"><div id="RequestDetailId"></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>
    
    
    How can i add a delete column to a jqxgrid #62781

    learner
    Participant

    Hello Dimitar or someone else there to help?

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.