Can I add Multiple icons (images) in a single Datagrid view Cell - all with separate click Events

Welcome to Wisej Support.
Questions, suggestions and plain old bugs - are all welcome here!
0
0

We need to add a “Action Bar” to each row of a data grid view. So our idea was to add a bunch of icons in Column 1 after the data is retrieved to allow the user to take different actions on a particular row – like bookmark, edit, forward info, etc.

I didn’t like the look of individual cells for each icon as the header looks strange and they show the bars between them.

Is it possible – and have separate click events so we know what they clicked and what row they clicked it on?

  • You must to post comments
0
0

Hi Edmond,

I tried the snippet you sent like this:

this.dataGridView1.Columns[3].AllowHtml = true;
 this.dataGridView1[3, 0].Value = "<img role='test' src='resource.wx/Wisej.Ext.ElegantIcons/archive-box.svg' class='cell-image'/><img src='Images/Error-42.png' class='cell-image'/><img src='Images/Folder-32.png' class='cell-image'/>";

in Default.html I have:

<head>
 <meta charset="utf-8" />
 <script src="wisej.wx"></script>
 <style>
 .cell-image {

display:inline-block;
 width:32px;
 height: 32px;
 }
 </style>
 </head>

I get this:

inline-grid-images

SVG icons need the size because they are vectorial and usually designed on a large canvas, like 800×800. Setting the size on the img element directly or through css must work, it’s part of the browser. I also tried IE11 and FireFox.

Best,

Luca

  • edmond girardi
    But once i set the style in default.html – why would i have to make an edit to it for the HTML in the datagrid to work ? I should only have to set the style one time and forget it right ?
  • Luca (ITG)
    Try to clear the cache or another browser or add a parameter to Default.htm?v=1. Looks like the browser is still retrieving the first Default.html without the style.
  • edmond girardi
    No – what happens is – its working – then after I edit the html in the datagrid cell to add another icon and I run it it stops showing the icons. It initially does until I edit the cell HTML again. Then it stops. The only way to get it to work again is to go and make a change to default.html – then it will show the icons again in the datagrid cell. Even if i just edit they style to 18px save it , then edit it again back to 16px, save it – then run. Then the Icons show up in the datagrid cell.
  • Luca (ITG)
    Tried that by adding img role=’test’ src=’resource.wx/Wisej.Ext.ElegantIcons/arrow-up.svg’ class=’cell-image’. It’s just html, if it doesn’t work there is a problem with the browser, cache, etc. Verify using F12 with Chrome, select Elements, click the button (top left) “Select an element…” and inspect the HTML. Select the img element and you should see on the right, under Styles and Computed, the effective style. That show show exactly what’s wrong.
  • edmond girardi
    Tried in Chrome and it works fine – made changes and ran without having to edit default.html every time. must be IE 11 issue as you said.
0
0

Looks like the image won’t resize even though the style specifies the cell image as 16px X 16px

  • You must to post comments
0
0

I figured out what is going on, see attached screen shot. It appears that even with the style in your example added to default html – the size of the “font” icon is very large. When i stretched the cell wider – you can see how large it is. How can I set the size of the font ? Is this done in the Style as well  ?

Sorry – coming from VWG we are not used to mixing HTML and C# to do this -although I see how powerful it is !

Attachment
  • You must to post comments
0
0

Code snippet attached with the HTML  string

Attachment
  • Luca (ITG)
    Missing attachment.
  • edmond girardi
    Attached again above
  • edmond girardi
    Strange thing – I added a tool tip to that icon using the Title attribute and it does show the tool tip when hovering over the left side of the cell – just no icon shows up.
  • You must to post comments
0
0

Got it – makes sense to just have the HTML because there can be thousands of records.

Will the Cell Click event also give me the current row that was clicked ?

  • You must to post comments
0
0

It’s better to use the html approach, otherwise you’d be creating hundreds of controls. The “control in the cell” feature is meant to be used to create super cool grid panels.

To add tooltips simply add the title=”tooltip text” attribute to the <img> tag.

 

  • You must to post comments
0
0

Any advantage/disadvantage to either approach ?

The datagrid may have a few thousand records (15k, 20k ?) at times.

 

Also – it would be nice to have tool tips when the user hovers over the icons – can this be done as well ?

  • You must to post comments
1
0

Hi Edmond,

do you think about something like this ?

actionbar

It can be achieved quite easily by using a panel with some buttons that are used as Control in each cell.

Please let me know if you need some sample code to get started.

Best regards
Frank

 

Attachment
  • Frank (ITG)
    Luca was faster :-) But now you have a second approach that could be used. Regards, Frank
  • You must to post comments
0
0

Awesome – thanks for the quick response! I’ll give it a try.

  • You must to post comments
1
0

Yes, look at the Role property of the click event. If you add the role attribute to your HTML it will come back to the server.

Your cell can be something like this:

<img role='edit' src='....'/><img role='view' src='....'/>, etc.

To line them up you can add a css class name or a style attribute changing the display to inline-block. You can add a css file to Default.html. When you click on the img you’ll get e CellClick event (or CellDoubleClick, CellMouseDown, etc…) with the Role property set to the value from the HTML.

We use this internally to detect clicks on the checkbox inside a checkbox cell and on the open/close button for hierarchical rows.

I tried a small sample, see below:

images-in-cell

Used this in Default.html

<style>
 .cell-image {
    display:inline-block;
    width:16px;
    height: 16px;
 }
 </style>

This in the cell:

"<img role='test' src='Images/Error-26.png' class='cell-image'/><img src='Images/Error-42.png' class='cell-image'/><img src='Images/Folder-32.png' class='cell-image'/>";

 

  • Luca (ITG)
    You have the wrong name EleganIcons instead of ElegantIcons. The “t” is missing. Also, since the images are svg images in an img element you can’t change the color. Wisej changes it by loading the svg xml document and changing the fill. Another option you have if you want to change the color is to use a real font icon set, which would work exactly as in any HTML page. Or you can change the color in the svg itself and save it back.
  • edmond girardi
    Luca, I corrected the spelling – but still no luck. Now the cell is blank – does not even show the “X” like before.
  • Luca (ITG)
    Can you send me a .cs file with the string? I tried it and I get the correct image.
  • edmond girardi
    Where do i send the .cs file ? I cant attach it here
  • Luca (ITG)
    In a .zip or send it to support[at]wisej.com.
Showing 10 results
Your Answer
Post as a guest by filling out the fields below or if you already have an account.
Name*
E-mail*
Attachment
File Name Size
There are currently no files uploaded.
Maximum number of files 5, maximum file size 3.9MB.
Supported file formats: zip pdf gif jpg bmp png cs vb theme json