How to dynamically display new page via html
Russell West
Bill Rebey
Russel, I’m not positive what exactly your issue is, but I think this fiddle shows you what you need:
http://jsfiddle.net/brebey/03nwsbm1/9/
It uses:
- Custom formatter to produce whatever HTML you want in the target cell. I generate an <a> tag in the example. (Incidentally, this example would also suffice to show you how to use a custom date formatter, like the one you use in your Datatable code, below).
- Click handler to intercept clicks to those generated <a> tags, and prevention of default click action
- Calling a method (like your “getActionHTML” method) using the value from the <a> tag
Let me know if this answers your question or not.
--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Russell West
Bill Rebey
You’re there – you just don’t know it.
#1
When you’re in the formatter, you’ll notice the signature is (row, cell, value, columnDef, dataContext).
dataContext is the row in the Data array that contains the cell you’re rendering. Thus, if you fill in your “href” attribute with - instead of ‘#’ – something like this, you’ll get exactly what you need – the href will be correct:
return ‘<a href="https://documents/’+ dataContext[7] +’">’ +
‘<span class="glyphicon glyphicon-new-window"></span>’ +
‘</a>’
Asuming that column 7 of your data set is where your “Document ID” value is.
#2
That’s already what my example does. Look at the JSFiddle from my last eMail, and run the example. You won’t see “<a href=…..” in the cell on the screen; you’ll see a hyperlink, whose name (the thing you can see) is the data that I put in the text of the <a> tag.
Russell West
return ‘<a href="https://documents/’+ dataContext["documentId"] +’">’ +
‘<span class="glyphicon glyphicon-new-window"></span>’ +
‘</a>’;
]
Bill Rebey
No, Russell, the order of definition of those variables shouldn’t matter.
If I understand the problem correctly from your description, I think you’re probably up against a simple CSS issue.
Am I correct in understanding that the problem seems only to be that the hyperlink (glyph, in this case) doesn’t show up in the column in the grid, so there’s nothing to click on, and hence no way to load the page?
If that’s right, try this:
1) Remove the ‘class=”gly….” ‘ attribute from your Span.
2) Between the now-empty open/close tags of the span, put something in there like “Link!”
3) It’ll look like this:
return ‘<a href="https://documents/’+ dataContext["documentId"] +’">’ +
‘<span>Link!</span>’ +
‘</a>’;
When you reload the page, you should see the word “Link!” in a the cells that you’re using your HTML formatter for.
If that works, then you’ve just got some problem with your CSS, bootstrap, etc., which is beyond the scope of anything I can help you with here.
If that STILL fails, let me know, and we’ll look harder.
Russell West
Bill Rebey
Oh, it’s beer alright! You don’t owe me anything, though, Russel. We’ve all gotten plenty of help from the community, and I’m happy to give back.
HOWEVER! Don’t give up! My suggestion was merely a TROUBLESHOOTING suggestion – not a solution.
So…it sounds like if you take your icon out of the picture, everything works and you get your link and the link works and so on, right?
Great!
That just means that the fundamental work is correct – you’re building your SlickGrid correctly, formatting the data correctly, and so on.
All you have to do now is figure out why your glyph won’t show up.
It’s probably just some CSS thing, like it has margins or padding that make it display out-of-sight and outside the confines of the cell’s visible boundaries.
Or maybe it’s a resource problem, and the image file is missing. Or maybe it’s a CSS loading issue, and the CSS that you think is loading isn’t loading at all.
Definitely, though, what you’re talking about doing is NOT outside the realm of possibility. It’s quite common. I have built all sorts of SlickGrid applications with all sorts of icons, images, buttons, and so on inside them. This all works fine. You’ve just got to figure out why your glyph isn’t showing up; it’s not a SlickGrid problem, though, for sure.
Keep after it! You’ll get it!
It sounds like you might not be very familiar with debugging Web applications. If you’re not already familiar with the Web browser’s debug tools, you MUST learn. This will very readily tell you what’s inside that cell in the DOM, and it’ll show you the CSS applied to it, etc.
FF, IE, and Chrome all have built-in debuggers, and FF has an add-in that’s my personal favorite, FireBug.
In any event, press F12 from your browser, and you should get a Debug window. From there, you can inspect the DOM, click on the cell that’s supposed to have your glyph in it, and see what CSS is applied and so on.
Good luck!