I need help calling this javascript function after gridview2 is updated with information from a sql query. The gridview updates from the database no problem, and I can use a button to manually call the javascript function but I want to automatically call the function when the gridview is updated. The Javascript has to run on the client side, it adds objects to a three.js scene, the data in the gridview only relates to the file pathway, a unique object name and coordinates. I know I can add a event listener to other controls but I have no idea how to use an addeventlistener to a gridview object.
How do I get the client side javascript to run after the gridview is updated from the code behind?
function yourJavaScriptFunction(rowIndex) {
var x = rowIndex;
var file_path = getCellValue(x, 7); // Get the value from the second row, third column
if (file_path) {
console.log("Cell value: " + file_path);
} else {
console.log("Row or cell not found, get filepath."+ ' '+file_path);
alert("Row or cell not found,get filepath.");
}
var object_name = getCellValue(rowIndex, 1);
if (object_name) {
// alert(object_name);
console.log("Cell value: " + object_name);
} else {
console.log("Row or cell not found, get object name.");
alert("Row or cell not found, get object name.");
}
// alert('Button in row ' + rowIndex + ' clicked!');
//alert(value);
module.add_Object(file_path, object_name);
//add_Object();
// mytest.add_Object();
return false; // Prevent postback if needed
}
<asp:GridView ID="GridView2" runat="server" Height="100%" Width="100%" HorizontalAlign="Center" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" >
<Columns>
<asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="SUBTYPE1" HeaderText="SUBTYPE1" SortExpression="SUBTYPE1" />
<asp:BoundField DataField="IMAGE_FILE_PATH" HeaderText="IMAGE_FILE_PATH" SortExpression="IMAGE_FILE_PATH" />
<asp:BoundField DataField="TYPE" HeaderText="TYPE" SortExpression="TYPE" />
<asp:BoundField DataField="COUNT" HeaderText="COUNT" SortExpression="COUNT" />
<asp:BoundField DataField="LOCATION" HeaderText="LOCATION" SortExpression="LOCATION" />
<asp:BoundField DataField="TRADE_SIZE" HeaderText="TRADE_SIZE" SortExpression="TRADE_SIZE" />
</Columns>
<EditRowStyle HorizontalAlign="Left" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
I need help calling this javascript function after gridview2 is updated with information from a sql query. The gridview updates from the database no problem, and I can use a button to manually call the javascript function but I want to automatically call the function when the gridview is updated. The Javascript has to run on the client side, it adds objects to a three.js scene, the data in the gridview only relates to the file pathway, a unique object name and coordinates. I know I can add a event listener to other controls but I have no idea how to use an addeventlistener to a gridview object.
How do I get the client side javascript to run after the gridview is updated from the code behind?
function yourJavaScriptFunction(rowIndex) {
var x = rowIndex;
var file_path = getCellValue(x, 7); // Get the value from the second row, third column
if (file_path) {
console.log("Cell value: " + file_path);
} else {
console.log("Row or cell not found, get filepath."+ ' '+file_path);
alert("Row or cell not found,get filepath.");
}
var object_name = getCellValue(rowIndex, 1);
if (object_name) {
// alert(object_name);
console.log("Cell value: " + object_name);
} else {
console.log("Row or cell not found, get object name.");
alert("Row or cell not found, get object name.");
}
// alert('Button in row ' + rowIndex + ' clicked!');
//alert(value);
module.add_Object(file_path, object_name);
//add_Object();
// mytest.add_Object();
return false; // Prevent postback if needed
}
<asp:GridView ID="GridView2" runat="server" Height="100%" Width="100%" HorizontalAlign="Center" AutoGenerateColumns="False" DataSourceID="SqlDataSource3" >
<Columns>
<asp:BoundField DataField="NAME" HeaderText="NAME" SortExpression="NAME" />
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="SUBTYPE1" HeaderText="SUBTYPE1" SortExpression="SUBTYPE1" />
<asp:BoundField DataField="IMAGE_FILE_PATH" HeaderText="IMAGE_FILE_PATH" SortExpression="IMAGE_FILE_PATH" />
<asp:BoundField DataField="TYPE" HeaderText="TYPE" SortExpression="TYPE" />
<asp:BoundField DataField="COUNT" HeaderText="COUNT" SortExpression="COUNT" />
<asp:BoundField DataField="LOCATION" HeaderText="LOCATION" SortExpression="LOCATION" />
<asp:BoundField DataField="TRADE_SIZE" HeaderText="TRADE_SIZE" SortExpression="TRADE_SIZE" />
</Columns>
<EditRowStyle HorizontalAlign="Left" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
2 Answers
Reset to default 1Just use what is called script injection. (Register startup script).
Say we have this GridView:
<asp:GridView ID="GridView1" runat="server"
AutoGenerateColumns="False" DataKeyNames="ID"
CssClass="table table-hover" Width="50%">
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="HotelName" HeaderText="HotelName" />
<asp:BoundField DataField="Description" HeaderText="Descripiton" />
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<button id="cmdEdit" runat="server"
onserverclick="cmdEdit_ServerClick"
>
<span aria-hidden="true" class="fa fa-pencil-square-o fa-lg"></span>
</button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And below the GridView, say I have a div (with controls to show/edit the one row).
I'll not bother with all of the markup, but a wee bit is this:
<div id="HotelInfo" runat="server"
style="float:left;display:none;width:48%"
clientidmode="Static" >
<div style="float:left" class="iForm">
<label>HotelName</label>
<asp:TextBox ID="txtHotel" runat="server" width="280" f="HotelName" ></asp:TextBox> <br />
<label>First Name</label>
<asp:TextBox ID="txtFirst" runat="server" width="280" f="FirstName"></asp:TextBox> <br />
etc. etc. etc......
Then say we have a JavaScript routine to run after the server-side button click. Hence, say this:
<script>
function popinfo(strHotelName, sRowIndex) {
var MyDialog = $("#HotelInfo")
strHotelName = strHotelName + " (Row index = " + sRowIndex + ")"
MyDialog.dialog({
title: strHotelName,
modal: true,
width: "940px",
dialogClass: "dialogWithDropShadow",
})
}
</script>
Note very closely, I don't bother trying to fetch/pull data from the GridView using client side script. It tends to be far easier to "pass" the values from the server-side code that plucks out the values we need from that row anyway (so, less client side code required by passing the values from the server side code that injects the script).
So, the above is a jQuery.UI dialog. When clicking on the row button, then:
Server-side code runs - gets the row click.
Server side fills out the div area that we going to pop.
Server-side code THEN injects a script (calls the above JavaScript routine) and passes the HotelName and RowIndex.
In this example, I really don't need the row index, but it does show that in most cases, it easier to pass row information from the server side to the client-side JavaScript routine.
Code behind is thus this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadData();
}
void LoadData()
{
string strSQL =
@"SELECT * FROM tblHotelsA
ORDER BY HotelName";
GridView1.DataSource = General.MyRst(strSQL);
GridView1.DataBind();
}
protected void cmdEdit_ServerClick(object sender, EventArgs e)
{
HtmlButton btn = (HtmlButton)sender;
GridViewRow gRow = (GridViewRow)btn.NamingContainer;
int PK = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
Session["PK"] = PK; // we use this for our save edits code
string strSQL =
@"SELECT * FROM tblHotelsA
WHERE ID = @id";
SqlCommand cmdSQL = new SqlCommand(strSQL);
cmdSQL.Parameters.Add("@id",SqlDbType.Int).Value = PK;
DataRow rHotel = General.MyRstP(cmdSQL).Rows[0];
General.FLoader(HotelInfo, rHotel); // load row into controls in div HotelINfo
// call the client side pop div
// (we pass hotel name for the pop title)
string sHotelName = rHotel["HotelName"].ToString();
string sRowIndex = gRow.RowIndex.ToString();
string sJava = $@"popinfo('{sHotelName}',{sRowIndex})";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "mypop",sJava, true);
}
So, after the row button click (server side) code runs, then we inject a script (RegisterStartupScript) and call the client-side JavaScript routine.
The result is thus this:
Also, note the use of naming container for the server-side code to pick up the current row. This works for ListView, Repeaters etc. Hence, in most cases you don't need nor want to use the built in GridView events, and they tend to just get in your way.
Hence, just drop in a standard and simple asp button. In this example, I used a button with "runat=server", but using a asp button tends to be a better choice. I ONLY used the "button" in place of a asp one, since I wanted to include a font awesome (icon).
Please try this code.
document.addEventListener("DOMContentLoaded", function () { var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { console.log("UpdatePanel refreshed, running JavaScript function..."); var grid = document.getElementById(''); if (!grid) { console.log("GridView2 not found."); return; } var rowCount = grid.rows.length; console.log("Row count: " + rowCount); for (var i = 1; i '); if (grid && grid.rows.length > rowIndex) { var cell = grid.rows[rowIndex].cells[cellIndex]; return cell ? cell.innerText.trim() : null; } return null; }