jQWidgets Forums

Tagged: JQXGRID VS2013 Express ASP.NET VB MYSQL

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

JQXGRID no data to display – VS2013 Express + ASP.NET VB + MYSQL Posts

September 16, 2014 at 10:47 am JQXGRID no data to display – VS2013 Express + ASP.NET VB + MYSQL #59566

Participant

I all
Hope someone can help me.

I have a problem binding mysql database with jqxgrid in asp.net using vb.net (VS2013 Express Edition)
using tutorial sample, changing just something to connect db.

In my page i have this code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
</head>
<body>
	<form id="form1" runat="server">
    <link href="../_Jquery/jqwidgets/Styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="../_Jquery/jqwidgets/Styles/jqx.classic.css" rel="stylesheet" type="text/css" />
    <script src="../_Jquery/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxcore.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxdata.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxgrid.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxmenu.js" type="text/javascript"></script>
    <script src="../_Jquery/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
    <script type="text/javascript">
    	$(document).ready(function () {
    		//Getting the source data with ajax GET request
    		source = {
    			datatype: "xml",
    			datafields: [
								{name: 'idCustomers'},
							{ name: 'CompanyName' },
							{ name: 'ContactName' },
							{ name: 'ContactTitle' },
							{ name: 'City' },
							{ name: 'Country' },
							{ name: 'Address' }
    			],
    			async: false,
    			record: 'Table',
    			url: '../ServiziOlbm.svc/GetCustomers',
    		};
    		var dataAdapter = new $.jqx.dataAdapter(source,
										{ contentType: 'application/json; charset=utf-8' }
						);
    		$("#jqxgrid").jqxGrid({
    			source: dataAdapter,
    			theme: 'classic',
    			columns: [
								{ text: 'idCustomers', dataField: 'idCustomers', width: 250 },
											{ text: 'Company Name', dataField: 'CompanyName', width: 250 },
											{ text: 'Contact Name', dataField: 'ContactName', width: 150 },
											{ text: 'Contact Title', dataField: 'ContactTitle', width: 180 },
											{ text: 'Address', dataField: 'Address', width: 180 },
											{ text: 'City', dataField: 'City', width: 80 },
											{ text: 'Country', dataField: 'Country', width: 100 }
    			]
    		});
    	});
    </script>
    <div id="jqxgrid"></div>

	</form>
</body>
</html>

And in my service.svc when i recall methods

<OperationContract()>
	<WebInvoke(Method:="GET", ResponseFormat:=WebMessageFormat.Json)> _
	Public Function GetCustomers() As String
		Dim query As String = "SELECT * FROM customers"
		Dim cmd As New MySqlCommand(query)
		' Populate the DataSet.
		Dim data As DataSet = GetData(cmd)
		' return the Customers table as XML.
		Dim writer As New System.IO.StringWriter()
		data.Tables(0).WriteXml(writer, XmlWriteMode.WriteSchema, False)
		Return writer.ToString()
	End Function

	Private Function GetData(cmd As MySqlCommand) As DataSet
		Dim strConnString As String = ConfigurationManager.ConnectionStrings("OnLineBasketballManager").ConnectionString
		Using con As New MySqlConnection(strConnString)
			Using sda As New MySqlDataAdapter()
				cmd.Connection = con
				sda.SelectCommand = cmd
				Using ds As New DataSet()
					sda.Fill(ds)
					Return ds
				End Using
			End Using
		End Using
	End Function
End Class

When i display the page grid show “no data to display”

This is my writer.tostring()

<NewDataSet>    <xs:schema id="NewDataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">      <xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:MainDataTable="Table" msdata:UseCurrentLocale="true">        <xs:complexType>          <xs:choice minOccurs="0" maxOccurs="unbounded">            <xs:element name="Table">              <xs:complexType>                <xs:sequence>                  <xs:element name="idCustomers" type="xs:int" minOccurs="0" />                  <xs:element name="CompanyName" type="xs:string" minOccurs="0" />                  <xs:element name="ContactName" type="xs:string" minOccurs="0" />                  <xs:element name="ContactTitle" type="xs:string" minOccurs="0" />                  <xs:element name="City" type="xs:string" minOccurs="0" />                  <xs:element name="Country" type="xs:string" minOccurs="0" />                  <xs:element name="Address" type="xs:string" minOccurs="0" />                </xs:s
equence>              </xs:complexType>            </xs:element>          </xs:choice>        </xs:complexType>      </xs:element>    </xs:schema>    <Table>      <idCustomers>1</idCustomers>      <CompanyName>xxx</CompanyName>      <ContactName>a</ContactName>      <ContactTitle>s</ContactTitle>      <City>d</City>      <Country>f</Country>      <Address>g</Address>    </Table>    <Table>      <idCustomers>2</idCustomers>      <CompanyName>ccc</CompanyName>      <ContactName>fd</ContactName>      <ContactTitle>f</ContactTitle>      <City>d</City>      <Country>d</Country>      <Address>df</Address>    </Table>  </NewDataSet>

