jQWidgets Forums

Tagged: editable, grid, jqxgrid, row

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

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

1 2 →

Author

Possibility to make a set of rows non editable in an editable grid Posts

August 28, 2012 at 2:16 pm Possibility to make a set of rows non editable in an editable grid #7212

SushmaSriram

Member

Hi Team,

I have a grid which is set as editable true. But on some cases I would like to make the entire row non editable. Could you please let me know the feasibility and if yes, support me with an example.

Thanks,
Sushma.

August 29, 2012 at 5:47 am Possibility to make a set of rows non editable in an editable grid #7228

Dimitar

Participant

Hello Sushma,

Here is an example that shows you how to disable the editing of some rows – in this case the first, the third and the fifth.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.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.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            // cancels the editing of desired rows
            var beginedit = function (row, datafield, columntype) {
                if ((row == 1) || (row == 3) || (row == 5)) {
                    return false;
                };
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                editmode: 'dblclick',
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100, cellbeginedit: beginedit },
                  { text: 'Last Name', datafield: 'lastname', width: 100, cellbeginedit: beginedit },
                  { text: 'Product', datafield: 'productname', width: 180, cellbeginedit: beginedit },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellbeginedit: beginedit },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 29, 2012 at 11:48 am Possibility to make a set of rows non editable in an editable grid #7248

SushmaSriram

Member

Hi Dimitar,

This looks fine, but I have the settings for the grid as sortable. so the rows might be changing their positions. In that case, the above Solution fails. Could you please suggest me the way forward.

Thanks in advance,
Sushma.

August 30, 2012 at 6:10 am Possibility to make a set of rows non editable in an editable grid #7269

Dimitar

Participant

Hi Sushma,

The example I sent you works fine even when the grid is sorted. The row index that is checked in the beginedit function is the one that is set at the initialization of the grid. Even if the row with that index goes to the bottom of the page, it still won’t be editable. You can also make a different check, for example:

            var beginedit = function (row, datafield, columntype) {
                var name = $('#jqxgrid').jqxGrid('getcellvalue', row, 'name');
                if (name == 'Hot Chocolate') {
                    return false;
                };
            };

Best Regards,
Dimitar

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

August 30, 2012 at 1:24 pm Possibility to make a set of rows non editable in an editable grid #7294

SushmaSriram

Member

It works. Thanks a lot!!!!!!!!!

September 4, 2012 at 7:51 am Possibility to make a set of rows non editable in an editable grid #7388

SushmaSriram

Member

Hi Team,

The given example helps me a lot.. Can you please give an example based on this where I can make the entire row greyed out so that it stays stand out in the grid to let the user that it is not editable.

Thanks in advance,
Sushma

September 5, 2012 at 6:12 am Possibility to make a set of rows non editable in an editable grid #7442

Dimitar

Participant

Hi Sushma,

Here is an extended example based on the one before. The desired formatting is made with the cellsrenderer function.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.7.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.edit.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            // cancels the editing of desired rows
            var beginedit = function (row, datafield, columntype) {
                if ((row == 1) || (row == 3) || (row == 5)) {
                    return false;
                };
            };
            // renders the cells of the non editable rows
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if ((row == 1) || (row == 3) || (row == 5)) {
                    var formattedValue = value;
                    if (columnproperties.cellsformat != "") {
                        formattedValue = $.jqx.dataFormat.formatnumber(formattedValue, columnproperties.cellsformat);
                    };
                    return '<div style="height: 100%; background-color: #BBBBBB;"><span style="float: ' + columnproperties.cellsalign + '; position: relative; margin: 4px;">' + formattedValue + '</span></div>';
                };
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                editable: true,
                editmode: 'dblclick',
                selectionmode: 'singlecell',
                sortable: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Last Name', datafield: 'lastname', width: 100, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Product', datafield: 'productname', width: 180, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right', cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2', cellbeginedit: beginedit, cellsrenderer: cellsrenderer }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

September 12, 2012 at 8:10 am Possibility to make a set of rows non editable in an editable grid #7752

DollyB

Member

Hi Dimitar,

Thankx a lot for the solution. We implemented it. It worked fine.
1) But, one of the grid column is set to Date type, and the properties set are,

row[“columntype”] = ‘datetimeinput’;
row[“cellsformat”] = ‘yyyy-MM-dd’;

The solution you gave for greying out the rows doesn’t work from the column which has Date type set with above properies. It throws an warning message saying, Bad number format specifier: Y

The javascript error details are as below.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QS 4.2.4.0; QS 5.3.0.4; BTRS125009; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; MS-RTC LM 8; QS 4.2.4.0; QS 5.3.0.4)
Timestamp: Wed, 12 Sep 2012 08:01:42 UTC

Message: Exception thrown and not caught
Line: 7
Char: 16953
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js

2) If I remove the cellsformat property, greying ou is happening fine but when we try to edit the Date cell, we are not able to see the Calendar window.

Please provide solutions for these 2 issues if I am doing anything wrong.

The script files we are including are,

September 12, 2012 at 9:00 am Possibility to make a set of rows non editable in an editable grid #7764

DollyB

Member

September 12, 2012 at 9:03 am Possibility to make a set of rows non editable in an editable grid #7765

DollyB

Member

Hi Dimitar,

