Field Converter to button

[otouri]

Based on the example provided here https://examples2.ext.net/#/GridPane...eld_Converter/

I need to use the same idea but convert all fields except the FundName to buttons with action on server side button click. data will be coming from a store with flags of true or false instead of "y" or "no"

<ext:GridPanel ID="GridPanel1" runat="server"  Width="600" Height="350">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" IDProperty="company">
                                            <Fields>
                                                <ext:ModelField Name="FundName" />
                                                <ext:ModelField Name="CreateLetter" Type="string" />
                                                <ext:ModelField Name="Approved" Type="string" />
                                                <ext:ModelField Name="SendNow" Type="string" />
                                                <ext:ModelField Name="Override" Type="string">
                                                    <Convert Handler="return value === 1;" />
                                                </ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Fund Name" Width="160" DataIndex="FundName"
                                        Flex="1" />
                                    <ext:Column ID="Column2" runat="server" Text="Create Letter" Width="75" DataIndex="CreateLetter" />
                                    <ext:Column ID="Column3" runat="server" Text="Approved" Width="75" DataIndex="Approved" />
                                    <ext:Column ID="Column4" runat="server" Text="Sendnow" Width="75" DataIndex="pctChange" />
                                    <ext:CheckColumn ID="CheckColumn1" runat="server" Text="Override" Width="50" Sortable="true" DataIndex="Override" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>

  protected void Page_Load(object sender, EventArgs e)
        {

            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }


        }

        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            this.BindData();
        }
        private void BindData()
        {
            var store = this.GridPanel1.GetStore();

            store.DataSource = this.Data;
            store.DataBind();
        }

        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;

                return new object[]
                {
           
                    
                    new object[] { "3m Co", 1, 1, 1, 1 },
                    new object[] { "Alcoa Inc", 1, 0, 0, 1 },
                    new object[] { "Altria Group Inc", 0, 1, 1.1, 0 },
                    new object[] { "Wal-Mart Stores, Inc.", 0, 0, 1, 0 }


                    
                };
            }

Please help!!!

[jwf]

I don't think Convert works the way you think it does. From the example, let's look at the model:

<Model>    
    <ext:Model ID="Model1" runat="server" IDProperty="company">
        <Fields>
            <ext:ModelField Name="company" />
            <ext:ModelField Name="price" Type="Float" />
            <ext:ModelField Name="change" Type="Float" />
            <ext:ModelField Name="pctChange" Type="Float" />
            <ext:ModelField Name="active" Type="Boolean">
                <Convert Handler="return value === 'Y';" />
            </ext:ModelField>
        </Fields>
    </ext:Model>
</Model>

The last field tells Ext that the model expects the record to contain a property named "active" which has a boolean value. However, Ext expects boolean values to be formatted in a certain way - that is, 'true' or 'false'.

Now let's look at the data used by the model:

this.Store1.DataSource = new object[]
{
    new object[] { "3m Co", 71.72, 0.02, 0.03, "Y" },
    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "Y" },
    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "N" },
    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "N" }
};

Here we can see that the data passed to the store does not present the correct value format - instead of using 'true' or 'false', the data presents 'Y' or 'N'. So now we can see what the converter actually does - it converts the data from the source format into a format the framework can understand.

<ext:ModelField Name="active" Type="Boolean">    
    <Convert Handler="return value === 'Y';" />
</ext:ModelField>

When any part of the framework requests the value of the "active" property of a record in the store, the converter returns a boolean value based on the handler. If record['active'] equals 'Y', the handler returns true. If not, it returns false. In this way, the source data value is converted into a value that the framework understands.

If you need buttons in your columns, you probably need a CommandColumn. See this example for more information:

https://examples2.ext.net/#/GridPane...s/Row_Command/

[otouri]

Thank you for the prompt response.

Your solution partially worked. it am able to display button instead of check box but the button is being displayed no matter what is the value of the boolean "Y" or "N"

Here is the updated code:

