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
  1. Home
  2. Forum
  3. Vue
  4. Grid edit with daterangepicker

Grid edit with daterangepicker

I want to set a date range and I have created a template for ejs-daterangepicker which works fine:

template: Vue.component('daterangepicker', {
template: `<ejs-daterangepicker id="laycan" format="d/M" placeholder="Laycan" v-model="data.laycan" floatLabelType='Never'></ejs-daterangepicker>`,
data() {
return {
data: {}
}
}
})

Until I save the values. Only the end date is saved and displayed on the grid. I would like to save the dates in array and display the range in format "d/M - d/M" on the grid. How this could be achieved?


11 Replies
BS Balaji Sekar Syncfusion Team January 29, 2020 12:14 PM UTC

Hi Hiski, 
 
Greetings from Syncfusion. 
 
We have validated your query and by default in datarangepicker, the date value contains array of objects(date values). In grid we have handled all the string, date and number values based on the column properties. Likewise, the daterangepicker will return the array of data objects, based on it we supposed to customize the cell values for the respective column. But before that, we supposed to know the structure of the Grid data. So we suggest to provide the following details 
  
  • Grid datasource
  • Code exampe of the Grid
  • data for the respective daterange picker column
 
Regards, 
Balaji Sekar. 


HI Hiski January 29, 2020 04:10 PM UTC

"by default in datarangepicker, the date value contains array of objects(date values)."

This format would be great and also a some way to display it on the grid cell as a text: "day/month - day/month".

...
<e-column field='laycan' headerText='Laycan' width='120' :editTemplate="laycanTemplate"></e-column>
...
laycanTemplate: function() {
return {
template: DateRangePicker
}
},
... 
The DateRangePicker component was included in the previous post.

The "laycan" field could be an array of date objects or array of date strings (both are fine).






BS Balaji Sekar Syncfusion Team January 30, 2020 10:45 AM UTC

Hi Hiski, 
 
Thanks for your update. 
 
Query: This format would be great and also a some way to display it on the grid cell as a text: "day/month - day/month". 
 
Based on your update, we have created a sample. In this sample, the grid OrderDate column contains an array of data values. We have displayed the required format in Grid using queryCellInfo and actionBegin events of the Grid. Find the below code snippets and sample for your reference. 
 
<template> 
    <div class="col-lg-12 control-section"> 
        <ejs-grid ref="grid" id="grid" :dataSource="data" :allowPaging="true" :editSettings="editSettings" :toolbar="toolbar" :actionBegin="actionBegin" :load="load" :queryCellInfo="queryCellInfo"> 
            ... 
               <e-column field="OrderDate" headerText="Order Date" textAlign="Right" :editTemplate="editTemplate" format="yMd" type="date" width="120"></e-column> 
            </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
<script> 
... 
import { Internationalization } from "@syncfusion/ej2-base"; 
 
Vue.use(GridPlugin); 
Vue.use(DateRangePickerPlugin); 
 
var initial; 
export default Vue.extend({ 
  data: () => { 
    return { 
      ... 
     editTemplate: function() { 
        return { 
          template: Vue.component("datePicker", { 
            template: `<ejs-daterangepicker format="d/M" v-model="data.OrderDate"></ejs-daterangepicker>`, 
            data() { 
              return { data: {} }; 
            } 
          }) 
        }; 
      }, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 
    }; 
  }, 
  methods: { 
    actionBegin: function(args) { 
      if (args.requestType === "save") { 
        args.data.OrderDate = document.getElementsByClassName( 
          "e-daterangepicker" 
        )[0].value;    
        initial = true; 
      } 
    }, 
    queryCellInfo: function(args) { 
      if (args.column.field === "OrderDate") { 
        if (!initial) { 
          let intl = new Internationalization(); 
          let d1 = intl.formatDate(new Date(args.data.OrderDate[0]), { 
            format: "d/M" 
          }); 
          let d2 = intl.formatDate(new Date(args.data.OrderDate[1]), { 
            format: "d/M" 
          }); 
          var date = d1 + "-" + d2; 
          args.cell.innerHTML = date;   //render date as required format at initial 
        } else { 
          args.cell.innerHTML = args.data.OrderDate;   //render date after editing 
        } 
      } 
    }, 
    load: function() { 
      initial = false; 
    } 
  }, 
  ... 
}); 
</script> 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


