External add form

[Azamkhon]

Hello!

I would like to render the form adding to the outer part of the grid

I did not find this in the documentation except 

--Normal

--Dialog

--Batch

How can I achieve this?

I use asp.net core ej2

Thanks!

[Sujith Kumar Rajkumar]

Hi Azamkhon, 

Greetings from Syncfusion support. 

From your query we could see that your requirement is to show a default form outside the Grid for performing add operation. You can achieve this requirement by rendering a form element with the input elements for grid columns fields and a button on clicking which the record is added to the Grid using its addRecord method. This is explained below, 

Initially a form element is rendered outside the Grid with the required input fields that are present in the Grid columns. 

<form id="form_Element" class="custom-form"> 

    <div> 

        <div class="form-row"> 

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

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

                    <input asp-for="OrderID" type='text' /> 

                    <label asp-for="OrderID" class="e-float-text e-label-top">Order ID</label> 

                </div> 

            </div> 

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

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

                    <input asp-for="CustomerID" /> 

                    <label asp-for="CustomerID" class="e-float-text e-label-top">Customer Name</label> 

                </div> 

            </div> 

        </div> 

        <div class="form-row"> 

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

                <ejs-textbox placeholder="Enter address" id="textbox"></ejs-textbox> 

            </div> 

        </div> 

        <div class="form-row"> 

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

                <ejs-button id="add" content="Add record" type="button"></ejs-button> 

            </div> 

        </div> 

    </div> 

</form> 

Then in the Grid’s created event, the EJ2 Form Validator control is bound to this form with the validation rules from the Grid columns to perform the validation operation on the form. 

// Grid’s created event function 

function OnCreated() { 

        var formElement = document.getElementById("form_Element"); 

        // Grid columns validation rules are passed to validationRules method 

        var rules = validationRules(this.columns); 

        // Form Validator control is initialized on the form with the returned rules 

        new ej.inputs.FormValidator(formElement, rules); 

} 

 

function validationRules(cols) { 

        // Columns validation rules are calculated based on the grid column valudationRules assigned 

        var rules = []; 

        var count = 0; 

        while (count < cols.length) { 

            var fieldName = cols[count].field; 

            var validR = cols[count].validationRules; 

            rules[fieldName] = (validR !== undefined) ? validR : null; 

            count++; 

        } 

        return rules; 

} 

Finally in the click event of the button rendered in the form, the form is validated and then the input field values are added as a new record to the Grid using its addRecord method. 

document.getElementById('add').addEventListener('click', function (args) { 

        var formObj = this.closest('.custom-form').ej2_instances[0]; 

        // Form is validated 

        if (formObj.validate()) { 

            var formElement = document.getElementById("form_Element"); 

            var grid = document.getElementById("Grid").ej2_instances[0]; 

            // Values from the form's input elements are stored in a separate variable 

            var orderIDVal = parseInt(formElement.querySelector("#OrderID").value); 

            var customerIDVal = formElement.querySelector("#CustomerID").value; 

            var addressVal = formElement.querySelector("#textbox").value; 

            // A new object is formed with these new values 

            var newData = { "OrderID": orderIDVal, "CustomerID": customerIDVal, "ShipAddress": addressVal } 

            // This new object is passed to the grid’s addRecord method 

            grid.addRecord(newData); 

        } 

}); 

We have prepared a sample based on this for your reference which you can find below, 

Sample: https://www.syncfusion.com/downloads/support/forum/152994/ze/CustomAddForm1579678822  

Please get back to us if you require any further assistance. 

  

Regards, 

Sujith R 

[Azamkhon]

Thank you very much for helping me with this issue.

[Sujith Kumar Rajkumar]

Hi Azamkhon, 

You’re welcome. Please get back to us if you require any further assistance. 

Regards, 

Sujith R