Home » Jquery » javascript – save selected rows from a table in local storage

javascript – save selected rows from a table in local storage

Posted by: admin February 22, 2020 Leave a comment

Questions:

I am working with a data table with kendo grid and jquery, I need to obtain the values of the selected rows through the checkbox, so I am capturing the event when it changes and returns the values of the rows that are marked, something like this:

function onChange(e) {
    var rows = e.sender.select();
    rows.each(function(e) {
        var grid = $("#grid").data("kendoGrid");
        var dataItem = grid.dataItem(this);

        console.log(dataItem);
    })
};

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            pageSize: 10,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Products",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "ProductID"
                }
            }
        },
        pageable: true,
        scrollable: false,
        persistSelection: true,
        sortable: true,
        change: onChange,
        columns: [{
                selectable: true,
                width: "50px"
            },
            {
                field: "ProductName",
                title: "Product Name"
            },
            {
                field: "UnitPrice",
                title: "Unit Price",
                format: "{0:c}"
            },
            {
                field: "UnitsInStock",
                title: "Units In Stock"
            },
            {
                field: "Discontinued"
            }
        ]
    });
});
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="example">
    <div id="grid"></div>
</div>
</body>
</html>

What I need now is to be able to store the values that if they are selected, I want to keep them in an array in local storage, but I don’t know how to do this, since I need to keep this array updated and eliminate those that are no longer marked, any ideas?

PD: I also attached the original dojo of the example https://dojo.telerik.com/IciMekAn

How to&Answer:

I would review a localStorage tutorial. Here is a basic example. Be aware that the snippet will throw an error due to the environment.

$(function() {
  function saveLocalData(k, d) {
    if (k == undefined) {
      return false;
    }
    if (d.length) {
      localStorage.setItem(k, JSON.stringify(d));
    } else {
      localStorage.removeItem(k);
    }
    return d.length;
  }

  function getLocalData(k) {
    return JSON.parse(localstorage.getItem(k));
  }

  function getGridData(target, elem) {
    return target.data("kendoGrid").dataItem(elem);
  }

  function onChange(e) {
    var selected = [];
    var rows = e.sender.select();
    rows.each(function(i, el) {
      //selected.push(dataItem);
      selected.push(getGridData($("#grid"), el));
    });
    console.log(selected);
    saveLocalData("selected", selected);
  }

  $("#grid").kendoGrid({
    dataSource: {
      pageSize: 10,
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Products",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "ProductID"
        }
      }
    },
    pageable: true,
    scrollable: false,
    persistSelection: true,
    sortable: true,
    change: onChange,
    columns: [{
        selectable: true,
        width: "50px"
      },
      {
        field: "ProductName",
        title: "Product Name"
      },
      {
        field: "UnitPrice",
        title: "Unit Price",
        format: "{0:c}"
      },
      {
        field: "UnitsInStock",
        title: "Units In Stock"
      },
      {
        field: "Discontinued"
      }
    ]
  });
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default-v2.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>

<div id="example">
  <div id="grid"></div>
</div>