jQuery UI Widgets Forums Grid selected checkbox rows should be deleted

This topic contains 4 replies, has 3 voices, and was last updated by  Dimitar 10 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • selected checkbox rows should be deleted #48710

    shiva kumar
    Participant

    Hi Peter,

    First of all , i would like to thank you for your tremendous support here in this forum

    My Question :
    i have a grid with multiple rows with a column of checkbox.
    A button should be available at the end of the grid and onClick of that button, selected checkbox rows should be deleted
    Can you please provide the complete code

    Regards,
    Shiva Kumar

    selected checkbox rows should be deleted #48720

    Dimitar
    Participant

    Hello Shiva Kumar,

    Is your column a checkbox selection column or a simple column with checkboxes?

    Best Regards,
    Dimitar

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

    selected checkbox rows should be deleted #48770

    siva kumar
    Participant

    Hi Dimitar,
    it is checkbox selection column

    Thanks in advance
    Siva Kumar

    selected checkbox rows should be deleted #48799

    siva kumar
    Participant

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
    </title>
    <link rel=”stylesheet” href=”../../SampleSpringMaven/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../SampleSpringMaven/scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js” ></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/mohan.js” ></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/scripts/demos.js”></script>
    <script type=”text/javascript” src=”../../SampleSpringMaven/scripts/gettheme.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var url = “../SampleSpringMaven/test.json”;
    var theme = getDemoTheme();
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘name’, type: ‘string’ },
    { name: ‘Discontinued’, type: ‘bool’ },
    { name: ‘address’, type: ‘string’ }
    ],
    updaterow: function (rowid, rowdata, commit) {
    // that function is called after each edit.
    var rowindex = $(“#jqxgrid”).jqxGrid(‘getrowboundindexbyid’, rowid);
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, rowindex);
    alert(id+id);
    // 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);
    },

    id: ‘name’,
    url: url
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
    });

    var orderdetailsurl = “../sampledata/orderdetails.xml”;
    var ordersSource =
    {
    datafields: [

    { name: ‘ShippedDate’, type: ‘date’ }
    ],

    datatype: “json”,
    url: orderdetailsurl,
    async: false
    };
    var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
    orders = ordersDataAdapter.records;
    var nestedGrids = new Array();
    // create nested grid.

    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.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][“EmployeeID”]);
    if (result)
    ordersbyid.push(orders[m]);
    }
    var orderssource = { datafields: [

    { name: ‘ShipCountry’, type: ‘string’ },
    { name: ‘ShippedDate’, type: ‘date’ }
    ],
    id: ‘OrderID’,
    localdata: ordersbyid
    }
    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
    if (grid != null) {
    grid.jqxGrid({
    source: nestedGridAdapter, width: 600, height: 200,
    columns: [

    { text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 200 }
    ]
    });
    }
    }

    // end update. Resume the Grid’s rendering.
    $(“#jqxgrid”).jqxGrid(‘endupdate’);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: dataAdapter,

    rowdetails: true,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },

    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,
    theme: theme,
    selectionmode: ‘checkbox’,
    columns: [

    { text: ‘name’, datafield: ‘name’, width: 250 },
    { text: ‘address’, datafield: ‘address’, cellsalign: ‘right’, width: 250 }

    ],
    /* subGrid: true,
    subGridOptions: { “plusicon” : “ui-icon-triangle-1-e”,
    “minusicon” :”ui-icon-triangle-1-s”,
    “openicon” : “ui-icon-arrowreturn-1-e”,
    “reloadOnExpand” : false,
    “selectOnExpand” : true },
    subGridRowExpanded: function(subgrid_id, row_id) {
    // we pass two parameters
    // subgrid_id is a id of the div tag created within a table
    // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) – which returns associative array in type name-value
    // here we can easy construct the following
    var subgrid_table_id;
    subgrid_table_id = subgrid_id+”_t”;
    jQuery(“#”+subgrid_id).html(“<table id='”+subgrid_table_id+”‘ class=’scroll’></table>”);
    jQuery(“#”+subgrid_table_id).jqGrid({
    url:”../SampleSpringMaven/test.json”,
    datatype: “json”,
    colNames: [‘No’,’Item’,’Qty’,’Unit’,’Total’],
    colModel: [

    {name:”unit”,index:”unit”,width:80,align:”right”},
    {name:”total”,index:”total”,width:100,align:”right”,sortable:false}
    ],
    height: ‘100%’,
    rowNum:20,
    sortname: ‘num’,
    sortorder: “asc”
    });
    } */

    });

    });

    function copyText(){

    //$(“#jqxgrid”).trigger(“reloadGrid”);
    var selectedrowindexes = $(“#jqxgrid”).jqxGrid(‘getselectedrowindexes’);
    alert(“selected indexes”+selectedrowindexes);
    var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
    // begin update. Stops the Grid’s rendering.
    $(“#jqxgrid”).jqxGrid(‘beginupdate’);
    selectedrowindexes.sort();
    // delete the selected rows by using the ‘deleterow’ method of jqxGrid.
    for (var m = 0; m < selectedrowindexes.length; m++) {
    var selectedrowindex = selectedrowindexes[selectedrowindexes.length – m – 1];
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
    alert(id);
    }
    }

    var url = “../SampleSpringMaven/test.json”;
    var theme = getDemoTheme();
    // prepare the data
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘name’, type: ‘string’ },
    { name: ‘Discontinued’, type: ‘bool’ },
    { name: ‘address’, type: ‘string’ }
    ],

    id: ‘name’,
    url: url
    };

    var dataAdapter = new $.jqx.dataAdapter(source, {
    downloadComplete: function (data, status, xhr) { },
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
    });

    // end update. Resume the Grid’s rendering.
    $(“#jqxgrid”).jqxGrid(‘endupdate’);
    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    pageable: true,
    autoheight: true,
    sortable: true,
    altrows: true,
    enabletooltips: true,
    editable: true,

    theme: theme,
    selectionmode: ‘checkbox’,
    columns: [

    { text: ‘name’, datafield: ‘name’, width: 250 },
    { text: ‘address’, datafield: ‘address’, cellsalign: ‘right’, width: 250 }

    ]
    });

    }
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
    <div id=”jqxgrid”>
    </div>
    <button onclick=”copyText()”>Copy Text</button>
    </div>
    </body>
    </html>

    selected checkbox rows should be deleted #49062

    Dimitar
    Participant

    Hi Siva Kumar,

    Here is an example, based on the demo CheckBox Selection:

    <!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.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/orders.xml";
    
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
                        { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
                        { name: 'ShipName', map: 'm\\:properties>d\\:ShipName', type: 'string' },
                        { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress', type: 'string' },
                        { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity', type: 'string' },
                        { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry', type: 'string' }
                    ],
                    root: "entry",
                    record: "content",
                    id: 'm\\:properties>d\\:OrderID',
                    url: url
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // create jqxgrid.
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    height: 450,
                    source: dataAdapter,
                    sortable: true,
                    filterable: true,
                    ready: function () {
                        // called when the Grid is loaded. Call methods or set properties here.         
                    },
                    selectionmode: 'checkbox',
                    altrows: true,
                    columns: [
                      { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                      { text: 'Shipped Date', datafield: 'ShippedDate', width: 100, cellsformat: 'yyyy-MM-dd' },
                      { text: 'Freight', datafield: 'Freight', width: 80, cellsformat: 'F2', cellsalign: 'right' },
                      { text: 'Ship City', datafield: 'ShipCity', width: 100 },
                      { text: 'Ship Country', datafield: 'ShipCountry' },
                      { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }
                   ]
                });
    
                $("#deleteRows").click(function () {
                    var rowIndexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                    var rowIds = new Array();
                    for (var i = 0; i < rowIndexes.length; i++) {
                        var currentId = $('#jqxgrid').jqxGrid('getrowid', rowIndexes[i]);
                        rowIds.push(currentId);
                    };
                    $('#jqxgrid').jqxGrid('deleterow', rowIds);
                    $('#jqxgrid').jqxGrid('clearselection');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
            <div id="jqxgrid">
            </div>
            <button id="deleteRows">
                Delete selected rows</button>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.