[CLOSED] TagField : CallOuts

[matrixwebtech]

Hi I set a Callouts for TagField like bellow but not showing.can you please investigate.

@(X.TagField()
        .ID("tag")
        .HideSelected(true)
        .Width(375)

        .HideTrigger(true)
        .Editable(true)
        
        .Callouts(cos =>
        {
        cos.Add(
        Html.X().Callout()
        .Trigger(CalloutTrigger.Click)
        .Alignment(AnchorPoint.Left)
        
        .Title("Test")
        );
        })
        )

[Daniil]

Hi @matrixwebtech,

Yes, TagField is quite a specific component. To solve the problem, I can suggest this AfterRender listener for the TagField.

this.callouts[0].setTarget(this, this.inputCell);

[matrixwebtech]

Thanks for help ,Can you please tell me how I show callouts with java script ,my scenario like bellow

 
 var showCallouts = function (b) {
            if (b == true) {
                App.tag1.callout = Ext.Msg.callout(App.tag1,
                                { alignment: 'lefttop', html: 'LeftTop callout', height: 100, width: 100,title: 'test' });
            }

        }

@(X.TagField()
        .ID("tag1")
        .HideSelected(true)
        .Width(375)

        .HideTrigger(true)
        .Editable(true)
        
        )
      
          @(X.Button()
        .Text("validate Tag Field")
        .Listeners(l=>{
            l.Click.Handler = "showCallouts(true)";
        })
        )

can you please help me how I add a close button to Callouts?

[Daniil]

Can you please tell me how I show callouts with java script

Your code appears to be working for me.

can you please help me how I add a close button to Callouts?

Please search for "HeaderToolbar" in this example:
https://examples2.ext.net/#/MessageBox/Callout/Overview

[matrixwebtech]

Hi daniil thanks for reply
I see the example before but not figure out how I add a HeaderToolbar with my JavaScript

   var showCallouts = function (b) {
            if (b == true) {
                App.tag1.callout = Ext.Msg.callout(App.tag1,
                                {
                                    alignment: 'lefttop',
                                    html: 'LeftTop callout',
                                    height: 100,
                                    width: 100,
                                    title: 'test'
                                });
               // App.tag1.callout.createHeaderToolbar();
            }
     }

I try with

 App.tag1.callout.createHeaderToolbar();

but not working.can you please help me with some java script code?

[Daniil]

Please follow this instruction.
http://forums.ext.net/showthread.php...ll=1#post89172

[matrixwebtech]

Hi Daniil
My question ,Is the bellow create HeaderToolbar with a close button from java script? I get this method when I do

console.log(App.tag1.callout)

App.tag1.callout.createHeaderToolbar();

<HeaderToolbar>
                    <ext:Toolbar runat="server" Flat="true">
                        <Items>
                            <ext:Button 
                                runat="server" 
                                Icon="Decline" 
                                ToolTip="Close" 
                                Handler="this.up('toolbar').callout.hide();" 
                                />
                        </Items>
                    </ext:Toolbar>                    
                </HeaderToolbar>

How I create HeaderToolbar like above code with javascript

also I not found any documentation about Ext.Msg.callout at http://docs.sencha.com/extjs/4.2.1
If I am not correct please correct me .

[Daniil]

Yes, I got it and my suggestion is to create a static Callout with a HeaderToolbar in Razor and see how it is rendered to JavaScript and grab it.

Unfortunately, there is no docs on Ext.Msg.Callout in the ExtJS docs. This functionality has appeared in Ext.NET.

[matrixwebtech]

Hi danill,
I am not quite understand

see how it is rendered to JavaScript and grab it.

, but I try something please see

var showCallouts = function (b) {
            if (b == true) {
                App.co.show()
                App.tag1.callout = App.co;
                    //Ext.Msg.callout(App.tag1,
                    //            {
                    //                alignment: 'lefttop',
                    //                html: 'LeftTop callout',
                    //                height: 100,
                    //                width: 100,
                    //                title: 'test',
                    //               closable:'true'
                    //            });
               // App.tag1.callout.createHeaderToolbar();
            }

            console.log(App.tag1.callout)

        }

@X.ResourceManager()
  @(X.Callout()
        .Hidden(true)
        .ID("co")
        .Alignment(AnchorPoint.Right)
        .Html("Test callout")
        .HeaderToolbar(ht=>
        X.Toolbar().Flat(true)
        .Items
        (
        X.Button()
        .Icon(Icon.Decline)
        )))
                

        @(X.TagField()
        .ID("tag1")
        .HideSelected(true)
        .Width(375)

        .HideTrigger(true)
        .Editable(true)
        
        )
      
          @(X.Button()
        .Text("validate Tag Field")
        .Listeners(l=>{
            l.Click.Handler = "showCallouts(true)";
        })
        )

with this code callout show but the button not visible.

Unfortunately, there is no docs on Ext.Msg.Callout in the ExtJS docs. This functionality has appeared in Ext.NET.

Can you let me know,some component or functionality not provided by sencha but added by EXT.net where can I find docs of these things(bot client and server side).

[Daniil]

Please see the instruction that I mentioned:
http://forums.ext.net/showthread.php...ll=1#post89172

Please create a required View in Razor. Just a static View with a Callout that you need. Then run that view into the browser, for example, Chrome. Then follow the instruction.

Can you let me know,some component or functionality not provided by sencha but added by EXT.net where can I find docs of these things(bot client and server side).

Unfortunately, Ext.NET has no docs like ExtJS has. Please read this post for details:
http://forums.ext.net/showthread.php...l=1#post243011