4 Replies Latest reply on Jun 6, 2011 7:41 PM by kragoth

    editable datatable with dependent dropdowns

    gebuh

      I have a timecard like page.  On load it shows 7 days each day can have any number of tasks that can be added, edited or deleted.  Each row entry consists of 2 dropdowns (the 2nd is dependent on the 1st) and several unput text boxes for user added data. 


      Ideally I'd like to be able to do any changes in place (currently we're using a modal panel, so you add a task and a modal pops up, you fill out the form and save or cancel).


      Currently there are separate components for every day, so any changes must be made 7 times.  I want to implement this as a single datatable with an enum for the days(corresponding date comes from the database) and a subtable with the individual tasks for that day.
      Can I reasonably do this in place?  If so, how?  How do I tie editing to a particular entry? (so if I hit the add/delete button, how do I edit the correct entry?)
      Does anyone know of any good examples for this?

        • 1. Re: editable datatable with dependent dropdowns
          gebuh

          anybody?

          • 2. Re: editable datatable with dependent dropdowns
            kragoth

            I'm not sure I understand what you are trying to do but, when I see questions like:


            How do I tie editing to a particular entry? 
            



            I think that maybe you are over complicating the problem. The value and var attribute of a datatable is all that you need to tie each row to an individual entity.


            You may need to build DTOs for this rather then binding directly to your entities. This is purely to make it easier to build the table but, I honestly can't make a real judgement on this as I really am not sure what you are trying to do. I know you explained it but I'm having a hard time formulating what it would look like. :)


            So, I think the answer is yes most likely you can do this. However, I can't think of an example I could link to that would help you with your situation.


            Best thing to do is experiment. Small basic steps that will prove the concept for your actual goal.

            • 3. Re: editable datatable with dependent dropdowns
              gebuh

              I'm stuck on the small basic steps though.
              I created an enum to hold the days of the week paired with the date (user can select the current or previous week, so I need to be able to differentiate them)




              public enum DaysOfTheWeek {
                        SATURDAY(0), 
                        SUNDAY(1), 
                        MONDAY(2), 
                        TUESDAY(3), 
                        WEDNESDAY(4), 
                        THURSDAY(5), 
                        FRIDAY(6);
                        private Date date;
                        private int dayOfWeek;
                        private TqiWeeksV selectedWeek;
                        
                        private DaysOfTheWeek(int dayOfWeek) {
                             selectedWeek = ((TqiDashboardSearchAction)Component.getInstance("tqiDashboardSearchAction")).getWeekSelected();
                             this.date = new Date(selectedWeek.getStartDate().getTime() + dayOfWeek * 24 * 60 * 60 * 1000);
                             this.dayOfWeek = dayOfWeek;
                        }
              
                        public Date getDate() {
                             return date;
                        }
              
                        public int getDayOfWeek() {
                             return dayOfWeek;
                        }
              
                        public TqiWeeksV getSelectedWeek() {
                             return selectedWeek;
                        }
                        
                   
                   }




              Created a datatable for daysOfTheWeek:




              <rich:dataTable id="daysOfWeek" var="_daysOfWeek" value="#{daysOfTheWeek}">
                <h:column>
                  <f:facet name="header">
                   <h:outputText value="Work Date"/>
                  </f:facet>
                  <h:outputText value="#{_daysOfWeek.toString()}" />
                   #{''}
                  <h:outputText value="#{_daysOfWeek.date}" />  
                     <a:outputPanel id="outP" ajaxRendered="true" >
                        <s:div id="subPnl" rendered="true" >
                          <rich:dataTable value="#{tqiTasks}"
                               var="_tqiTask"
                               rendered="#{not empty tqiTasks}"
                               rowClasses="rvgRowOne,rvgRowTwo"
                                id="tqiTasksTable" > 
                            <rich:column > 
                        <f:facet name="header">
                                  <h:outputText value="Facility"/>
                              </f:facet>
                        <h:selectOneMenu value="#{_tqiTask.facility}" > 
                        <s:selectItems var="_facilities" value="#{empFacilityList}"
                          label="#{_facilities.facilityId}" noSelectionLabel="" />            <s:convertEntity/> 
                          </h:selectOneMenu>                
                            </rich:column>
              *more columns ....*
                          </rich:dataTable> 
                          </s:div> 
                          </a:outputPanel> 
               </h:column>
              </rich:dataTable> 



              When I run this I get 7 days with the same data repeated,
              first problem:  I need to set the date for each day in the resultant query so that sunday has tasks only for sunday, etc.
              so the var "#{tqiTasks}" should return "#{tqiTasks for _daysOfWeek}"


              I'm not exactly sure how to do that.

              • 4. Re: editable datatable with dependent dropdowns
                kragoth

                OK, I think I have an idea of what you are trying to do so I'll try give some input that will get you there.


                Please note, the code I am about to write is COMPLETELY untested and is meant to just get you on the right track.


                For starters, putting logic inside the enum class is probably not the best idea and completely unnecessary from what I can tell in your situation.


                So, keep your enum simple.


                public enum DaysOfTheWeek {
                          SATURDAY(0), 
                          SUNDAY(1), 
                          MONDAY(2), 
                          TUESDAY(3), 
                          WEDNESDAY(4), 
                          THURSDAY(5), 
                          FRIDAY(6);
                          private int dayOfWeek;
                          
                          private DaysOfTheWeek(int dayOfWeek) {
                               this.dayOfWeek = dayOfWeek;
                          }
                
                          public int getDayOfWeek() {
                               return dayOfWeek;
                          }
                     
                }
                



                So now we move the dayOfWeek logic to a Seam bean.


                @Name("MyBean")
                public class MyBean {
                
                    @In(value="tqiDashboardSearchAction")
                    private TqiDashboardSearchAction tqiDash;
                
                    public Date getDayOfWeek(DaysOfTheWeek enumSelected) {
                        TqiWeeksV selectedWeek = tqiDash.getWeekSelected(); //There is a better way of doing this but..this will do for now.
                        return new Date(selectedWeek.getStartDate().getTime() + enumSelected.getDayOfWeek() * 24 * 60 * 60 * 1000);
                    }
                
                    public List<Date> getDaysOfTheWeek() {
                        TqiWeeksV selectedWeek = tqiDash.getWeekSelected();
                        //generate the list of days of the week based on selected week as you already do somewhere??
                        return list; 
                    }
                
                    public List<TqiTask> generateTasksForDayOfWeek(Date dayOfWeek) {
                        //You need to generate your list of tasks based on the day of the week passed in.
                    }
                }
                



                So now the xhtml.


                <rich:dataTable id="daysOfWeek" var="_daysOfWeek" value="#{MyBean.daysOfTheWeek}">
                <h:column>
                    <f:facet name="header">
                        <h:outputText value="Work Date"/>
                    </f:facet>
                    <h:outputText value="#{_daysOfWeek.toString()}" />
                    <a:outputPanel id="outP" ajaxRendered="true" >
                        <s:div id="subPnl" rendered="true" >
                            <rich:dataTable 
                                value="#{MyBean.generateTasksForDayOfWeek(_daysOfWeek)}"
                                var="_tqiTask"
                                rendered="#{not empty tqiTasks}"
                                rowClasses="rvgRowOne,rvgRowTwo"
                                id="tqiTasksTable" > 
                                <rich:column > 
                                    <f:facet name="header">
                                        <h:outputText value="Facility"/>
                                    </f:facet>
                                    <h:selectOneMenu value="#{_tqiTask.facility}" > 
                                        <s:selectItems
                                            var="_facilities"
                                            value="#{empFacilityList}"
                                            label="#{_facilities.facilityId}" 
                                            noSelectionLabel="" />
                                        <s:convertEntity/> 
                                    </h:selectOneMenu>                
                                </rich:column>
                                *more columns ....*
                            </rich:dataTable> 
                        </s:div> 
                    </a:outputPanel> 
                </h:column>
                </rich:dataTable> 
                



                Now I think that pretty much gives you the idea how I'd go about solving the problem. There's probably a number of mistakes as I've written this all off the top of my head without too much thought. But, hopefully you can see what I'm trying to do.


                I'll try help with any more questions you post here but I'm not on every day. :)