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

14077Re: Datatable enhancement help required

Expand Messages
  • Ted Husted
    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,

      }; // [2]

      [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.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:
      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) {
      var oValues = oSelf.oDataEdit.getSelectedRecord();


      MY.Facility.prototype.onDeleteReturn = function(oData) {
      var sIdentifier = oData.result.values.yuiRecordId;

      [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.

    • Show all 6 messages in this topic