HI Hiski January 30, 2020 03:32 PM UTC

Thank you for the support.

The solution works nicely, until I save the value:

if (args.requestType === "save") { 
        args.data.OrderDate = document.getElementsByClassName( 
          "e-daterangepicker" 
        )[0].value;    
        initial = true; 

OrderDate is now a string (d/M-d/M) and not an array of dates, which I'd like to store in db. If I try to modify the dates with daterangepicker again, it doesn't know the previously selected dates.

Also when saving, I'm sending the data to parent component

eventBus.$emit('dataUpdate', this.$refs.grid.ej2Instances.dataSource);

but the OrderDate parameter was not updated in the dataSource for some reason. 


BS Balaji Sekar Syncfusion Team January 31, 2020 12:05 PM UTC

Hi Hiski, 
 
Thanks for your update. 
 
Query: OrderDate is now a string (d/M-d/M) and not an array of dates 
 
Sorry for the inconvenience. 
 
We have validated your query and we are able to see the reported problem. You can resolve the reported problem by using below way. Now, the OrderDate is an array of dates. Find the below code snippets and sample for your reference. 
 
[code snippets] 
<template> 
    <div class="col-lg-12 control-section"> 
        <ejs-grid ref="grid" 
                  ... 
                 :queryCellInfo="queryCellInfo"> 
            <e-columns> 
                ... 
           </e-columns> 
        </ejs-grid> 
    </div> 
</template> 
<script> 
... 
 
export default Vue.extend({ 
  data: () => { 
    return { 
      dateValue: "", 
      data: data.slice(0, 20), 
      editSettings: { 
        allowEditing: true, 
        allowAdding: true, 
        allowDeleting: true 
      }, 
      editTemplate: function() { 
        return { 
          template: Vue.component("datePicker", { 
            template: `<ejs-daterangepicker format="d/M" v-model="data.OrderDate"></ejs-daterangepicker>`, 
            data() { 
              return { data: {} }; 
            } 
          }) 
        }; 
      }, 
      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 
    }; 
  }, 
  methods: { 
    actionBegin: function(args) { 
      if (args.requestType === "save") {        
        args.data.OrderDate = document.getElementsByClassName( 
          "e-daterangepicker" 
        )[0].ej2_instances[0].value;   //getting date values from daterangepicker instance. Previously we got value from element which is cause 
      } 
    }, 
    queryCellInfo: function(args) { 
      if (args.column.field === "OrderDate") { 
        let intl = new Internationalization(); 
        let d1 = intl.formatDate(new Date(args.data.OrderDate[0]), { 
          format: "d/M" 
        }); 
        let d2 = intl.formatDate(new Date(args.data.OrderDate[1]), { 
          format: "d/M" 
        }); 
        var date = d1 + "-" + d2; 
        args.cell.innerHTML = date; 
      } 
    } 
  }, 
  computed: {}, 
  provide: { 
    grid: [Toolbar, Edit, Page] 
  } 
}); 
</script> 
 
Note: We have removed initial value from previously provided sample(in queryCellInfo event). Refer sample for runnable code. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


HI Hiski February 1, 2020 08:50 AM UTC

It works! Thank you. 

I still have one more problem with the grid daterangepicker edit. In my code if I edit the first/top row the daterangepicker window opens and everything works ok. If I try to edit the next row or following the daterangepicker window is not opening and there is no errors in the console. Do you have idea what could be causing this? In your example it works fine. I'll attach my component if you can spot the problem from the code.

Attachment: daterangepicker_not_opening_2a0e098f.zip

Also I noticed from chrome dev tools that the "e-daterangepicker e-popup" div-element is created when I try to open the daterangepicker, but removed from DOM instantly.

BS Balaji Sekar Syncfusion Team February 3, 2020 10:59 AM UTC

Hi Hiski, 
 
Thanks for your update. 
 
Query:  In my code if I edit the first/top row the daterangepicker window opens and everything works ok. If I try to edit the next row or following the daterangepicker window is not opening and there is no errors in the console 
 
We have validated your query and it works fine at our end as you have mentioned. For further validating the reported problem, could you please share the below details. It will be helpful to validate and provide a better solution. 
 
  • Share edit template files (DateRangePicker)
  • Where did you use the onFocusDateRangePicker function in your sample? (we have seen onFocusDateRangePicker method in your sample)
  • Share the reproduceable sample if possible.
  • Share dataSource details of Grid and DateRangePicker.
 
Regards, 
Balaji Sekar. 


HI Hiski February 4, 2020 08:36 AM UTC

Hello,

I was able to reproduce the problem codesandbox.io. It seems that the problem is not related to grid component but maybe somehow related to vuetify v-dialog. My grid components are all inside vuetify v-dialog window. 

https://codesandbox.io/s/daterangepicker-o9m6b

First two daterangepickers opens normally, but the last one won't open. I filled the example with repeated html tags from my original component until I was able to reproduce the problem. If v-dialog is changed to div element the last daterangepicker opens normally.


BS Balaji Sekar Syncfusion Team February 6, 2020 09:49 AM UTC

Hi Hiski,  

Thanks for your patience, 
   
We have validated the reported issue, we found that the given sample in codesandbox, styles were not loaded for Vuetify v-dialog. We have prepared a sample in local with v-dialog styles for the same scenario. Please check with sample for reference.  
  
In v-dialog control, the focus moves to the initial input while the focus goes out of the dialog content. This is default behavior of the v-dialog control. In customer scenario, while open the daterangepicker component we have focused the popup element (out of the vee-dialog control). So, the focus goes to first input automatically, at the time daterangepicker popup gets closed. So, we suggest you disable the retain-focus property (“Tab focus will return to the first child of the dialog by default.”)  in v-dialog to get rid of this issue.  
   
  
   
   
Please check with the below code snippet to get rid of the issue.  
   
[HelloWord.Vue]  
   
<template>  
  <v-dialog v-model="editorShown" v-bind:retain-focus="false" persistentwidth="800">  
    <v-card id="voyageSettings1">  
      <v-card-text>  
        <v-container fluid grid-list-lg>  
          <v-layout wrap align-center>  
            <v-flex xs3 d-flex></v-flex>  
            <v-flex xs3 d-flex>  
              <ejs-daterangepicker  
                id="daterangepicker1"  
                format="d/M/y"  
                floatLabelType="Always"  
                placeholder="Laycan"  
                v-model="laycan"  
              ></ejs-daterangepicker>  
            </v-flex>  
 
   
Please find the sample link below.  
   
   
Regards,  
Balaji Sekar. 


HI Hiski February 6, 2020 01:37 PM UTC

Thank you again for great support! Unfortunately my application is using Vuetify 1.5 version and retain-focus parameter does not exist in v-dialog. Upgrading to 2.x is not going to happen anytime soon, since it's large application. Seems like this daterangepicker in grid edit is too challenging to get working in my application. 

BS Balaji Sekar Syncfusion Team February 10, 2020 07:38 AM UTC

Hi Hiski, 
 
While checking the issue at our end, there is no alternative options for this API in the mentioned version of Vuetify v-dialog. Currently we also checking the possibilities to rectify this issue and we will update you once we got the solution. So, we request you to upgrade the Vuetify to this version else please contact the Vuetify support for more information regarding this requirement.  
 
Regards, 
Balaji Sekar. 


Loader.
Up arrow icon