Field Converter to button

Page 1 of 2 12 LastLast
  1. #1

    Field Converter to button

    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!!!
  2. #2
    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/
  3. #3

    partially working

    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
  4. #4
    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.
  5. #5

    Not really

    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,
    Attached Thumbnails Click image for larger version. 

Name:	Commad on demand.jpg 
Views:	88 
Size:	62.9 KB 
ID:	5093  
  6. #6
    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.
  7. #7

    My bad

    I thought i did. thank you for letting me know
  8. #8
    Hi Otouri,

    For each command column, you need a separate javascript prepare method. Each script also needs to "know about" the shape and contents of the toolbar. Please review this example:

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title></title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                var data = new[] {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "Y", "N" },    
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "Y", "Y" },    
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "N", "Y" },    
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "N", "N" }
                };
    
    
                Store1.DataSource = data;
                Store1.DataBind();
            }
        </script>
        <script type="text/javascript">
            function prepareToolbar1(grid, toolbar, rowIndex, record) {
                if (record.get("Override") != true) {
                    toolbar.items.getAt(0).hide(); // item 0 is the delete button
                }
            }
    
    
            function prepareToolbar2(grid, toolbar, rowIndex, record) {
                if (record.get("Override2") != true) {
                    toolbar.items.getAt(1).hide(); // item 1 is the separator between Edit and Add buttons
                    toolbar.items.getAt(2).hide(); // item 2 is the Add button
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager ID="ResourceManager1" runat="server" />
                <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="350">
                    <Store>
                        <ext:Store ID="Store1" 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>
                                        <ext:ModelField Name="Override2" 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="140" Text="Override" Sortable="true" DataIndex="Override">
                                <Commands>
                                    <ext:GridCommand Icon="Delete" CommandName="Override" Text="Override" />
                                </Commands>
                                <PrepareToolbar Fn="prepareToolbar1" />
                                <Listeners>
                                    <Command Handler="Ext.Msg.alert(command, record.data.FundName);" />
                                </Listeners>
                            </ext:CommandColumn>
                            <ext:CommandColumn ID="CommandColumn2" runat="server" Width="140" Text="Override2" Sortable="true" DataIndex="Override2">
                                <Commands>
                                    <ext:GridCommand Icon="NoteEdit" CommandName="NoteEdit" Text="Edit" />
                                    <ext:CommandSeparator />
                                    <ext:GridCommand Icon="Add" CommandName="Add" Text="Add" />
                                </Commands>
                                <PrepareToolbar Fn="prepareToolbar2" />
                                <Listeners>
                                    <Command Handler="Ext.Msg.alert(command, record.data.FundName);" />
                                </Listeners>
                            </ext:CommandColumn>
                        </Columns>
                    </ColumnModel>
                </ext:GridPanel>
            </div>
        </form>
    </body>
    </html>
    In particular, please consider CommandColumn2. This column defines two commands - Edit & Add - and defines a separator between them. The framework takes this information and uses it to construct a toolbar in the grid cell. By default, each toolbar would contain 3 items - the Edit button, the separator, and the Add button.

    However, once this command toolbar has been constructed, we can step in to "Prepare" it with our PrepareToolbar control / method.

    In the javascript method prepareToolbar2, we need to reference the elements of the toolbar by index in order to show or hide them:

    toolbar.items.getAt(1).hide(); // item 1 is the separator between Edit and Add buttons
    toolbar.items.getAt(2).hide(); // item 2 is the Add button
    Edit: if you still have trouble, could you please provide real data, or at least data structured the same as your real data. I somehow think the sample data you are using may be confusing the issue - as in, maybe you don't fully understand how data is mapped to model in store? It's clear that the data you are using doesn't match the model except by accident or same number of fields.
    Last edited by jwf; Nov 15, 2012 at 7:09 PM.
  9. #9

    You rock

    Thank you so much, that is exactly what i need. I will implement the remaining fields now. Good work.

    As you can tell I am a new customer and I was wondering how did you undrstood the functionnality of the converter as well as the preparetoolbar, did you grab it from their website (can i have the link) or just from experience.

    My point is I wish I had a help (F1) or an MSDN type site that explains the methods the attributes, events... for each EXT control.
  10. #10
    Quote Originally Posted by otouri View Post
    Thank you so much, that is exactly what i need. I will implement the remaining fields now. Good work.
    Glad I could help!

    As you can tell I am a new customer and I was wondering how did you undrstood the functionnality of the converter as well as the preparetoolbar, did you grab it from their website (can i have the link) or just from experience.
    Well, first I have two years experience working with ext.net, and ten years as a professional web developer, which helps to some extent, as I have developed a "feel" for how they organize classes etc.

    Second, you have to use every resource available. There are a lot of examples, you have to find one that is useful and then study it closely. Just glossing over bits of code is not helpful enough for me, I need to grok the whole example. This can aid in learning the framework's style of operation, since doing it this way will teach you about other bits and pieces you might not necessarily need immediately.

    Third, they are working on improving their documentation, but it's tough, so far all we have is generated class docs. They tend to prioritize adding new code, features, and upgrades rather than work on documentation, but the forum support is strong if you craft a strong, clear post and limit your scope - ie remove all code and markup not needed to illustrate the issue. They usually respond within 4-8 hours. So, my advice is do not hope for good docs, instead accept that you must use the forum and use it as smartly as possible.

    The client side documentation from sencha is much better, although it's not a 100% map to ext.net client. Still, it's good to check here. Similarly google search for well defined problem terms can turn up stackoverflow or similar results that may help you close in on your issue or figure out a different search or example to look at.

    As for understanding the converter, I had never used it before but I read the code closely until I was able to understand exactly what it was doing. It also helped that I already understood store/model concepts, as it was clear that the converter belonged to the model field, so it had to be doing something with the field data. I also guessed from your post that you thought the converter was "converting" a data column into a checkbox column, but I could see that the checkbox came from the column type and not the converter, so right off the bat I knew what it wasn't doing.

    Same with prepareCommand, I was google searching for something related to your problem and stumbled across a forum post which explained how to use it. Then I went and studied the example until I understood it.

    I hope this long rant has helped you in some way, good luck with ext.net!

    Edit: cross link to premium thread: http://forums.ext.net/showthread.php...rter-to-button
    Last edited by jwf; Nov 15, 2012 at 10:40 PM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Problem with Converter on Date RecordField
    By GLD in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 31, 2012, 1:44 PM
  2. Replies: 2
    Last Post: Nov 26, 2010, 6:30 PM
  3. [CLOSED] [1.0] Field with Label margin-button
    By kemalyigit in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 11, 2010, 3:18 AM
  4. [CLOSED] Disable browse button of fileupload field
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 26, 2009, 10:44 AM
  5. Replies: 1
    Last Post: Jul 20, 2009, 6:44 AM

Posting Permissions