Value of Other Fields

Question

Hi

In a list i am displaying only 4-5 fields but there are more fields. How i will get the values of other fields on click of Edit button

htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>");
                    htmlTable.Append("<thead><tr style='background-color:green;color:white; text-align: center;'><th>Sr.</th><th>Code</th><th>Description</th><th>Swift Code</th><th>Status</th><th class='text-center nosort'>Action</th></th></tr></thead>");
                    htmlTable.Append("<tbody>");
                    foreach (DataRow row in dt.Rows)
                    {
                        String Status = "Blocked";
                        if (Convert.ToBoolean(row["status"]))
                        {
                            Status = "Active";
                        }

                        htmlTable.Append("<tr>");
                        htmlTable.Append("<td>" + Count.ToString() + "</td>");
                        htmlTable.Append("<td>" + row["bankcode"] + "</td>");
                        htmlTable.Append("<td>" + row["bankname"] + "</td>");
                        htmlTable.Append("<td>" + row["swiftcode"] + "</td>");


                        htmlTable.Append("<td class='text-center'>");
                        htmlTable.Append("<a id='btnEdit' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' data-target='#modal_form_horizontal' onclick='BindData(this);'><i class='icon-pencil7 mr-1'></i></a>");

                        //string deleteAttributes = Status == "Blocked" ? "style='pointer-events: none; opacity: 0.5;' onclick='return false;'" : "data-toggle='modal' data-target='#modal_Delete' onclick='BindData(this);'";
                        string deleteAttributes = Status == "Blocked" ? "style='pointer-events: none; opacity: 0.5;' onclick='return false;'" : "data-toggle='modal' data-target='#modal_Delete' ";
                        htmlTable.Append($"<a id='btnDel' class='list-icons-item text-danger-600' { deleteAttributes}><i class='icon-bin mr-1'></i></a>");

                        htmlTable.Append("</td>");

                        htmlTable.Append("<td style='display:none'>" + row["docentry"] + "</td>");
                        htmlTable.Append("<td style='display:none'>" + row["status"] + "</td>");
                        htmlTable.Append("</tr>");
                        Count++;
                    }
                    htmlTable.Append("</tbody>");
                    htmlTable.Append("</table>");
                    PlaceHolderTable.Controls.Add(new Literal { Text = htmlTable.ToString() });

Thanks

Aman Gupta · Answer

Hi Ramco, To access additional fields (like docentry and status) when clicking the "Edit" button, you can store these values in data-* attributes within the HTML element. This allows you to pass all the necessary information to your JavaScript function when the user clicks the "Edit" button. Here's how you can modify your code: Step 1: Add data-* Attributes for the Hidden Fields You can modify the htmlTable.Append code to include data-* attributes for the hidden fields: foreach (DataRow row in dt.Rows) { String Status = "Blocked"; if (Convert.ToBoolean(row["status"])) { Status = "Active"; } htmlTable.Append(" "); htmlTable.Append(" " + Count.ToString() + " "); htmlTable.Append(" " + row["bankcode"] + " "); htmlTable.Append(" " + row["bankname"] + " "); htmlTable.Append(" " + row["swiftcode"] + " "); htmlTable.Append(" "); // Add data-* attributes to store hidden field values htmlTable.Append($" "); string deleteAttributes = Status == "Blocked" ? "style='pointer-events: none; opacity: 0.5;' onclick='return false;'" : "data-toggle='modal' data-target='#modal_Delete'"; htmlTable.Append($" "); htmlTable.Append(" "); htmlTable.Append(" " + row["docentry"] + " "); htmlTable.Append(" " + row["status"] + " "); htmlTable.Append(" "); Count++; } Step 2: Update the BindData JavaScript Function Modify your BindData JavaScript function to retrieve the values from these data-* attributes: function BindData(element) { var docentry = $(element).data('docentry'); var status = $(element).data('status'); var bankcode = $(element).data('bankcode'); var bankname = $(element).data('bankname'); var swiftcode = $(element).data('swiftcode'); // Now you can populate your modal fields or perform any other actions with these values $('#modal_form_horizontal').find('#txtDocEntry').val(docentry); $('#modal_form_horizontal').find('#txtStatus').val(status); $('#modal_form_horizontal').find('#txtBankCode').val(bankcode); $('#modal_form_horizontal').find('#txtBankName').val(bankname); $('#modal_form_horizontal').find('#txtSwiftCode').val(swiftcode); } Step 3: Ensure Your Modal Has the Corresponding Fields Make sure your modal form (#modal_form_horizontal) has the appropriate fields (e.g., #txtDocEntry, #txtStatus, #txtBankCode, #txtBankName, #txtSwiftCode) where you want to populate the data: Edit Bank Details &times; Bank Code Bank Name Swift Code Close Save changes Explanation Data Attributes (data-*): These are custom attributes that allow you to embed additional information in HTML elements. In this case, they store values that you need for editing. JavaScript/jQuery: The BindData function uses jQuery to extract these values and populate the modal form fields. With this approach, you can easily pass and retrieve all necessary data when the "Edit" button is clicked, even if those fields are not directly displayed in the table.

Ramco Ramco · Answer

Hi Aman How i will access other fields like address1,address2,city,state,pin etc . I am not displaying in the list. Thanks