What's New?

[CLOSED] Different options per record in a splitButton widget

  1. #1
    Mar 14, 2018, 1:21 PM

    [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 7:27 PM.
  2. #2
    Mar 14, 2018, 11:06 PM
    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
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Mar 15, 2018, 1:06 PM
    Thank you very much @fabricio.murta.

    I will try out the solution and come back here if there is anything left.
  4. #4
    Apr 13, 2018, 6:38 PM
    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
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  5. #5
    Apr 14, 2018, 7:21 PM
    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
    Apr 17, 2018, 7:27 PM
    Hello, Abouhagar!

    Thanks for the feedback, we really appreciate it, glad it helped!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. You have to set widget's ID to call its methods
    By glenh in forum 2.x Help
    Replies: 8
    Last Post: Feb 10, 2014, 10:59 AM
  2. [CLOSED] I want to play index like auto play ,Next record ,Previous Record ,First record ,Last Record in gridpanel
    By UT007 in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 29, 2013, 6:32 PM
  3. [8.1] Splitbutton in gridpanel
    By plykkegaard in forum 1.x Help
    Replies: 0
    Last Post: Oct 29, 2009, 6:13 PM
  4. [CLOSED] DateMenu in a SplitButton
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 15, 2008, 4:25 PM

Tags for this Thread

Posting Permissions