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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Double datepicker values in cell edit

Thread ID:

Created:

Updated:

Platform:

Replies:

140622 Oct 29,2018 01:38 PM UTC Nov 23,2018 05:42 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Domantas
Asked On October 29, 2018 01:38 PM UTC

Hello,

I want to have two date pickers in cell edit to be able to set date interval by using edit template and I can't get it working while inserting multiple date picker objects.

So for example I get a string from database which can be read as interval (e.g. "2018-10-18 / 2018-10-21") so this string would be the cell value when list is loaded.

Then when I double click the cell I want to edit two dates, parsed from string, with two date pickers.  But it messes me up when I insert multiple inputs in single cell, so the cell and date picker values gets undefined. 

Shortly: Load cell with string -> double click cell to edit it with two date pickers -> set date picker values from parsed string -> change values using date picker -> save cell -> after saving cell the string with new values should appear as cell value






Madhu Sudhanan P [Syncfusion]
Replied On October 30, 2018 11:05 AM UTC

Hi Domantas, 

Thanks for contacting Syncfusion Support. 

From your query, We understood that you want to edit a string column with two datePicker component and convert the dataPicker values again into string that should be updated on that cell. We have prepared a simple sample based on the above requirement in which we have rendered two datePicker component in a single edit cell using column.edit.write method  so the user can select two dates. And then we have converted the selected date values into string and updated the cell using column.edit.read method. Please refer to the below code example, documentation link and sample link. 

[app.component.ts] 
@Component({ 
  selector: 'app-container', 
  template: `<ejs-grid #grid [dataSource]='data' id="gridcomp"  
  allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbarItems' height='220px'> 
        <e-columns> 
               .    .    . 
             <e-column field='interval' headerText='interval' [edit]='datepickerTemplate' width='220'></e-column> 
        </e-columns> 
    </ejs-grid>` 
}) 
export class AppComponent implements OnInit { 
  .  .  . 
 
  public intl: Internationalization = new Internationalization(); 
  @ViewChild('grid') 
  public grid: GridComponent; 
 
  ngOnInit(): void { 
      .  .  . 
    this.datepickerTemplate = { 
      create: () => { 
        this.div = document.createElement('div'); 
        this.div.style.width = '50%'; 
        this.elem1 = document.createElement('input'); 
        this.div.appendChild(this.elem1); 
        this.elem2 = document.createElement('input'); 
        this.div.appendChild(this.elem2); 
        return this.div; 
      }, 
      read: () => { 
          // converting date object into string with required format 
        const string1: string = this.intl.formatDate(this.datePickerObj1.value, 
          { format: 'yyyy-MM-dd' }); 
        const string2: string = this.intl.formatDate(this.datePickerObj2.value, 
          { format: 'yyyy-MM-dd' }); 
        const interval = string1 + '/' + string2; 
        return interval; 
      }, 
      destroy: () => { 
        this.datePickerObj1.destroy(); 
        this.datePickerObj2.destroy(); 
      }, 
      write: (args: { rowData: Object, column: any }) => { 
        // here data will be like “2018-10-16/2018-10-20” 
        const dates: string = args.rowData[args.column.field].split('/'); 
 
        this.datePickerObj1 = new DatePicker({ 
          value: new Date(dates[0]), 
          floatLabelType: 'Never' 
        }); 
        this.datePickerObj1.appendTo(this.elem1); 
 
        this.datePickerObj2 = new DatePicker({ 
          value: new Date(dates[1]), 
          floatLabelType: 'Never' 
        }); 
        this.datePickerObj2.appendTo(this.elem2); 
      } 
    }; 
  } 
} 


                              https://ej2.syncfusion.com/angular/documentation/common/intl.html#custom-formats  


If this does not meet your requirement please provide the below details that will be helpful for us to provide a better solution as early as possible. 

  1. Share your grid data for ‘characteristicValue’ field.
  2. Share your Grid code.
  3. Are you using column template or valueAccessor for the ‘characteristicValue’ field.

Regards, 
Madhu Sudhanan P 


Domantas
Replied On October 30, 2018 12:32 PM UTC

Hello,

I've downloaded your project and tested it. It does work fine and I would've been able to do it by myself but it just didn't work in my project and now I can say that it doesn't work cause of different versions. I've downgraded the grid module and got the same issue in your project. If cell template has inner or multiple inputs inserted in div the cell template doesn't fire "read" function. I've replicated the issue and attached the file with project. 

