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