Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    ListGrid question/problem

    I have an interesting problem. I have a listgrid with two columns (say col1 and col2). Col1 is a select list and the dropdown values for col2 depend on the attribute (say datatype) of col1. So the col2 dropdown values are not static. Is that possible to use ListGrid in that situation?

    Sample data:

    Row# Col1 Col2
    ==== ========== =================
    1 - State - List of states dropdown
    2 - Branch - List of branches

    How do I change the valueMap of column 2 for each row?
    Last edited by sujaydutta; 3 Oct 2009, 09:15.

    #2
    Actually what I am looking for is a listgrid that looks/behaves exactly like
    FilterBuilder, where the third column is dependent on the first column. Is that possible?

    http://www.smartclient.com/smartgwt/...filter_builder
    Attached Files

    Comment


      #3
      See the Dependent Selects example in the showcase (or the DataBound version if your datasets are large).

      Comment


        #4
        But can I use this within a listgrid where the column1's could be different in different rows. Once I set the value map for column 2 in the list grid, it sets it for all the rows for column2 and not specifically for the row I want.

        Comment


          #5
          Take a look at the databound example, and consider also setting ListGridField.optionDataSource - see the docs for what that does.

          Comment


            #6
            That didn't work, so I went with a nifty solution, i.e. each row of data is it's own listgrid. It works beautifully. :)

            Comment


              #7
              The optionDataSource solution definitely works (we've used it for analogous problems). That's the approach to switch back to if you run into performance problems with your dozens of grids.

              Comment


                #8
                Based on your suggestion, I pursed setOptionDataSource and played around with ListGrid (adapting the Databound Dependent Select). I have two listgrid fields, Country and State which I am populating using setOptionDataSource. I am able to see the dropdown data populated during run time, however the State dropdown shows all values and does not filter based on the Country. I expect the States to show only the valid States for the Country during initial page rendering and also when Country is changed. What am I missing? Here's the complete source code. Appreciate the help in advance!

                Code:
                package com.sujay.client;
                
                import com.google.gwt.core.client.EntryPoint;
                import com.smartgwt.client.data.Criteria;
                import com.smartgwt.client.data.DataSource;
                import com.smartgwt.client.data.Record;
                import com.smartgwt.client.data.fields.DataSourceTextField;
                import com.smartgwt.client.widgets.grid.ListGrid;
                import com.smartgwt.client.widgets.grid.ListGridField;
                import com.smartgwt.client.widgets.grid.ListGridRecord;
                public class DependentSelect implements EntryPoint {
                
                	public void onModuleLoad() {
                		DataSource countryDS = new CountryDataSource("countryDS");
                		DataSource stateDS = new StateDataSource("stateDS");
                		
                		ListGrid listGrid = new ListGrid();
                		listGrid.setWidth100();
                
                		final ListGridField country = new ListGridField();
                		country.setOptionDataSource(countryDS);
                		country.setTitle("Country");
                		country.setName("countryCode");
                		country.setDisplayField("countryName");
                		
                		ListGridField state = new ListGridField() {  
                            protected Criteria getPickListFilterCriteria() {  
                                String countryVal = (String) country.getValueField();  
                                Criteria criteria = new Criteria("stateCountryCode", countryVal);  
                                return criteria;  
                            }  
                        };  		
                		state.setOptionDataSource(stateDS);
                		state.setTitle("State");
                		state.setName("stateCode");
                		state.setDisplayField("stateName");
                
                		listGrid.setFields(country, state);
                		listGrid.setShowAllRecords(true); 
                		listGrid.setAutoFetchData(true);  
                		listGrid.setCanEdit(true);
                
                		// Render initial data to the grid with two rows
                		ListGridRecord record = new ListGridRecord();
                		record.setAttribute("countryCode", "USA");
                		record.setAttribute("stateCode", "PA");
                		record.setAttribute("stateCountryCode", "USA");
                		listGrid.addData(record);
                
                		record = new ListGridRecord();
                		record.setAttribute("countryCode", "IND");
                		record.setAttribute("stateCode", "DEL");
                		record.setAttribute("stateCountryCode", "IND");
                		listGrid.addData(record);
                		
                		listGrid.show();
                	}
                
                	// Country Data Store
                	class CountryDataSource extends DataSource {
                	    public CountryDataSource(String id) {
                	          setClientOnly(true);
                
                	          setID(id); 
                	          DataSourceTextField countryCode = new DataSourceTextField("countryCode");
                	          countryCode.setPrimaryKey(true);
                	          
                	          DataSourceTextField countryName = new DataSourceTextField("countryName");
                
                	          setFields(countryCode, countryName);  
                	          
                	          // Populate Country DataSource via RPC or Cached data 
                	          Record record = new Record();
                	          record.setAttribute("countryCode", "USA");
                	          record.setAttribute("countryName", "United States of America");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("countryCode", "IND");
                	          record.setAttribute("countryName", "India");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("countryCode", "FRA");
                	          record.setAttribute("countryName", "France");
                	          this.addData(record);
                	    }
                	}
                
                	// State DataSource
                	class StateDataSource extends DataSource {
                	    public StateDataSource(String id) {
                	          setClientOnly(true);
                
                	          setID(id); 
                	          DataSourceTextField stateCode = new DataSourceTextField("stateCode"); 
                	          stateCode.setPrimaryKey(true);
                	          
                	          DataSourceTextField stateName = new DataSourceTextField("stateName");
                	          DataSourceTextField stateCountryCode = new DataSourceTextField("stateCountryCode");
                	          stateCountryCode.setForeignKey("countryDS.countryCode");
                	          
                	          setFields(stateCode, stateName, stateCountryCode);  
                
                	          // Populate State DataSource via RPC or Cached data 
                	          Record record = new Record();
                	          record.setAttribute("stateCode", "PA");
                	          record.setAttribute("stateName", "Pennsylvania");
                	          record.setAttribute("stateCountryCode", "USA");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("stateCode", "MA");
                	          record.setAttribute("stateName", "Massacheusets");
                	          record.setAttribute("stateCountryCode", "USA");
                	          record = new Record();
                	          record.setAttribute("stateCode", "NY");
                	          record.setAttribute("stateName", "New York");
                	          record.setAttribute("stateCountryCode", "USA");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("stateCode", "KAR");
                	          record.setAttribute("stateName", "Karnataka");
                	          record.setAttribute("stateCountryCode", "IND");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("stateCode", "DEL");
                	          record.setAttribute("stateName", "New Delhi");
                	          record.setAttribute("stateCountryCode", "IND");
                	          this.addData(record);
                	          record = new Record();
                	          record.setAttribute("stateCode", "WB");
                	          record.setAttribute("stateName", "West Bengal");
                	          record.setAttribute("stateCountryCode", "IND");
                	          this.addData(record);
                	    }
                	} 
                
                }

                Comment


                  #9
                  It looks like you just sort of made up your own fictitious getPickListCriteria override point? That doesn't exist. Look at the sample.

                  Comment


                    #10
                    Oh didn't realize there was a dependent select example for the grid. I was following the example for the combobox. :)

                    Here's the updated example. The dependent select works now, however there are two problems:

                    1) The State dropdown doesn't show the state name, it show the state code. I have specified setDisplayField() for the selectItem. The Country listgridfield is showing the country name correctly.
                    2) When Country is changed, the existing state value is not cleared, the dropdown is filtered though.

                    Second set of eyes appreciated.

                    Code:
                    package com.sujay.client;
                    
                    import com.google.gwt.core.client.EntryPoint;
                    import com.smartgwt.client.data.Criteria;
                    import com.smartgwt.client.data.DataSource;
                    import com.smartgwt.client.data.Record;
                    import com.smartgwt.client.data.fields.DataSourceTextField;
                    import com.smartgwt.client.widgets.form.fields.FilterCriteriaFunction;
                    import com.smartgwt.client.widgets.form.fields.SelectItem;
                    import com.smartgwt.client.widgets.grid.ListGrid;
                    import com.smartgwt.client.widgets.grid.ListGridField;
                    import com.smartgwt.client.widgets.grid.ListGridRecord;
                    import com.smartgwt.client.widgets.grid.events.ChangedEvent;
                    import com.smartgwt.client.widgets.grid.events.ChangedHandler;
                    public class DependentSelect implements EntryPoint {
                    
                    	public void onModuleLoad() {
                    		DataSource countryDS = new CountryDataSource("countryDS");
                    		DataSource stateDS = new StateDataSource("stateDS");
                    		
                    		final ListGrid listGrid = new ListGrid();
                    		listGrid.setWidth100();
                    		listGrid.setCanEdit(true);
                    		
                    		// Country Field
                    		final ListGridField countryField = new ListGridField("countryCode", "Country"); //name, title
                    		countryField.setOptionDataSource(countryDS);
                    		countryField.setDisplayField("countryName");
                    		countryField.addChangedHandler(new ChangedHandler() {  
                                public void onChanged(ChangedEvent event) {  
                                    listGrid.clearEditValue(event.getRowNum(), "stateCode");  
                                }  
                            });  
                    		
                            // State Field
                    		ListGridField stateField = new ListGridField("stateCode", "State"); //name, title
                            
                    		SelectItem stateSelectItem = new SelectItem();  
                    		stateSelectItem.setOptionDataSource(stateDS);  
                    		stateSelectItem.setDisplayField("stateName");
                    		stateSelectItem.setPickListFilterCriteriaFunction(new FilterCriteriaFunction() {  
                                public Criteria getCriteria() {  
                                    String countryCode = (String) listGrid.getEditedCell(listGrid.getEditRow(), "countryCode");  
                                    return new Criteria("stateCountryCode", countryCode);  
                                }  
                            });  
                    		stateField.setEditorType(stateSelectItem);  
                    
                    		listGrid.setFields(countryField, stateField);
                    		listGrid.setShowAllRecords(true); 
                    		listGrid.setAutoFetchData(true);  
                    		
                    		// Render initial data to the grid with three rows
                    		ListGridRecord record = new ListGridRecord();
                    		record.setAttribute("countryCode", "USA");
                    		record.setAttribute("stateCode", "PA");
                    		listGrid.addData(record);
                    
                    		record = new ListGridRecord();
                    		record.setAttribute("countryCode", "IND");
                    		record.setAttribute("stateCode", "DEL");
                    		listGrid.addData(record);
                    		
                    		listGrid.show();
                    	}
                    
                    	// Country Data Store
                    	class CountryDataSource extends DataSource {
                    	    public CountryDataSource(String id) {
                    	          setClientOnly(true);
                    
                    	          setID(id); 
                    	          DataSourceTextField countryCode = new DataSourceTextField("countryCode");
                    	          countryCode.setPrimaryKey(true);
                    	          
                    	          DataSourceTextField countryName = new DataSourceTextField("countryName");
                    
                    	          setFields(countryCode, countryName);  
                    	          
                    	          // Populate Country DataSource via RPC or Cached data 
                    	          Record record = new Record();
                    	          record.setAttribute("countryCode", "USA");
                    	          record.setAttribute("countryName", "United States of America");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("countryCode", "IND");
                    	          record.setAttribute("countryName", "India");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("countryCode", "FRA");
                    	          record.setAttribute("countryName", "France");
                    	          this.addData(record);
                    	    }
                    	}
                    
                    	// State DataSource
                    	class StateDataSource extends DataSource {
                    	    public StateDataSource(String id) {
                    	          setClientOnly(true);
                    
                    	          setID(id); 
                    	          DataSourceTextField stateCode = new DataSourceTextField("stateCode"); 
                    	          stateCode.setPrimaryKey(true);
                    	          
                    	          DataSourceTextField stateName = new DataSourceTextField("stateName");
                    	          DataSourceTextField stateCountryCode = new DataSourceTextField("stateCountryCode");
                    	          stateCountryCode.setForeignKey("countryDS.countryCode");
                    	          
                    	          setFields(stateCode, stateName, stateCountryCode);  
                    
                    	          // Populate State DataSource via RPC or Cached data 
                    	          Record record = new Record();
                    	          record.setAttribute("stateCode", "PA");
                    	          record.setAttribute("stateName", "Pennsylvania");
                    	          record.setAttribute("stateCountryCode", "USA");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("stateCode", "MA");
                    	          record.setAttribute("stateName", "Massacheusets");
                    	          record.setAttribute("stateCountryCode", "USA");
                    	          record = new Record();
                    	          record.setAttribute("stateCode", "NY");
                    	          record.setAttribute("stateName", "New York");
                    	          record.setAttribute("stateCountryCode", "USA");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("stateCode", "KAR");
                    	          record.setAttribute("stateName", "Karnataka");
                    	          record.setAttribute("stateCountryCode", "IND");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("stateCode", "DEL");
                    	          record.setAttribute("stateName", "New Delhi");
                    	          record.setAttribute("stateCountryCode", "IND");
                    	          this.addData(record);
                    	          record = new Record();
                    	          record.setAttribute("stateCode", "WB");
                    	          record.setAttribute("stateName", "West Bengal");
                    	          record.setAttribute("stateCountryCode", "IND");
                    	          this.addData(record);
                    	    }
                    	} 
                    }
                    Last edited by sujaydutta; 3 Oct 2009, 12:39.

                    Comment


                      #11
                      Ok I switched some code around and now the State Name shows up correctly, basically assigned the dataSource to the listgridfield instead of the select item. Is there any way to apply the Criteria to the listgridfield directly without using the selectitem?

                      The State listgridfield still doesn't clear when Country is changed.

                      Code:
                      // State Field
                      		ListGridField stateField = new ListGridField("stateCode", "State"); //name, title
                      		stateField.setOptionDataSource(stateDS);  
                      		stateField.setDisplayField("stateName");
                      
                      		SelectItem stateSelectItem = new SelectItem(); 
                      		stateSelectItem.setPickListFilterCriteriaFunction(new FilterCriteriaFunction() {  
                                  public Criteria getCriteria() {  
                                      String countryCode = (String) listGrid.getEditedCell(listGrid.getEditRow(), "countryCode");  
                                      return new Criteria("stateCountryCode", countryCode);  
                                  }  
                              });  
                      		stateField.setEditorType(stateSelectItem);

                      Comment


                        #12
                        This again differs from the example code. To do what you want to do, all you need to do is follow the example. If you're curious about what other properties do, read the docs for those properties.

                        Comment


                          #13
                          No actually I am following the remote grid example (http://www.smartclient.com/smartgwt/showcase/#grid_editing_dependent_selects) and my stateField code mimics itemField from the code. The only reason I assigned the optiondatasource to the listgrid field instead of select was because I wanted to display the StateName field instead of StateCode.

                          BTW, even in the remote grid example, the dependent Item dropdown does not clear when Category is changed. Try adding a new order item, select a Category and Item, then change the Category, you can see that the old Item value is still displayed in the Item field eventhough the dropdown gets refreshed with new values. So there's something missing even in the example code. Any pointers to get this working is appreciated.

                          Comment


                            #14
                            If it's appropriate that the value is cleared you can clear it with setEditValue() from the Changed event. Again, setting optionDataSource on the ListGridField has a very different behavior from setting in on a SelectItem or ComboBoxItem - see the docs.

                            Comment

                            Working...
                            X