Toolbar dropdown not working.

[sapster77]

All,

I am trying to implement a simple toolbar dropdown button (splitbutton) in a grid in order to run some code based on user selection. The source for the dropdown should be a lookup table, but I can't seem to get the dropdown to work correctly. Using the following code (from a wiki example) I can get the button to show, but it will not expand/drop down, in order for the user to make a selection.

Can anyone help me with what is wrong? Possibly also suggest how to set the source of the dropdown to all the records from a lookup table? In the example below I am just trying to get the button to work, but will eventually also need to set the dropdown source to a table instead of hardcoded values.
Thank you all!

Serenity 6.96.
This is the wiki example used: https://github.com/serenity-is/Serenity/wiki/UI-SplitButton-dropdowns
I have also tried this, but end up with the same result. https://minhhungit.github.io/2020/06/10/008-create-serenity-toolbar-dropdown-button/

I had to remove (from the wiki example) options?: TOptions from the constructor as it was not valid.
XYZGrid.ts

constructor(container: JQuery) {
    super(container);

    this.createPDFButton();
}

protected createPDFButton() {
    $(".tool-buttons").children("div").children("div").append("<div id='btnPDFGroup' class='btn-group'></div>")

    this.createFirstButton($(".btn-group"), "PDF", "PDFview");

    this.createDropdownList($(".btn-group"), "dropdownlistID", "dropdownMenu");

    this.addDropdownOption($(".dropdownMenu"), "PDFprint", "Print PDF", "printer.png");
    this.addDropdownOption($(".dropdownMenu"), "PDFfile", "Download PDF", "Download.png");

    $("#PDFview").click(e => {
        alert("test")
    });
    
    $("#PDFprint").click(e => {
        alert("test")
    });
    
    $("#PDFfile").click(e => {
        alert("test")
    });
}

protected addDropdownOption(element: JQuery, id: string, title: string, image?: string) {
    if (image === undefined) 
        element.append("<li id='" + id + "'><a href='#'><span>" + title + "</span></a></li>");
    else
        element.append("<li id='" + id + "'><a href='#'><span><img src='..//Content//serenity//images//" + image + "'>" + title + "</span></a></li>");
}

protected createDropdownList(element: JQuery, id: string, classUL: string) {
    element.append("<button id='" + id + "' type='button' class='btn btn-sm dropdown-toggle tool-button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'><span class='caret'></span><span class='sr-only'>Toggle Dropdown</span></button>");
            element.append("<ul class='dropdown-menu " + classUL + "'>");
}

protected createFirstButton(element: JQuery, title: string, id: string) {
    element.append("<button type='button' id='" + id + "' class='btn btn-sm tool-button'><span class='button-inner'></span>" + title + "</button>");
}

site.css

// Classes for PDF button
#PDFview{
border: 1px solid #aaa !important;
margin:0 !important;
font-size:13px !important;
padding: 3.5px 7px 3.5px 3.5px;
}
#dropdownlistID {
margin-left: -3px !important;
border: 1px solid #aaa !important;
font-size:11px !important;
}
.dropdownMenu {
border: 1px solid #aaa !important;
margin-top:-5px !important;
border-radius: 0 5px 5px 5px !important;
background: linear-gradient(#ffffff 0px, #eeeeee 100%) repeat-x #f7f7f7;
border-top:none !important;
}
.dropdownMenu li a:hover{
color:red;
cursor:pointer;
}
.dropdownMenu li a{
font-size:0.9em;
margin-bottom:10px;
}
.dropdownMenu span.button-inner{
margin-top:3px;
}
#PDFview span.button-inner {
background-image: url('../serenity/images/pdf.png');
height: 15px !important;
margin-top:1.5px;
margin-right:-5px;
}
#btnPDFGroup img {
margin-right:5px;
}

[LSNicholls]

This will not be what you want to hear. When I tried out your code as-is, attaching it to the UserDialog in a template-generated application using 6.9-something, there were some very odd results; I saw the button appear in both the grid and the form, which you may not have noticed if your dialog is a panel, and also it appeared in multiple places in the dialog, and multiple times in the grid; so I think your condition for where it should go (.children("div")...) is suspect. See screenshot, below.

I don't know if this accounts for your problem, though.

Note: the click event did work, but only for the leftmost button in the grid, and not at all for the dialog buttons that got added. I saw three "Test" alerts, indicating that your binding is working but there is something wrong with your nested elements. Have you inspected the HTML node? On one of the buttons I saw multiple Print and File

's too. I couldn't figure out what was going on but it may be obvious to you if you look at what you're actually generating there.

