ImageButton in GridTemplateColumn with EditTemplate

[Siri]

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

 

[Siri]

Can someone please help me with this?

Thanks!

[Marin Bratanov]

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

[Siri]

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!

[Marin Bratanov]

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

[Siri]

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>