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
Chris
1460
Checkbox column requires 3 clicks to update
posted

I have a checkbox column on a grid. When I go to check one of the checkboxes it takes 3 clicks to get any checked.  The first click selects the row or cell depending on how it's set up.  The second enters edit mode and the third finally checks it.  This is pretty rigorous for someone doing data entry just to check a checkbox. 

 

Maybe I'm missing something but it seems like this is due to how the grid is constructed. 

 

 

Parents
No Data
Reply
  • 845
    Suggested Answer
    posted

    Hello from me,

    We have a solution for single click editing and updating with checkbox.

    Please use the following code:

    Code Snippet
    1. <script type="text/javascript">
    2.         var namedData = new Array();
    3.         namedData[0] = { "ProductID": 1, "UnitsInStock": 100, "ProductDescription": "Laptop", "UnitPrice": "$1000", "DateCol": "1/1/3333", "OnSite":true};
    4.         namedData[1] = { "ProductID": 2, "UnitsInStock": 15, "ProductDescription": "Hamburger", "UnitPrice": null,"DateCol":null, "OnSite": true };
    5.         namedData[2] = { "ProductID": 3, "UnitsInStock": 4.356, "ProductDescription": "Beer", "UnitPrice": "$1000", "DateCol":null, "OnSite":false };
    6.         namedData[3] = { "ProductID": 4, "UnitsInStock": null, "ProductDescription": null, "UnitPrice": null, "DateCol":null, "OnSite":true };
    7.         namedData[4] = { "ProductID": 5, "UnitsInStock": "65", "ProductDescription": "trainers", "UnitPrice": "$1000", "DateCol": "1/1/2222","OnSite":true};
    8.         namedData[5] = { "ProductID": 6, "UnitsInStock": null, "ProductDescription": "coffee cup", "UnitPrice": "$1000" , "DateCol":null, "OnSite":true};
    9.         namedData[6] = { "ProductID": 7, "UnitsInStock": "", "ProductDescription": "", "UnitPrice": "$1000" , "DateCol":null, "OnSite":true};
    10.         namedData[7] = { "ProductID": 8, "UnitsInStock": "998", "ProductDescription": "mouse", "UnitPrice": "$1000" , "DateCol":null, "OnSite":false};
    11.         namedData[8] = { "ProductID": 9, "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$1000", "DateCol": "3/3/2011" ,"OnSite":true};
    12.         namedData[9] = { "ProductID": 10, "UnitsInStock": "43", "ProductDescription": "keyboard", "UnitPrice": "$1000" ,"DateCol":null,  "OnSite":true};
    13.    
    14.         $(function () {
    15.             $("#grid1").igGrid({
    16.                 height: "600px",
    17.                 width: "1600px",
    18.                 columns: [
    19.                     { headerText: "Product ID", key: "ProductID", width: "280px", dataType: "number" },
    20.                     { headerText: "Units in Stock", key: "UnitsInStock", width: "80px", dataType: "number", format: 'double' },
    21.                     { headerText: "Product Description", key: "ProductDescription", width: "150px", dataType: "string"},                   
    22.                     { headerText: "Unit Price", key: "UnitPrice", width: "70px", dataType: "integer",format: 'currency' },
    23.                     { headerText: "Date", key: "DateCol", width: "80px", dataType: "date" },
    24.                     { headerText: "OnSite", key: "OnSite", width: "70px", dataType: "bool" }
    25.                     ],
    26.                 autoGenerateColumns: false,
    27.                 renderCheckboxes: true,
    28.                 dataSource: namedData,
    29.                 primaryKey: "ProductID",       
    30.                 features: [
    31.                 {
    32.                     name: "Selection",
    33.                     multipleSelection: true
    34.                 },
    35.                 {
    36.                     name: "RowSelectors"
    37.                 },               
    38.                 {
    39.                     name: 'Updating',
    40.                     validation : true,
    41.                     startEditTriggers: 'click',
    42.                     editMode: 'cell',
    43.                     editCellStarted: function(evt, ui){
    44.                         if (ui.columnKey === "OnSite") {
    45.                             setTimeout(function() {
    46.                                 $("#grid1").data("igGridUpdating").endEdit(1, evt);
    47.                                 $("#grid1").igGrid("commit");
    48.                             }, 300);
    49.                         }
    50.                     },
    51.                 }
    52.             ]
    53.             });   
    54.            
    55.         });       
    56.        
    58.     script>
Children
No Data