Another thing I notice, as you'll see in the screenshot, is that you have a PDF button and a dropdown element that don't look like they are the same element. Again, looking at the generated HTML should make this more obvious to you. At any rate it doesn't look like the example in https://github.com/serenity-is/Serenity/wiki/Create-toolbar-dropdown-button.

So, I followed that example from scratch, using UserGrid, and I had the same experience as you did, although it looked better. So I think that this example, which is from 2017, just doesn't work in more modern Serenity. The UI SplitButtons dropdowns, which you may have used instead, https://github.com/serenity-is/Serenity/wiki/UI-SplitButton-dropdowns, is from 2021 so maybe it just doesn't work now either. Also I notice that this code, n both places, was designed to work with a grid, not a dialog, which probably accounts for what I see in my screenshot somehow.

Maybe somebody else can chime in and say where there is a more modern example available. If I needed to do this, I'd probably just start from scratch. Or, if you know your lookup table is only going to have a few rows, I guess I would iterate through them and create separate buttons for each of the possible actions. Is this possible for you?

[LSNicholls]

Here are some followup thoughts.

I was able to get rid of the duplicates and the button showing up in the wrong places by simply creating a div with a class and name that I knew would be unique, like this:
this.toolbar.element.append("<div id='btnPDFgroup' class='btnPDFgroup'/><div>");
... after which I could change where createPDFButton() put the buttons, like this:

 this.createFirstButton($(".btnPDFgroup"), "PDF", "PDFview");
 this.createDropdownList($(".btnPDFgroup"), "dropdownlistID", "dropdownMenu");

... however this didn't resolve the problem with the dropdown list items not showing up. I think there was something wrong with the hover code in the CSS but I couldn't see what.

So, as I suggested, I went back to first principles and created an example that does work, from scratch, starting from this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar, which I could test and prove worked, and then adapt slightly for inclusion in Serenity dialog code.

The working code below is independent of the example div created above.

I ran this code in updateInterface(), not in the dialog constructor, but I didn't have any particular reason to put it there, to be honest. It would probably work in the constructor as well.

 this.toolbar.element.append('<div class="dropdowncontainerPDF"><div class="dropdownPDF">' +
     '<button class= "dropbtn btn btn-sm tool-button" > Dropdown' +
     '<i class= "fa fa-caret-down" > </i>' +
     '</button>' +
     '<div class= "dropdownPDF-content" >' +
     '<a onclick="alert(1);"> Link 1 </a>' +
     '<a onclick="alert(2);"> Link 2 </a>' +
     '<a onclick="alert(3);"> Link 3 </a>' +
     '</div>' +
 '</div></div>') ;

