Adding select all header to Grid BooleanColumn

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1

    Adding select all header to Grid BooleanColumn

    This is how I add BooleanColumn column to my Grid by using this example.



    HTML
    <ext:BooleanColumn runat="server" DataIndex="myField" Text="" Editable="true" Resizable="false"
                                    MenuDisabled="true" MaxWidth="50">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="onTitleElClick" Value="onTitleElClick" Mode="Raw" />
                                    </CustomConfig>
                                    <RenderTpl>
                                       <Html>
                                        <div id="{id}-titleEl" {tipMarkup}class="x-column-header-inner">
                                        <div style="display:inline; float:left;">
                                            <div class="x-grid-checkheader" style="width:22px;">&nbsp;</div>
                                        </div>
                                        <span id="{id}-textEl" class="x-column-header-text {childElCls}">                                        
                                            {text}
                                        </span>
                                        <tpl if="!menuDisabled">
                                            <div id="{id}-triggerEl" class="x-column-header-trigger {childElCls}"></div>
                                        </tpl>
                                    </div>
                                    {%this.renderContainer(out,values)%}
                                     </Html>
                                  </RenderTpl>
                                    <Listeners>
                                        <AfterRender Fn="initClickOnHeader" />
                                    </Listeners>
                                </ext:BooleanColumn>

    Javascript
    function initClickOnHeader(column) {
    
    
                column.el.on("click", function (e, t) {
                    var me = this,
                        grid = this.up('tablepanel'),
                        store = grid.getStore(),
                        div = Ext.fly(e.getTarget());
    
    
                    me.checked = !me.checked;
                    div[me.checked ? "addCls" : "removeCls"]("x-grid-checkheader-checked");
    
    
                    store.suspendEvents();
                    store.each(function (record) {
                        record.set(me.dataIndex, me.checked);
                    });
                    store.resumeEvents();
                    store.fireEvent("refresh", store);
    
    
                    e.stopEvent();
                    return false;
                }, column, { delegate: ".x-grid-checkheader" })
            }
    But problem is , it's showing just "True/False" text in grid column. How can I show checkbox instead of "True/False" text ?
    And this checkbox should also editable.
    Last edited by Steven; Dec 01, 2020 at 5:06 AM.

Similar Threads

  1. Replies: 3
    Last Post: Mar 13, 2020, 10:55 PM
  2. Replies: 3
    Last Post: Jun 25, 2013, 3:17 PM
  3. [CLOSED] BooleanFilter and BooleanColumn
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 12, 2012, 5:09 PM
  4. Adding Submenu on header menu from GridPanel
    By douglas in forum 1.x Help
    Replies: 0
    Last Post: Mar 06, 2012, 1:47 PM
  5. Replies: 3
    Last Post: Sep 23, 2010, 2:45 PM

Tags for this Thread

Posting Permissions