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

Re: Datatable enhancement help required

Expand Messages
  • wyzfr
    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
    Message 1 of 6 , Jun 1 3:58 AM
    • 0 Attachment
      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...
    • 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 2 of 6 , Jun 1 8:03 AM
      • 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 3 of 6 , Jun 4 1:18 AM
        • 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 4 of 6 , Jun 4 7:10 AM
          • 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 5 of 6 , Jun 5 2:19 AM
            • 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.