It needs to be paired with the following CSS (not exactly the same as what you'll see in the W3Schools example, but very close):

.dropdowncontainerPDF {
  overflow: hidden;
}
 .dropdowncontainerPDF a {
    float: left;
    font-size: 16px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
.dropdownPDF {
  float: left;
  overflow: hidden;
}
.dropdownPDF .dropbtn {
    font-size: 13px;
    border: solid #eee;
    outline: none;
    color: blue;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
.dropdownPDF-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdownPDF-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
 .dropdownPDF-content a:hover {
    background-color: #ddd;
 }
.dropdownPDF:hover .dropdownPDF-content {
  display: block;
}

The result looks something like this -- obviously the CSS could use more work --

... and when you hover over the new button you get this, with the click event for each list item doing what you would expect on each:

... so at this point it is just a question of building up the dropdownPDF-content string to suit your needs, and as long as your dialog has access to the rows in your lookup table I think this should be possible as well.

As I mentioned before, if it is just a few items I don't see any reason why you would not create separate buttons for each item, though, rather than fuss with this.

Hope this helps, at any rate.

[sapster77]

Wow. Thank you:-) So I am actually trying to implement the button in the grid (not a dialog), so at least for me it shows up in the right spot.
Awesome that you have made the dropdown actually work - i will try this later today to test if I can implement your example.

With regards to buttons vs. dropdown it is a list of about 15 items, which is why I would prefer a dropdown.
Next step now is to figure out how to dynamically build that list.

Thanks again for your help with this - made my day, as I was totally stuck:-)

[LSNicholls]

Oh, in a grid is pretty much just the same although I changed to (a) run the code in createToolbarExtensions() and (b) use spans instead of divs, both changes to get the button where I wanted it on the grid page. I didn't make any changes to the CSS from the earlier example:

 protected override createToolbarExtensions() {
     super.createToolbarExtensions();
     this.toolbar.element.append
         ('<span class="dropdowncontainerPDF"><span class="dropdownPDF">' +
             '<button class= "dropbtn btn btn-sm tool-button" > Dropdown' +
             '<i class= "fa fa-caret-down" > </i>' +
             '</button>' +
             '<span class= "dropdownPDF-content" >' +
             '<a onclick="alert(1);"> Link 1 </a>' +
             '<a onclick="alert(2);"> Link 2 </a>' +
             '<a onclick="alert(3);"> Link 3 </a>' +
             '</span>' +
             '</span></span>');

From there, as I said earlier, I don't think it's difficult to data drive/dynamically build. Here is a sample, in which I'm using the Roles table for my source. Your table would have the elements, such as icon filenames and actions to take, that you need., and you might want to build a customized lookup that builds the full string for each item, ready for re-use if you did decide to put the button in a form too:

Caveats: 1, you should test to make sure that you actually get items back, in case there are none configured, and, 2, I know we aren't supposed to use synchronous call but I couldn't figure out how to get it to work properly with Async, at least not quickly, sigh.

    protected override createToolbarExtensions() {
        super.createToolbarExtensions();
        let PDFItems = this.getPDFItems();
        this.toolbar.element.append
            ('<span class="dropdowncontainerPDF"><span class="dropdownPDF">' +
                '<button class= "dropbtn btn btn-sm tool-button" > Dropdown' +
                '<i class= "fa fa-caret-down" > </i>' +
                '</button>' +
                '<span class= "dropdownPDF-content" >' +
                PDFItems + 
                '</span>' +
                '</span></span>');
    }

    protected getPDFItems(): string {
        var retval = "";
        RoleRow.getLookup().items.forEach((r, i) => retval += this.getPDFItem(r));
        return retval;
    }

    protected getPDFItem(r: RoleRow): string {
        var retval = '<a onclick="alert(\'' + r.RoleName + '\'); "> Link ' + r.RoleId.toString() + ' </a>'
        return retval;
    }
   

[sapster77]

Sorry for the late answer.
This is awesome and it works:-)
Just something I can't figure out:

1. The dropdown expands already when the mouse is hovered over it - not by OnClick. Do you know if that can be changed?

Thanks again!!

[LSNicholls]

Hi again,

No worries about the late reply. And I see that you have figured out the first question you originally asked about how to show something different in the dropdown :-). Really, I was just putting anything into the sample code as an example, because it should be easy to change and I don't even really know what you need there.

But, unfortunately, the remaining question you have left is something I may not be able to help with. If you remember, I told you that I hunted down an example of dropdown behavior that worked properly, and adapted it, because I didn't understand what was wrong with the CSS "hover" code you were trying to adapt. I wanted to start from something that would work. I'm not an expert in this stuff, and it is the CSS that is making the dropdown appear.

So, at this point, there are two choices:

1. Find a different example that already has the click behavior that apparently is your requirement. If this is a real user-experience or user-expectation possibility, then you should be able to find a "vanilla" example, as I did, that has nothing to do with Serenity and start work from there. FWIW I went to w3schools, which is usually pretty reliable, and took the first example I saw; I thought the hover behavior was appropriate... But here is a different one that you could use; I think that it does use a click event: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown . You'll see that it doesn't rely as much on CSS, though; the click is calling some javascript instead.
2. Examine the CSS that I provided and see if it can be edited to suit your requirement. See this discussion for an explanation of why hover and click are different in CSS, here https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css. Based on that discussion and a little experimenting, it might work by adding some "active" behavior where you see "hover" in the CSS. Something like this:

.dropdownPDF:active .dropdownPDF-content {
  display: block;
}

 .dropdownPDF-content:hover {
  display: block;
}

Caveats:

1. from my limited experiments playing with my sample code, you might find that you also have to change how you position the button from what you see in original. (Or, that might have been something that happened when I changed over to async behavior. FWIW, after this I did re-work it to use async behavior, just to teach myself how to do that, but it's more complex code and frankly I don't think it buys you anything in this scenario.)
2. that CSS that I am offering is, once again, a sample, and I'm sure that there are lots of cosmetic details that I haven't covered.

[sapster77]

Thanks a lot!
Changing the button behavior to click from hover is not really a hard requirement - i was just curious whether it was an easy fix.
What I have really appreciated about this is that I have had a hard time understanding how to customize Serenity and where to insert my own code. You have shown me that, so now I can search the internet for examples and try it out:-)
Now I am going to dig in to the CSS and make the button similar to the Serenity ones.
Thanks agan - really appreciate it.

[LSNicholls]

