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

Re: Datatable enhancement help required

Expand Messages
  • Ted Husted
    This might be more than what you are looking for, but I ve been working on a composite DataTable widget that provides for a Find / List / Edit / View workflow,
    Message 1 of 6 , Jun 1, 2007
    • 0 Attachment
      This might be more than what you are looking for, but I've been
      working on a composite DataTable widget that provides for a Find /
      List / Edit / View workflow, all from a single object configuration.

      * http://yazaar.org/examples/dataform/tutorial-tabview.html

      It's not in production yet, but we're getting close :)

      HTH, Ted.

      --- In ydn-javascript@yahoogroups.com, "wyzfr" <wyzfr@...> wrote:
      >
      > I finally getting rid of one point : posting the changes. I based the
      > code upon the getRecorset function of the datatable. I added an hidden
      > input field to my form and when I click my submit button I change its
      > value using the following function :
      >
      > function preSubmit(f) {
      > var s;
      > var rec = myDataTable.getRecordSet().getRecords();
      > if (rec.length > 0) s = rec[0]['clientid'] + ', ' +
      > rec[0]['enterdate'] + ', ' + rec[0]['quitdate'];
      > for (var i=1;i<rec.length;i++) {
      > s += '|' + rec[i]['clientid'] + ', ' + rec[i]['enterdate'] + ',
      > ' + rec[i]['quitdate'];
      > }
      > f.data.value = s;
      > }
      >
      > It now remains 2 points...
      >
    • wyzfr
      Hello. I already came to this widget before I post. It is very interesting and allows to understand better how to interact with datatables. The editing
      Message 2 of 6 , Jun 4, 2007
      • 0 Attachment
        Hello.

        I already came to this widget before I post. It is very interesting
        and allows to understand better how to interact with datatables. The
        editing functionnality is very interesting. When do you plan to finish
        it ? Please not that you can't change a select value, it goes direclty
        to the edit tab... And how do you manage to plug it to a database ?

        Let's back to my case :
        * I saw that YUI is applying ids to records. Is there a way to set
        them myself ? (in order I don't have to hide a columns)
        * How to set a calendar editor instead of a textbox one ?

        Best regards.
      • Ted Husted
        ... The RecordSet needs to use some type of primary ID internally. I don t know that it s a good idea to ever expose any kind of primary ID to the client. The
        Message 3 of 6 , Jun 4, 2007
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "wyzfr" <wyzfr@...> wrote:
          > Let's back to my case :
          > * I saw that YUI is applying ids to records. Is there a way to set
          > them myself ? (in order I don't have to hide a columns)

          The RecordSet needs to use some type of primary ID internally. I don't
          know that it's a good idea to ever expose any kind of primary ID to
          the client. The DataTable is designed to keep more columns in the
          RecordSet than the column displays. It's not clear why this should be
          a problem.

          > * How to set a calendar editor instead of a textbox one ?

          It's possible that no one has done that yet. There is experimental
          code for select and checkbox support, but nothing is hinted for a date
          editor yet. Though, I'll probably need to do one before long.


          > I already came to this widget before I post. It is very interesting
          > and allows to understand better how to interact with datatables. The
          > editing functionnality is very interesting. When do you plan to finish
          > it

          It's feature-complete now, and we are getting ready to use it in
          production. I just don't know when I'll have time to break out a
          public example that uses a live database. At work, we're using .NET
          behind the firewall, but for a public yazaar.org example that uses a
          live database, we'd need to use PHP. So, I'd have to learn that first :(


          >? Please not that you can't change a select value, it goes direclty
          > to the edit tab... And how do you manage to plug it to a database ?

          That's just a matter of how the events are wired. Most of the actual
          work is going into an intranet application, and I'm trying to keep the
          examples patched together in the meantime, but it's been a moving target.

          We're "lazy-loading" the widgets from iframes. When the page is
          loaded, we create a composite widget that includes displays for
          finding, listing, viewing, and editing a database entity, held
          together with a tabview.

          <div id="elScript" class="js">
          <script type="text/javascript">
          var fnReady = function() {
          YAHOO.widget.Logger = my.Logger;
          var oView = new MY.View("elBody","Facilities");
          _Self = new MY.Facility(); // [1]
          oView.oContent = _Self;
          my.oEvents.subscribe("facilitiesLoad", _Self.load,
          _Self);
          my.loading(true);

          Facilities.rpc.list(my.oEvents.onFacilitiesLoadReturn).call(ANVIL.channel);
          }; // [2]
          YAHOO.util.Event.onContentReady("elBody",fnReady);
          </script>

          [1] The Facility object is a subclass of the basewidget that
          instantiates the TabView, DataTable, and DataForm.

          [2] The Faclities.rpc line is a call to our database system using the
          Jayrock RPC library. When it returns we raise a custom loading event
          that calls a load method.

          my.oEvents.onFacilitiesLoadReturn = function(oData) {
          my.info("facilitiesLoad Event"); // debug
          my.loading(false);
          my.oEvents.fireEvent("facilitiesLoad", oData);
          };


          MY.Facility.prototype.load = function(oData,oSelf) {
          oSelf.oViewConfigs["oSession"] = {county_name_selectOptions:
          oData.result.county_names}; // [3]
          oSelf.oEditConfigs["oSession"] = {county_name_selectOptions:
          oData.result.county_names};
          var oPayload = {};
          oPayload.result = oData.result.facility_list;
          MY.Facility.superclass.load.call(this, oPayload, oSelf); // [5]
          var oAutoComplete = oSelf.oAutoComplete;
          var elDataMenu = YAHOO.util.Dom.get("elDataMenu");
          var sContainer_id = this.id + "-div";
          var oDataMenu = new
          YAHOO.yazaar.DataMenu(elDataMenu,sContainer_id,true); // [4]
          oDataMenu.subscribe("cancelEvent", oSelf.onExitList, oSelf);
          oDataMenu.subscribe("deleteEvent", oSelf.onDelete, oSelf);
          oDataMenu.subscribe("insertFormEvent", oSelf.onInsertForm, oSelf);
          oDataMenu.subscribe("updateFormEvent", oSelf.onUpdateForm, oSelf);
          this.oDataMenu = oDataMenu;
          };

          [3] We need to return multiple data items from the database, so we
          return an associative array (IDictionary). This custom load method
          extracts the data items from the return object and puts them into a
          rutnime configuration space, oSession. The DataForm widget checks
          oSession for items like the selectOptions.

          YAHOO.yazaar.DataForm.prototype.select = function(elCell,oColumn) {
          var sKey = oColumn.key + "_selectOptions";
          var aOptions = this.oSession[sKey] || oColumn.formSelectOptions ||
          oColumn.selectOptions || [];
          ...


          [4] We wanted to use the same set of buttons on multiple displays, so
          we broke those out into a separate "DataMenu" widget that we
          instantiate and wire-up on load. The DataMennu widget raises events in
          response to button clicks, and we can wire our custom database
          handlers to those custom events.

          MY.Facility.prototype.onDelete = function (oData,oSelf) {
          var isExit = confirm("Delete this record?");
          if (isExit) {
          oSelf.exitView(oSelf);
          var oValues = oSelf.oDataEdit.getSelectedRecord();

          Facilities.rpc.erase(oValues,oSelf.onDeleteReturn).call(ANVIL.channel);
          }
          };

          MY.Facility.prototype.onDeleteReturn = function(oData) {
          my.message(oData.result.message);
          var sIdentifier = oData.result.values.yuiRecordId;
          _Self.oDataEdit.deleteRecord(sIdentifier);
          _Self.oDataList.populateTable();
          _Self.oDataList.showPage(_Self.oDataList.pageCurrent);
          _Self.exitView(_Self);
          };


          [5] In between, the custom load method calls the superclass load
          method. The stock load method instantiates the different displays and
          the tabview.

          There is still much that could be simplified, but we are seeing a
          high-degree of re-use. We have a variety of data entities that need to
          maintained in our application, most of which end up in drop down lists
          as part of other entities. We're trying to use the same composite
          widget to edit all of these, just by changing the configuration. And,
          so far, it's working.

          -Ted.
        • wyzfr
          Hello. ... don t know that it s a good idea to ever expose any kind of primary ID to the client. The DataTable is designed to keep more columns in the
          Message 4 of 6 , Jun 5, 2007
          • 0 Attachment
            Hello.

            > The RecordSet needs to use some type of primary ID internally. I
            don't know that it's a good idea to ever expose any kind of primary ID
            to the client. The DataTable is designed to keep more columns in the
            RecordSet than the column displays. It's not clear why this should be
            a problem.

            I didn't read carefully the help. I was convinced that I sould have
            the same ResultSchema than the ColumnSet. Knowing this point makes
            life better !

            > > * How to set a calendar editor instead of a textbox one ?
            >
            > It's possible that no one has done that yet. There is experimental
            > code for select and checkbox support, but nothing is hinted for a
            date editor yet. Though, I'll probably need to do one before long.

            Ok. I searched a bit on google but I didn't find anything. I might
            come to it but I have not your skills in javascript...

            I tried to read very carrefully your explanation on how it works and I
            edited the source code. It seems there is some work behind it! The
            Jayrock library is very interesting but I use ASP and SQL Server 2005
            :( I think I will keep my method for the moment, ie just before
            submiting I fill an hiddent input with a copy of the datatable in a
            string I can treat server side.

            Best regards
          Your message has been successfully submitted and would be delivered to recipients shortly.