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

Linking two data tables in master-detail manner?

Expand Messages
  • bradkieser
    Hi all, I am looking for an example linking one data table to another. I have two scrolling data tables and I use XHRDataSource for both. In the first one, the
    Message 1 of 7 , Dec 30, 2009
    • 0 Attachment
      Hi all,

      I am looking for an example linking one data table to another. I have two scrolling data tables and I use XHRDataSource for both.

      In the first one, the client maintains master records.

      In the second table the details for the current selected master row is displayed.

      So, for example, table accounts I have implemented CRUD (following Satyam's excellent ideas) and in table messages I want to display the message log whichever client account is presently selected.

      If the user selects another client in accounts then the messages table should refresh from the back end accordingly.
      If the user deletes a client in accounts then the back end will remove the records accordingly and the accounts table then selects the next record down and forces a corresponding reload of messages.
      If the user inserts a client then the messages table is obviously blank until the log gets entries in it.

      There is also a CRUD implementation on messages.

      Both DataTables work fine independently. But my problem is how to implement the master-detail link.

      Has anyone done this? I can't find any examples that show this in action. Hope I haven't missed something obvious!
    • George Papaioannou
      I have created such a project before. I created an action button (with the name linkgo as you will see in the example below) in a seperate column for each
      Message 2 of 7 , Dec 30, 2009
      • 0 Attachment
        I have created such a project before.

        I created an action button (with the name linkgo as you will see in the example below) in a seperate column for each record in my master table. Everytime the user clicks on this button, then I read the unique master key for the specific record and then I update the client table. There are no  difficulties for the described procedure. Just remember to declare the two tables globally, so inside the Master action event, you will have access to the client table. Take a look to the following code that lies inside the MasterDataTable.subscribe('cellClickEvent',function(oArgs) event.

                    MasterDataTable.subscribe('cellClickEvent',function(oArgs) {


                        var target = oArgs.target;

                        var column = this.getColumn(target);
                        var record = this.getRecord(target);
                        var value = record.getData(this.getColumn('SAgentID').key);
                        sagentname = record.getData(this.getColumn('Name').key);



                        switch (column.action) {

                            case 'linkgo':

                                     // Sends a request to the DataSource for more data
                                      var oUpdateTableCallBack = {
                                          success :function (oRequest , oResponse , oPayload) {

                                                          ClientDataTable.onDataReturnReplaceRows(oRequest,oResponse,oPayload);
                                                          ajaxLoadingPanel.hide();

                                                      },
                                          failure :
        ClientDataTable.onDataReturnReplaceRows,
                                          scope   :
        ClientDataTable
                                      };
                                     ajaxLoadingPanel.show();
                                     SelectedSAgentID = value;
                                     var sqlquery = "query=agents&type=select&primaryKey=AgentID&whereID=" + SelectedSAgentID;
                                    
        ClientDataTable.getDataSource().sendRequest(sqlquery, oUpdateTableCallBack);

                                     break;

                           default:DataTable.onEventShowCellEditor(oArgs);
                                    break;
                        }

                    });


        Regards,
        George

        --- Στις Τετ., 30/12/09, ο/η bradkieser <brad@...> έγραψε:

        Από: bradkieser <brad@...>
        Θέμα: [ydn-javascript] Linking two data tables in master-detail manner?
        Προς: ydn-javascript@yahoogroups.com
        Ημερομηνία: Τετάρτη, 30 Δεκέμβριος 2009, 14:35

         

        Hi all,

        I am looking for an example linking one data table to another. I have two scrolling data tables and I use XHRDataSource for both.

        In the first one, the client maintains master records.

        In the second table the details for the current selected master row is displayed..

        So, for example, table accounts I have implemented CRUD (following Satyam's excellent ideas) and in table messages I want to display the message log whichever client account is presently selected.

        If the user selects another client in accounts then the messages table should refresh from the back end accordingly.
        If the user deletes a client in accounts then the back end will remove the records accordingly and the accounts table then selects the next record down and forces a corresponding reload of messages.
        If the user inserts a client then the messages table is obviously blank until the log gets entries in it.

        There is also a CRUD implementation on messages.

        Both DataTables work fine independently. But my problem is how to implement the master-detail link.

        Has anyone done this? I can't find any examples that show this in action. Hope I haven't missed something obvious!



        Χρησιμοποιείτε Yahoo!
        Βαρεθήκατε τα ενοχλητικά μηνύ ματα (spam); Το Yahoo! Mail διαθέτει την καλύτερη δυνατή προστασία κατά των ενοχλητικών μηνυμάτων
        http://login.yahoo.com/config/mail?.intl=gr
      • Satyam
        http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html See towards the end of the page, listening to cellClickEvent on the main DataTable, it reads the
        Message 3 of 7 , Dec 30, 2009
        • 0 Attachment
          http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html

          See towards the end of the page, listening to cellClickEvent on the main DataTable, it reads the master record contents and pops up the secondary table using data from that row to build the secondary table(s).

          For XHR you could actually use my requery method:

          http://www.satyam.com.ar/yui/2.8.0/requery.html

          (please, do read the warnings, it doesn't always work)

          Satyam

          El 30/12/2009 13:35, bradkieser escribió:
          Hi all,

          I am looking for an example linking one data table to another. I have two scrolling data tables and I use XHRDataSource for both.

          In the first one, the client maintains master records.

          In the second table the details for the current selected master row is displayed.

          So, for example, table accounts I have implemented CRUD (following Satyam's excellent ideas) and in table messages I want to display the message log whichever client account is presently selected.

          If the user selects another client in accounts then the messages table should refresh from the back end accordingly.
          If the user deletes a client in accounts then the back end will remove the records accordingly and the accounts table then selects the next record down and forces a corresponding reload of messages.
          If the user inserts a client then the messages table is obviously blank until the log gets entries in it.

          There is also a CRUD implementation on messages.

          Both DataTables work fine independently. But my problem is how to implement the master-detail link.

          Has anyone done this? I can't find any examples that show this in action. Hope I haven't missed something obvious!
          No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
        • bradkieser
          Thanks George! That s a very elegant solution. I guess from a user s point of view, the key would be how the label is presented which is a design issue, not a
          Message 4 of 7 , Dec 30, 2009
          • 0 Attachment
            Thanks George! That's a very elegant solution.

            I guess from a user's point of view, the key would be how the label is presented which is a design issue, not a coding issue.

            Thanks for the reply!

            Brad

            --- In ydn-javascript@yahoogroups.com, George Papaioannou <sdancer75@...> wrote:
            >
            > I have created such a project before.
            >
            > I created an action button (with the name linkgo as you will see in the example below) in a seperate column for each record in my master table. Everytime the user clicks on this button, then I read the unique master key for the specific record and then I update the client table. There are no  difficulties for the described procedure. Just remember to declare the two tables globally, so inside the Master action event, you will have access to the client table. Take a look to the following code that lies inside the MasterDataTable.subscribe('cellClickEvent',function(oArgs) event.
            >
            >             MasterDataTable.subscribe('cellClickEvent',function(oArgs) {
            >
            >
            >                 var target = oArgs.target;
            >
            >                 var column = this.getColumn(target);
            >                 var record = this.getRecord(target);
            >                 var value = record.getData(this.getColumn('SAgentID').key);
            >                 sagentname = record.getData(this.getColumn('Name').key);
            >
            >
            >
            >                 switch (column.action) {
            >
            >                     case 'linkgo':
            >
            >                              // Sends a request to the DataSource for more data
            >                               var oUpdateTableCallBack = {
            >                                   success :function (oRequest , oResponse , oPayload) {
            >
            >                                                   ClientDataTable.onDataReturnReplaceRows(oRequest,oResponse,oPayload);
            >                                                   ajaxLoadingPanel.hide();
            >
            >                                               },
            >                                   failure :ClientDataTable.onDataReturnReplaceRows,
            >                                   scope   :ClientDataTable
            >                               };
            >                              ajaxLoadingPanel.show();
            >                              SelectedSAgentID = value;
            >                              var sqlquery = "query=agents&type=select&primaryKey=AgentID&whereID=" + SelectedSAgentID;
            >                              ClientDataTable.getDataSource().sendRequest(sqlquery, oUpdateTableCallBack);
            >
            >                              break;
            >                    default:DataTable.onEventShowCellEditor(oArgs);
            >                             break;
            >                 }
            >
            >             });
            >
            >
            > Regards,
            > George
            >
            > --- Στις Τετ., 30/12/09, ο/η bradkieser <brad@...> έγραψε:
            >
            > Î`πό: bradkieser <brad@...>
            > Θέμα: [ydn-javascript] Linking two data tables in master-detail manner?
            > Προς: ydn-javascript@yahoogroups.com
            > Ημερομηνία: Τετάρτη, 30 Î"εκέμβριος 2009, 14:35
            >
            >
            >
            >
            >
            >
            >
            >  
            >
            >
            >
            >
            >
            >
            >
            >
            >
            > Hi all,
            >
            > I am looking for an example linking one data table to another. I have two scrolling data tables and I use XHRDataSource for both.
            >
            > In the first one, the client maintains master records.
            >
            > In the second table the details for the current selected master row is displayed.
            >
            > So, for example, table accounts I have implemented CRUD (following Satyam's excellent ideas) and in table messages I want to display the message log whichever client account is presently selected.
            >
            > If the user selects another client in accounts then the messages table should refresh from the back end accordingly.
            > If the user deletes a client in accounts then the back end will remove the records accordingly and the accounts table then selects the next record down and forces a corresponding reload of messages.
            > If the user inserts a client then the messages table is obviously blank until the log gets entries in it.
            >
            > There is also a CRUD implementation on messages.
            >
            > Both DataTables work fine independently. But my problem is how to implement the master-detail link.
            >
            > Has anyone done this? I can't find any examples that show this in action. Hope I haven't missed something obvious!
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            >
            > ___________________________________________________________
            > Χρησιμοποιείτε Yahoo!;
            > Î'αρεθήκατε τα ενοχλητικά μηνύματα (spam); Το Yahoo! Mail
            > διαθέτει την καλύτερη δυνατή προστασία κατά των ενοχλητικών
            > μηνυμάτων http://login.yahoo.com/config/mail?.intl=gr
            >
          • bradkieser
            Thanks Satyam! I didn t find those in my searching. Much appreciated. Only problem with making it activated on any click is that, of course, that will kill the
            Message 5 of 7 , Dec 30, 2009
            • 0 Attachment
              Thanks Satyam!
              I didn't find those in my searching. Much appreciated.

              Only problem with making it activated on any click is that, of course, that will kill the ability to click and edit. I was thinking that the events could be chained but then you are ALWAYS going to be editing when you click to view details.

              So possibly using this with a column specifically to show is the best. It's a pity that we don't have a table cursor, a highlight, that shows the currently selected row and allows "usual" scrolling as per real PC apps using the arrow keys, etc. So a single click to select a row, double-click to edit, etc.

              --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
              >
              > http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html
              >
              > See towards the end of the page, listening to cellClickEvent on the main
              > DataTable, it reads the master record contents and pops up the secondary
              > table using data from that row to build the secondary table(s).
              >
              > For XHR you could actually use my requery method:
              >
              > http://www.satyam.com.ar/yui/2.8.0/requery.html
              >
              > (please, do read the warnings, it doesn't always work)
              >
              > Satyam
              >
              > El 30/12/2009 13:35, bradkieser escribió:
              > >
              > >
              > > Hi all,
              > >
              > > I am looking for an example linking one data table to another. I have
              > > two scrolling data tables and I use XHRDataSource for both.
              > >
              > > In the first one, the client maintains master records.
              > >
              > > In the second table the details for the current selected master row is
              > > displayed.
              > >
              > > So, for example, table *accounts* I have implemented CRUD (following
              > > Satyam's excellent ideas) and in table *messages* I want to display
              > > the message log whichever client account is presently selected.
              > >
              > > If the user selects another client in *accounts* then the *messages*
              > > table should refresh from the back end accordingly.
              > > If the user deletes a client in *accounts* then the back end will
              > > remove the records accordingly and the *accounts* table then selects
              > > the next record down and forces a corresponding reload of *messages*.
              > > If the user inserts a client then the *messages* table is obviously
              > > blank until the log gets entries in it.
              > >
              > > There is also a CRUD implementation on *messages*.
              > >
              > > Both DataTables work fine independently. But my problem is how to
              > > implement the master-detail link.
              > >
              > > Has anyone done this? I can't find any examples that show this in
              > > action. Hope I haven't missed something obvious!
              > >
              > >
              > >
              > >
              > >
              > >
              > > No virus found in this incoming message.
              > > Checked by AVG - www.avg.com
              > > Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
              > >
              > >
              >
            • Satyam
              You can use all sorts of alternate events, context (popup) menues or add an extra column with no data associated and an icon to show detail. Instead of just
              Message 6 of 7 , Dec 30, 2009
              • 0 Attachment
                You can use all sorts of alternate events, context (popup) menues or add an extra column with no data associated and an icon to show detail. 

                Instead of just blindly show the editor, if the column clicked is the one corresponding to the icon, you show the details, otherwise, you show the editor.  Note it doesn't matter what is it that you put in that column, icon, brackground image, text, just by the key of the column the click event listener would know. 

                Or you can have click for detail, double click for edit. That is the way that a regular file explorer works: click to open and see the folder contents, double click to rename.

                Satyam

                El 30/12/2009 15:47, bradkieser escribió:
                Thanks Satyam!
                I didn't find those in my searching. Much appreciated.
                
                Only problem with making it activated on any click is that, of course, that will kill the ability to click and edit. I was thinking that the events could be chained but then you are ALWAYS going to be editing when you click to view details.
                
                So possibly using this with a column specifically to show is the best. It's a pity that we don't have a table cursor, a highlight, that shows the currently selected row and allows "usual" scrolling as per real PC apps using the arrow keys, etc. So a single click to select a row, double-click to edit, etc.
                
                --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  
                http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html
                
                See towards the end of the page, listening to cellClickEvent on the main 
                DataTable, it reads the master record contents and pops up the secondary 
                table using data from that row to build the secondary table(s).
                
                For XHR you could actually use my requery method:
                
                http://www.satyam.com.ar/yui/2.8.0/requery.html
                
                (please, do read the warnings, it doesn't always work)
                
                Satyam
                
                El 30/12/2009 13:35, bradkieser escribió:
                    
                
                Hi all,
                
                I am looking for an example linking one data table to another. I have 
                two scrolling data tables and I use XHRDataSource for both.
                
                In the first one, the client maintains master records.
                
                In the second table the details for the current selected master row is 
                displayed.
                
                So, for example, table *accounts* I have implemented CRUD (following 
                Satyam's excellent ideas) and in table *messages* I want to display 
                the message log whichever client account is presently selected.
                
                If the user selects another client in *accounts* then the *messages* 
                table should refresh from the back end accordingly.
                If the user deletes a client in *accounts* then the back end will 
                remove the records accordingly and the *accounts* table then selects 
                the next record down and forces a corresponding reload of *messages*.
                If the user inserts a client then the *messages* table is obviously 
                blank until the log gets entries in it.
                
                There is also a CRUD implementation on *messages*.
                
                Both DataTables work fine independently. But my problem is how to 
                implement the master-detail link.
                
                Has anyone done this? I can't find any examples that show this in 
                action. Hope I haven't missed something obvious!
                
                
                
                
                
                
                No virus found in this incoming message.
                Checked by AVG - www.avg.com
                Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
                
                
                      
                    
                
                
                
                ------------------------------------
                
                Yahoo! Groups Links
                
                <*> To visit your group on the web, go to:
                    http://groups.yahoo.com/group/ydn-javascript/
                
                <*> Your email settings:
                    Individual Email | Traditional
                
                <*> To change settings online go to:
                    http://groups.yahoo.com/group/ydn-javascript/join
                    (Yahoo! ID required)
                
                <*> To change settings via email:
                    ydn-javascript-digest@yahoogroups.com 
                    ydn-javascript-fullfeatured@yahoogroups.com
                
                <*> To unsubscribe from this group, send an email to:
                    ydn-javascript-unsubscribe@yahoogroups.com
                
                <*> Your use of Yahoo! Groups is subject to:
                    http://docs.yahoo.com/info/terms/
                  
                No virus found in this incoming message. Checked by AVG - www.avg.com Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
              • bradkieser
                I think that the double-click paradigm is probably the best because it s the most familiar with users already.
                Message 7 of 7 , Dec 30, 2009
                • 0 Attachment
                  I think that the double-click paradigm is probably the best because it's the most familiar with users already.

                  --- In ydn-javascript@yahoogroups.com, Satyam <satyam@...> wrote:
                  >
                  > You can use all sorts of alternate events, context (popup) menues or add
                  > an extra column with no data associated and an icon to show detail.
                  >
                  > Instead of just blindly show the editor, if the column clicked is the
                  > one corresponding to the icon, you show the details, otherwise, you show
                  > the editor. Note it doesn't matter what is it that you put in that
                  > column, icon, brackground image, text, just by the key of the column the
                  > click event listener would know.
                  >
                  > Or you can have click for detail, double click for edit. That is the way
                  > that a regular file explorer works: click to open and see the folder
                  > contents, double click to rename.
                  >
                  > Satyam
                  >
                  > El 30/12/2009 15:47, bradkieser escribió:
                  > > Thanks Satyam!
                  > > I didn't find those in my searching. Much appreciated.
                  > >
                  > > Only problem with making it activated on any click is that, of course, that will kill the ability to click and edit. I was thinking that the events could be chained but then you are ALWAYS going to be editing when you click to view details.
                  > >
                  > > So possibly using this with a column specifically to show is the best. It's a pity that we don't have a table cursor, a highlight, that shows the currently selected row and allows "usual" scrolling as per real PC apps using the arrow keys, etc. So a single click to select a row, double-click to edit, etc.
                  > >
                  > > --- In ydn-javascript@yahoogroups.com, Satyam<satyam@> wrote:
                  > >
                  > >> http://www.satyam.com.ar/yui/2.6.0/TableWithDetails.html
                  > >>
                  > >> See towards the end of the page, listening to cellClickEvent on the main
                  > >> DataTable, it reads the master record contents and pops up the secondary
                  > >> table using data from that row to build the secondary table(s).
                  > >>
                  > >> For XHR you could actually use my requery method:
                  > >>
                  > >> http://www.satyam.com.ar/yui/2.8.0/requery.html
                  > >>
                  > >> (please, do read the warnings, it doesn't always work)
                  > >>
                  > >> Satyam
                  > >>
                  > >> El 30/12/2009 13:35, bradkieser escribió:
                  > >>
                  > >>>
                  > >>> Hi all,
                  > >>>
                  > >>> I am looking for an example linking one data table to another. I have
                  > >>> two scrolling data tables and I use XHRDataSource for both.
                  > >>>
                  > >>> In the first one, the client maintains master records.
                  > >>>
                  > >>> In the second table the details for the current selected master row is
                  > >>> displayed.
                  > >>>
                  > >>> So, for example, table *accounts* I have implemented CRUD (following
                  > >>> Satyam's excellent ideas) and in table *messages* I want to display
                  > >>> the message log whichever client account is presently selected.
                  > >>>
                  > >>> If the user selects another client in *accounts* then the *messages*
                  > >>> table should refresh from the back end accordingly.
                  > >>> If the user deletes a client in *accounts* then the back end will
                  > >>> remove the records accordingly and the *accounts* table then selects
                  > >>> the next record down and forces a corresponding reload of *messages*.
                  > >>> If the user inserts a client then the *messages* table is obviously
                  > >>> blank until the log gets entries in it.
                  > >>>
                  > >>> There is also a CRUD implementation on *messages*.
                  > >>>
                  > >>> Both DataTables work fine independently. But my problem is how to
                  > >>> implement the master-detail link.
                  > >>>
                  > >>> Has anyone done this? I can't find any examples that show this in
                  > >>> action. Hope I haven't missed something obvious!
                  > >>>
                  > >>>
                  > >>>
                  > >>>
                  > >>>
                  > >>>
                  > >>> No virus found in this incoming message.
                  > >>> Checked by AVG - www.avg.com
                  > >>> Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
                  > >>>
                  > >>>
                  > >>>
                  > >>
                  > >
                  > >
                  > >
                  > > ------------------------------------
                  > >
                  > > Yahoo! Groups Links
                  > >
                  > >
                  > >
                  > >
                  > >
                  > >
                  > > No virus found in this incoming message.
                  > > Checked by AVG - www.avg.com
                  > > Version: 9.0.722 / Virus Database: 270.14.123/2593 - Release Date: 12/29/09 20:14:00
                  > >
                  > >
                  >
                Your message has been successfully submitted and would be delivered to recipients shortly.