WebAPI DataGrid with dialogtemplate

[Yoab Youssoufou]

Hello, 

using Ej2 dotnet core DataGrid, with WebApi CRUD is working fine with normal edit mode, however I need a more customized modal for adding and editing I have used dialog template before in Ej1 but I was not not able to reproduce this in Ej2, Please can I have a simple example  of WebAPI CRUD with dialogtemplate in Ej2 dotnet core. Thank you.

[Hariharan J V]

Hi Yoab, 

 

Greeting from Syncfusion. 

 

Query: using Ej2 dotnet core DataGrid, with WebApi CRUD is working fine with normal edit mode, however I need a more customized modal for adding and editing I have used dialog template before in Ej1 but I was not not able to reproduce this in Ej2, Please can I have a simple example  of WebAPI CRUD with dialogtemplate in Ej2 dotnet core. 

 

We have validated your query and created a sample based on your requirement. Here, we have created a sample in EJ2 Grid(WebApiAdaptor with dialog template). Please find the below code example and sample for your reference. 

 

[code example] 

 

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

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

    <e-data-manager url="/api/Order" adaptor="WebApiAdaptor" crossdomain="true"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required= true })" textAlign="Right" width="100"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script id='dialogtemplate' type="text/x-template"> 

    <div id="dialogTemp"> 

    </div> 

</script> 

 

<script type="text/javascript"> 

    function actionComplete(args) { 

         if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

                ... 

           } 

    } 

 

    function appendElement(elementString, form) { 

        form.querySelector("#dialogTemp").innerHTML = elementString; 

        var script = document.createElement('script'); 

        script.type = "text/javascript"; 

        var serverScript = form.querySelector("#dialogTemp").querySelector('script'); 

        script.textContent = serverScript.innerHTML; 

        document.head.appendChild(script); 

        serverScript.remove(); 

    } 

</script> 

... 

namespace EJ2Grid.Controllers 

{ 

    [Produces("application/json")] 

    [Route("api/Order")] 

    public class OrderController : Controller 

    { 

        // GET: api/Orders 

        [HttpGet] 

 

        public object Get() 

        { 

            var queryString = Request.Query; 

 

            int skip = Convert.ToInt32(queryString["$skip"]); 

            int take = Convert.ToInt32(queryString["$top"]); 

            var data = OrdersDetails.GetAllRecords().ToList(); 

            return take != 0 ? new { Items = data.Skip(skip).Take(take).ToList(), Count = data.Count() } : new { Items = data, Count = data.Count() }; 

 

        } 

        ... 

 

 

        // PUT: api/Orders/5 

        [HttpPut] 

        public object Put(int id, [FromBody]OrdersDetails value) 

        { 

            var ord = value; 

            OrdersDetails val = OrdersDetails.GetAllRecords().Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 

            val.OrderID = ord.OrderID; 

            val.EmployeeID = ord.EmployeeID; 

            val.CustomerID = ord.CustomerID; 

            val.Freight = ord.Freight; 

            val.OrderDate = ord.OrderDate; 

            val.ShipCity = ord.ShipCity; 

            return value; 

        } 

 

        // DELETE: api/ApiWithActions/5 

        [HttpDelete("{id:int}")] 

        [Route("Orders/{id:int}")] 

        public object Delete(int id) 

        { 

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == id).FirstOrDefault()); 

            return Json(id); 

        } 

 

        ... 

   } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2GridWebApiDialogTemplate709075457  

 

Please get back to us if you need further assistance. 

 

Regards, 

Hariharan 

[Yoab Youssoufou]

Perfect! Thank you

[Hariharan J V]

Hi Yoab,

Thanks for your update.

We are happy to hear that your requirement has been achieved.

Regards,
Hariharan

[Yoab Youssoufou]

I think I spoke too soon. Tried to implement cascading dropdowns as in the documentation without success. My code for _AddPartialDialog.cshtml  is below:

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

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

            <ejs-dropdownlist id="StatesId" name="StatesId" ejs-for="StatesId" placeholder="Select State" floatLabelType="Always" popupHeight="350" dataSource="@gen.GetLkStates()" change="statechange">

                <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>

            </ejs-dropdownlist>

        </div>

    </div>

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

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

            <ejs-dropdownlist id="LgaId" name="LgaId" ejs-for="LgaId" placeholder="Select Lga" floatLabelType="Always" popupHeight="350" dataSource="@gen.GetLkLga()">

                <e-dropdownlist-fields text="Name" value="Id"></e-dropdownlist-fields>

            </ejs-dropdownlist>

        </div>

    </div>

=============================

<script type="text/javascript">

    function statechange() {

        var st = document.getElementById('StatesId').ej2_instances[0];

        var lg = document.getElementById('LgaId').ej2_instances[0];

        lg.enabled = true;

        var tempQuery = new ej.data.Query().where('StatesId', 'equal', st.value);

        lg.query = tempQuery;

        lg.text = null;

        lg.dataBind();

    }

</script>

this does not work, how do implement the cascading behaviour

[Hariharan J V]

Hi Yoab, 

We have validated your query provided the information and we have created a sample with your requirement. You can able to use the cascading dropdown in dialogTemplate in EJ2 Grid. Please refer the below code example and sample for more information. 

[_DialogEditPartial.cshtml] 

<div class="form-row"> 

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

            <ejs-dropdownlist id="ShipCountry" dataSource="@ViewBag.datasource" change="shipCoutryChange" placeholder="Ship Country" floatLabelType="Always" popupHeight="300px"> 

                <e-dropdownlist-fields text="ShipCountry" value="ShipCountry"></e-dropdownlist-fields> 

            </ejs-dropdownlist> 

        </div> 

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

            <ejs-dropdownlist id="ShipCity" dataSource="@ViewBag.datasource" placeholder="Ship City" floatLabelType="Always" popupHeight="300px"> 

                <e-dropdownlist-fields text="ShipCity" value="ShipCity"></e-dropdownlist-fields> 

            </ejs-dropdownlist> 

        </div> 

    </div> 

[index.cshtml] 

function shipCoutryChange(args) { 

        var shipCoutryObj = document.getElementById("ShipCountry").ej2_instances[0]; 

        var shipCityObj = document.getElementById("ShipCity").ej2_instances[0]; 

                //frame the query based on selected value in ShipCountry DropDownList. 

        var tempQuery = new ej.data.Query().where('ShipCountry', 'equal', shipCoutryObj.value); 

               // set the framed query based on selected value in ShipCountry DropDownList. 

        shipCityObj.query = tempQuery; 

        // set null value to ShipCity DropDownList text property 

        shipCityObj.text = null; 

         //  bind the property changes to ShipCity DropDownList 

        shipCityObj.dataBind(); 

    } 

Sample link: https://www.syncfusion.com/downloads/support/forum/145507/ze/EJ2GridWebApiDialogTemplate472019954022001.zip 

Regards, 

Hariharan 

[Yoab Youssoufou]

Thank you. The problem is solved.

[Hariharan J V]

Hi Yoab,

Thanks for your update.

We are happy to hear that your issue has been resolved.

Regards,
Hariharan