Custom dialog template and passing second model in template to Insert, Update Controller

[Blazej]

Hi,

I have grid with custom dialog template. I have 2 datasorce models, 1 is employees, 2 is roles.

The roles are inserted in multiselect <ejs-multiselect id="RolesToEmployees" dataSource="@ViewBag.Roles" placeholder="Uprawnienia" mode="Box">

When i click add then dialog shows an i can select Roles, but when i Save the value of  RolesToEmployees dont pass to controller. How can i do that? to Pass this two models to insert section in controller?

Controller

public ActionResult Insert([FromBody]CRUDModel<Employee> value, [FromBody]CRUDModel<Roles> RolesToEmployees)

        {

            string msg = null;

            

            try {

                EmployeeRepository.AddUser(value.Value);

                msg = msg + "*Poprawnie utworzono konto użytkownika: " + value.Value.Email.ToString() + "<BR />";

            }

            catch

            {

                msg = msg + "*Wystąpiły błędy podczas dodawania rekordu" + "<BR />";

            }

            // ViewBag.employees = Result;

            if (msg != null)

            {

                return Json(new { data = value.Value, message = msg });

            }

            else

            {

                return Json(value.Value);

            }

        }

My Grid:

 <ejs-grid id="Grid" actionComplete="actionComplete" allowSelection="true" actionBegin="begin" created="created" allowTextWrap="true" width="auto" locale="pl-PL" allowPaging="true" allowResizing="true" load="load" dataBound="dataBound" toolbarClick="toolbarClick" toolbar=toolbarItems allowSorting="true">

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

                <e-grid-editSettings mode="Dialog" template="#dialogtemplate" allowAdding="true" allowDeleting="true" allowEditing="true" showDeleteConfirmDialog="true"></e-grid-editSettings>

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

                <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>

                <e-grid-columns>

                    <e-grid-column field="EmployeeID" headerText="ID" isPrimaryKey="true" type="number" visible="false"></e-grid-column>

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

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

                    <e-grid-column field="BirthDate" width="70" headerText="Data Urodzenia" validationRules="@(new { required = true })"> </e-grid-column>

                    <e-grid-column field="Gender" width="80" headerText="Płeć"></e-grid-column>

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

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

                    <e-grid-column field="Roles" width="100" headerText="Uprawnienia"></e-grid-column> 

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

                </e-grid-columns>

            </ejs-grid>

And Template insert

<div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <input asp-for="Name" type="text">

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

                <label asp-for="Name" class="e-float-text">Imię</label>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <input asp-for="Surname" type="text">

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

                <label asp-for="Surname" class="e-float-text">Nazwisko</label>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <ejs-datepicker name="BirthDate" id="BirthDate" start="Decade" placeholder="Data urodzenia" format="yyyy-MM-dd">

                </ejs-datepicker>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <ejs-combobox name="gender" id="Gender" dataSource="@ViewBag.AllGenders" placeholder="Wybierz płeć" index="0" popupHeight="230px" floatLabelType="Auto">

                    <e-combobox-fields value="Value" text="Text"></e-combobox-fields>

                </ejs-combobox>

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

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <input asp-for="Email" type="email">

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

                <label asp-for="Email" class="e-float-text">E-mail</label>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <ejs-maskedtextbox name="MobileNo" class="e-float-text" id="MobileNo" mask="(+00) 000-000-000"></ejs-maskedtextbox>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <ejs-checkbox name="Active" class="e-float-text" id="Active" label="Aktywny"></ejs-checkbox>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-xs-6 col-sm-6 col-lg-6 col-md-6">

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

                <ejs-multiselect id="RolesToEmployees" dataSource="@ViewBag.Roles" placeholder="Uprawnienia" mode="Box">

                    <e-multiselect-fields value="RolesID" text="Name"></e-multiselect-fields>

                </ejs-multiselect>

                

            </div>

        </div>

    </div>

</div>

[Thavasianand Sankaranarayanan]

Hi Blazej, 

Greetings from Syncfusion support. 

We have analyzed the provided information and we suggest to use the below model class to retrieve the records from the client-side, From the below code example, we have returned the multiselect dropdown values as an array to the controller.  

 

[index.cshtml.cs] 

 

public class ReceiveDataModel 

    { 

        public int MakeID { get; set; } 

        public string MakeName { get; set; } 

        public int[] AccessoryName { get; set; } // Define type of the MultiSelect component value 

    } 

public JsonResult OnPostEditMake([FromBody]CRUDModel<ReceiveDataModel> value) 

        { 

 

            var x = value.Value; 

 

            return new JsonResult(value.Value); 

 

        } 

We have created a sample with the above mentioned model class and that can be download from the below link, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_modified-1169762697.zip 

Please get back to us, if you need further assistance. 

Regards, 

Thavasianand S.