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.
Unfortunately, activation email could not send to your email. Please try again.

How to show data of selected row in textbox

Thread ID:

Created:

Updated:

Platform:

Replies:

117211 Sep 5,2014 06:45 PM Sep 22,2014 05:20 AM ASP.NET Web Forms 5
loading
Tags: Grid
Roimer Machacón Otero
Asked On September 5, 2014 06:45 PM

Hi, We're using grid in our application. We've a question, exist a form of select a row in a grid and show this information of the row in textbox. Each cell of the row in a textbox.

Ragavee U S [Syncfusion]
Replied On September 8, 2014 02:26 AM

Hi Nestor Alvarado Namen

 

Thanks for your interest in Syncfusion Products.

 

We have analyzed your requirement to display the selected record details in an external form. We have achieved your requirement by rendering the selected record details in a ejDialog in the rowSelected event of the grid.

 

Please find the code snippet below.

 

<div id="detailDialog" title="Details are:">

        

    <script type="text/x-jsrender" id="dtemp">

       <form>

        <table cellspacing="10">

            <tr>

                <td style="text-align: right;">Order ID

                </td>

                <td style="text-align: left">

                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />

                </td>

                </tr>

          . . .

        </table>

      </form>

    </script>

 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="True" RowSelected="RowSelected">

. . .

</ej:Grid>

 

[Javascript]

<script>

       var temp = $.templates(dtemp);

       function RowSelected(args){

           var gridobj = $("#OrdersGrid").data("ejGrid");

           var data = args.data;      

       $("#detailDialog").ejDialog();

       $("#detailDialog").html("<table>" + temp.render(data) + "<tr><td><td><input id='btn' type='button' value='Ok' style='margin-left:100px'/></td></td></table>");

       . . .

      }

  </script>

 

 

For your convenience, we have created a sample and the same can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/Sample-633501297.zip

 

Also we have provided inbuilt support for external form editing. If you are preferring the above requirement to edit the selected record, you can use External form editing. Please find the Online sample for external form editing in the below Online link.

 

Online Sample Link: http://asp.syncfusion.com/demos/web/Grid/ExternalFormOnLocalData.aspx

 

Please get back to us by providing us more information on your requirement if we have misunderstood your requirement. The provided information will be helpful for us to provide you response accordingly as early as possible.

 

Please let us know if you need any further assistance.

 

Regards

Ragavee U S


Roimer Machacón Otero
Replied On September 9, 2014 06:35 PM

Hi. Thanks for the answer.

Now we use on the grid a textbox controls from asp.net no input html for show the information selected of the grid. 

Above we had a grid of asp.net and adding a column check this work ok, but with the grid of syncfusion no know how to pass the values of each column in each textbox

Ragavee U S [Syncfusion]
Replied On September 10, 2014 06:14 AM

Hi Nestor Alvarado Namen

 

We have analyzed your requirement and thus have modified our previously updated sample and the same can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/Sample_(modified)992111985.zip

 

In the above modified sample, we have rendered the asp:textbox inside the dialog instead of input html. Please refer the below code snippet.

 

<div id="detailDialog" title="Details are:">

        

    <script type="text/x-jsrender" id="dtemp">

       <form>

        <table cellspacing="10">

            <tr>

                <td style="text-align: right;">Order ID

                </td>

                <td style="text-align: left">

                    <asp:TextBox runat="server" Text="{{: OrderID}}" Width="116px" Height="28px" ID="OrderID" CssClass="e-field e-ejinputtext e-disable"></asp:TextBox>

                </td>

            </tr>

          . . .

        </table>

      </form>

    </script>

 

 

Please try the above sample and get back to us if you need any further assistance.

 

Regards

Ragavee U S


Roimer Machacón Otero
Replied On September 20, 2014 01:15 PM

Hi. Thanks for the answer.

A question without use the event grid "RowSelected" how can get the values of only the first row of the grid for show data in the textbox.

Ragavee U S [Syncfusion]
Replied On September 22, 2014 05:20 AM

Hi Nestor Alvarado Namen

 

We have analyzed your requirement and thus have modified our previously updated sample based on your requirement. The modified sample can be downloaded from the below location.

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/Modified_Sample-1880664019.zip

 

In the above sample, we have included an input box and a button. On entering the row index value in the text box and clicking the Details button, the data corresponding to the row index is displayed in the ejDialog. Please refer the below code snippet.

 

    <div>

        <table>

            <tr>

                <td>

                    Row Index

                </td>

                <td>

                    <input type="text" id="txt" class="e-field e-ejinputtext" />

                </td>

                <td>

                    <button id="button">Display Details</button>

                </td>

            </tr>

        </table>

    </div>

 

<script>

       

        var temp = $.templates(dtemp);

 

        $("#button").click(function () {

            if (($("#txt").val()) != "") {

                var gridobj = $("#OrdersGrid").data('ejGrid');               

                var data = gridobj.model.currentViewData[$("#txt").val()]

                $("#detailDialog").ejDialog();

                $("#detailDialog").html("<table>" + temp.render(data) + "<tr><td><td><input id='btn' type='button' value='Ok' style='margin-left:100px'/></td></td></table>");

                $("#btn").ejButton({ size: "mini", click: "close" });

                $("#detailDialog").ejDialog("open");

            }

        });

        function close(args) {

            $("#detailDialog").ejDialog("close");

        }

    </script>

 

Please try the above sample and get back to us if we have misunderstood your requirement by providing us with more information on your requirement. The provided information will be helpful for us to analyze and provide you response accordingly as early as possible.

 

Please get back to us if you have any further queries.

 

Regards

Ragavee U S


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;