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

Re: YUI datatable delete/edit

Expand Messages
  • cjavajim
    ... removeColumn() and insertColumn() will remove and insert Column instances from the actual ColumnSet; see http://developer.yahoo.com/yui/datatable/#colapis
    Message 1 of 8 , Mar 2 8:03 AM
    • 0 Attachment
      --- 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
    • seyed_7
      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
      Message 2 of 8 , Mar 2 8:13 PM
      • 0 Attachment
        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
        >
      • 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 3 of 8 , Mar 2 11:50 PM
        • 0 Attachment
          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 4 of 8 , Mar 3 12:04 PM
          • 0 Attachment
            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 5 of 8 , Mar 3 1:12 PM
            • 0 Attachment
              --- 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 6 of 8 , Mar 3 7:42 PM
              • 0 Attachment
                :)
                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 7 of 8 , Mar 4 1:18 PM
                • 0 Attachment
                  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.