@sapster77, Well, I'm glad to hear you are on your way :-). Enjoy.

I am probably not a typical Serenity developer, and there may be people around here who can tell you a more "Serenity-appropriate", or built-into-the-framework, approach to doing what you wanted to do. But personally I have found it rewarding not to treat the framework as something different from the web development world outside the framework, and not to be afraid of adding "outside" things to it.

[sapster77]

Seems I have one final issue:-)
Of course to show an alert of the clicked item was not main purpose. What I want is to execute another function in the XYZGrid.ts file, taking the input from the selected item on the dropdown. I thought that would be straight forward, but apparently not. The onClick event is the issue. I have tried different variants of the below example, but all seems to fail with typescript error: "test" is not a function.
If I call "test" from another button via the "normal" on click event it works fine.
Any idea on how to call another function from the onClick event, passing in the selected id?
Thank you:-)

protected getPDFItem(r: RoleRow): string {
        //var retval = '<a onclick="alert(\'' + r.Id + '\'); "> ' + r.RoleName + ' </a>'
        var retval = '<a onclick="this.test(' + r.Id + ')">  ' + r.RoleName + ' </a>'
        return retval;
    } 

 protected test(Id: number) {
       //test - call endpoint method here
    }

[LSNicholls]

Hi again,

I think it is a question of context. Again, I am not an expert on this, but for a test I did this and it did work -- if I used window.test or test with no prefix, but it did not work with "this.test":

       var newscript = document.createElement("script");
       newscript.type = "text/javascript";
       newscript.innerText = "function test(id) { alert(id.toString())}";
       document.body.appendChild(newscript);

... So I think that "this" is not what you think it is at the point of the call.

I am NOT suggesting that you do exactly what I did in this test, however. There must be a better way to get that script attached to the Serenity page, maybe you could research that further.

If not, I think you would be better off defining the function in-line as part of the retval string. Alternatively, just fashion the endpoint that you want to call as a URL in an href as part of retval instead of onclick, maybe? What is the action that you are really trying to do at this point?

[sapster77]

Aha -see what you mean with regards to this.
What I am really trying to end up with (forget about the "test" function then) is calling a custom servicerequest in my ScheduleEndpoint.cs (Modules/Schedule/ScheduleEndpoint.ts) that looks like this:
public ScheduleResponse Schedule(IDbConnection connection, ScheduleRequest request) {

    Execute execute = new Execute();
    List<ExecuteModel> executeModel = new List<ExecuteModel>();
    executeModel.Add(new ExecuteModel
    {
       Date = request.date,
       ScheduleID = request.Id

    });

  Task<bool> task = Task.Run(async () => await execute.Exehandler(executeModel, true));
  var result = task.Result;
  

  return new ExeScheduleResponse
  {
      complete = true
  };
 }

The request.Id is what I need from the user selection in the dropdown.

in my ScheduleGrid.ts I have the code that we have discussed earlier and then this (which calls the above procedure):
´´´

    protected schedule(id: number) {
        var date = (this.tryFindQuickFilter(DateEditor, fld.DateSched) as DateEditor).valueAsDate;
        const request = {
             "date": (new Date(date)).toDateString(),
              ScheduleID: "ID VALUE FROM Dropdown HERE"
        };

        ScheduleService.Schedule(request, response => {
            if (response.complete = true) {
                notifySuccess("Schedule created succesfully.")
                this.refresh();

            }
            else {
                notifyError("Error creating schedule.")
            }
        });
        return true
    }

´´´

So basically what I have been wanting to do was call the schedule function above from our onClick event, and the having that call the Endpoint.
I hope you see what I am trying to accomplish:-)

[LSNicholls]

In UserGrid.ts, the getColumns method has this:

return `<a target="_blank" href="${resolveUrl('~/Account/ImpersonateAs?token=')}${ctx.value}">`

... and it seems to me this is how you would fashion your href that calls your endpoint, as I suggested before. You would add the date and the id into the string as you see here with token.

This would be the simplest method. I do understand that this will not give you the notify... dialogs that your function has. There are some different choices for this, if that's important; you can use onclick, with my alternative suggestions; either:

[ ] put all the code in-line or
[ ] research how you attach a script or function to a Serenity page so that the function is available to you from the global scope of the page. There must be a Serenity-appropriate way to do that, without resorting to the sample code I used to show you that it was possible!

[sapster77]

Sounds good!
The notifications are not as important as making it work, so I will definately give the "simple method" a go first. If that is unsuccesfull i'll try your alternative suggestions.
I ought to work:-)
Thank you!