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
1460
If hidden column is before any other columns, ui object of click events incorrect
posted

I added a hidden column as the first column of my column definition. When I clicked the first column which is the 'NextRound' column in the code below, the ui.colKey is for the hidden column 'CompetitionRoundEntryID'.  I was able to work around this temporarily by moving the hidden column to the end, but it seems like if this type of issue is present in the grid that it's not ready for prime time yet.

 

grid.igGrid(                 { columns: [  
{ headerText: "CompetitionRoundEntryID", key: "CompetitionRoundEntryID", dataType: "string", hidden: true },                          
{ headerText: "Finals", key: "NextRound", dataType: "bool" },                            
{ headerText: "Competitor", key: "Competitor", dataType: "string" },                            
{ headerText: "Partner", key: "Partner", dataType: "string" },                            
{ headerText: "J1", key: "J1", dataType: "number" , },                            
{ headerText: "J2", key: "J2", dataType: "number" },                            
{ headerText: "J3", key: "J3", dataType: "number" },                            
{ headerText: "J4", key: "J4", dataType: "number" },                            
{ headerText: "J5", key: "J5", dataType: "number" },                            
{ headerText: "", key: "DIVIDER", dataType: "string", width:10 },                            
{ headerText: "1", key: "1", dataType: "number" , },                            
{ headerText: "2", key: "2", dataType: "number" },                            
{ headerText: "3", key: "3", dataType: "number" },                            
{ headerText: "4", key: "4", dataType: "number" },                            
{ headerText: "5", key: "5", dataType: "number" },],                    
features: [{                             name: "Sorting",                             type: "local"                         },                        
{ name: "Selection",                             mode: "cell",                             multipleSelection: false,                             activation: true                         },                        
{ name: 'Updating',                             editMode: 'cell',                             enableAddRow: false,                             enableDeleteRow: false                         }],                     width: "500px",                     dataSource: Competition.CompetitionRoundEntries ,                    
autoGenerateColumns: false,                    
renderCheckboxes: true,                    
cellClick: function(evt, ui){debugger;                        
if(ui.colKey==='NextRound'){                            
$(this).igGridSelection('selectCell', ui.rowIndex, ui.colIndex);
$(this).igGridUpdating('startEdit', ui.rowIndex, ui.colIndex);                             var myVal = $(this).igGridSelection('getCellValue', ui.rowIndex, 'NextRound');                             $(this).igGridUpdating("setCellValue", ui.rowIndex, 'NextRound', !myVal);                         }

                    }

                });

 

 

Competition.CompetitionRoundEntries = [        
{ 'CompetitionRoundEntryID': 1, 'NextRound': false, 'Competitor': 'Some Competitor 1', 'Partner': 'Some Partner 1', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' },         { 'CompetitionRoundEntryID': 2, 'NextRound': false, 'Competitor': 'Some Competitor 2', 'Partner': 'Some Partner 2', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' },         { 'CompetitionRoundEntryID': 3, 'NextRound': false, 'Competitor': 'Some Competitor 3', 'Partner': 'Some Partner 3', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' },         { 'CompetitionRoundEntryID': 4, 'NextRound': false, 'Competitor': 'Some Competitor 4', 'Partner': 'Some Partner 4', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' },         { 'CompetitionRoundEntryID': 5, 'NextRound': false, 'Competitor': 'Some Competitor 5', 'Partner': 'Some Partner 5', 'J1': '', 'J2': '', 'J3': '', 'J4': '', 'J5': '' }     ];

Parents Reply
  • 6279
    posted in reply to Chris

    Hi Chris,

    Yes, you’ve come across a bug in the igGrid’s cellClick event – I’ve logged it with internal ID 116909 – you can track it using the CASE number  associated with it (CAS-95735-RF8VV1).
    I realize that this is unfortunate, but I’m not inclined to agree that it’s a show-stopper.

    The problem you’ve described (not being able to manipulate the checkboxes in the NextRound column) is caused by the fact that the
    getCellValue API method belongs to the igGrid widget and not to igGridSelection.

    Unfortunately, you’re right about the rapid clicking – it causes selection to be triggered for the 1st cell of any row.
    I’ll open a new bug for this and ask our support team to associate it with your other forum thread (http://ko.infragistics.com/community/forums/t/71578.aspx).

    Here’s a slightly updated version of your grid’s configuration (incorporating the fix I mentioned above and the fact that I commit the change to the checkbox's state so that it's not styled as pending (when the entire row receives italics)) so that it may aid other forum members in the future :

    (circumventing the fact that a checkbox’s state requires 3 clicks when selection is enabled alongside with Updating was pretty smart)

    grid.igGrid({ 
        columns: [  
            { headerText: "CompetitionRoundEntryID", key: "CompetitionRoundEntryID", dataType: "string", hidden: true },                           
            { headerText: "Finals", key: "NextRound", dataType: "bool" },                             
            { headerText: "Competitor", key: "Competitor", dataType: "string" },                             
            { headerText: "Partner", key: "Partner", dataType: "string" },                             
            { headerText: "J1", key: "J1", dataType: "number" , },                             
            { headerText: "J2", key: "J2", dataType: "number" },                             
            { headerText: "J3", key: "J3", dataType: "number" },                             
            { headerText: "J4", key: "J4", dataType: "number" },                             
            { headerText: "J5", key: "J5", dataType: "number" },                             
            { headerText: "", key: "DIVIDER", dataType: "string", width:10 },                             
            { headerText: "1", key: "1", dataType: "number" , },                             
            { headerText: "2", key: "2", dataType: "number" },                             
            { headerText: "3", key: "3", dataType: "number" },                             
            { headerText: "4", key: "4", dataType: "number" },                             
            { headerText: "5", key: "5", dataType: "number" }
        ],                     
        features: [
            {
                name: "Sorting",                             
                type: "local"                         
            },                         
            {
                name: "Selection",
                mode: "cell",                             
                multipleSelection: false,                             
                activation: true
            },                         
            {
                name: 'Updating',
                editMode: 'cell', 
                enableAddRow: false,
                enableDeleteRow: false,
                editCellStarting: function(evt, ui)
                {
                    //if(ui.columnKey == "NextRound")
                    // return false;
                    
                    return true;
                }
            }
        ],                     
        width: "500px",
        dataSource: Competition.CompetitionRoundEntries,                     
        autoGenerateColumns: false,                     
        renderCheckboxes: true,                     
        cellClick: function(evt, ui){
            //debugger; 
            //if(ui.colKey == 'NextRound')
            if(ui.colIndex == 0)
            {                       
                //debugger; 
                $(this).igGridSelection('selectCell', ui.rowIndex, ui.colIndex); 
                $(this).igGridUpdating('startEdit', ui.rowIndex, ui.colIndex);
                var myVal = $(this).igGrid('getCellValue', ui.rowIndex, 'NextRound');
                $(this).igGridUpdating("setCellValue", ui.rowIndex, 'NextRound', !myVal);         
                $(this).igGrid('commit');            
    
            }
        } 
    });
    


    PS: I'm using http://hilite.me to get HTML-formatted syntax highlighting in my posts; the only downside is that I need to paste the HTML into the new post's HTML code each time, but it's a good trade-off. 

Children