0

I'm trying to build a Kendo tabstrip where I can add new tabs containing a database populated select list of emails that I get from a razor DropDownList. When the page loads the selectlist and options all load fine, but the options are all on new lines, which messes up the formatting and throws an error.

In Visual studio

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
this is the troublemaker-->content:'<div id = ' + lastIndex + '><div class="col-md-10">@Html.DropDownList("VendorEmails", null, htmlAttributes: new { @class = "form-control", @style = "width: 280px" })</div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

The resulting code

jQuery('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content: '<div id = ' + lastIndex + '><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

So my question is, can I somehow keep this all on one line so that it works? I just need it to not add a new line or find a way to get jQuery to see it all as one string.

GryffensBane
  • 33
  • 7

1 Answers1

1

Turns out that all I needed to do was replace all the single quotes with backticks (`). This got javascript to recognize it all as one string. I guess it’s a new type of variable called a “template literal” that is new to ES6. I found the answer to this on another question. Better explanation

This works great now!

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content:`<div id = ` + lastIndex + `><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>`
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });
GryffensBane
  • 33
  • 7