<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" IDProperty="company">
                                            <Fields>
                                                <ext:ModelField Name="FundName" />
                                                <ext:ModelField Name="CreateLetter" Type="string" />
                                                <ext:ModelField Name="Approved" Type="string" />
                                                <ext:ModelField Name="Sendnow" Type="string" />
                                                <ext:ModelField Name="Override" Type="Boolean">
                                                    <Convert Handler="return value === 'Y';" />
                                                </ext:ModelField>
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Fund Name" Width="160" DataIndex="FundName"
                                        Flex="1" />
                                    <ext:Column ID="Column2" runat="server" Text="Create Letter" Width="75" DataIndex="CreateLetter" />
                                    <ext:Column ID="Column3" runat="server" Text="Approved" Width="75" DataIndex="Approved" />
                                    <ext:Column ID="Column4" runat="server" Text="Sendnow" Width="75" DataIndex="Sendnow" />
                                    <ext:CommandColumn ID="CommandColumn1"  runat="server" Width="100" Text="Override" Sortable="true"
                                        DataIndex="Override">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Override" Text="Override" />
                                        </Commands>
                                        <Listeners>
                                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                                        </Listeners>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>

 new object[] { "3m Co", 71.72, 0.02, 0.03, "Y" },    
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "Y" },    
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "N" },    
new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "N" }

The button Override is visible for all the 4 record of the gridpanel. it should be visible only to the first 2 record based on my understanding.

Please help.

Thank you

[jwf]

Hi Outori,

I think I understand better what you need. Does this help? https://examples2.ext.net/#/GridPane...pare_Commands/

In this example, many buttons are rendered for each row, and then a custom javascript is used to hide individual buttons per row based on data in the record for that row. With this pattern you may be able to resolve your dilemma.

[otouri]

You are on the right path but what i am looking to do is to convert this traditional grid view (see screenshot) to your Grid Panel control. Your example adds new colums and edit/delete button are for all item in the row. my business logic does not work this way. it work like the sample I attached: Button are displayed in the grid view based on the flag being true or false.

I have tried you example and with some modification see below. it still didn;t work for me. and in order to remove the extra columns Image CMDS and Toolbar cmds I removed the data columns but that didn't help. it gave me a wierd looking grid.

<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
                            <Store>
                                <ext:Store ID="Store2" runat="server">
                                    <Model>
                                        <ext:Model ID="Model2" runat="server" IDProperty="company">
                                            <Fields>
                                                <ext:ModelField Name="company" />
                                                <ext:ModelField Name="price" Type="Float" />
                                                <ext:ModelField Name="change" Type="Float" />
                                                <ext:ModelField Name="pctChange" Type="Float" />
                                                <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                </ext:Store>
                            </Store>
                            <ColumnModel ID="ColumnModel1" runat="server">
                                <Columns>
                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200"/>
                                    <ext:CommandColumn ID="CommandColumn1" runat="server" Width="100" Text="Create Letter">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Delete" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Edit" />
                                            </ext:GridCommand>
                                        </Commands>
                                        <PrepareToolbar Fn="prepareToolbar" />
                                        <Listeners>
                                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                                        </Listeners>
                                    </ext:CommandColumn>
                                    <ext:CommandColumn ID="CommandColumn2" runat="server" Width="100" Text="Approved">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Delete" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Edit" />
                                            </ext:GridCommand>
                                        </Commands>
                                        <PrepareToolbar Fn="prepareToolbar" />
                                        <Listeners>
                                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                                        </Listeners>
                                    </ext:CommandColumn>
                                    <ext:CommandColumn ID="CommandColumn3" runat="server" Width="100" Text="Send Now">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Delete" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Edit" />
                                            </ext:GridCommand>
                                        </Commands>
                                        <PrepareToolbar Fn="prepareToolbar" />
                                        <Listeners>
                                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                                        </Listeners>
                                    </ext:CommandColumn>
                                    <ext:CommandColumn ID="CommandColumn4" runat="server" Width="100" Text="Override">
                                        <Commands>
                                            <ext:GridCommand Icon="Delete" CommandName="Delete">
                                                <ToolTip Text="Delete" />
                                            </ext:GridCommand>
                                            <ext:CommandSeparator />
                                            <ext:GridCommand Icon="NoteEdit" CommandName="Edit">
                                                <ToolTip Text="Edit" />
                                            </ext:GridCommand>
                                        </Commands>
                                        <PrepareToolbar Fn="prepareToolbar" />
                                        <Listeners>
                                            <Command Handler="Ext.Msg.alert(command, record.data.company);" />
                                        </Listeners>
                                    </ext:CommandColumn>
                                </Columns>
                            </ColumnModel>
                            <SelectionModel>
                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                            </SelectionModel>
                        </ext:GridPanel>

Thank you,

[jwf]

Hi, I am going to take a look at this, but I want to point out - I am not a member of ext.net team - I am a paying customer like you. Sometimes I browse the community forums and try to help folks, in order to increase my own knowledge. But it's not my product :)

If you wish support from ext.net team members, you should post in premium support forums. I see you have a premium subscription, so this should be possible for you.