[CLOSED] GridCommand with DataIndex

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridCommand with DataIndex

    Hi,
    I have a dynamic grid, I need to have a column that is link with a dataIndex and when I click on it I can change the background cell color.
    I don't succeed in finding the way to be able to do it.
    Please help me.

    Thank you.

    Jimmy
    Last edited by Daniil; Mar 18, 2011 at 2:21 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please look at the example.
    http://forums.ext.net/showthread.php?11398

    There is no exactly thing that you need but the idea is:
    1. Use a respective Renderer to apply css rules on some condition
    2. Call .refreshRow() to force row update
  3. #3
    Hi Danil,
    Your example works fine, thank you.
    How to disable the grey when I select the cell? Because I change the color but I see it only when I lose the cell.

    Thank you

    Jimmy
  4. #4
    Please provide a sample how you are trying.
  5. #5
    Hi Danil,
    in your example Cell Selection when you select a cell the color change in blue, I don't want this, because I change the background color.

    Thank you Jimmy
  6. #6
    Please look at 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[] {"test11", "test12", "test13"},
                    new object[] {"test12", "test22", "test23"},
                    new object[] {"test13", "test32", "test33"}
                };
                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>
     
        <style type="text/css">
            .column-0 {
                background-color: red;
            }
            .column-1 {
                background-color: green;
            }
            .column-2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            AutoHeight="true" 
            DisableSelection="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
            <Listeners>
                <CellClick Handler="Ext.fly(this.view.getCell(rowIndex, columnIndex)).toggleClass('column-' + columnIndex);" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  7. #7
    Hi Danil,
    your example works fine, but there is a problem, when I clik on header to order a colum I lose all background color.

    Thank you

    Jimmy
  8. #8
    Please look at 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[] {"test11", "test12", "test13"},
                    new object[] {"test12", "test22", "test23"},
                    new object[] {"test13", "test32", "test33"}
                };
                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 myRenderer = function (value, metadata, record, rowIndex, columnIndex) {
                var color = record.data.colors[columnIndex],
                    colorCls = color && color.rowIndex == rowIndex ? color.colorCls : "";
                metadata.css = colorCls;
                return value;
            }
            
            var onCellClick = function (grid, rowIndex, columnIndex) {
                var record = grid.store.getAt(rowIndex);
                
                record.data.colors = record.data.colors || [];
                
                var color = record.data.colors[columnIndex];
                    colorCls = color && color.colorCls ? "" : "column-" + columnIndex;
                record.data.colors[columnIndex] = { 
                    colorCls : colorCls,
                    rowIndex : rowIndex
                };
                grid.view.refreshRow(record);
            }
        </script>
      
        <style type="text/css">
            .column-0 {
                background-color: red;
            }
            .column-1 {
                background-color: green;
            }
            .column-2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            AutoHeight="true"
            DisableSelection="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                                <ext:RecordField Name="colors" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                    <ext:Column Header="Test3" DataIndex="test3">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <CellClick Fn="onCellClick" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
  9. #9
    Hi Daniil,
    sorry, but your last example doesn't work.
    When I order I lose the color of first and last row.

    Jimmy
  10. #10
    Yes, I had to check sorting. It doesn't work.

    Well, more complex solution is required there. You could apply the respective change to data.colors for each record after sorting.

    But I would suggest you to store a color for each cell.

    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[] {
                        new {
                           value = "test1"
                        },
                        new {
                           value = 1
                        },
                        new {
                           value = 1.0
                        }
                        
                    },
                    new object[] {
                        new {
                           value = "test2"
                        },
                        new {
                           value = 2
                        },
                        new {
                           value = 2.0
                        }
                        
                    },
                    new object[] {
                        new {
                           value = "test3"
                        },
                        new {
                           value = 3
                        },
                        new {
                           value = 3.0
                        }
                        
                    }
                };
                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 myRenderer = function (v, metadata, record, rowIndex, columnIndex) {
                metadata.css = v.color;
                return v.value;
            }
             
            var onCellClick = function (grid, rowIndex, columnIndex) {
                var record = grid.store.getAt(rowIndex),
                    dataIndex = grid.colModel.getDataIndex(columnIndex),
                    v = record.get(dataIndex);
                 
                v.color = v.color ? "" : "column-" + columnIndex;
                grid.view.refreshRow(record);
            }
            
            var asText = function (s) {
                return Ext.data.SortTypes.asText(s.value);
            }
            
            var asInt = function (s) {
                return Ext.data.SortTypes.asInt(s.value);
            }
            
            var asFloat = function (s) {
                return Ext.data.SortTypes.asFloat(s.value);
            }
        </script>
       
        <style type="text/css">
            .column-0 {
                background-color: red;
            }
            .column-1 {
                background-color: green;
            }
            .column-2 {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel
            ID="GridPanel1"
            runat="server"
            AutoHeight="true"
            DisableSelection="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" IsComplex="true">
                                    <CustomSortType Fn="asText" />
                                </ext:RecordField>
                                <ext:RecordField Name="test2" IsComplex="true">
                                    <CustomSortType Fn="asInt" />
                                </ext:RecordField>
                                <ext:RecordField Name="test3" IsComplex="true">
                                    <CustomSortType Fn="asFloat" />    
                                </ext:RecordField>
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                    <ext:Column Header="Test2" DataIndex="test2">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                    <ext:Column Header="Test3" DataIndex="test3">
                        <Renderer Fn="myRenderer" />
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Listeners>
                <CellClick Fn="onCellClick" />
            </Listeners>
        </ext:GridPanel>
        </form>
    </body>
    </html>
Page 1 of 2 12 LastLast

Similar Threads

  1. Checkboxgroup DataIndex
    By osef in forum 1.x Help
    Replies: 1
    Last Post: Apr 11, 2012, 12:28 PM
  2. DataIndex from more record
    By bolzi89 in forum 1.x Help
    Replies: 0
    Last Post: Jan 11, 2012, 1:36 AM
  3. [CLOSED] DataIndex on DropDownField with a TreePanel
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 18, 2011, 8:42 AM
  4. [CLOSED] Problem with combobox and dataindex
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 02, 2010, 3:22 PM
  5. [CLOSED] [1.0] Slider DataIndex
    By danielg in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Nov 23, 2009, 5:00 AM

Tags for this Thread

Posting Permissions