jQWidgets Forums

Tagged: grid, jqxgrid, multiplerows, selectionmode

This topic contains 7 replies, has 2 voices, and was last updated by Nadezhda 10 years, 3 months ago.

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

Author

Keep Row/Cell Selection After Saving Posts

October 29, 2014 at 2:53 pm Keep Row/Cell Selection After Saving #61812

Participant

Hi,
I have a very large, complicated grid that has very many editable cells. After a user edits cells, they would click on a “save” button that exits edit mode (calling endcelledit on the last edited cell) and saves the data they’ve changed. Is there a way to make the row and cell highlighting persist after exiting edit mode? Currently, we’ve figured out to keep the row highlighted by using the below code snippet, but I can’t figure out a way to make it re-select the last edited cell.


selectedRow= $('#jqxWidget').jqxGrid('getselectedrowindex');
if (this.selectedRow != -1) $('#jqxWidget').jqxGrid('selectrow', this.selectedRow);

Thanks in advance.

October 30, 2014 at 2:19 pm Keep Row/Cell Selection After Saving #61884

Nadezhda

Participant

Hello lastrom,

You can set “selectionmode” to “multiplerows”. Each click selects a new row and if you want to unselect it just click on a selected row.

Best Regards,
Nadezhda

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

November 12, 2014 at 4:55 pm Keep Row/Cell Selection After Saving #62616

lastrom

Participant

The scenario that I’m trying to figure out is the following.
– User clicks on a cell to edit. Row is highlighted in blue, cell is highlighted in yellow.
– Once user is done with editing, they click on a save button.
– Data saves. Row is still highlighted in blue and cell is still highlighted in yellow.

Currently, I can only get the row to stay highlighted after saving and not the cell. I hope this clarifies it a bit more.

November 13, 2014 at 8:01 am Keep Row/Cell Selection After Saving #62660

Nadezhda

Participant

Hello lastrom,

You can set a custom CSS class for the column’s cells with ‘cellclassname’ column property.

Best Regards,
Nadezhda

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

November 13, 2014 at 3:33 pm Keep Row/Cell Selection After Saving #62709

lastrom

Participant

When the save button is clicked and editing mode is exited, there’s doesn’t seem to be a way to know which cell was selected before the save occurred, so I cannot set the class on that specific class.

November 14, 2014 at 7:19 am Keep Row/Cell Selection After Saving #62743

Nadezhda

Participant

Hi lastrom,

You can get cell value and save it in variable with ‘getcellvalue’ method.

Best Regards,
Nadezhda

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

November 18, 2014 at 2:52 pm Keep Row/Cell Selection After Saving #62974

lastrom

Participant

Let me rephrase… I’m trying to visually show a highlighted row with a highlighted cell (row background being blue, cell background being yellow) and keep the highlighting persistent through saving information.

November 19, 2014 at 9:28 am Keep Row/Cell Selection After Saving #63003

Nadezhda

Participant

Hi lastrom,

Here is an example which shows how keep row/cell selection after saving. If you select for editing the first cell in column ‘Product Name’ and click the button then the first row will be highlighted in blue and the first cell – in yellow.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/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="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.storage.js"></script>    
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <style>
        .yellowCell {
            background-color: yellow;
        }

        .blueRow {
            background-color: blue;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/products.xml";
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: "Products",
                record: "Product",
                id: 'ProductID',
                url: url
            };
            var x = false;
            var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
            });
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                editable: true,
                columns: [
                  {
                      text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250,
                      cellclassname: function (row, column, value, data) {
                          if (data.uid == "1" && x == true) {
                              return "yellowCell";
                          }
                      }
                  },
                  {
                      text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200,
                      cellclassname: function (row, column, value, data) {
                          if (data.uid == "1" && x == true) {
                              return "blueRow";
                          }
                      }
                  },
                  {
                      text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200,
                      cellclassname: function (row, column, value, data) {
                          if (data.uid == "1" && x == true) {
                              return "blueRow";
                          }
                      }
                  },
                  {
                      text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', width: 100,
                      cellclassname: function (row, column, value, data) {
                          if (data.uid == "1" && x == true) {
                              return "blueRow";
                          }
                      }
                  },
                  {
                      text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued',
                      cellclassname: function (row, column, value, data) {
                          if (data.uid == "1" && x == true) {
                              return "blueRow";
                          }
                      }
                  }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
            $("#jqxbutton").jqxButton({
                theme: 'energyblue',
                height: 30
            });
            $('#jqxbutton').click(function () {
                //var state = $("#jqxgrid").jqxGrid('savestate');
                $("#jqxgrid").jqxGrid('endcelledit', 0, "ProductName", false);
                x = true;
                $('#jqxgrid').jqxGrid('refresh');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 10px;">
            <input id="jqxbutton" type="button" value="Save" />
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.