how to remove selected rows by using knockout - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, jqxgrid, Knockout, remove, row

This topic contains 2 replies, has 2 voices, and was last updated by Dimitar 12 years, 1 month ago.

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

Author

how to remove selected rows by using knockout Posts

August 16, 2012 at 4:06 am how to remove selected rows by using knockout #6798

cherry

Member

In the knockout example, the remove button just remove the last row of grid, how to remove selected row(s) instead of just last row?

August 16, 2012 at 6:03 am how to remove selected rows by using knockout #6799

cherry

Member

and also, at the sametime, the updated data can send back to server.

August 16, 2012 at 8:57 am how to remove selected rows by using knockout #6804

Dimitar

Participant

Hello cherry,

Here is an example on how to remove a specific row (check the comments for clarification):

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to integrate jqxGrid with knockout.js.
    </title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.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.columnsresize.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.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/jqxnumberinput.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'classic';
            var initialData = [
                { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
                { name: "Speedy Coyote", sales: 89, price: 190.00 },
                { name: "Furious Lizard", sales: 152, price: 25.00 },
                { name: "Indifferent Monkey", sales: 81, price: 99.95 },
                { name: "Brooding Dragon", sales: 65, price: 63 },
                { name: "Ingenious Tadpole", sales: 394, price: 0.35 },
                { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];
            // create GridModel.
            var GridModel = function (items) {
                this.items = ko.observableArray(items);
                this.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                };
                this.removeLastItem = function () {
                    this.items.pop();
                };
                this.removeItem = function () {
                    $('#jqxgrid').jqxGrid('deleterow', ($('#numberinput').val())); // removes a row depending on input's value
                };
            };
            var gridModel = new GridModel(initialData);
            ko.applyBindings(gridModel);
          
            var source = {
                localdata: gridModel.items,
                datatype: 'local'
            }
            // create jqxGrid.
            $("#jqxgrid").jqxGrid(
            {
                source: source,
                autoheight: true,
                pageable: true,
                theme: theme,
                columns: [
                  { text: 'Name', dataField: 'name', width: 200 },
                  { text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
                  { text: 'Price', dataField: 'price', cellsformat: 'c2', cellsalign: 'right' }
               ]
            });
            $('#addButton').jqxButton({ theme: theme });
            $('#removeLastButton').jqxButton({ theme: theme });
            $('#removeButton').jqxButton({ theme: theme });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 10px;">
            <input id="addButton" type="button" data-bind='click: addItem' value="Add Item" />
            <input id="removeLastButton" type="button" data-bind='click: removeLastItem' value="Remove Last Item" />
            <input id="removeButton" type="button" data-bind='click: removeItem' value="Remove Item №:" />
            <input id="numberinput" type="text" value="0" /> <!-- value shows row selected for removal -->
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.