How to introduce custom buttons in UI toolbar?

[bobsov]

I would like to introduce couple of buttons to UI toolbar. is it easy to extend?

If not, I would like to simply fire a javascript function when user clicks on "Design" button. What is simplest of doing this without modifying source code?

Please Note - I am using mobile version (html5 designer).


Also is there a roadmap somewhere as what we can expect in upcoming .2 release?

Thanks,
-bobsov

[Alex K.]

Hello,

Please see the sampe code following:

Code: Select all

    <div>      
        <cc2:StiMobileViewer ID="StiMobileViewer1" ShowDesignButton="true" runat="server"  /> 
    </div>

    <script type="text/javascript">
        jsStiMobileViewer1.options.buttons.Design.action = function () { alert("Design button pressed!"); }
        //where 'StiMobileViewer1' - mobile viewer Id;
                
        //Example insert user button
        var userButton = jsStiMobileViewer1.StandartSmallButton("userButton", null, "My Button", "emptyImage"); //(name, groupName, caption, imageName, toolTip, arrow);
        userButton.image.src = "http://www.stimulsoft.com/media/mod_falang/images/usa.gif";
        userButton.action = function () { alert("User button pressed!"); }
                
        var toolbarTable = jsStiMobileViewer1.options.toolbar.innerContent.firstChild;
        toolbarTable.addCell(userButton);
    </script>

Thank you.

[bobsov]

You are awesome Aleksey.

Thank you very much.

[bobsov]

Hello Aleskey:

Can you also show how to add menu options in that user button?

Thank you for all your help in this.

[Alex K.]

Hello,

Please check the following code:

Code: Select all

<div>      
        <cc2:StiMobileViewer ID="StiMobileViewer1" ShowDesignButton="true" runat="server"  /> 
    </div>

    <script type="text/javascript">
        //Example insert user button
        var userButton = jsStiMobileViewer1.StandartSmallButton("userButton", null, "My Button", "emptyImage"); //(name, groupName, caption, imageName, toolTip, arrow);
        userButton.image.src = "http://www.stimulsoft.com/media/mod_falang/images/usa.gif";

        //where 'StiMobileViewer1' - mobile viewer Id;      
                        
        var toolbarTable = jsStiMobileViewer1.options.toolbar.innerContent.firstChild;
        toolbarTable.addCell(userButton);

        //create menu items
        var items = [];
        items.push(jsStiMobileViewer1.Item("menuItem1", "Menu Item 1", null, "MenuItemKey1")); // (name, caption, imageName, key)
        items.push(jsStiMobileViewer1.Item("menuItem2", "Menu Item 2", null, "MenuItemKey2"));

        //create menu
        var userMenu = jsStiMobileViewer1.VerticalMenu("userMenu", userButton, "Down", items, jsStiMobileViewer1.GetStyles("MenuStandartItem")); //(name, parentButton, animDirection, items, itemsStyles)

        //show menu action
        userButton.action = function () { userMenu.changeVisibleState(!userMenu.visible); }

        //menu action
        userMenu.action = function (menuItem) {
            userMenu.changeVisibleState(false);
            alert(menuItem.key);
        }
    </script>

Thank you.

[bobsov]

Aleskey: You are awesome.

[Alex K.]

Hello,

We are always glad to help you!
Let us know if you need any additional help.

Thank you.

[bobsov]

Got one last question in this topic.

It allows you to define image name but where do you store it so that stimulsoft can render it properly?


Thank you for all your help.

[Alex K.]

Hello,

Our images stored as internal resources. You can use the following code for redefine:

//create menu items
var items = [];
items.push(jsStiMobileViewer1.Item("menuItem1", "Menu Item 1", "emptyImage", "MenuItemKey1")); // (name, caption, imageName, key)
items.push(jsStiMobileViewer1.Item("menuItem2", "Menu Item 2", "emptyImage", "MenuItemKey2"));

//create menu
var userMenu = jsStiMobileViewer1.VerticalMenu("userMenu", userButton, "Down", items, jsStiMobileViewer1.GetStyles("MenuStandartItem")); //(name, parentButton, animDirection, items, itemsStyles)

userMenu.items["menuItem1"].image.src = "http://www.stimulsoft.com/media/mod_fal ... ges/fr.gif";
userMenu.items["menuItem2"].image.src = "http://www.stimulsoft.com/media/mod_fal ... ges/de.gif";

Thank you.

[bobsov]

Thank you very much for quick answer.