A href on grid not working.

7 posts, 1 answers
  1. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 16 Feb 2020 Link to this post

    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>

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 19 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  3. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 19 Feb 2020 Link to this post

    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>

  4. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2499 posts

    Posted 21 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  5. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 21 Feb 2020 in reply to Viktor Tachev Link to this post

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

  6. Nikolay
    Admin
    Nikolay  avatar
    301 posts

    Posted 26 Feb 2020 Link to this post

    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

    Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
  7. Ryan
    Ryan avatar
    91 posts
    Member since:
    Aug 2012

    Posted 26 Feb 2020 in reply to Nikolay Link to this post

    Thanks you can close this thread.
Back to Top