Announcement

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

    Changing width of ListGrid

    I read in the documentation that changing width of List Grid requires creating a each formitem in the JavaScript code. What if my List Grid gets its from an dataSource/xml file? Would I still have to create the items in the JavaScript to change the width of ListGrid columns?

    How do I safely change the the list grid column width separately from the form input box items.

    My xml/dataSource files currently look like this and it changes strictly the form input box.

    <fields>
    <field name="adj_type" type="integer" format="#0" width="40" title="AdjustmentType" primaryKey="true" />
    <field name="adj_desc" type="text" length="100" width="600" title="Description" />
    <field name="sort_seq" type="integer" format="#0" width="40" title="SortSequence" />
    <field name="is_credit" type="checkbox" title="Credit?" detail="true" />
    <field name="is_actg" type="checkbox" title="Accounting?" detail="true" />
    <field name="gl_map" type="text" length="20" width="180" title="G/L Map" />
    <field name="is_hidden" type="checkbox" title="Hidden?" detail="true" />
    </fields>

    #2
    "width" is not a valid property to set in a .ds.xml file, since multiple different types of DataBoundComponents bind to the same DataSource. That's why it does not appear in the documentation for DataSourceField. Set any widths in the DataBoundComponent definition instead, for example, in the fields you provide to a DynamicForm or ListGrid (see the Data Binding chapter of the QuickStart Guide if this is unfamiliar).

    We have no idea what documentation you might be referring to when you say that "changing width of List Grid requires creating a each formitem in the JavaScript code". This is not true. To take a guess, you might have read something about how dynamically resizing a ListGrid column will cause some FormItems to re-render their HTML, but this is not re-creating the FormItem, it's just new HTML to reflect the new size.

    Further, we're not clear what you are worried about in the first place - performance? Something else?

    Comment


      #3
      At the moment its actually accomplishing what I need which is changing the form item input box which is why I am kind of confused.
      Click image for larger version

Name:	a.PNG
Views:	63
Size:	40.6 KB
ID:	261273
      But I am also trying to make the column description in the ListGrid shorter. How will I be able to do that? In the DataBoundComponent?

      Comment


        #4
        What is "the column description in the ListGrid" and what is "shorter" - less wide? See ListGridField.width for a description of how the ListGrid allocates available space among columns.

        Comment


          #5


          I am getting this error in the admin Console. I am aware of not being able to set width in the dataSource but as you can see its been working. I kind of trying to see an example of what the right way would look like.




          I am kind of just confused when setting different widths for each field in the DataBoundComponent (ListGrid) even though my DataBoundComponent data is pulled from our dataSource. My goal is to make input fields different sizes and eventually making (for example column "Description" less wide.)
          Click image for larger versionName:	a.PNGViews:	7Size:	40.6 KBID:	261273


          This is currently my javaScript code. Usally just pulling a dataSource is sufficient to make the listGrid, but customizing it is where I am confused.

          isc.ClassFactory.defineClass("AdjustmentTypesPanel", BaseBodyPanel).addProperties({
          panelTitle: "Adjustment Types",
          dataSource: "rscReacctAdjustmentTypes",

          newButtonProperties: {
          click : function() {
          this.panel.form.getItem("adj_type").setCanEdit(true);
          this.panel.newClicked();
          }
          },
          editButtonProperties: {
          click : function() {
          this.panel.form.getItem("adj_type").setCanEdit(false);
          this.panel.editClicked();
          }
          },
          saveButtonProperties: {
          click: function() {
          this.panel.form.getItem("adj_type").setCanEdit(false);
          this.panel.saveClicked();
          }
          },
          cancelButtonProperties: {
          click: function() {
          this.panel.form.getItem("adj_type").setCanEdit(false);
          this.panel.cancelClicked();
          }
          },
          initWidget : function() {
          this.Super("initWidget", arguments);
          }
          });


          Should I maybe do something like I do on another screen. If so where Do i continue from here?

          listGridDefaults: {
          _constructor: isc.ListGrid,
          width: "100%",
          height: 300,
          minHeight: 125,
          margin: 5,
          showResizeBar: true,
          autoParent: "panelCanvas",
          autoFitFieldWidths: true,
          autoFitWidthApproach: "both",
          showFilterEditor: true,
          dataSource: "rscReacctFiles",
          autoFetchData: true,
          recordClick : function() {
          this.creator.filesRowChanged();
          }
          },

          Comment


            #6
            It is invalid to set widths on DataSourceFields because it will then affect multiple components. That's why you have bizarre widths in your form. It is not supported and will not work, so you need to stop doing that.

            Please revisit the QuickStart Guide, Data Binding chapter. There is an extended explanation, with example code, of how you can set fields on components that inherit DataSource information but provide overrides specific to that component.

            Comment


              #7
              I was able change ListGrid width, but now how do I change the width of input text boxes in the dynamic form?

              myListGridDefaults: {
              _constructor: isc.ListGrid,
              width: 500,
              height: 300,
              minHeight: 125,
              margin: 5,
              showResizeBar: true,
              autoParent: "panelCanvas",
              showFilterEditor: true,
              dataSource: "rscReacctAdjustmentTypes",
              fields:[
              {name:"adj_type", title:"AdjustmentType", width:410,},
              {name:"adj_desc", title:"Description", width:40,},
              ],
              recordClick : function() {
              this.panel.rowChanged();
              }
              },

              newButtonProperties: {
              click : function() {
              this.panel.form.getItem("adj_type").setCanEdit(true);
              this.panel.newClicked();
              }
              },
              editButtonProperties: {
              click : function() {
              this.panel.form.getItem("adj_type").setCanEdit(false);
              this.panel.editClicked();
              }
              },
              saveButtonProperties: {
              click: function() {
              this.panel.form.getItem("adj_type").setCanEdit(false);
              this.panel.saveClicked();
              }
              },
              cancelButtonProperties: {
              click: function() {
              this.panel.form.getItem("adj_type").setCanEdit(false);
              this.panel.cancelClicked();
              }
              },
              formDefaults: {
              _constructor: isc.DynamicForm,
              autoParent: "formContainer",
              dataSource: "rscReacctAdjustmentTypes",
              width: 1,
              height: 1,
              wrapItemTitles: false,
              canEdit: false
              },

              Comment


                #8
                Not sure what more we can add here. The same QuickStart chapter we referred you to addresses forms - it works the same way..

                Comment

                Working...
                X