ImageButton in GridTemplateColumn with EditTemplate

6 posts, 1 answers
  1. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 08 Aug 2018 Link to this post

    Hi,

    Can anyone please help me on how to achieve updating of Imagebutton on click using GridTemplateColumn with EditTemplate with Batch edit mode similar to this DropDrownList in this demo? 

     

    https://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

    Thanks in advance!

    Please help ASAP

     

  2. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 10 Aug 2018 in reply to Siri Link to this post

    Can someone please help me with this?

    Thanks!

  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4502 posts

    Posted 11 Aug 2018 Link to this post

    Hi Siri,

    The image button does not provide an input with a value that the batch editing can find and it is also not an editable element. So, it cannot be used on its own as an editable container in a batch edit grid. It is also important to note that its default behavior is to postback the page on click and this will destroy the data in the grid.

    With this in mind, what I suggest is that you consider what would be the most suitable editor option for your use case and if it does not have a simple structure (like a textbox, for example), employ the template approach from this article: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/data-editing/edit-mode/batch-editing/working-with-templates.


    Regards,
    Marin Bratanov
    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.
  4. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 11 Aug 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    My requirement is to show a flag icon similar to the outlook inbox flag based on the grid row been selected or not. If the user selects the row by clicking on the flag icon the icon should change and all the rows need to saved in batch edit mode.

    Can you please let me know ASAP what would be the suitable template to be used for this scenario?

    Thanks!

  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    4502 posts

    Posted 14 Aug 2018 Link to this post

    Hello Siri,

    Perhaps the easiest way to handle this is through a CSS class on something simple like a <span> that is changed according to the data in the model through your JS code. Clicking the element can check its current state, toggle the new state and update a hidden element/attribute that you can use to feed it to back the model.


    Regards,
    Marin Bratanov
    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.
  6. Siri
    Siri avatar
    11 posts
    Member since:
    Jul 2018

    Posted 27 Aug 2018 in reply to Marin Bratanov Link to this post

    Hi Marin,

    Thanks for your inputs.

    I was able to achieve flag toggling functionality using the ClientItemTemplate with img like below. I am using ClientItemTemplate as my radgrid is bound client side using Select Method approach. And in the onclick method in .js file I updated the classname of the img element with the required class: img.className = "flag" or img.className = "unflag".

    <telerik:GridTemplateColumn UniqueName = "Flag"  HeaderText="Flag" >
         <ClientItemTemplate>
             <img alt="" onclick="onclick(this)"/>
       </ClientItemTemplate>
    </telerik:GridTemplateColumn>     
Back to Top