A href on grid not working.

[Ryan]

Hi, 

I needed to make link click work on my grid that will show my custom modal. Tried code below but I cant seem to make it work. Any ideas on making this work?

Thanks in advance.

columns.Bound(column => column.Email).Filterable(ftb => ftb.Multi(true).Search(true)).ClientTemplate("#= userDetails(data) #")

 

<script>
        function userDetails(user) {
             var html = kendo.format("<strong><a href='#' onclick='openModal('" + user + "');'>"+ user.Email +"</a></strong>");
            return html;
        }

        function openModal(user) { <---- Not firing
            alert(JSON.stringify(user));
            $('#mdlUserInfo').modal('show');
        }

</script>

[Viktor Tachev]

Hi Ryan,

 

As I understand the requirement you would like to have a button or a link in the Grid that will open a custom popup.

In that case I suggest defining a custom command for the Grid. It will enable you to have the required functionality with just a bit additional code. Check out the example below that illustrates how the functionality can be implemented:

https://demos.telerik.com/aspnet-core/grid/custom-command

 

Regards,
Viktor Tachev
Progress Telerik

[Ryan]

I dont need custom column to open modal. Already added link to my column --> columns.Bound(column => column.Email).Filterable(ftb => ftb.Multi(true).Search(true)).ClientTemplate("#= userDetails(data) #")

 

only the onclick on template is needed to work.

<script>
        function userDetails(user) {
             var html = kendo.format("<strong><a href='#' onclick='openModal('" + user + "');'>"+ user.Email +"</a></strong>");
            return html;
        }

        function openModal(user) { <---- Not firing
            alert(JSON.stringify(user));
            $('#mdlUserInfo').modal('show');
        }
</script>

[Viktor Tachev]

Hello Ryan,

 

Thank you for the clarification. 

In that case I suggest escaping the quotes that are after openModal. Additionally it is recommended to encode the argument that is passed to the function. 

The updated userDetails would look like this:

 

function userDetails(user) {
	var html = kendo.format("<strong><a href='#' onclick='openModal(\"" + kendo.htmlEncode(user.Email)+ "\");'>" + user.Email + "</a></strong>");
	return html;
}

 

Let me know how this modification works for you.

 

Regards,
Viktor Tachev
Progress Telerik

[Ryan]

Thanks!

this works for me. passing the whole obj.

function userDetails(user) {
            var strObj = JSON.stringify(user);
            var html = kendo.format("<strong style='color: #0066cc !important'><a href='#' onClick='openModal(" + strObj + ");'>"+ user.Email +"</a></strong>");
            return html;
        }

[Nikolay]

Hello Ryan,

I am glad to hear you have managed to resolve the situation.

As for now, this forum thread will be closed. In case of further inquiries simply reply and it will reopen.

Regards,
Nikolay
Progress Telerik

[Ryan]

Thanks you can close this thread.