如何在syncfuison ejgrid的click事件中在列上添加功能？

Question

我在我的angular js项目中使用了syncfusion网格，我想在其中放置单击事件以触发函数。

我已经尝试了此链接https://www.syncfusion.com/kb/3767/how-to-place-hyperlink-in-grid-column中提供的解决方案

我的HTML代码段是

<div id="OverAllOverDueDoc" ej-grid e-datasource="OverAllOverDueDocList"
                 e-allowfiltering="true"  e-allowpaging ="true"
                 e-filtersettings-filterType="excel">
    <div e-columns>
        <div e-column e-field="CompanyName" e-headertext="Company" e-tooltip="Company" e-width="80"></div>
        <div e-column e-field="PlantName" e-headertext="Plant" e-width="80"></div>
        <div e-column e-field="" e-headertext="Candidate Id" e-width="80"></div>
        <div e-column e-field="EmployeeCode" e-headertext="Employee Code" e-width="80"></div>
        <div e-column e-field="BudgetCode" e-headertext="Budget Code" e-width="80"></div>
        <div e-column e-field="EmployeeName" e-headertext="Employee Name" e-width="80"></div>
        <div e-column e-field="EmployeeCategory" e-headertext="Emp Category" e-tooltip="Employee Category" e-width="80"></div>
        <div e-column e-field="Designation" e-headertext="Designation" e-width="80"></div>
        <div e-column e-field="DOJ" e-headertext="DOJ" e-width="80" e-tooltip="Date of Join"></div>
        <div e-column e-field="TotalOverDueMandatory" e-headertext="Mandtatory" e-tooltip="Mandatory Document" e-width="80"></div>
        <div e-column e-field="TotalOverDueOptional" e-headertext="Optional" e-tooltip="Optional Document" e-width="80"></div>

    </div>
</div>

图片中高亮显示的两列，每个单元格均可单击

Answer 1

Syncfusion支持部门的问候。

查询：我在我的angular js项目中使用了同步融合网格，我想在该项目中放置点击事件以触发函数。

我们可以使用ejGrid的列模板功能满足您的要求。并使用ejGrid的create事件将超链接列的click事件绑定。请参考下面的代码示例，

<script type="text/x-jsrender" id="columnTemplate">
    <a href="https://www.syncfusion.com">{{:EmployeeID}}</a>
</script>

<script>

    function onGridCreate(args) {
        this.element.find(".e-gridcontent").on("click", "a", function (e) {
            alert("hit"); // do your stuff here.
        });
    }
</script>

  
<div ng-app="employeeView">
    <div ng-controller="GridCtrl">
        <div id="Grid" ej-grid e-datasource="data"
             e-allowfiltering="true" e-allowpaging="true"
             e-filtersettings-filterType="excel" e-create="onGridCreate">
            <div e-columns>
                <div e-column e-field="CustomerID" e-headertext="Company" e-tooltip="Company" e-width="80"></div>
                <div e-column e-field="ShipCity" e-headertext="Plant" e-width="80"></div>
                <div e-column e-headerText="Manage Records" e-template="#columnTemplate"></div>
            </div>
        </div>
    </div>
</div>

输出：  see the output

如果您需要进一步的帮助，请与我们联系。我们很乐意为您提供帮助。

此致

Manivannan Padmanaban。