[CLOSED] Different options per record in a splitButton widget

  1. #1

    [CLOSED] Different options per record in a splitButton widget

    Hello, we have a grid to display various kinds of data (text, command columns, widgets).

    We want each row to have a widget "splitButton" so the user can choose one of many options.

    The catch is: each option in this splitButton might be different depending on the row.

    So we might have a record A with the options "1, 2, 3" and another record with the options "3, 4".

    The chosen option will have effects on other parts of the app (think of "display options").

    How would you implement such a thing ? Can the record also store a list of options for the splitButton widget ?

    Thank you for you help.
    Last edited by fabricio.murta; Apr 17, 2018 at 6:27 PM.
  2. #2
    Hello @Abouhagar! And welcome to Ext.NET forums!

    Yes, you can do that. There's not only one way to do so. You can use two concepts from Ext.NET:

    - data binding applied to grid panels (example)
    - custom binding function from the column component (example)

    The first approach is more useful if your data changes dynamically over time, the second is good to give you the most freedom to define it the way you want or need.

    From the second example pointed above, I've reworked it to match the scenario I understood you were describing, resulting in this code:

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.Data = new object[]
                {
                    new object[] { 0, "a b" },
                    new object[] { 1, "a b c" },
                    new object[] { 2, "b c d e" },
                    new object[] { 3, "a c" },
                    new object[] { 4, "b c d" }
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Different component settings - Ext.NET Examples</title>
        <script type="text/javascript">
            var setupButton = function (column, componentConfig) {
                var value = componentConfig.record.getData().Value,
                    btnMenuItems = componentConfig.config[0].menu.items;
    
                values = value.split(' ');
                for (var i = 0; i < values.length; i++) {
                    btnMenuItems.push({ text: values[i] });
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Different component settings</h1>
    
            <ext:GridPanel
                runat="server"
                Title="Multiple Editors"
                Width="400">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <Fields>
                                    <ext:ModelField Name="Index" Type="Int" />
                                    <ext:ModelField Name="Value" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <Reader>
                            <ext:ArrayReader />
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                         <ext:RowNumbererColumn runat="server" />
    
                         <ext:ComponentColumn runat="server" Flex="1" Editor="true" DataIndex="Value">
                            <Component>
                                <ext:SplitButton runat="server">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Default item" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:SplitButton>
                            </Component>
                            <Listeners>
                                <BeforeBind Fn="setupButton" />
                            </Listeners>
                            <Renderer Handler="metadata.style='color:gray;'; return '[none]';" />
                         </ext:ComponentColumn>
                    </Columns>
                </ColumnModel>
            </ext:GridPanel>
        </form>
    </body>
    </html>
    This is just modifying the second example in this post to, instead of different components, bind a same component with different contents depending on the contents of the record. I believe this would be all you need in order to have your scenario working.

    Notice menu entries are not fields, so they don't really store a value, you'll have to bind an action to the button if you want to (e.g.) update the record given the selection, etc.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you very much @fabricio.murta.

    I will try out the solution and come back here if there is anything left.
  4. #4
    Hello @Abouhagar!

    Been a while since you replied here and you still didn't post a follow-up about the success of the suggestions we provided you with. Did they help at all? Do you still need help with what you want to attain?

    We may mark the thread as closed if you do not post a follow-up in 7+ days from now, but we won't lock up the thread, so you'll still be able to post afterwards.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello @fabricio.murta

    yes i forgot to reply.

    Everything is fine, your example was exactly what we needed. Thanks for the help :-)

    Abouhagar
  6. #6
    Hello, Abouhagar!

    Thanks for the feedback, we really appreciate it, glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 8
    Last Post: Feb 10, 2014, 9:59 AM
  2. Replies: 11
    Last Post: Oct 29, 2013, 5:32 PM
  3. [8.1] Splitbutton in gridpanel
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Oct 29, 2009, 5:13 PM
  4. [CLOSED] DateMenu in a SplitButton
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 15, 2008, 3:25 PM

Tags for this Thread

Posting Permissions