Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
jeanpaul
465
Selection/RowSelector: Deselection Issue
posted

Hello,

I'm using IgGrid with the "enableCheckBoxes: true" parameter.
My goal is to define rows that will be checked at initialization.
I would only allow selection click on the checkbox and not click on the line.

Avoid selection by clicking on the row

{
    name: "Selection",
    mode: "row",
    multipleSelection: true,
    activation: false,
    
    //Avoid the selection by clicking the row
    rowSelectionChanging:function(evt, ui)
    {
        return false;
    },
},

For this sample I check the first row programmatically

{
    name: "Paging",
    type: "local",
    pageSize: 7,
    /* I check first row programatically */
    pagerRendering: function (evt, ui)
    {
        $("#grid1").igGridSelection("selectRow", 0);
    }
},

Result

The first row is checked and selected. But when I click on the checkbox already checked by default, the row does not deselect.
Therefore, if I check the second line, I see the first 2 rows checked and selected instead of the first one only.

Please find an image to illustrate my issue and the jquery sample in the attached archive.


Thank you for your help,

Olivier Hélin


selection.zip
Parents
No Data
Reply
  • 49378
    posted

    Hello Olivier,

    Thank you for posting in the community.

    In this case, I suggest handling the rendered event of the grid in order to check and select all rows initially. As you have noted, rowSelectionChanging can be cancelled and in order to deselect rows on unchecking a checkbox, thecheckBoxStateChangedevent of the RowSelectors feature may be used. For instance:

     

    

      $(function () {
			$('#grid1').igGrid({
				virtualization: false,
				autoGenerateColumns: false,
				width: '500px',
				height: '500px',
				columns: [
					{ headerText: "Product ID", key: "ProductID", width: "100px", dataType: "number" },
					{ headerText: "Units in Stock", key: "UnitsInStock", width: "150px", dataType: "number" },
					{ headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string" },
					{ headerText: "Unit Price", key: "UnitPrice", width: "100px", dataType: "string" }
				],
				features: [                {
				    name: "RowSelectors",
				    enableCheckBoxes: true,
				    checkBoxStateChanged: function (evt, ui) {
				        if (ui.state === "off") {
				            $("#grid1").igGridSelection("deselectRow", ui.rowIndex);
				        }
				    }
 
				},
                {
                    name: "Selection",
                    mode: "row",
                    multipleSelection: true,
                    activation: false,
                    rowSelectionChanging: function (evt, ui) {
                        return false;
                    }
                }],
				rendered: function (evt, ui) {
                    //check and select all rows
				    var datasource = $("#grid1").igGrid("option", "dataSource");
				    for (var i = 0; i < datasource.length; i++) {
				        $("#grid1").igGridSelection("selectRow", i);
				    }
				},
				dataSource: namedData
            });
        });

    Attached is a small sample illustrating this in practice.

    Please let me know if this helps.

     

    igGridSelectionOnlyOnCheckbox.zip
Children