How to implement the "onkeypress" event for Inline Data Grid

[KALPATHARU]

Hi Team,

How to Implement "onkeypress" event for Inline Data Grid? 

Thanks,

Siranjeevi V

​

Attachment: Onkeypress_677893e9.zip

[Joseph Christ Nithin Issack]

Hi Siranjeevi,

Greetings from Syncfusion support.

Before we proceed to the query, we would like you to share the following details so that we would be able to provide a better solution ASAP.

• Please explain your exact requirement in detail.
• Please share a video demo to explain your requirement.
• Please confirm if you are using any edit template in your column where you want to catch the key press event?
• Please share the complete grid rendering code or a simple sample you are using.
• Please share the Syncfusion package version you are using.

Regards,

Joseph I.

[KALPATHARU]

Hi Joseph,

1.Please explain your exact requirement in detail

• I need to implement "onkeypress" event for inline grid to prevent the unwanted input from user.
• (Ex : special char)
• FYI , I have achieved in Numeric textbox
• Fig : Onkeypress01.zip

2. Please share a video demo to explain your requirement.

• File Name : keypress.zip

3.Please confirm if you are using any edit template in your column where you want to catch the key press event?

• I want to catch the keypress event for Fright column in grid
• Inline Grid with excel filter

4.Please share the complete grid rendering code or a simple sample you are using.

• File Name : Onkeypressaspnetcore5.0.zip

5. Please share the Syncfusion package version you are using.

• Syncfusion Version="19.4.0.48"

Thanks,

Siranjeevi V

Attachment: Onkeypress_c322062e.zip

[Pavithra Subramaniyam]

Hi KALPATHARU,

Thanks for sharing the details.

Currently, we are validating the reported query with the provided information at our end. We will provide further details on Aug 17^th, 2022.

We appreciate your patience until then.

Regards,

Pavithra S

[Joseph Christ Nithin Issack]

Hi Kalpathru,

  Sorry for the late reply,

 

   Based on your query, you want to catch the key press event of the numeric text box in the edit template of the
EJ2 grid. Your requirement can be achieved by adding event listener to the created event of the EJ2 Grid.

 

 

 

<div class='e-adaptive e-bigger'>

    <ejs-grid id="Grid" allowFiltering="true" allowPaging="true" created="created">

        <e-data-manager url="/Home/UrlDataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager>

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

        <e-grid-filterSettings type="Menu" mode="OnEnter" showFilterBarStatus="true"></e-grid-filterSettings>

        <e-grid-columns>

            <e-grid-column field="EmployeeID" headerText="Employee ID" isPrimaryKey="true"></e-grid-column>

            <e-grid-column field="FirstName" headerText="Name" editType="defaultEdit"></e-grid-column>

            <e-grid-column field="UseFirstName" headerText="Select Name" editType="booleanedit"></e-grid-column>

            <e-grid-column field="Title" headerText="Title"></e-grid-column>

            <e-grid-column field="UseTitle" headerText="Select Title" editType="booleanedit"></e-grid-column>

            <e-grid-column field="NewData" headerText="New Data" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})"></e-grid-column>

        </e-grid-columns>

    </ejs-grid>

</div>

 

 

 <script>

    var grid;

 

    var elem;

    var nObj;

 

    function create(args) {

        elem = document.createElement('input');

        return elem;

    }

 

    function write(args) {

        nObj = new ej.inputs.NumericTextBox({

            value: new Date(args.rowData[args.column.field]),

            created: () => {

                elem.addEventListener("keypress", (event) => {

                    console.log('keyPressed');

                });

            }

        });

        nObj.appendTo(elem);

    }

 

    function destroy() {

        nObj.destroy();

    }

 

    function read(args) {

        return nObj.value;

    }

    

    function created() {

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

    }

 

 

</script>

 

Please get back to us for further details.

Regards,

Joseph I.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[KALPATHARU]

Hi Joseph,

The above given code is working fine Thanks for your response.

Thanks,

Siranjeevi V

[Joseph Christ Nithin Issack]

Hi Siranjeevi,

  Thanks for your update.

   We are glad that the provided solution resolved your issue.

Regards,

Joseph I.