Loading ...
Sorry, an error occurred while loading the content.
 

Re: [ydn-javascript] Re: YUI datatable delete/edit

Expand Messages
  • Satyam
    You can also add columns permanently to the DataTable from the start. The number of columns in the column definitions does not need to match the number of
    Message 1 of 8 , Mar 2, 2009
      You can also add columns permanently to the DataTable from the start.
      The number of columns in the column definitions does not need to match
      the number of fields in the DataSource, you can both read from the
      server more fields than you mean to show (extra fields will still be
      stored, for internal use, but not shown) or show more columns than there
      is data. The later is your case. You would then use the formatter
      function on the column definition to put code to fill the cell with
      whatever HTML you want.

      To respond to clicks on such elements, you would listen to
      cellClickEvent and from its arguments find out the column and record of
      the cell clicked.

      You might want to read:

      http://yuiblog.com/blog/2008/10/15/datatable-260-part-one

      Satyam


      seyed_7 escribió:
      > Thanks a lot for the help! I was wondering if you can hint to me on
      > this one as well. Can I call these values and have them do an onClick
      > or an onHover for the delete and edit?
      >
      > Thanks
      >
      >
      >
      > --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@...> wrote:
      >
      >> --- In ydn-javascript@yahoogroups.com, "seyed_7" <seyed_7@> wrote:
      >>
      >>> Hi Everyone!
      >>> I'm stuck big time. I'm very new to YUI, so please forgive if this is
      >>> too simple.
      >>> YUI datatable takes in json objects and displays them into a table
      >>> displaying rows. So far that is not an issue. Now I don't know where
      >>> to add these view and delete options for the user because YUI
      >>> datatable displays the information similar to the db table. I wanted
      >>> to see if you could tell me if I "can" add columns to the datatable to
      >>> accommodate the view and delete options. And if so, how.
      >>>
      >>> THanks,
      >>> -Seyed
      >>>
      >>>
      >> removeColumn() and insertColumn() will remove and insert Column
      >> instances from the actual ColumnSet; see
      >> http://developer.yahoo.com/yui/datatable/#colapis
      >>
      >>
      >
      >
      >
      >
      > ------------------------------------
      >
      > Yahoo! Groups Links
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.0.237 / Virus Database: 270.11.5/1979 - Release Date: 03/01/09 17:46:00
      >
      >
    • seyed_7
      Thanks a lot satyam, I ve actually tried that one. For example, the column with the delete image is defined in var myColumnDefs =
      Message 2 of 8 , Mar 3, 2009
        Thanks a lot satyam,
        I've actually tried that one. For example, the column with the delete
        image is defined in
        var myColumnDefs =
        [{key:'id',field:'id',label:'#'},{key:'Connector',field:'Connector',
        label:'Connector Name'},{key:'Description',field:'Description',
        label:'Description'},{key:'Date_Created',field:'Date_Created',label:'C
        reated On'},{key:'Last_Run',field:'Last_Run',label:'Last Run'},
        {key:'viewImage',label:'View',
        className:'view'},{key:'editImage',label:'Edit',
        className:'edit'},{key:'deleteImage',label:'Delete',
        className:'delete'}];

        as

        {key:'deleteImage',label:'Delete', className:'delete'}

        So I tried all three values meaning i manipulated the code to do the
        following

        myDataTable.on('cellClickEvent',function (oArgs) {
        // 'this' is already referring to the DataTable
        var target = oArgs.target;
        var record = this.getRecord(target);
        var column = this.getColumn(target);
        switch (column.key) {
        case 'deleteImage':
        alert("1111");
        break;
        case 'Delete':
        alert("2222");
        break;
        case 'delete':
        alert("3333");
        break;
        default:
        alert("7777");
        break;
        }
        });


        But not even a heart beat. What am I doing wrong. I was up pretty
        late last night trying to figure this one out.

        Thanks a lot,





        --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
        >
        > You can also add columns permanently to the DataTable from the
        start.
        > The number of columns in the column definitions does not need to
        match
        > the number of fields in the DataSource, you can both read from the
        > server more fields than you mean to show (extra fields will still be
        > stored, for internal use, but not shown) or show more columns than
        there
        > is data. The later is your case. You would then use the formatter
        > function on the column definition to put code to fill the cell with
        > whatever HTML you want.
        >
        > To respond to clicks on such elements, you would listen to
        > cellClickEvent and from its arguments find out the column and record
        of
        > the cell clicked.
        >
        > You might want to read:
        >
        > http://yuiblog.com/blog/2008/10/15/datatable-260-part-one
        >
        > Satyam
        >
        >
        > seyed_7 escribió:
        > > Thanks a lot for the help! I was wondering if you can hint to me
        on
        > > this one as well. Can I call these values and have them do an
        onClick
        > > or an onHover for the delete and edit?
        > >
        > > Thanks
        > >
        > >
        > >
        > > --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@>
        wrote:
        > >
        > >> --- In ydn-javascript@yahoogroups.com, "seyed_7" <seyed_7@>
        wrote:
        > >>
        > >>> Hi Everyone!
        > >>> I'm stuck big time. I'm very new to YUI, so please forgive if
        this is
        > >>> too simple.
        > >>> YUI datatable takes in json objects and displays them into a
        table
        > >>> displaying rows. So far that is not an issue. Now I don't know
        where
        > >>> to add these view and delete options for the user because YUI
        > >>> datatable displays the information similar to the db table. I
        wanted
        > >>> to see if you could tell me if I "can" add columns to the
        datatable to
        > >>> accommodate the view and delete options. And if so, how.
        > >>>
        > >>> THanks,
        > >>> -Seyed
        > >>>
        > >>>
        > >> removeColumn() and insertColumn() will remove and insert Column
        > >> instances from the actual ColumnSet; see
        > >> http://developer.yahoo.com/yui/datatable/#colapis
        > >>
        > >>
        > >
        > >
        > >
        > >
        > > ------------------------------------
        > >
        > > Yahoo! Groups Links
        > >
        > >
        > >
        > > ------------------------------------------------------------------
        ------
        > >
        > >
        > > No virus found in this incoming message.
        > > Checked by AVG - www.avg.com
        > > Version: 8.0.237 / Virus Database: 270.11.5/1979 - Release Date:
        03/01/09 17:46:00
        > >
        > >
        >
      • cjavajim
        ... Did you subscribe to the cellClickEvent ? E.g.: myDataTable.subscribe( cellClickEvent , ...
        Message 3 of 8 , Mar 3, 2009
          --- In ydn-javascript@yahoogroups.com, "seyed_7" <seyed_7@...> wrote:
          >
          > Thanks a lot satyam,
          > I've actually tried that one. For example, the column with the delete
          > image is defined in
          > var myColumnDefs =
          > [{key:'id',field:'id',label:'#'},{key:'Connector',field:'Connector',
          > label:'Connector Name'},{key:'Description',field:'Description',
          > label:'Description'},{key:'Date_Created',field:'Date_Created',label:'C
          > reated On'},{key:'Last_Run',field:'Last_Run',label:'Last Run'},
          > {key:'viewImage',label:'View',
          > className:'view'},{key:'editImage',label:'Edit',
          > className:'edit'},{key:'deleteImage',label:'Delete',
          > className:'delete'}];
          >
          > as
          >
          > {key:'deleteImage',label:'Delete', className:'delete'}
          >
          > So I tried all three values meaning i manipulated the code to do the
          > following
          >
          > myDataTable.on('cellClickEvent',function (oArgs) {
          > // 'this' is already referring to the DataTable
          > var target = oArgs.target;
          > var record = this.getRecord(target);
          > var column = this.getColumn(target);
          > switch (column.key) {
          > case 'deleteImage':
          > alert("1111");
          > break;
          > case 'Delete':
          > alert("2222");
          > break;
          > case 'delete':
          > alert("3333");
          > break;
          > default:
          > alert("7777");
          > break;
          > }
          > });
          >
          >
          > But not even a heart beat. What am I doing wrong. I was up pretty
          > late last night trying to figure this one out.
          >
          > Thanks a lot,

          Did you "subscribe" to the "cellClickEvent" ? E.g.:

          myDataTable.subscribe('cellClickEvent', ...
        • seyed_7
          ... Thanks. There were a bunch of things I had to change up. Is there a way to change the image. for example if I have declared a column like this var
          Message 4 of 8 , Mar 3, 2009
            :)
            Thanks. There were a bunch of things I had to change up. Is there a way to change the image. for example if I have declared a column like this
            var myColumnDefs = [{key:'option',label:'Enable/Disable', className:'option'}];

            and i have the onMouseClick set up, how can I change the image when it's clicked on?

            Thanks,


            --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@...> wrote:
            >
            > --- In ydn-javascript@yahoogroups.com, "seyed_7" <seyed_7@> wrote:
            > >
            > > Thanks a lot satyam,
            > > I've actually tried that one. For example, the column with the delete
            > > image is defined in
            > > var myColumnDefs =
            > > [{key:'id',field:'id',label:'#'},{key:'Connector',field:'Connector',
            > > label:'Connector Name'},{key:'Description',field:'Description',
            > > label:'Description'},{key:'Date_Created',field:'Date_Created',label:'C
            > > reated On'},{key:'Last_Run',field:'Last_Run',label:'Last Run'},
            > > {key:'viewImage',label:'View',
            > > className:'view'},{key:'editImage',label:'Edit',
            > > className:'edit'},{key:'deleteImage',label:'Delete',
            > > className:'delete'}];
            > >
            > > as
            > >
            > > {key:'deleteImage',label:'Delete', className:'delete'}
            > >
            > > So I tried all three values meaning i manipulated the code to do the
            > > following
            > >
            > > myDataTable.on('cellClickEvent',function (oArgs) {
            > > // 'this' is already referring to the DataTable
            > > var target = oArgs.target;
            > > var record = this.getRecord(target);
            > > var column = this.getColumn(target);
            > > switch (column.key) {
            > > case 'deleteImage':
            > > alert("1111");
            > > break;
            > > case 'Delete':
            > > alert("2222");
            > > break;
            > > case 'delete':
            > > alert("3333");
            > > break;
            > > default:
            > > alert("7777");
            > > break;
            > > }
            > > });
            > >
            > >
            > > But not even a heart beat. What am I doing wrong. I was up pretty
            > > late last night trying to figure this one out.
            > >
            > > Thanks a lot,
            >
            > Did you "subscribe" to the "cellClickEvent" ? E.g.:
            >
            > myDataTable.subscribe('cellClickEvent', ...
            >
          • Satyam
            I m really not sure, it looks Ok to me. I wonder, have you set width and height for the cells in the CSS declaration? The cell element might be rendered so
            Message 5 of 8 , Mar 4, 2009
              I'm really not sure, it looks Ok to me. I wonder, have you set width
              and height for the cells in the CSS declaration? The cell element might
              be rendered so small that there is nothing for a click to hit while the
              column might show just because the header forces it to a minimum width.
              I'm not convinced this might be the case, but that's all I can think of.

              Satyam

              seyed_7 escribió:
              > Thanks a lot satyam,
              > I've actually tried that one. For example, the column with the delete
              > image is defined in
              > var myColumnDefs =
              > [{key:'id',field:'id',label:'#'},{key:'Connector',field:'Connector',
              > label:'Connector Name'},{key:'Description',field:'Description',
              > label:'Description'},{key:'Date_Created',field:'Date_Created',label:'C
              > reated On'},{key:'Last_Run',field:'Last_Run',label:'Last Run'},
              > {key:'viewImage',label:'View',
              > className:'view'},{key:'editImage',label:'Edit',
              > className:'edit'},{key:'deleteImage',label:'Delete',
              > className:'delete'}];
              >
              > as
              >
              > {key:'deleteImage',label:'Delete', className:'delete'}
              >
              > So I tried all three values meaning i manipulated the code to do the
              > following
              >
              > myDataTable.on('cellClickEvent',function (oArgs) {
              > // 'this' is already referring to the DataTable
              > var target = oArgs.target;
              > var record = this.getRecord(target);
              > var column = this.getColumn(target);
              > switch (column.key) {
              > case 'deleteImage':
              > alert("1111");
              > break;
              > case 'Delete':
              > alert("2222");
              > break;
              > case 'delete':
              > alert("3333");
              > break;
              > default:
              > alert("7777");
              > break;
              > }
              > });
              >
              >
              > But not even a heart beat. What am I doing wrong. I was up pretty
              > late last night trying to figure this one out.
              >
              > Thanks a lot,
              >
              >
              >
              >
              >
              > --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              >> You can also add columns permanently to the DataTable from the
              >>
              > start.
              >
              >> The number of columns in the column definitions does not need to
              >>
              > match
              >
              >> the number of fields in the DataSource, you can both read from the
              >> server more fields than you mean to show (extra fields will still be
              >> stored, for internal use, but not shown) or show more columns than
              >>
              > there
              >
              >> is data. The later is your case. You would then use the formatter
              >> function on the column definition to put code to fill the cell with
              >> whatever HTML you want.
              >>
              >> To respond to clicks on such elements, you would listen to
              >> cellClickEvent and from its arguments find out the column and record
              >>
              > of
              >
              >> the cell clicked.
              >>
              >> You might want to read:
              >>
              >> http://yuiblog.com/blog/2008/10/15/datatable-260-part-one
              >>
              >> Satyam
              >>
              >>
              >> seyed_7 escribió:
              >>
              >>> Thanks a lot for the help! I was wondering if you can hint to me
              >>>
              > on
              >
              >>> this one as well. Can I call these values and have them do an
              >>>
              > onClick
              >
              >>> or an onHover for the delete and edit?
              >>>
              >>> Thanks
              >>>
              >>>
              >>>
              >>> --- In ydn-javascript@yahoogroups.com, "cjavajim" <cjavajim@>
              >>>
              > wrote:
              >
              >>>
              >>>
              >>>> --- In ydn-javascript@yahoogroups.com, "seyed_7" <seyed_7@>
              >>>>
              > wrote:
              >
              >>>>
              >>>>
              >>>>> Hi Everyone!
              >>>>> I'm stuck big time. I'm very new to YUI, so please forgive if
              >>>>>
              > this is
              >
              >>>>> too simple.
              >>>>> YUI datatable takes in json objects and displays them into a
              >>>>>
              > table
              >
              >>>>> displaying rows. So far that is not an issue. Now I don't know
              >>>>>
              > where
              >
              >>>>> to add these view and delete options for the user because YUI
              >>>>> datatable displays the information similar to the db table. I
              >>>>>
              > wanted
              >
              >>>>> to see if you could tell me if I "can" add columns to the
              >>>>>
              > datatable to
              >
              >>>>> accommodate the view and delete options. And if so, how.
              >>>>>
              >>>>> THanks,
              >>>>> -Seyed
              >>>>>
              >>>>>
              >>>>>
              >>>> removeColumn() and insertColumn() will remove and insert Column
              >>>> instances from the actual ColumnSet; see
              >>>> http://developer.yahoo.com/yui/datatable/#colapis
              >>>>
              >>>>
              >>>>
              >>>
              >>>
              >>> ------------------------------------
              >>>
              >>> Yahoo! Groups Links
              >>>
              >>>
              >>>
              >>> ------------------------------------------------------------------
              >>>
              > ------
              >
              >>> No virus found in this incoming message.
              >>> Checked by AVG - www.avg.com
              >>> Version: 8.0.237 / Virus Database: 270.11.5/1979 - Release Date:
              >>>
              > 03/01/09 17:46:00
              >
              >>>
              >
              >
              >
              >
              >
              > ------------------------------------
              >
              > Yahoo! Groups Links
              >
              >
              >
              > ------------------------------------------------------------------------
              >
              >
              > No virus found in this incoming message.
              > Checked by AVG - www.avg.com
              > Version: 8.0.237 / Virus Database: 270.11.6/1981 - Release Date: 03/03/09 07:25:00
              >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.