Adding select all header to Grid BooleanColumn

  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.
  2. #2
    Hello @Steven, and welcome to Ext.NET Forums!

    I see you have a lot of custom settings and template on your column. Something there may be breaking how it works. You may want to remove all these settings and start from a bare BooleanColumn, then iteractively add your custom behavior until you see what in your code is breaking it. The issue is most likely in the custom template you have, and as far as I can see, the component itself should work fine.

    Here is an example mapping true/false server-side values into checked/unchecked on the grid:
    - Grid Panel > Column Model > Column Variations (for Ext.NET 5)

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

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