[CLOSED] CardLayout : Call Direct action after click

  1. #1

    [CLOSED] CardLayout : Call Direct action after click

    Hi
    i design a CardLayout as per my need.and now I want to call an Action method on last tab of the LayOut .but the method call when its transferring from 2nd tab to 3rd tab .

    If you run the sample code ,you can see .
    Steps
    1. On Tab 2 press next Button text become Save (But as well as the Action method will called ) and If click on save then only Action method will be call.

    can you please suggest me how do the validation logic where If click on Save then only Action method will call.

    @{
        Layout = null;
        var X = Html.X();
    }
    <script>
        var Prev_Click = function (index) {
            if ((index - 1) >= 0) {
                if (App.WizardPanel.getLayout().setActiveItem) {
                    App.WizardPanel.getLayout().setActiveItem(index - 1);
                    CheckButtons(index - 1);
                }
            }
            ChangeButtontext(index, 'prev')
    
        }
        var Next_Click = function (index) {
            if ((index + 1) < 3) {
           
                if (App.WizardPanel.getLayout().setActiveItem) {
                    App.WizardPanel.getLayout().setActiveItem(index + 1);
                    CheckButtons(index + 1);
                }
            }
            ChangeButtontext(index,'nxt')
        }
        var CheckButtons = function (index) {
            Ext.getCmp("btnNext").setDisabled(index == 2);
            Ext.getCmp("btnPrev").setDisabled(index == 0);
        }
        var ChangeButtontext = function (index, dir) {
            console.log(index)
            if (index == 1 && dir=='nxt') {
                Ext.getCmp("btnNext").setText("Save");
            }
            else {
                Ext.getCmp("btnNext").setText("Next");
            }
        }
        
    </script>
    @X.ResourceManager()
    @(X.TabPanel()
            .ID("WizardPanel")
            .Title("Example Wizard")
            .BodyPadding(15)
            .Height(300)
            .Layout(LayoutType.Card)
            .ActiveIndex(0)
            .Items(
                X.Panel()
                    .ID("Panel1")
                    .Title("Tab 1")
                    
                    .Border(false)
                    .Header(false)
                    //.ItemsFromPage(this,"Partial1.cshtml")
                    ,
    
                X.Panel()
                    .ID("Panel2")
                    .Title("Tab 2")
                    .Html("<h1>Card 2</h1><p>Step 2 of 3</p>")
                    .Border(false)
                    .Header(false),
    
                X.Panel()
                    .ID("Panel3")
                    .Title("Tab 3")
                    .Html("<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>")
                    .Border(false)
                    .Header(false)
            )
            .Buttons(
                X.Button()
                    .ID("btnPrev")
                    .Text("Prev")
                    .Disabled(true)
                    .Icon(Icon.PreviousGreen)
                    .Listeners(l => {
                        l.Click.Handler = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
                                            
                                            Prev_Click(index)                
                                        ";
                    })
           
                    ,
    
                X.Button()
                    .ID("btnNext")
                    .Text("Next")
                    .Icon(Icon.NextGreen)
                    .Listeners(l => {
                        l.Click.Handler = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
                                            
                                            Next_Click(index)                
                                        ";
                        
                      
                    })
            .DirectEvents(de =>
             {
                
                 de.Click.Before = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
                                    if((index)<2)
                                     {
                                         return false;
                                     }
                                     else
                                     {
                                     return true;
                                     }
                                 
                                     ";
                 de.Click.EventMask.ShowMask = true;
                 de.Click.Url = Url.Action("Next_Click");
                 de.Click.ExtraParams.Add(new Parameter("index", "#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)", ParameterMode.Raw));
             })
            )
        )
    public void Next_Click(int index)
            {
            }
    Last edited by Daniil; May 20, 2015 at 6:39 AM. Reason: [CLOSED]
  2. #2
    Hi @matrixwebtech,

    can you please suggest me how do the validation logic where If click on Save then only Action method will call.
    Do you mean that when you click the Save button, you don't need the Click listener to be called?
  3. #3
    Suppose you are at Tab 2 and click next then the direct event associated with the button that also fired ,which I don't want.I need after click on next from Tab 2 its take to Tab 3 and you can see the I set next button text as Save ,after perform some task on Tab 3 I press save button I want then only
    the direct event to be called.

    I try with

    take another button for save as hidden and when come to tab 3 I hide next button and show save button which is works fine.I need to know is there any good approach then this?
    Last edited by matrixwebtech; May 16, 2015 at 7:49 AM.
  4. #4
    Well, in my best understanding you don't need to run this
    Next_Click(index)
    when you are on the third card.

    You could examine the index like that:
    if (index !== 2) {
        Next_Click(index);
    }
    take another button for save as hidden and when come to tab 3 I hide next button and show save button which is works fine.I need to know is there any good approach then this?
    Yeah, I was about to suggest this approach. It is probably what I would do.
  5. #5
    Thanks ,please close this.

Similar Threads

  1. Replies: 3
    Last Post: Apr 24, 2015, 11:20 AM
  2. Session timeout and direct action
    By Zdenek in forum 2.x Legacy Premium Help
    Replies: 0
    Last Post: Nov 10, 2014, 10:12 PM
  3. Session timeout and direct action
    By Zdenek in forum 2.x Help
    Replies: 0
    Last Post: Nov 10, 2014, 10:12 PM
  4. Replies: 6
    Last Post: Dec 14, 2011, 5:24 AM
  5. [CLOSED] How to call more than one action with a listener?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 13, 2010, 6:52 PM

Posting Permissions