Display Icon with click event in the grid

4 posts, 0 answers
  1. Sampathkumar
    Sampathkumar avatar
    23 posts
    Member since:
    Feb 2018

    Posted 24 Aug 2018 Link to this post

    Hi All,

    I want to display an icon in the kendo grid at the last with click event functionality ,Kindly provide me a sample .Please find the attached screen shot how it should be.

    Thanks & Regards,

    Sampath

  2. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 28 Aug 2018 Link to this post

    Hi Sampathkumar,

    A possible solution is to add a template column which contains the icon and add a click handler to the element of the icon.

    e.g.

    // column
     
      columns.Template(@<text></text>).ClientTemplate(" <span class='k-icon k-i-information' onclick='myHandler()'></span>");
     
    // handler
     
        function myHandler() {
            alert('icon pressed!')
        }

    For your convenience I am attaching a small sample which demonstrates the above approach.


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

  3. Lakshman
    Lakshman avatar
    1 posts
    Member since:
    May 2020

    Posted 17 May 2020 in reply to Georgi Link to this post

    Hi Georgi,

    Thanks for your solution,I need this kind of solution only, however I need row details as well in the same function to pass to pop screen when click on myHandler()

    Could you please help out in this case

    Kind Regards,

    Lakshman.

  4. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 19 May 2020 Link to this post

    Hello Lakshman,

    You could get the underlying model of the current row using the grid.dataItem method.

    e.g.

    // column
     
      columns.Template(@<text></text>).ClientTemplate(" <span class='k-icon k-i-information' onclick='myHandler(event)'></span>");
     
    // handler
     
        function myHandler(e) {
           var grid = $('#grid').data('kendoGrid');
           var dataItem = grid.dataItem($(e.target).parents('tr')); // underlying model
        }

    Regards,
    Georgi
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top