We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

WebAPI DataGrid with dialogtemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

145507 Jun 26,2019 12:49 AM UTC Jul 5,2019 01:29 PM UTC ASP.NET Core - EJ 2 7
loading
Tags: DataGrid
Yoab Youssoufou
Asked On June 26, 2019 12:49 AM UTC

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 [Syncfusion]
Replied On June 28, 2019 12:36 PM UTC

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); 
        } 
 
        ... 
   } 
} 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Hariharan 


Yoab Youssoufou
Replied On June 29, 2019 08:53 PM UTC

Perfect! Thank you

Hariharan J V [Syncfusion]
Replied On July 1, 2019 05:32 AM UTC

Hi Yoab,

Thanks for your update.

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

Regards,
Hariharan

Yoab Youssoufou
Replied On July 1, 2019 11:51 PM UTC

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 [Syncfusion]
Replied On July 4, 2019 04:58 AM UTC

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(); 
    } 



Regards, 
Hariharan 


Yoab Youssoufou
Replied On July 4, 2019 04:14 PM UTC

Thank you. The problem is solved.

Hariharan J V [Syncfusion]
Replied On July 5, 2019 01:29 PM UTC

Hi Yoab,

Thanks for your update.

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

Regards,
Hariharan

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon