GridColumn template onClick button

4 posts, 0 answers
  1. Jawad M
    Jawad M avatar
    2 posts
    Member since:
    Mar 2018

    Posted 24 Jun 2018 Link to this post

    i'm using kendo grid and i want to add OnClick in a button on template column 

    here is my code : 

    <GridColumn field="Actions" title=" " template="<button type='button' onClick='editUser(&quot;#:Id#&quot;)'><i class='fas fa-pencil-alt'></i></button>"/>

    but it is not working.

    i aslo tried this code it return null

     

    <GridColumn field="Actions" title=" " template={<div dangerouslySetInnerHTML={<Button onClick={()=>this.editUser(null)} color="primary"><i className="fas fa-pencil-alt"></i></Button> }></div>}/>

     


     

  2. Stefan
    Admin
    Stefan avatar
    2817 posts

    Posted 25 Jun 2018 Link to this post

    Hello, Jawad,

    Thank you for the provided code.

    The issue occurs as this is a jQuery template and it does not understand React specific code as onClick and React templates {}.

    The desired result can be achieved by adding a specific class to the button and then attaching a click handler to them on the dataBound event:

    https://next.plnkr.co/edit/x58IazH6mLQCTEyl

    Also, please check our native Grid which supports React specific templates and code:

    https://www.telerik.com/kendo-react-ui/components/grid/

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Jawad M
    Jawad M avatar
    2 posts
    Member since:
    Mar 2018

    Posted 25 Jun 2018 in reply to Stefan Link to this post

    thank you Stefan, 

    is there any way to get the ProductID of each row when the button is clicked ?

  4. Stefan
    Admin
    Stefan avatar
    2817 posts

    Posted 26 Jun 2018 Link to this post

    Hello, Jawad,

    The desired result can be achieved by the finding the row and then using that row to find the data item bound to the row:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem

    I modified the example to demonstrate this:

    https://next.plnkr.co/edit/x58IazH6mLQCTEyl

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top