[CLOSED] GridPanel

  1. #1

    [CLOSED] GridPanel

    Hi, I have a column with a GridPanel Ext.Net.Column. I created a javascript code in the event Renderer to change the value zero (0) to NO and one (1) to YES. Well, the problem is that the filter was at zero (0) or one (1) and should filter by YES or NO and the tooltip shows zero (0) or one (1). What is the best solution?
    Last edited by Daniil; Aug 15, 2011 at 3:54 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I'd suggest you to convert "YES" and "NO" to "1" and "0" and vice versa when it's required.
  3. #3
    Hi, but in which event I do the conversion? And how do I do?
  4. #4
    Please see the example below. We used BooleanColumn.

    Example

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", 1 },
                    new object[] { "test2", 0 },
                    new object[] { "test3", 1 }
                };
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var showTip = function () {
                var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement), 
                    cellIndex = GridPanel1.view.findCellIndex(this.triggerElement),
                    record = GridPanel1.getStore().getAt(rowIndex),
                    fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
                    
                this.body.dom.innerHTML = GridPanel1.getColumnModel().columns[cellIndex].renderer(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column
                            DataIndex="test1"
                            Header="String" />
                        <ext:BooleanColumn
                            DataIndex="test2"
                            Header="Boolean"
                            FalseText="No" 
                            TrueText="Yes" />
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:GridFilters runat="server">
                        <Filters>
                            <ext:StringFilter DataIndex="test1" />
                            <ext:BooleanFilter DataIndex="test2" />
                        </Filters>
                    </ext:GridFilters>
                </Plugins>
            </ext:GridPanel>
            <ext:ToolTip 
                runat="server" 
                Target="={GridPanel1.getView().mainBody}"
                Delegate=".x-grid3-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Fn="showTip" />
                </Listeners>
            </ext:ToolTip>    
        </form>
    </body>
    </html>
  5. #5
    Hi, but how would the filter? I'm using something similar to filter the example https://examples1.ext.net/#/GridPane...Header/Filter/
  6. #6
    Please see the example.

    Example

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = new object[] 
                { 
                    new object[] { "test1", 1 },
                    new object[] { "test2", 0 },
                    new object[] { "test3", 1 }
                };
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        <script type="text/javascript">
            var showTip = function () {
                var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement), 
                    cellIndex = GridPanel1.view.findCellIndex(this.triggerElement),
                    record = GridPanel1.getStore().getAt(rowIndex),
                    fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex),
                    data = record.get(fieldName);
                     
                this.body.dom.innerHTML = GridPanel1.getColumnModel().columns[cellIndex].renderer(data);
            };
        </script>
    
        <script type="text/javascript">
            var applyFilter = function (field) {                
                var store = GridPanel1.getStore();
                store.suspendEvents();
                store.filterBy(getRecordFilter());                                
                store.resumeEvents();
                GridPanel1.getView().refresh(false);
            };
                 
            var clearFilter = function () {
                StringFilter.reset();
                BooleanFilter.reset();
                     
                GridPanel1.getStore().clearFilter();
            };
     
            var filterString = function (value, dataIndex, record) {
                var val = record.get(dataIndex);
                    
                if (typeof val !== "string") {
                    return value.length == 0;
                }
                    
                return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
            };
    
            var filterBoolean = function (value, dataIndex, record) {
                var val = record.get(dataIndex);
                val = val === 1 ? true : false;
                return value === val ;
            };
     
            var getRecordFilter = function () {
                var f = [];
     
                f.push({
                    filter: function (record) {                         
                        return filterString(StringFilter.getValue(), "test1", record);
                    }
                });
                     
                f.push({
                    filter: function (record) {                         
                        return filterBoolean(BooleanFilter.getValue(), "test2", record);
                    }
                });
     
                var len = f.length;
                     
                return function (record) {
                    for (var i = 0; i < len; i++) {
                        if (!f[i].filter(record)) {
                            return false;
                        }
                    }
                    return true;
                };
            };
        </script>
    
        <style type="text/css">
            .editor-checkbox .x-form-cb-label {
                margin-left: 0px;
                display: none;
            }
            
            .editor-checkbox .x-form-check-wrap {
                text-align: center;    
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true" Width="200">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column
                            DataIndex="test1"
                            Header="String" />
                        <ext:BooleanColumn
                            DataIndex="test2"
                            Header="Boolean"
                            FalseText="No"
                            TrueText="Yes"
                            Width="55" />
                        <ext:Column 
                            Width="28" 
                            DataIndex="test" 
                            Sortable="false" 
                            MenuDisabled="true"
                            Header="&nbsp;" 
                            Fixed="true">
                            <Renderer Handler="return '';" />
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:GridView runat="server">
                        <HeaderRows>
                            <ext:HeaderRow>
                                <Columns>
                                    <ext:HeaderColumn Cls="x-small-editor">
                                        <Component>
                                            <ext:TextField ID="StringFilter" runat="server" EnableKeyEvents="true">
                                                <Listeners>
                                                    <KeyUp Handler="applyFilter(this);" Buffer="250" />                                                
                                                </Listeners>
                                            </ext:TextField>
                                        </Component>
                                    </ext:HeaderColumn>
                                     
                                    <ext:HeaderColumn AutoWidthElement="false" Cls="x-small-editor editor-checkbox">
                                        <Component>
                                            <ext:Checkbox ID="BooleanFilter" runat="server">
                                                <Listeners>
                                                    <Check Handler="applyFilter(this);" />                                                
                                                </Listeners>
                                            </ext:Checkbox>
                                        </Component>
                                    </ext:HeaderColumn>
                                                                   
                                    <ext:HeaderColumn AutoWidthElement="false">
                                        <Component>
                                            <ext:Button runat="server" Icon="Cancel">
                                                <ToolTips>
                                                    <ext:ToolTip runat="server" Html="Clear filter" />
                                                </ToolTips>
                                                 
                                                <Listeners>
                                                    <Click Handler="clearFilter(null);" />
                                                </Listeners>                                            
                                            </ext:Button>
                                        </Component>
                                    </ext:HeaderColumn>
                                </Columns>
                            </ext:HeaderRow>
                        </HeaderRows>
                    </ext:GridView>
                </View>
            </ext:GridPanel>
            <ext:ToolTip
                runat="server"
                Target="={GridPanel1.getView().mainBody}"
                Delegate=".x-grid3-cell"
                TrackMouse="true">
                <Listeners>
                    <Show Fn="showTip" />
                </Listeners>
            </ext:ToolTip>    
        </form>
    </body>
    </html>

Tags for this Thread

Posting Permissions