UI SplitButton dropdowns

Final result:

In grid.ts constructor call

constructor(container: JQuery, options?: TOptions) {
    super(container, options);

    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 => {
        Common.PdfExportHelper.exportToPdf(
        {
            grid: this,
            onViewSubmit: () => this.onViewSubmit(),
            output: "newwindow"
        });
    });
    
    $("#PDFprint").click(e => {
        Common.PdfExportHelper.exportToPdf(
        {
            grid: this,
            onViewSubmit: () => this.onViewSubmit(),
            output: "newwindow",
            autoPrint: true
        });
    });
    
    $("#PDFfile").click(e => {
        Common.PdfExportHelper.exportToPdf(
        {
            grid: this,
            onViewSubmit: () => this.onViewSubmit(),
            output: "file"
        });
    });
}

protected addDropdownOption(element: JQuery, id: string, title: string, image?: string) {
    if (image === undefined) 
        element.append("<li id='" + id + "'><a haref='#'><span>" + title + "</span></a></li>");
    else
        element.append("<li id='" + id + "'><a haref='#'><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>");
}

In 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;
}