How to set textbox and Grid in one row in ASP.NET MVC Grid

[Tom Lee]

I need a text input  and button in one column and click button popup a windows to select data ,after select data bring data to text input . 

that's possible ?

I put text and button in template cols ,but no work .

 

I put the UI picture and my code Pic in a Attach.

Thanks ~

Attachment: attch_8d2a60ff.7z

[Praveenkumar Gajendiran]

Hi Chun,

Greetings from Syncfusion support.

Query: “I need a text input  and button in one column and click button popup a windows to select data ,after select data bring data to text input .  

that's possible ?”

Based on your query, we suggest you to follow the below steps to achieve your requirement.

In the column template, we set the unique “id” to each textBox element by using the current row index property. Then you can get that textbox element in the current row button click function by passing that unique “id” to the “document.getElementById” method and set the selected data to the textbox element using “value” property. This is demonstrated in the below code example. 

<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> 

Please get back to us if you need further assistance.

Regards,
Praveenkumar G