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

YUI datatable delete/edit

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