<div class="control-section">
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").Height("359").Columns(col =>
{
col.HeaderText("Text Box").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#txttemplate").Width("150").Add();
col.HeaderText("Button").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#btntemplate").Width("150").Add();
col.Field("EmployeeID").HeaderText("Employee ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add();
col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).Render()
</div>
<script id="txttemplate" type="text/x-template">
<input id="txtbox${index}" type="text"> //here we set the unique id to the textBox component by using current row index property.
</script>
<script id="btntemplate" type="text/x-template">
<button id="normalbtn${index}" onclick="buttonClick()" >Button${index}</button>
</script>
<script>
function buttonClick() { // button click function
var rIndex = event.target.closest("tr").rowIndex; //here we get the current row index.
var textElement = document.getElementById('txtbox' + rIndex); // here we get the current row textBox element by using unique "id".
textElement.value = selectData; // then you can set your textbox value like this.
console.log(textElement);
}
</script> |