Thankx a lot for the solution. We implemented it. It worked fine.
1) But, one of the grid column is set to Date type, and the properties set are,

row[“columntype”] = ‘datetimeinput’;
row[“cellsformat”] = ‘yyyy-MM-dd’;

The solution you gave for greying out the rows doesn’t work from the column which has Date type set with above properies. It throws an warning message saying, Bad number format specifier: Y
The javascript error details are as below.

Webpage error details

Message: Exception thrown and not caught
Line: 7
Char: 16953
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js
2) If I remove the cellsformat property, greying ou is happening fine but when we try to edit the Date cell, we are not able to see the Calendar window.

The script files we are including are,

jquery/jqwidgets/styles/jqx.base.css
jquery/scripts/jquery-1.7.2.min.js
jquery/scripts/gettheme.js
jquery/jqwidgets/jqx-all.js
js/json2.js

Please provide solutions for these 2 issues if I am doing anything wrong.

September 12, 2012 at 9:30 am Possibility to make a set of rows non editable in an editable grid #7767

Dimitar

Participant

Hello DollyB,

This example illustrates how to solve those issues – there is an updated version of the cellsrenderer function:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In order to enter in edit mode, select a grid cell and start
        typing, "Click" or press the "Enter" or "F2" keys. You can also navigate through
        the cells with the "Tab" and "Shift + Tab" key combinations. To cancel the cell
        editing, press the "Esc" key. To save the changes press the "Enter" key or select
        another Grid cell. Pressing the 'Space' key when a checkbox cell is selected will
        toggle the check state.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jQWidgets2.4.1/demos/jqxgrid/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // prepare the data
            var data = generatedata(10);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            // cancels the editing of desired rows
            var beginedit = function (row, datafield, columntype) {
                if ((row == 1) || (row == 3) || (row == 5)) {
                    return false;
                };
            };
            // renders the cells of the non editable rows
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if ((row == 1) || (row == 3) || (row == 5)) {
                    var formattedValue = value;
                    if (columnproperties.cellsformat == "yyyy-MM-dd" || columnproperties.columntype == 'datetimeinput') {
                        formattedValue = $.jqx.dataFormat.formatdate(formattedValue, columnproperties.cellsformat);
                    }
                    else if (columnproperties.cellsformat != "") {
                        formattedValue = $.jqx.dataFormat.formatnumber(formattedValue, columnproperties.cellsformat);
                    }
                    return '<div style="height: 100%; background-color: #BBBBBB;"><span style="float: ' + columnproperties.cellsalign + '; position: relative; margin: 4px;">' + formattedValue + '</span></div>';
                };
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                autoheight: true,
                source: dataAdapter,
                editable: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 177, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: beginedit, cellsrenderer: cellsrenderer },
                  { text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 90, cellsalign: 'right', cellsformat: 'yyyy-MM-dd', cellbeginedit: beginedit, cellsrenderer: cellsrenderer,
                      validation: function (cell, value) {
                          var year = value.getFullYear();
                          if (year >= 2013) {
                              return { result: false, message: "Ship Date should be before 1/1/2013" };
                          }
                          return true;
                      }
                  },
                  { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right', columntype: 'numberinput', cellbeginedit: beginedit, cellsrenderer: cellsrenderer,
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput', cellbeginedit: beginedit, cellsrenderer: cellsrenderer,
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      initeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
            // events
            $("#jqxgrid").bind('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").html("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
            $("#jqxgrid").bind('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").html("Event Type: cellendedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
        });
    </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>
</body>
</html>

Best Regards,
Dimitar

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

September 13, 2012 at 7:54 am Possibility to make a set of rows non editable in an editable grid #7870

DollyB

Member

I tried your solution. But it is showing another warning message now for Date column, Object doesn’t support this property or mehtod

We are using 2.2 version of JQWidgets. U mean to say the solution works from v 2.4.1?

September 13, 2012 at 9:19 am Possibility to make a set of rows non editable in an editable grid #7878

Dimitar

Participant

Hi DollyB,

We recommend using the latest version of jQWidgets (as of today, it is 2.4.2.). Please, try the example with the updated version and share your feedback.

Best Regards,
Dimitar

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

September 24, 2012 at 6:59 am Possibility to make a set of rows non editable in an editable grid #8366

DollyB

Member

Hi Dimitar,

We upgraded the version to 2.4.2 and the error now shows, “Object doesn’t support this property or method”.
Following are the details ofthe error.

Error Details in IE:
Webpage error details

Message: Object doesn’t support this property or method
Line: 1434
Char: 24
Code: 0
URI: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js

Error Details in Firefox:

Timestamp: 24/09/2012 12:16:42
Error: TypeError: date.getTime is not a function
Source File: http://marsvcd1.sw.ericsson.se:8085/eMatrix/jQuery/jqwidgets/jqxdata.js
Line: 1434

Please suggest solution for this issue.

Regards
DollyB

September 24, 2012 at 7:27 am Possibility to make a set of rows non editable in an editable grid #8371

Dimitar

Participant

Hi DollyB,

Here is an online demo of the same example – http://jsfiddle.net/jqwidgets/NFVL5/1/ and it works properly.

Best Regards,
Dimitar

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

Author

Posts

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

1 2 →

You must be logged in to reply to this topic.