We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. Vue
  4. Default values in DDP cell

Default values in DDP cell

Is it possible to set default values to "DDP in cell" control  even when the grid is empty?
For example, If I delete all the rows (you can verify next link) and then I press "Add", the ddl has no options.


In my case user needs to fill up an empty grid.


Btw,,please check next behaviour.

- Delete all the rows one by one
- Add a new row 
- Press update
- Delete this new line 

Grid shows loading symbol forever. Dunno if is my chrome or what.
Anyway mi chrome is Version 73.0.3683.86 (Official Build) (64-bit)

Thanks!

3 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team October 4, 2019 11:01 AM UTC

Hi Carlos, 
 
Greetings from Syncfusion support. 
 
Query – 1: “Set default values to grid cells on adding new record” 
 
You can set default values in the grid cells to be displayed on adding new record by using the defaultValue property of the grid columns. This is demonstrated in below sample code, 
 
<ejs-grid :editSettings='editSettings'> 
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' defaultValue=1 textAlign='Right' :isPrimaryKey='true' width=100></e-column> 
            <e-column field='CustomerID' defaultValue='VINET' headerText='Customer ID' width=120></e-column> 
        </e-columns> 
</ejs-grid> 
 
The values set in defaultValue property will be displayed when a new record is added. 
 
Also for maintaining the data in dropdown for the dropdownlist edit type, you can use the editTemplate property of the grid column to render a dropdownlist with datasource which will be maintained even if the grid has no records. This is demonstrated in the below sample code, 
 
<ejs-grid :editSettings='editSettings'> 
        <e-columns> 
            <e-column field='ShipCountry' headerText='Ship Country' :editTemplate='editTemplate' width=150></e-column> 
        </e-columns> 
    </ejs-grid> 
 
<script> 
export default { 
    methods: { 
        editTemplate: function() { 
            return { 
                template: Vue.component('dropDownList', { 
                    // Dropdownlist rendering code with datasource and default value specified 
                    template: `<ejs-dropdownlist id='dropdownlist' value='France' :dataSource='this.datasource'></ejs-dropdownlist>`, 
                    data() { 
                        return { 
                            // Data for the dropdownlist 
                            datasource: ['Austria', 'Brazil', 'Belgium', 'Finland', 'France', 'Germany', 'Italy', 'Mexico', 'Spain', 'Sweden', 'Switzerland', 'UK', 'USA', 'Venezuela'] 
                        } 
                    } 
                }) 
            } 
        } 
    } 
} 
</script> 
 
Query – 2: “Grid keeps on showing loading symbol” 
 
We checked this query and suspect you are trying to update the record without specifying value in OrderID column. The OrderID column is set as the primary key column and only based on this value the CRUD operations are performed in the grid and so if this column is not set then issue will occur. You can resolve this by setting validation rules for this column so that it will not be possible to update the record without specifying this column value. This is demonstrated in the below sample code, 
 
<ejs-grid :editSettings='editSettings'> 
    <e-columns> 
        <e-column field='OrderID' :validationRules='validationRules' headerText='Order ID' defaultValue=1 textAlign='Right' :isPrimaryKey='true' width=100></e-column> 
    </e-columns> 
</ejs-grid> 
 
<script> 
export default { 
    data() { 
        return { 
            data: data, 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 
            validationRules: { required: true } 
        }; 
    }, 
} 
</script> 
 
We have prepared a sample for your reference based on the above queries. You can find it below, 
 
 
Regards, 
Thavasianand S. 


CA Carlos Alarcon October 8, 2019 02:37 AM UTC

Awesome!! it worked...but another question.

<ejs-grid :editSettings='editSettings'  :dataSource='data'>
        <e-columns> 
            <e-column field='OrderID' headerText='Order ID' defaultValue=1 textAlign='Right' :isPrimaryKey='true'width=100></e-column> 
            <e-column field='CustomerID' defaultValue='VINET' headerText='Customer ID' width=120></e-column> 
        </e-columns> 
</ejs-grid> 

<script> 
export default { 
    methods: { 
        editTemplate: function() { 
            return { 
                template: Vue.component('dropDownList', { 
                    // Dropdownlist rendering code with datasource and default value specified 
                    template: `<ejs-dropdownlist id='dropdownlist' value='France' :dataSource='this.datasource'></ejs-dropdownlist>`, 
                    data() { 
                        return { 
                            // Data for the dropdownlist 
                            datasource: ['Austria', 'Brazil', 'Belgium', 'Finland', 'France', 'Germany', 'Italy', 'Mexico', 'Spain','Sweden', 'Switzerland', 'UK', 'USA', 'Venezuela'] 
                        } 
                    } 
                }) 
            } 
        } 
    } 
} 
</script> 

Sometimes I have the value and sometimes don't, because we saved temporary the values the user inputs during the day. So, in case of 
having the value,
How can I set the value which comes from data property for that specific row?
In this example is hardcoded to "France".

Many thanks again :)



TS Thavasianand Sankaranarayanan Syncfusion Team October 8, 2019 11:51 AM UTC

Hi Carlos, 
 
Query: How can I set the value which comes from data property for that specific row? 
 
You can achieve your requirement by using v-model directive. Refer the below code snippets and sample for your reference. 
 
[code snippets] 
... 
 
<script> 
... 
Vue.use(DropDownListPlugin); 
export default { 
  ... 
 methods: { 
    editTemplate: function() { 
      return { 
        template: Vue.component("dropDownList", { 
          template: `<ejs-dropdownlist id='dropdownlist' v-model="data.CustomerID" :dataSource='this.customerData'></ejs-dropdownlist>`, 
          data() { 
            return { 
              data: {}, 
              customerData: [ 
                "VINET", 
                ... 
             ] 
            }; 
          } 
        }) 
      }; 
    } 
  } 
}; 
</script> 
 

Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon