I trying to DataBind to a WebDataGrid from the client side from a page method. I'm really close but I'm getting the following error message:
Unable to get value of the property set_dataSource object is null or undefined
Here is my form file contents:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ztest2.aspx.vb" Inherits="labor.ztest2" %><%@ Register assembly="Infragistics35.Web.v11.1, Version=11.1.20111.2178, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.LayoutControls" tagprefix="ig" %><%@ Register assembly="Infragistics35.Web.v11.1, Version=11.1.20111.2178, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.GridControls" tagprefix="ig" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server"> <script type="text/javascript" src="jquery-1.7.1.js"></script> <title></title></head>
<script type="text/javascript"> var tabelem = null; function WebTab1_SelectedIndexChanging(sender, eventArgs) { var tabnum = eventArgs.get_tabIndex(); var tab = $find("WebTab1"); var tabid = tab.get_tabs()[tabnum]; var tabfield = null;
if (tabnum == 0) { tabfield = tabid.findChild('qty1'); tabelem = tabfield; window.setTimeout('try{tabelem.focus();}catch(ex){}', 1); } if (tabnum == 1) { tabfield = tabid.findChild('qty2'); tabelem = tabfield; window.setTimeout('try{tabelem.focus();}catch(ex){}', 1); } if (tabnum == 2) { tabfield = tabid.findChild('qty3'); tabelem = tabfield; window.setTimeout('try{tabelem.focus();}catch(ex){}', 1); } }
function QtyChange() { var totsale, qty, price; var parms;
totsale = 0; qty = 0; price = 0; parms = "";
qty = $get('<%=qty1.ClientID%>').value; price = $get('<%=price1.ClientID%>').value; totsale = qty * price; document.getElementById("<%=totsale1.ClientID%>").value = totsale;
parms = '{"qty":"' + qty + '"}';
$.ajax({ type: "POST", url: "ztest2.aspx/QtyMsg", data: parms, contentType: "application/json; charset=utf-8", datatype: "json", success: function(datatable) { var qtygrid = $find("WebDataGrid1"); qtygrid.set_dataSource(datatable.d); qtygrid._pi.show(qtygrid); qtygrid.applyClientBinding(); qtygrid._pi.hide(qtygrid); } }); }
</script>
<body>
<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager><table> <tr> <td> <ig:WebTab ID="WebTab1" runat="server" Height="400px" Width="650px"> <tabs> <ig:ContentTabItem runat="server" Text="Sales Scenario 1"> <Template> <br /> <table> <tr> <td><asp:Label ID="Label1" runat="server" Font-Bold="True" Text="Quantity"></asp:Label></td> <td><asp:TextBox ID="qty1" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="1" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label2" runat="server" Font-Bold="True" Text="Price"></asp:Label></td> <td><asp:TextBox ID="price1" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="2" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label3" runat="server" Font-Bold="True" Text="Total Sales"></asp:Label></td> <td><asp:TextBox ID="totsale1" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="3" Width="70px" BackColor="PaleGoldenrod"></asp:TextBox></td> </tr> </table> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Sales Scenario 2" Hidden="True"> <Template> <br /> <table> <tr> <td><asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Quantity"></asp:Label></td> <td><asp:TextBox ID="qty2" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="5" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label5" runat="server" Font-Bold="True" Text="Price"></asp:Label></td> <td><asp:TextBox ID="price2" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="6" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label6" runat="server" Font-Bold="True" Text="Total Sales"></asp:Label></td> <td><asp:TextBox ID="totsale2" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="7" Width="70px" BackColor="PaleGoldenrod" ReadOnly="true"></asp:TextBox></td> </tr> </table> </Template> </ig:ContentTabItem> <ig:ContentTabItem runat="server" Text="Sales Scenario 3" Hidden="True"> <Template> <br /> <table> <tr> <td><asp:Label ID="Label7" runat="server" Font-Bold="True" Text="Quantity"></asp:Label></td> <td><asp:TextBox ID="qty3" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="9" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label8" runat="server" Font-Bold="True" Text="Price"></asp:Label></td> <td><asp:TextBox ID="price3" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="10" Width="70px"></asp:TextBox></td> <td> </td> <td><asp:Label ID="Label9" runat="server" Font-Bold="True" Text="Total Sales"></asp:Label></td> <td><asp:TextBox ID="totsale3" runat="server" Font-Bold="True" Font-Names="Arial" TabIndex="11" Width="70px" BackColor="PaleGoldenrod" ReadOnly="true"></asp:TextBox></td> </tr> </table> </Template> </ig:ContentTabItem> </tabs> <ClientEvents SelectedIndexChanging="WebTab1_SelectedIndexChanging" /> </ig:WebTab> </td> <td> </td> <td> <ig:WebTab ID="WebTab2" runat="server" Height="400px" Width="650px"> <tabs> <ig:ContentTabItem runat="server" Text="Grid Display 1"> <Template> <br /> <table> <tr> <td><ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="150px" Width="500px" /></td> </tr> <tr> <td> </td> </tr> <tr> <td><ig:WebDataGrid ID="WebDataGrid2" runat="server" Height="150px" Width="500px" /></td> </tr> </table> </Template> </ig:ContentTabItem> </tabs> </ig:WebTab> </td> </tr></table><br /><asp:Button ID="salebutt" runat="server" Text="New Sales Scenario" Font-Bold="True" />
</form>
</body>
</html>
And here is my code behind:
Imports System.Web.Script.SerializationImports Infragistics.Web.UI.GridControlsImports Infragistics.Web.UI.LayoutControls
Partial Public Class ztest2 Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim confocus, jsfocus As String
confocus = qty1.ClientID jsfocus = "window.setTimeout(""try{document.getElementById('" & confocus & "').focus();} catch(e){}"",1000);" ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "TabFocusKey", jsfocus, True)
qty1.Attributes.Add("onchange", "BLOCKED SCRIPTQtyChange()")
End Sub
Protected Sub salebutt_Click(ByVal sender As Object, ByVal e As EventArgs) Handles salebutt.Click
Dim tabflag As String
tabflag = ""
If WebTab1.Tabs(1).Hidden = True Then tabflag = "Y" WebTab1.Tabs(1).Hidden = False totsale2.BackColor = Drawing.Color.PaleGoldenrod totsale2.Font.Bold = True End If If WebTab1.Tabs(2).Hidden = True And Len(Trim(tabflag)) = 0 Then tabflag = "Y" WebTab1.Tabs(2).Hidden = False totsale3.BackColor = Drawing.Color.PaleGoldenrod totsale3.Font.Bold = True End If
<System.Web.Services.WebMethod()> _ Public Shared Function QtyMsg(ByVal qty As String) As String
Dim serializer As JavaScriptSerializer = New JavaScriptSerializer Dim tabrows As New List(Of Dictionary(Of String, Object)) Dim tabrow As Dictionary(Of String, Object) Dim dtrow As DataRow Dim dttab As New DataTable()
If IsNumeric(qty) Then Else qty = 0 End If
dttab.Columns.Add("Quantity Message", System.Type.GetType("System.String")) dtrow = dttab.NewRow
If CDec(qty) <= 500 Then dtrow(0) = "Quantity Less Than Equal To 500" End If If (CDec(qty) >= 501 And CDec(qty <= 1000)) Then dtrow(0) = "Quantity Is Between 501 And 1000" End If If (CDec(qty) >= 1001 And CDec(qty <= 1500)) Then dtrow(0) = "Quantity Is Between 1001 And 1500" End If If (CDec(qty) >= 1501 And CDec(qty <= 2000)) Then dtrow(0) = "Quantity Is Between 1501 And 2000" End If If CDec(qty) >= 2001 Then dtrow(0) = "Quantity Over What We Expected!!!" End If
dttab.Rows.Add(dtrow)
For Each dr As DataRow In dttab.Rows tabrow = New Dictionary(Of String, Object)
For Each dc As DataColumn In dttab.Columns tabrow.Add(dc.ColumnName, dr(dc)) Next
tabrows.Add(tabrow) Next
Return serializer.Serialize(tabrows)
End Function
End Class
What am I missing? I'm on version 11.1
Hi,
You need to set EnableClientRendering="true" in order to be able to bind on the client.
regards,David Young
David, thanks for the response but I enabled client rendering on the grid and still got the same error message
Hello legalke,
Thank you for contacting Infragistics.
Since the WebDataGrid is inside a WebTab, it is possible that it is not referenced or captured at $find("WebDataGrid1").
I suggest using IEDev tools or running on debug mode and using Visual Studio's QuickWatch to identify the WebDataGrid's ID at runtime.
If you have any questions, please let me know as well.