Add custom events to cells

[linsee]

Hi,

I want to bind a custom click evenThe following is a code screenshot, can you give pointerst to a cell in the grid. After the page is loaded, jQuery can't get the defined class object. Cannot bind custom events.

Thanks

linsee

[Sathyanarayanamoorthy Eswararao]

 Hi Linsee,

  

Thanks for contacting Syncfusion support. 

In the provided code example we found that you have bind the click event to the td element in the document ready function. So, the click event is getting bind to the element before the grid is rendered. Hence we suggest you to bind the click event to the td element in a timeout function as in the below code example. 

 

<ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-filtering="true" allow-paging="true"> 

    <e-filter-settings filter-type="Excel"></e-filter-settings> 

    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column field="" header-text="" css-class="symbol_class"  width="80"></e-column> 

        <e-column field="OrderID" header-text="Order ID" text-align="Right" width="75" is-primary-key="true"></e-column> 

        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column> 

        <e-column field="EmployeeID" header-text="EmployeeID" width="80"></e-column> 

        <e-column field="OrderDate" type="date" header-text="OrderDate" width="110" ></e-column> 

    </e-columns> 

</ej-grid> 

 

<script> 

    $(function () { 

        setTimeout(function () { 

            $("td.symbol_class").on("click", function () { 

                alert("cell click"); 

            }); 

        }) 

    }); 

</script> 

 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy