We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

1 Reply 1 reply marked as answer

PG Praveenkumar Gajendiran Syncfusion Team May 3, 2021 04:33 AM

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 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon