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

Datatable enhancement help required

Expand Messages
  • wyzfr
    Hello. I m rather accurate for doing basic things in javascript but what I want to accomplish here is a bit complicated (moreover the datatable object is
    Message 1 of 6 , Jun 1, 2007
    • 0 Attachment
      Hello.

      I'm rather accurate for doing "basic" things in javascript but what I
      want to accomplish here is a bit complicated (moreover the datatable
      object is very complex). Any help is welcome. By advance sorry for the
      long text which follows but I require all of your attention please.

      Here is where I'm on.
      I want to display a list of customers in a datatable. The customer
      table is looking the following : clientid / name / addresse / city /
      postcode / enterdate / quitdate and is stored in an SQL Server
      database and clientid is identity field (integer incremented on each
      insert).
      The datatable is filled in with a XML response return by a server side
      script.
      My datatable has paginator, sortable and resizeable columns. As all of
      this is not compatible with scrollable (all columns are melt up) I put
      the datatable in an overflow div (I know that the columns aren't
      static but it's ok).
      I don't want the clientid to be display but I want to keep it for
      further references (for example when I double-clic a row I want to
      have the clientid to display the customer contacts in a popup). The
      only way I found is to hide the column by applying a special class
      ('display: none') to the clientid column and addind this to the css :
      #yui-dt-pagcontainer0 {display: none;}.
      The enterdate and quitdate are editable with a textbox but I want to
      post the changes made for server side inserts. The only way I found to
      do it is when I click on submit I browse all the cells and I compare
      them to the datasource, I they're different, I add the information to
      an input type hidden by completing submit process.

      What I would like to. I think I need to extends some objects...
      * edit the enterdate and quidate with a calendar
      * sumbit the changes by post
      * have the clientid not displayed but associated to each
      corresponding row (so to find it I just have to refer to [the row].id)

      Best regards
    • 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 2 of 6 , Jun 1, 2007
      • 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 3 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 4 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 5 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 6 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.