jQWidgets Forums

Tagged: cellbeginedit, checkbox, grid, jqxgrid, row

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

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

Author

make only some rows not editable (checkable) Posts

April 8, 2013 at 11:11 pm make only some rows not editable (checkable) #18848

Participant

Hello, data in mine grid are grouped into three groups. Every row has its own checkbox. Is there any way to remove checkboxes from one of these groups?
I’m making new rows this way:
var row = {};

row["title"] = title; row["select"] = false; //checkbox, here I want to exclude it row["location"]=location; gridData.push(row);

and the grid itself:
$("#searchGrid").jqxGrid( { width: 345, height: 120, source: sourceS, theme: theme, editable: true, editmode: 'dblclick', filterable: true, sortable: true, columns: columns, groupable: true, groups: ['location'], groupindentwidth: 7, showgroupsheader: false });

Thank you for any hint

April 9, 2013 at 11:33 am make only some rows not editable (checkable) #18884

Dimitar

Participant

Hello elessar,

Could you, please, provide us with a bigger code sample, which to make your issue clearer? Remember to format it as shown in the forum topic Code Formatting.

Best Regards,
Dimitar

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

April 9, 2013 at 1:38 pm make only some rows not editable (checkable) #18903

elessar

Participant

let’s say, that I have this grid http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/defaultfunctionality.htm

And I want to either disable or completely remove checkbox for every row, which “quantity per unit” equals 12

April 10, 2013 at 8:12 am make only some rows not editable (checkable) #18962

elessar

Participant

oops I’m sorry, I posted not so particular link I meant this http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/defaultfunctionality.htm?classic

April 10, 2013 at 10:51 am make only some rows not editable (checkable) #18992

Dimitar

Participant

Hi elessar,

Here is a solution in which the checkboxes are disabled (their checkstate cannot be changed). There is no way for particular checkboxes to be removed, however.

<!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.9.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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 cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            var cellbeginedit = function (row, datafield, columntype, value) {
                var value = $('#jqxgrid').jqxGrid('getcellvalue', row, "QuantityPerUnit");
                if (value == 12) {
                    return 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: 670,
                source: dataAdapter,
                theme: theme,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Product Name', datafield: 'ProductName', width: 250 },
                  { text: 'Quantity per Unit', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 120 },
                  { text: 'Unit Price', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 100 },
                  { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', cellbeginedit: cellbeginedit },
                ]
            });
        });
    </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/

April 11, 2013 at 11:37 am make only some rows not editable (checkable) #19058

elessar

Participant

thank you, that’s very clever & simple

Author

Posts

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

You must be logged in to reply to this topic.