PDA

View Full Version : [CLOSED] CardLayout : Call Direct action after click



matrixwebtech
May 15, 2015, 9:28 AM
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)
{
}

Daniil
May 16, 2015, 7:32 AM
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?

matrixwebtech
May 16, 2015, 7:46 AM
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?

Daniil
May 19, 2015, 9:18 PM
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.

matrixwebtech
May 20, 2015, 3:02 AM
Thanks ,please close this.