jQuery UI Widgets › Forums › Grid › Hiding checkbox cell in virtualmode

Tagged: , , , , , , , , , , , , , , ,

This topic contains 18 replies, has 4 voices, and was last updated by  Dimitar 8 years, 4 months ago.

Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • Author
    Hiding checkbox cell in virtualmode Posts
  • November 1, 2014 at 9:59 pm Hiding checkbox cell in virtualmode #61989

    zorgoz
    Participant

    Hello,

    As using selectionmode: checkbox looks problematic in virtual mode, I decided to step back to the method described here. Well, the description not complete for virtualmode, but it is much better, and could be made working. As suggested on the link, I have a virtual column definition like this: { text: '', datafield: '_selected', columntype: 'checkbox', width: 40 },.
    My grid has no paging, and thus no autoheight.
    I am encountering some problems when I apply a filter that results in fewer rows than the the grid has. The checkboxes are visible for the empty rows as well. But not only visible, they do react on clicks. The first problem was, that when I checked the checkbox before an empty row, all checkboxes disappeared. I overcome this partially with a column level cellbeginedit event, that cacels editing in such cases. The checkboxes don’t disappear, but they are still reactive.
    I tried to add a cellrenderer for the checkbox column to avoid displaying it in the empty rows, as I do in case of a custom button cell, but seems to be ineffective – I suppose it is omitted for some reason.

    My questions are:
    – How can I not show the checkbox in the empty rows? Can I override checkbox renderer somehow, or is there any other programatic way?
    or at least
    – How can I prevent the checkboxes in the empty rows to respond to user clicks?

    Thank you in advance

    November 4, 2014 at 11:54 am Hiding checkbox cell in virtualmode #62106

    Dimitar
    Participant

    Hello zorgoz,

    You can implement the cellbeginedit callback function to your checkbox column to prevent checking when the row is empty. Here is an example:

    <!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.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(5);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command
                    // call commit with parameter true if the synchronization with the server is successful 
                    // and with parameter false if the synchronization failder.
                    commit(true);
                },
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'date', type: 'date' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                enabletooltips: true,
                selectionmode: 'multiplecellsadvanced',
                ready: function () {
                    $("#jqxgrid").jqxGrid("addrow", null, {});
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                  { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: function (row, datafield, columntype, value) {
                      var firstName = $('#jqxgrid').jqxGrid('getcellvalue', row, 'firstname');
                      if (firstName === undefined) {
                          return false;
                      }
                  }
                  },
                  {
                      text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
                      validation: function (cell, value) {
                          if (value == "")
                              return true;
                          var year = value.getFullYear();
                          if (year >= 2015) {
                              return { result: false, message: "Ship Date should be before 1/1/2015" };
                          }
                          return true;
                      }
                  },
                  {
                      text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 150) {
                              return { result: false, message: "Quantity should be in the 0-150 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
                      }
                  },
                  { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
                      validation: function (cell, value) {
                          if (value < 0 || value > 15) {
                              return { result: false, message: "Price should be in the 0-15 interval" };
                          }
                          return true;
                      },
                      createeditor: function (row, cellvalue, editor) {
                          editor.jqxNumberInput({ digits: 3 });
                      }
                  }
                ]
            });
            // events
            $("#jqxgrid").on('cellbeginedit', function (event) {
                var args = event.args;
                $("#cellbegineditevent").text("Event Type: cellbeginedit, Column: " + args.datafield + ", Row: " + (1 + args.rowindex) + ", Value: " + args.value);
            });
            $("#jqxgrid").on('cellendedit', function (event) {
                var args = event.args;
                $("#cellendeditevent").text("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="font-size: 12px; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
            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/

    November 8, 2014 at 6:05 pm Hiding checkbox cell in virtualmode #62425

    zorgoz
    Participant

    Hello,

    Thank you for your answer. As I mentioned in my original post I tried this before. Unfortunately it has only partial effect. The checkbox remains enabled, thus can be checked and unchecked by the user. Still, the cellendedit event is not fired in those cases.
    Please not that this field exists only on client side, and thus it is initialized to non-null value in virtualmode in the beforeLoadComplete event handler. But only for the data rows comming from the server. As a consequence, there will be no initialized variable for it in the empty grid rows.

    I have no doubt that it is working correctly in non-virtual mode.

    Please test the behavior under similar conditions.

    November 10, 2014 at 10:04 am Hiding checkbox cell in virtualmode #62458

    Dimitar
    Participant

    Hi zorgoz,

    Did you try to implement this part of our solution:

    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellbeginedit: function (row, datafield, columntype, value) {
    var firstName = $('#jqxgrid').jqxGrid('getcellvalue', row, 'firstname');
    if (firstName === undefined) {
        return false;
    }
}
},

    What is the value of firstName (or whatever your first data column is) in you case when the row is empty?

    Best Regards,
    Dimitar

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

    November 10, 2014 at 10:12 pm Hiding checkbox cell in virtualmode #62490

    zorgoz
    Participant

    Hello,

    Well, not absolutely the same. My code looks like this:
    { datafield: '_selected', text: '', columntype: 'checkbox', width: 30, editable: true, filterable: false, exportable: false, sortable: false, cellbeginedit: rowEdit, },
    Where rowEdit is:
    var rowEdit = function (row) {
    var data = $("#jqxgrid").jqxGrid('getrowdata', row);
    if (!!!data.ID)
    {
    return false;
    }
    }
    I have debugged my code, and it is returning false for the empty rows. With no effect…

    November 11, 2014 at 7:27 am Hiding checkbox cell in virtualmode #62511

    Dimitar
    Participant

    Hello zorgoz,

    We reproduced the reported behaviour. Unfortunately, we cannot offer you a solution on the matter at the moment.

    Best Regards,
    Dimitar

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

    October 27, 2015 at 3:43 pm Hiding checkbox cell in virtualmode #77407

    ales
    Participant

    Hi,
    I am facing the same problem. Is there any solution to _hide_ the checkboxes for empty rows? Or better would be not to display empty rows.

    Thank you for any hints.
    Ales

    October 28, 2015 at 6:45 am Hiding checkbox cell in virtualmode #77428

    Dimitar
    Participant

    Hi Ales,

    Unfortunately, neither of these is possible, but you can remove empty rows with the deleterow method if you wish.

    Best Regards,
    Dimitar

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

    October 29, 2015 at 5:36 am Hiding checkbox cell in virtualmode #77472

    ales
    Participant

    Hi Dimitar,
    thank you for your response. I am not able to delete any row, either the empty or with the data:

    1. When deleting a row with data in virtual mode an error ocurred: “TypeError: this.records.indexOf is not a function”. Similar error is raised when calling ‘addrow’. The this.records is expected to be an array, but is an object. I am using datatype: “array”, so I do not understand why this error is raised. Please see the example: http://jsfiddle.net/g4ztdgjf/5/ , select one row with the data and click the button -> “TypeError: this.records.indexOf is not a function” appears in the console.

    2. How to delete the empty rows if the do not have any row id?

    Thank you for your help.
    Ales

    October 29, 2015 at 6:45 am Hiding checkbox cell in virtualmode #77475

    Dimitar
    Participant

    Hi Ales,

    I am sorry, I misunderstood what you meant by “empty rows”. In your example, these are only “placeholder” rows that appear when virtual mode is enabled, not actual rows that can be deleted. The only solution we can offer you is setting autoheight to true.

    Best Regards,
    Dimitar

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

    October 29, 2015 at 7:53 am Hiding checkbox cell in virtualmode #77485

    ales
    Participant

    Hi Dimitar,
    thanks for the suggestion, but autoheight is not an option with virtualmode because the rendergridrows function requests to render all the “totalrecords” records (see the console log in http://jsfiddle.net/g4ztdgjf/6/) and this can lead to hang the application when there are thousands and more records. The big data sizes are the reason why I consider to use virtual mode. Can you consider to change the grid not to show the “placeholder” rows in some of the future versions?

    And the first question in my previous post: what is the right way to delete a row to avoid the “TypeError: this.records.indexOf is not a function” error.

    Thank you
    Ales

    October 29, 2015 at 9:20 am Hiding checkbox cell in virtualmode #77492

    Dimitar
    Participant

    Hi Ales,

    The visibility of the placeholder rows is already discussed in the forum topic Empty rows in virtualmode when totalrecords smaller than count of visible rows. Please avoid making duplicate posts and asking the same question in multiple forum topics.

    As for deleting (actual) rows in virtual mode – this has to be done server-side with the help of the source callback function deleterow, as exemplified in the help topic Build CRUD Web App with jqxGrid using PHP and MySQL.

    Best Regards,
    Dimitar

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

    October 29, 2015 at 11:44 am Hiding checkbox cell in virtualmode #77500

    ales
    Participant

    I am sorry about duplicating this question, but there is still no response to this question. Can you or Peter reply to a question, if you can consider to change the grid not to show the “placeholder” rows in some of the future versions, please?

    Thank you very much for your attention
    Ales

    October 29, 2015 at 2:59 pm Hiding checkbox cell in virtualmode #77521

    ales
    Participant

    Hi,
    can you please try this example: http://jsfiddle.net/g4ztdgjf/7/ ? Try to click the checkbox in the first or second row and you will see that checkboxes in the “placeholder” rows change its state to “null”. It looks really very bad. This behaviour and also a fact, that user can select non existing row is not very user friendly.

    Thank you for your response.
    Ales

    October 30, 2015 at 6:26 am Hiding checkbox cell in virtualmode #77545

    Dimitar
    Participant

    Hi Ales,

    Thank you for your feedback. We will consider improving this functionality in future releases.

    Best Regards,
    Dimitar

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

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 19 total)
1 2

You must be logged in to reply to this topic.