Parse Dates and Duplicates

[Suman Kumar]

I have two questions. First I have a page in which I have to show crud for some lessons. First I have created it through Schedular Component. In which we are giving user a form to create a lesson in a modal/popup. The same data I have to show in Grid. We are giving the same popup/modal form on the Add button click in the grid as we are using in Schedular. Problem is that we are getting the different dates for reoccur  from the getReccurenceDates method. I have to do the same in the Grid to get all the dates. Is there any way to access getReccurenceDates method in Grid to parse dates. And second Is there any way to duplicate a row in grid.

[Rajapandiyan Settu]

Hi Suman, 

Greetings from Syncfusion support. 

Before proceeding your requirement we need additional information on your query. So, please share the below details to provide the better solution ASAP. 

1. Which type of date value you have used (share the date value).
2. How could you want to parse those date value (share the parsed date value).
3. How could you want to display it in the Grid.
4. Full Grid code you have used.
5. Screenshot of Syncfusion packages version in packages.json file.

Regards, 

Rajapandiyan S 

[Suman Kumar]

I am uploading a sample app same as I am working on. Please it is urgent if you can reply urgently to this first. When you click add on the top of the grid , a modal will open in which we have radio buttons where we have a type for which we have two radiobuttons free and paid if user selects paid then I have to show the rest of the radiobuttons which are present next to type. then In the payment if user selects recurring then I have to show the fields of duration and others. but I am not able to use state in template. I tried this many times. Please give me solution for this. If I have to hide some fields in the template modal and show if the user selects a value from one field Thnx

Attachment: demo_74490701.zip

[Rajapandiyan Settu]

Hi Suman, 

  

Greetings from Syncfusion support. 

 

Query: a modal will open in which we have radio buttons where we have a type for which we have two radiobuttons free and paid if user selects paid then I have to show the rest of the radiobuttons which are present next to type. then In the payment if user selects recurring then I have to show the fields of duration and others. 

We have achieved your requirement by using CSS styles for those elements. 

At initial rendering, we have hidden the required radio buttons by setting display as none to that tr elements. Refer to the below code example. 

<tr style={{display:"none"}}> 

                <td className="e-textlabel">Payment</td> 

                <td colSpan={4}> 

                  {paymentValues.map((paymentOption) => ( 

                    <> 

                      <input 

                        type="radio" 

                        value={paymentOption.value} 

                        id={paymentOption.value} 

                        name="payment" 

                        onChange={this.paymentChangeHandler} 

                      />{" "} 

                      <label htmlFor={paymentOption.value}> 

                        {paymentOption.text} 

                      </label> 

                      {"  "} 

                    </> 

                  ))} 

                </td> 

              </tr> 

              <br /> 

              {/* {paymentMethodValue === "recurring" && ( */} 

              <> 

                <tr style={{display:"none"}}> 

                  <td className="e-textlabel">Frequency</td> 

                  <td colSpan={4}> 

                    {frequencyOptions.map((frequency) => ( 

                      <> 

                        <input 

                          type="radio" 

                          value={frequency.value} 

                          id={frequency.value} 

                          name="frequency" 

                          onChange={this.frequencyChangeHandler} 

                        />{" "} 

                        <label htmlFor={frequency.value}> 

                          {frequency.text} 

                        </label> 

                      </> 

                    ))} 

                  </td> 

                </tr> 

                <tr style={{display:"none"}}> 

                  <td className="e-textlabel" width="150"> 

                    Duration 

                  </td> 

                  <td colSpan={4}> 

                    <input 

                      id="duration" 

                      className="e-field e-input" 

                      type="number" 

                      value={props.duration} 

                      name="duration" 

                      style={{ width: "100%" }} 

                    /> 

                  </td> 

                </tr> 

Then we have dynamically shown the required radio fields in the change event of Type radio buttons. Refer to the below code example. 

paymentChangeHandler = (e) => { 

    this.paymentMethod = e.target.value; 

// display the duration field area 

    document.getElementById("duration").closest('tr').style.display = 'table-row';     

  }; 

  typeChangeHandler = (e) => { 

    this.typeValue = e.target.value; 

    if(e.target.value == "paid"){     

// display the required radio buttons 

    document.getElementById(paymentValues[0].value).closest('tr').style.display = 'table-row' 

    document.getElementById(frequencyOptions[0].value).closest('tr').style.display = 'table-row' 

    } 

  }; 

Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/demo-1051396509.zip  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Suman Kumar]

ok, I have tried this. When initially fields are hidden then I clicked on paid and fields shows. But What if user again clicks on "free" option. In that case we have to hide the fields again. But its not working for that. This is not the solution I want. This is incomplete solution. 

   And next to type field we have payment field in which if user selects recurring then we have to show Frequency and Duration fields. 

   First if user selects paid then we have to show Payment field in which if user selects recurring then we have to show Frequency and Duration.

And if user clicks on free then we do not show Payment, Frequency and Duration. And if user selects paid then we have to show Payment And in Payment if user selects "Fixed" then we do not show Frequency and Duration. I think now you can understand the situation. Can there any way where I can use the component state to do this. Because that is the most easy and efficient way to do this in React JS and that's the main reason we are building this project in react. 

Please suggest a solution asap. Because I already have wasted two days for same.

Thanks

      

[Rajapandiyan Settu]

Hi Suman, 

Thanks for your update. 

Based on your query, you want to use the react state inside the template. Currently, we don’t have the support to access react hooks properties inside the template. We have already logged the bug task (“Accessing the application context inside EJ2 React template”) for this requirement. We assure you that we will fix this issue in our Volume 3, 2020 release scheduled at the end of September. 

  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

FB Link: https://www.syncfusion.com/feedback/13807/accessing-the-application-context-inside-ej2-react-template  

Regards, 

Rajapandiyan S 

[Suman Kumar]

ok I will manage it with css. Please give other problems solution which I have explained in the first comment. I have to parse the dates which you can get from the template filed Recurrence field.

[Rajapandiyan Settu]

Hi Suman, 

Sorry for the inconvenience caused. 

 

Query: Problem is that we are getting the different dates for reoccur  from the getReccurenceDates method 

We are unable to find the exact issue in the given sample. When we save the record, it returns the edited data as like below 

Screenshot: get the edited data in the actionBegin event of save 

 

 

Please share the below details, it would be very helpful to find the issue at our end. 

 

1. Video demonstration of the reported problem.
2. Replication procedure of the problem.
3. In which field you were getting the wrong data? What data you have expected for that field? Share the screenshot for this.

 

Regards, 

Rajapandiyan S