Add line return in Kendo Grid Client Template

[Chad]

I have a Kendo UI grid with a custom column as such:

columns.Template(@<text></text>)

              .Width(50)

              .ClientTemplate("#= getDeleteHTML(Id, DisplayLocation) #");

It calls a js function to build the html to inject as a form to submit for a delete:

function getDeleteHTML(itemId, itemName) {

        var deleteHtml = "<form action='"+ '@Url.Action("Delete", "ManageLocations")'+"/" + itemId +"' method='post'>"

                            + "<input type='image' onclick='return confirm(\"Are you sure you wish to delete: \r\n " + itemName + "?\");' value='Delete' class='delete' src='../Images/transparent.gif'>"

                        + "</form>";

        return deleteHtml;

    }

I want to break the confirmation message into 2 lines. I've tried \r\n and @Environment.NewLine + itemName as I'm not sure which parser is being used (client or server) in this case.

How can I achieve this? Sorry, I am fairly new to client side scripting so I'm sure this is easy, but supposedly just \r\n should work, but it doesn't...here is what is rendered in the browser:

<form action="/CompanyMgmt/ManageLocations/Delete/1003" method="post"><input type="image" onclick="return confirm("Are you sure you wish to delete:

RECV-A-01-1-1-1?");" value="Delete" class="delete" src="../Images/transparent.gif"></form>

And when you click on the item, the confirm box never displays, it just submits the form.

[Petur Subev]

Hello Chad,

This is happening because you set your logic directly into the html element attribute and you break the html.

Same would happen if you set onclick like for button1 below - I would suggest you to use another function or attach the onclick event with jQuery like button2.

<button id="button1" value='test' />
<button id="button2" value='test 2' />

<script type="text/javascript">
    $(function () {
        $('#button1').attr('onclick', 'confirm("Test \r\n ")'); // wont work
        $('#button2').click(function () { //will work
            return confirm("Test \r\n ");
        });
    })
</script>

Kind Regards,
Petur Subev
the Telerik team

[Chad]

Petur, thank you so much for the reply. As I'm trying to get better with client side scripting, could you clarify something for me? You say that I am setting my logic directly into the html element and to use another function instead...but I thought that is what I am doing. The logic is not specified in the .ClientTemplate but rather .ClientTemplate calls an outside function.

Second, you suggestion suggests that my goal is to add "onclick" logic...but in this case, my goal is to render a form with a submit button in each row of the grid which is to simulate a redirect to the Delete action in the controller. So my outside function is just returning an HTML string to render in each row. As such, I'm not sure how your solution applies? 

Thank you for your patience...I greatly appreciate the help!

Chad

[Petur Subev]

Hello Chad,

Yes you are using external function for the ClientTemplate. However In the ClientTemplate function you have HTML string which add an onclick attribute to the input :

... <input type='image' onclick='return confirm(\"Are you sure you wish to delete: \r\n " + itemName + "?\");' ...

And in this case another external function will look like this:

... <input type='image' onclick='someFunc()' ...

someFunc(){
    ....
}

Kind Regards,
Petur Subev
the Telerik team