Custom Dialog issue with dropdown list box

[Ameet Phadnis]

We have a County table as follows -

State Table is as follows -

Country table is as follows

We want to create the dialog template for editing. Here is our code for calling the template -

const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog', template: dialogTemplate };

    function dialogTemplate(countyProps) {

        return (<DialogFormTemplate {...countyProps} />);

    }

Following is the function for the dialog template -

function DialogFormTemplate(countyProps) {

    const [loaded, setLoaded] = useState(false);

    const { instance } = useMsal();

    const [token, setToken] = useState(null);

    useEffect(() => {

        const account = instance.getActiveAccount();

        const accessTokenRequest = {

            scopes: ["api://0fcfc1ec-9df8-4f8e-b8e6-4a1ca3674696/AccessAPI", "User.Read", "Group.Read.All"],

            account: account

        };

        if (!token) {

            instance.acquireTokenSilent(accessTokenRequest).then(function (accessTokenResponse) {

                setToken(accessTokenResponse.accessToken);

            })

                .catch(function (error) {

                    if (error.name === "InteractionRequiredAuthError") {

                        instance.acquireTokenPopup(accessTokenRequest)

                            .then(function (accessTokenResponse) {

                                setToken(accessTokenResponse.accessToken);

                            }).catch(function (error) {

                                console.log(error);

                            });

                    }

                });

        }

    });

    var stateProvinceNameFromApi;

    var countryFromApi;

    if (token !== null && token !== "") {

        stateProvinceNameFromApi = new DataManager({

            url: `https://courtconnectapi.azurewebsites.net/odata/StateProvince`,

            adaptor: new ODataV4Adaptor(),

            crossDomain: true,

            headers: [{ Authorization: `Bearer ${token}` }],

        });

        countryFromApi = new DataManager({

            url: `https://courtconnectapi.azurewebsites.net/odata/Country?$select=Id,CountryName`,

            adaptor: new ODataV4Adaptor(),

            crossDomain: true,

            headers: [{ Authorization: `Bearer ${token}` }],

        });

       

    }

    let countyName;

    let stateProvinceId;

    let countryId;

    const [val, setval] = useState(extend({}, {}, countyProps, true));

    function onChange(args) {

        let key = args.target.name;

        let value = args.target.value;

        setval(prevVal => ({ ...prevVal, [key]: value }));

    }

    let data = val;

    return (<div>

        <div className="form-row">

            <div className="form-group col-md-12">

                <div className="e-float-input e-control-wrapper">

                    <input ref={input => countyName = input} value={data.CountyName} id="CountyName" name="CountyName" onChange={onChange.bind(this)} />

                    <span className="e-float-line"></span>

                    <label className="e-float-text e-label-top">County Name</label>

                </div>

            </div>

        </div>

        <div className="form-row">

            <div className="form-group col-md-12">

                <DropDownListComponent id="CountryId" value={data.CountryId} dataSource={countryFromApi} fields={{ text: "CountryName", value: "Id" }} placeholder="Select Country" popHeight='300px' floatLabelType='Always'></DropDownListComponent>

            </div>

        </div>

        <div className="form-row">

            <div className="form-group col-md-12">

                <DropDownListComponent id="StateProvinceId" value={data.StateProvinceId} dataSource={stateProvinceNameFromApi} fields={{ text: 'StateProvinceName', value: 'Id' }} placeholder="Select State/Province" popHeight='300px' floatLabelType='Always'></DropDownListComponent>

            </div>

        </div>

    </div>

   

    );

}

But when the edit screen shows up it does not select the State Province and Country from the dropdown. Can someone help us with this?

[Dineshnarasimman Muthu]

Hi Ameet,

Sorry for the delay response. We have reviewed your query about issue dialog template when performing editing in the grid. We have achieved your requirement by including dialog template in the grid and setting dropdown for a field. We have attached the code snippet and sample for your reference.

function DialogFormTemplate(props) {

  React.useEffect(() => {

    let states = val;

  }, []);

  const [token, setToken] = React.useState(null);

  const countryFromApi = new DataManager({

    url: `https://courtconnectapi.azurewebsites.net/odata/Country?$select=Id,CountryName`,

    adaptor: new ODataV4Adaptor(),

    crossDomain: true,

    headers: [{ Authorization: `Bearer ${token}` }],

  });

  const [val, setval] = React.useState(extend({}, {}, props, true));

  let data = val;

  return (

    <div>

      <div className="form-row"></div>

      <div className="form-row">

        <div className="form-group col-md-6">

          <DropDownListComponent

            id="ShipCountry"

            value={data.shipCountry}

            dataSource={countryFromApi}

            fields={{ text: 'CountryName', value: 'CountryName' }}

            placeholder="Select Country"

            popHeight="300px"

            floatLabelType="Always"

          ></DropDownListComponent>

        </div>

      </div>

    </div>

  );

}

 

Sample: https://stackblitz.com/edit/react-ibc3cf?file=index.js,data.js

Please let us know if you need any further assistance.

Regards,

Dineshnarasimman