[ 7 posts ]

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile

DataTable cell content as hyperlink

Post Posted: Wed Jun 20, 2012 9:38 am
+0-
Hi,

I am using DataTable (YUI3) in my project and i wanted to make the contents of one of the columns as a hyperlink that opens a Rich Text Area. Can anyone please tell me as to how this can be done?

YUI().use("datatable-sort","datatable-scroll", function(Y) {
var cols = [
{key:"FirstName", label:"FirstName", sortable:true},
{key:"LastName",label:"LastName"},
{key:"Company", label:"Company", sortable:true},
{key:"Telephone", label:"Telephone"},
{key:"Address", label:"Address"},
{key:"Expertise", label:"Expertise"}
})

If i had to make the lastname column to be hyperlinked what is to be done?

Thanks in advance

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: DataTable cell content as hyperlink

Post Posted: Wed Jun 20, 2012 3:16 pm
+0-
Hey!

You can put a link in a DataTable cell by using a formatter (see http://yuilibrary.com/yui/docs/datatable/#formatters). In this case, you can have the formatter return a string with an <a> element by setting the allowHTML configuration to true. For example:
Code:
var table = new Y.DataTable({
  columns: [
    /* some columns */
    {
      key: 'someKey',
      allowHTML: true,
      formatter: function (o) {
        // you can escape the content to avoid XSS vulnerabilities
        var value = Y.Escape.html(o.value);
        return '<a href="#' + value + '">' + value + '</a>';
      }
  ],
  data   : data
});


Last edited by jdopazo on Thu Jun 21, 2012 7:38 am, edited 1 time in total.

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile

Re: DataTable cell content as hyperlink

Post Posted: Thu Jun 21, 2012 7:29 am
+0-
Hey Juan,

Thank you for the reply!!! It worked like a charm.

I am having a problem with the rich text editor now. I am using the following to render a RTE :
YUI().use('yui2-editor', function(Y) {
var myEditor = new Y.YUI2.widget.Editor('editor', {
height: '400px',
width: '600px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
myEditor.render();

});
I have placed this in between <div> tags with the id as editor.
What i want to attempt is to open this RTE when the link on the datatable is clicked. As you suggested i tried to do this by providing the div id in <a href> of the datatable. The problem with this is that the RTE is on the screen while the datatable spills out of the screen. I tried to set the visibility as false and load it but, it still does not help. Any suggestions as to how this can be done? I would like the RTE to splash on the screen (preferably like an alert).

Thanks again!!!

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: DataTable cell content as hyperlink

Post Posted: Thu Jun 21, 2012 2:45 pm
+0-
From your description I guess you probably want to have a RTE inside a YUI3 Panel. In order to do that you just have to keep a couple of things in mind:
- render the RTE after the Panel was rendered
- render the RTE when the Panel is visible

Otherwise you'll probably run into display issues like the one you mention. But apart from that, it's just a matter of doing something like this:
Code:
var panel = new Y.Panel({
    bodyContent: '',
    centered: true,
    width: 300,
    height: 400
});
panel.render();

var editor = new Y.YUI2.widget.Editor(panel.getStdModNode('body').getDOMNode(), {
    height: '100px',
    width: '296px'
});
editor.render();

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile

Re: DataTable cell content as hyperlink

Post Posted: Mon Jun 25, 2012 1:28 am
+0-
Hi Juan,

Thanks again for the reply. I am still facing some issues with the rendering of the RTE. If possible can you please point me to a working example that you know of?

Regards,
Rohit

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: DataTable cell content as hyperlink

Post Posted: Mon Jun 25, 2012 5:31 am
+0-
This seems to work for me in modern browsers: http://jsfiddle.net/juandopazo/EzMmW/

I don't have older browsers around to check.

Rohit ST

  • Username: RohitST
  • Joined: Fri Jun 01, 2012 7:34 am
  • Posts: 10
  • GitHub: Rohit
  • Gists: Rohit
  • IRC: ST
  • Offline
  • Profile
Tags:

Re: DataTable cell content as hyperlink

Post Posted: Mon Jun 25, 2012 5:50 am
+0-
Hi Juan,

I tried everything with the code that you had posted except for the way you had posted it. I put <div> tags and played around a lot only to find it not work. Now, it is working. Thanks a ton sir!!!

Regards,
Rohit
  [ 7 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum