Access TabPanel's Tabs in Controller.

[sishco]

Hello.

I have a View with a TabPanel in a CSHTML file.

 
X.TabPanel()
      .ID("TabPanel1")
      .Region(Region.Center)
      .Plugins(X.TabScrollerMenu().PageSize(100))

I need to acces to the tabs to close someone or different operations when i click on a Button.

The Controller code is like:

        public ActionResult onClick(string tabName)
        {

            TabPanel tabPanel= this.GetCmp<TabPanel>("TabPanel1");
            foreach(AbstractComponent tab in tabPanel.Items)
            {

            }
            return this.Direct();
        }

But tabPanel.Ítems count is 0.

Why? I have 5 tabs opened.

If i write

tabPanel.CloseTab(0, CloseAction.Destroy);

i can close the first tab.
But why the count is 0 and i can't do the for?

Any Idea?

[geoffrey.mcgill]

The client-side State of your TabPanel is not persisted back to the server.

[sishco]

Ok.


Then, how i can send a list with the id's of the opened tabs from the view to the server (Controller)?

Or it is not posible.

somethink like? Really i don't know.

 
 X.Button()
 .Text("Update tabs")
 .DirectEvents(de => {
                     de.Click.Url = Url.Action("Button_Click");
                     de.Click.EventMask.ShowMask = true;
                     de.Click.ExtraParams.Add(TabPanel1.Items.Select(f=>f.text)));
                     }
 )

[fabricio.murta]

Hello @sishco!

That's exactly what you need to do. Pass the changes on client-side thru extra params. You might want to further review the answer I provided you here: http://forums.ext.net/showthread.php...548#post277548. It is really helpful to understand the concept of the ASPX page life cycle and how to effectively get the data you need when calling postback or ajax methods.

EDIT: you may want to pass a list of IDs, as long as that's all you need to know of the tabs. Remember you can't get the rest of the information of the tab in code behind just by having its ID, but you can always queue JavaScript commands to run once the direct method has finished (and those commands could then apply changes to the tabs added client-side. Code behind only knows the page the way it was when first created/loaded.

[sishco]

Ok.

I found an example with a "MultiSelect", who send to the controller the selected Ã*tems.

Multiselect code in CSHTML

X.MultiSelect()
.ID("MultiSelect3")
.CustomConfig(c => c.Add(new ConfigItem("submitText", "false", ParameterMode.Raw)))
.Items(
     X.ListItem().Text("Item 1").Value("1"),
     X.ListItem().Text("Item 2").Value("2"),
     X.ListItem().Text("Item 3").Value("3"),
     X.ListItem().Text("Item 4").Value("4"),
     X.ListItem().Text("Item 5").Value("5")
)
.SelectedItems(
      X.ListItem().Value("1"),
      X.ListItem().Value("3"),
      X.ListItem().Value("5")
)

The button code:

X.Button()
 .Text("Submit")
.DirectEvents(de => {
      de.Click.Action = "SubmitSelection1";
      de.Click.ExtraParams.Add(new Parameter("items", "App.MultiSelect3.getSubmitArray()", ParameterMode.Raw));
 })

and the action code in the controller:

List<ListItem> items = JSON.Deserialize<List<ListItem>>(Request.Params["items"]);

Multiselect class has a ¿metod? called getSubmitArray (where is the documentation of the available methods for each component?).
I am searching into http://docs-devel.sencha.com/extjs/6.0/ and i don't find this method, for example.

I need to know the possible methods who i can use for each component. And i need a method for the Tabpanel who give me a list of the opened tabs.

Any idea?

Tanks.

[fabricio.murta]

Hello @sishco!

Can you point the link to the exact example you found, or the location you seen the example? Probably this function was custom-made for this purpose.

If you look at this example: Submit MultiSelect Values.

You can see all it does is bind the full response array as the argument to be sent thru the direct method.

[sishco]

Finally, i used a script on the page:

X.Button()
.Text("Submit")
.DirectEvents(de => {
      de.Click.Action = "SubmitSelection1";
      de.Click.ExtraParams.Add(new Parameter("pestanasMarcadas", "getTabs", ParameterMode.Raw));

 })

and the script:

<script>
        var getTabs = function () {
            var output = App.TabPanel1;

            var userArray = new Array();

            for (i = 0; i < output.items.items.length; i++) {
                userArray[i] = { 'Id': output.items.items[i].id, 'position': i, 'text': output.items.items[i].title };
            }
            var serializedUsers = JSON.stringify(userArray);
            return serializedUsers;

        };
 </script>

On the controller:

         public class Pestana
        {
            public string Id;
            public string position;
            public string text;
        }

        public ActionResult onClick()
        {
            List<Pestana> pestanasMarcadas = JSON.Deserialize<List<Pestana>>(Request.Params["pestanasMarcadas"]);
            ......
         }

Thanks for all.