no data template failing when contains apostrophe

[newKendoUser]

Hello,

I have implemented the kendo UI drop down list in jQuery making use of the no data template too add a new item when the search returns no results.  My no data template is defined as follows:

 

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            <button class="k-button" onclick="addNew('#: instance.filterInput.val() #')">Add</button>
        </div>
    </script>

and the JS function it calls:

 

 function addNew(newItemName) {
           alert(newItemName);

       //logic will go here to add the new item to the drop down list

        }

 

This works perfectly, however if the text typed into the search bar contains an apostrophe the button becomes unresponsive. Is there any way to escape the apostrophe so that the function is still called successfully, and the paramter 'newItemName' will still contain the apostrophe, as the name for the new item can validly contain one.

Many thanks

[Ivan Danchev]

Hello,

You can modify the template as follows, in order to prevent the single quote from breaking the template:

'#: instance.filterInput.val().replace("'", "\\'") #'

Here's a dojo example demonstrating the change above in action.

Regards,
Ivan Danchev
Progress Telerik

[newKendoUser]

Hi Ivan,

thanks for the reply and  working example. I m slightly confused however. I see your dojo example works perfectly, however when I try to paste into my solution the JavaScript complains about an undetermined string constant. See screen shot attached. I've tried a few variations of escaping characters here to male the replace work however I cant seem to get it working. Any ideas where I might be going wrong?

 

Thanks

[Ivan Danchev]

Hi,

You can change the template as shown below to deal with the exception:

<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#:replaceString(instance.filterInput.val())#')">Add new item</button>

and add the replaceString function, which will do the replacement:

function replaceString(value) {
    return value.replace("'", "\\'");
}

Regards,
Ivan Danchev
Progress Telerik

[newKendoUser]

This works a treat, thank you Ivan.