So now there are two questions in my mind:
1. Is there a way to solve this problem in mine (older) version
or 
2. I have to upgrade the modules in order to get this working

Attachment: test_c41bcf9e.7z

Madhu Sudhanan P [Syncfusion]
Replied On October 31, 2018 11:39 AM UTC

Hi Domantas, 

We kindly suggest you to upgrade to the latest version to resolve this problem. Also from Essential JS 2 Volume 3, 2018 release, the Angular grid package name has been changed to ej2-angular-grids from ej2-ng-grids.  
 

Also from Volume 3, 2018 release, we have segregated dependent component themes from the grid styles to reduce the style bundling size and hence we need to import/refer the dependent styles individually. Please refer the below dependent component styles used by grid.  
  
  
    ej2-base/styles/material.css   
    ej2-grids/styles/material.css   
    ej2-buttons/styles/material.css 
    ej2-popups/styles/material.css 
    ej2-navigations/styles/material.css 
    ej2-dropdowns/styles/material.css 
    ej2-lists/styles/material.css 
    ej2-inputs/styles/material.css 
    ej2-calendars/styles/material.css 
  
  
Please use the below steps to upgrade to the latest version. 

  1. Delete package.lock.json file from your application If present.
  2. Remove the @syncfusion  packages folder from the node_modules.
  3. Use same version for all Syncfusion components(Grid, Dropdown, etc,) in package.json file.
  4. Then run the command npm install to install the Syncfusion packages.
 
If you have faced any issue while upgrading please get back to us with the NPM debug log file, package.json of your project or any other screenshots/code example that helps us to analyze further at our end. 

Regards, 
Madhu Sudhanan P 


Domantas
Replied On November 22, 2018 12:38 PM UTC

Hello,

Found another issue and I want to know if this appears cause of old version too or it's still a problem.

So the issue appears with value on cellSave. When I edit cell and blur it with mouse button the new value is showing up in cellSave args, but when I edit the value and I click "Enter" the cellSave event fires but the arguments and argument value wasn't renewed.

Added zip with source code.

1) Edit with mouse click. Previous value: 5. New value after click: 7

2) Edit with enter click. Previous value: 5. I entered other value but value in cell and in args keeps the same 5.


Attachment: cellSave_25fde6b4.7z

Madhu Sudhanan P [Syncfusion]
Replied On November 23, 2018 05:42 AM UTC

Hi Domantas, 

You can overcome this behavior by updating the NumericTextBox value in the ‘column.edit.read’ method. Please refer to the below code example and sample link. 

[component.ts] 
@Component({ 
    selector: 'control-content', 
    template: `<ejs-grid #grid [dataSource]='data' id="gridcomp" 
  allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbarItems' height='220px'> 
        <e-columns> 
<e-column field='Freight' headerText='Freight' width='120' type='number' allowEditing='false' format='C2' editType='numericedit'></e-column> 
            .  .  . 
        </e-columns> 
    </ejs-grid>`, 
 
}) 
export class BatchEditComponent implements OnInit { 
  .  .  . 
 
  // Numerictextbox template for grid edit 
  public numericTextBoxObj: NumericTextBox; 
  public numericTextBoxTemplate: IEditCell = { 
    create: (args: { element: Element, column: Column }) => { 
      this.elem1 = document.createElement('input'); 
      return this.elem1; 
    }, 
    read: () => { 
      this.numericTextBoxObj.element.blur(); 
      return this.numericTextBoxObj.value; 
    }, 
    write: (args: { element: Element, column: Column, rowData: any }) => { 
      console.log("args", args) 
 
      this.numericTextBoxObj = new NumericTextBox({ 
        validateDecimalOnType: true, 
        value: args.rowData.EmployeeID, 
      }); 
      this.numericTextBoxObj.appendTo(this.elem1); 
    } 
  } 
 
  ngOnInit(): void { 
    .   .   . 
    this.grid.cellEdit.subscribe(i => this.renderCellTemplateByDataType(i)) 
  } 
 
 
  private renderCellTemplateByDataType(args) { 
    args.columnObject.edit = this.numericTextBoxTemplate; 
  } 
} 


Regards, 
Madhu Sudhanan P 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;