Wednesday, June 29, 2011

ext.net checkbox in grid header

Use Case

Place checkbox (or virtual any custom control to the header)

Solution

Use AfterRender event to override header cell's text.
Inspired by http://extjs-world.blogspot.com/2011/06/how-to-show-image-or-checkbox-html.html



                function afterRender(_grid) {
                     var columns = _grid.getColumnModel().config;
                     var view = _grid.getView();
                     var columnIndex = 0;
                     Ext.each(columns, function(column){
                        if (column.id.indexOf(""IDX"") == 0) {
                            var headerHtml = '<div class=""x-grid""' + columnIndex + '-hd-inner x-grid' + columnIndex + '-hd-' + column.id + '"" unselectable=""on"" style=""text-align: center;"">' + column.header;
                            headerHtml += '&nbsp;<input type=""checkbox"" id=""'+column.id+'_CHCK"">';
                            headerHtml += '</div>';
                            //replace the view headerCell 
                            view.getHeaderCell(columnIndex).innerHTML = headerHtml;
                        }
                        columnIndex = columnIndex + 1;                        
                     });
                };
                ");


No comments:

Post a Comment