Creating dropdownedit in grid

[Blazej]

Hi,

I am creating a grid like bellow, i need create dropdownlist of gender, but this didn't work. In model gender is a enum type. Second problem is with datepickeredit, icon is show but when i click icon the datepicker not show :(

@{

var GenderList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.employees, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Gender", Text = "Gender" }, ActionComplete = "actionComplete" };

}

<div class="control-section">

            <ejs-grid id="Grid" locale="pl_PL" allowPaging="true" load="load" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">

                <e-data-manager json="@ViewBag.employees" adaptor="RemoteSaveAdaptor" insertUrl="/Account/Insert" updateUrl="/Account/Update" removeUrl="/Account/Delete"></e-data-manager>

                <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true">></e-grid-editSettings>

                <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

                <e-grid-columns>

                    <e-grid-column field="Name" headerText="Imię" validationRules="@(new { required=true})" width="100"></e-grid-column>

                    <e-grid-column field="Surname" headerText="Nazwisko" validationRules="@(new { required=true})" width="140"></e-grid-column>

                    <e-grid-column field="BirthDate" headerText="Data Urodzenia" editType="datepickeredit" width="120"></e-grid-column>

                    <e-grid-column field="Gender" headerText="Płeć" validationRules="@(new { required=true})" editType="dropdownedit" edit = "new {@params=GenderList}" width="100"></e-grid-column>

                    <e-grid-column field="Email" headerText="Email" validationRules="@(new { required=true})" width="140"></e-grid-column>

                    <e-grid-column field="MobileNo" headerText="Telefon" width="100"></e-grid-column>

                    <e-grid-column field="Active" headerText="Aktywny" editType="booleanedit" displayAsCheckBox="true" textAlign="Center" type="boolean" width="100"></e-grid-column>

                    <e-grid-column headerText="Zarządzaj" width="150" commands="commands"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

        </div>

[Blazej]

Ok dropdown and callendar don't show when i load cultures. Why is that ?

function loadCultureFiles() {

            var ajax = new ej.base.Ajax(location.origin + '/../../scripts/src/pl-PL.json', 'GET', true);   

            ajax.send().then((e) => {

                var culture = JSON.parse(e);

                ej.base.L10n.load(

                    culture

                );

                ej.base.setCulture('pl-PL');                //Set the culture for the EJ2 components 

            });

        } 

[Pavithra Subramaniyam]

Hi Blazej, 

 

Greetings from the Syncfusion. 

 

We have validated the reported issues in our end. But unfortunately we are unable to reproduced the reported issue in EJ2 Grid in the ASP .Net Core platform. We suspect the cldr file is not included in application. However you can resolve your problem using the below way. 

 

For Internationalization and localization, you need to include CLDR files into your application. You need to download cldr-data globally in any location by using below command. 

  

Command: 

npm install cldr-data 

 

  

After installing cldr-data, you can find cldr-data for all locale in this location(node_modules->cldr-data->main). You need to copy the required(or all) locale cldr-data and paste into your application folder(Scripts->cldr->main->paste copied cldr files). 

  

You need to include cldr-data into your application and refer file location in index.cshtml file like below code example. Please find the below code example for your reference. 

<div> 

    <ejs-grid id="Grid" locale="pl" dataSource="ViewBag.DataSource" allowPaging="true" allowGrouping="true"> 

        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 

        ... 

   </ejs-grid> 

</div> 

  

<script> 

    ej.base.L10n.load({ 

        'pl': { 

            'grid': { 

                'EmptyRecord': 'Pusty rekord', 

                'GroupDropArea': 'Obszar zrzutu grupy', 

            }, 

            'pager': { 

                'currentPageInfo': '{0} z {1} stron', 

                'totalItemsInfo': '({0} wiadomości)', 

            } 

        } 

    }); 

  

    function loadCultureFiles(name) { 

        ej.base.setCulture(name); 

        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json']; 

        if (name === 'pl') { 

            files.push('numberingSystems.json'); 

        } 

        var loader = ej.base.loadCldr; 

        var loadCulture = function (prop) { 

            var val, ajax; 

            if (name === 'pl' && prop === files.length - 1) { 

                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false); 

            } else { 

                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false); 

            } 

            ajax.onSuccess = function (value) { 

                val = value; 

            }; 

            ajax.send(); 

            loader(JSON.parse(val)); 

        }; 

        for (var prop = 0; prop < files.length; prop++) { 

            loadCulture(prop); 

        } 

    } 

  

    document.addEventListener('DOMContentLoaded', function () { 

        loadCultureFiles('pl'); 

    }); 

</script> 

  

 

  

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.