Something wrong?
Please help me to understand.

Thank you so much.
Bye

September 16, 2014 at 3:18 pm JQXGRID no data to display – VS2013 Express + ASP.NET VB + MYSQL #59573

Peter Stoev

Keymaster

Hi PallaDiPelo,

In the script, you specify that you bind to a “XML” data source, but your Server’s method is defined as to return JSON data. This is wrong. You should either use XML or JSON in both places.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 16, 2014 at 3:32 pm JQXGRID no data to display – VS2013 Express + ASP.NET VB + MYSQL #59575

PallaDiPelo

Participant

Yeah thank you
I noticed it
I correct both places to xml,but still doesn’t work.
Any suggestions?

I also try with json with this code

	$(document).ready(function () {
    		var source = {
    			type: "GET",
    			datatype: "json",
    			datafields: [
											{ name: 'Nome' },
											{ name: 'Posizione' }
    			],
    			url: '../ServiziOlbm.svc/PopolaGriglia',
    			cache: false,
    			root: 'data'
    		};

    		//Preparing the data for use
    		var dataAdapter = new $.jqx.dataAdapter(source, {
    			contentType: 'application/json; charset=utf-8',
    			downloadComplete: function (data, textStatus, jqXHR) {
    				return data.d;
    			}
    		}
						);

    		$("#jqxgrid").jqxGrid({
    			source: dataAdapter,
    			columns: [
											{ text: 'First Name', dataField: 'Nome', width: 100 },
											{ text: 'Last Name', dataField: 'Posizione', width: 100 }
    			]
    		});
    	});

and

	Public Function PopolaGriglia() As String

		Dim OLBM_ConnDb As New OLBM_ServiziDb
		Dim Connessione As MySqlConnection = OLBM_ConnDb.OLBM_ApriConnessioneDb
		Dim Cmd As New MySqlCommand("SELECT nome, posizione FROM Players")
		Dim Xjson As String

		Using Connessione
			Cmd.Parameters.AddWithValue("@Param", "value")
			Cmd.Connection = Connessione
			Using reader As MySqlDataReader = Cmd.ExecuteReader()
				Xjson = Me.ReadToJson(reader)
			End Using
		End Using

		Dim someObject As Object = Nothing
		Dim json = New System.Web.Script.Serialization.JavaScriptSerializer()
		Dim result = json.Deserialize(Of String)(Xjson)

		'Dim Data = "{" & Chr(34) & "data:" & Chr(34) & "'[{ " & Chr(34) & "Nome" & Chr(34) & ": " & Chr(34) & "Alfreds Futterkiste" & Chr(34) & ", " & Chr(34) & "Posizione" & Chr(34) & ": " & Chr(34) & "Maria Anders" & Chr(34) & "}, {" & Chr(34) & "Nome" & Chr(34) & ": " & Chr(34) & "Sales Representative" & Chr(34) & ", " & Chr(34) & "Posizione" & Chr(34) & " : " & Chr(34) & "La mia" & Chr(34) & "}]}"
		'Dim Data As String = "{" & Chr(34) & "data" & Chr(34) & ":[{" & Chr(34) & "firstname" & Chr(34) & ":" & Chr(34) & "Andrew" & Chr(34) & "," & Chr(34) & "lastname" & Chr(34) & ":" & Chr(34) & "Fuller" & Chr(34) & "}]}"
		'Dim j As String = New JavaScriptSerializer().Deserialize(Of String)(json)
		Return result
	End Function

	Public Function ReadToJson(reader As MySqlDataReader) As String
		Dim cols As New List(Of String)(10)
		Dim ncols As Integer = reader.FieldCount
		For i As Integer = 0 To ncols - 1
			cols.Add(reader.GetName(i))
		Next
		Dim sbJson As New StringBuilder("{" & Chr(34) & "data" & Chr(34) & ":[")
		'process each row
		While reader.Read()
			sbJson.Append("{")
			For Each col As String In cols
				sbJson.AppendFormat("""{0}"":""{1}"", ", col, reader(col))
			Next
			sbJson.Replace(", ", "},", sbJson.Length - 2, 2)
		End While
		sbJson.Replace("},", "}]", sbJson.Length - 2, 2)
		sbJson.Append("}")
		Return sbJson.ToString()
	End Function

but i have issue on serializing string.
Any help will be appreciated.

Bye

September 16, 2014 at 3:35 pm JQXGRID no data to display – VS2013 Express + ASP.NET VB + MYSQL #59576

Peter Stoev

Keymaster

Hi PallaDiPelo,

On this page: http://www.jqwidgets.com/jquery-widgets-demo/demos/aspnetmvc/index.htm, you will find working online demos with source code which should be helpful for you to understand how to data bind jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.