How to bind igGrid to server side object.

Answered (Not Verified) This post has 0 verified answers | 27 Replies | 4 Followers Thread's RSS feed.

Laxmi2012
Points 270
Replied On: Thu, Apr 5 2012 7:09 AM Reply

Hi,

I am using Infragistics 2011 vol 2 JQUERY Grid.  I need to bind the igGrid datasource to the datatable object available at server side .aspx.CS file.

Thanks.

  • Post Points: 35

All Replies

Answered (Not Verified) Replied On: Fri, Apr 6 2012 4:24 AM Reply

Hi,

Since you're using ASP.NET, you can create a web service which returns JSON, and point the grid's dataSourceUrl to the web service url. Here is an example about how to bind the grid to a WCF service:

http://samples.infragistics.com/jquery/grid/binding-to-wcf-service

Select Sample Source File to View => RemoteBinding.html 

Hope it helps. Thanks,

Angel

  • Post Points: 20
Laxmi2012
Points 270
Replied On: Fri, Apr 6 2012 4:33 AM Reply

Hi

Thanks for reply.

I have gone through the sample. But as per the requirement we are not looking WCF service.

Is there any possiblity that i can bind JQUERY igGrid (dataSource) directly to server side function written in .CS file that returns data in JSON format. 

Thanks.

  • Post Points: 20
Answered (Not Verified) Replied On: Fri, Apr 6 2012 5:57 AM Reply

Hello,

 

Actually, Dave Ward wrote this article some time ago:

http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/

 

I believe that it has the details you are looking for.

As for the grid, you can simply set the URL to the JSON-returning ASP page method as the grid's dataSource and you should be all set.

However, there are 2 alternative here:

1. You explicitly allow HTTP GET for this page method

or

2. Since ASP.NET defaults to using HTTP POSTs in order to ensure that your pages are secure, it won't work with the grid (or dataSource) directly as they will make GET requests to the dataSource URL (this is a design decision based on the REST standards).
In that case you will need to do

    $.ajax({
      type: "POST",
      url: "http://Default.aspx/YourPageMethod",
      data: "{}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(data) {

        $("#grid").igGrid({
             dataSource: data 

         });
      }

    });

 

 
Angel gave you the nod to WCF services because generally they are the recommended and more beneficial way of having a "service-like" experience.

 

Hope this helps.
Cheers,
Borislav 

  • Post Points: 20
Laxmi2012
Points 270
Replied On: Mon, Apr 16 2012 9:34 AM Reply

Thanks for update.

By using ig.JSONDataSource we are able to bind data to the grid. Now when user modifies the data on the igGrid, i need to send this updated datasource object to the web service as input parameter.

Can you please provide an information for the same?

 

  • Post Points: 20
Answered (Not Verified) Replied On: Tue, Apr 17 2012 8:55 AM Reply

Hi,

you can refer to the following article:

http://help.infragistics.com/Help/NetAdvantage/jQuery/2011.2/CLR4.0/HTML/igGrid_Updating.html

=> Persisting the changes to the server

Hope it helps. Thanks,

Angel

 

  • Post Points: 20
Laxmi2012
Points 270
Replied On: Thu, Apr 26 2012 4:19 AM Reply

Thanks for Reply.

The link was very helpful. Now, i need to the fomatting on the JQUERY igGrid.  The following are the requirements:

1. To merge igGrid cells.

2. To set CSS for Cells/Rows/Columns.

I need above urgnet basis.

Thanks in Advance.

 

 

  • Post Points: 35
triffle
Points 335
Replied On: Thu, Apr 26 2012 3:48 PM Reply

I'm trying to return JSon data in regards to a service call (using C# JavaScriptSerializer) and getting an error with the following data (from msg.d in my function).

 

        function getData() {
            $.ajax({
                type: 'POST',
                url: 'GetPerson.asmx/Person',
                data: "{SearchCriteria: '" + $("#SearchText").val() + "'}",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    //var grid = $("#SearchResults")[0];
                    //grid.dataSource = msg.d;
                    //grid("dataSourceObject", msg.d);
                    $("#SearchResults").igGrid({
                        dataSource: msg.d
                    });
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Something bad happened.  Code: " + xhr.status + ". Error: " + xhr.responseText);
                }
            });

JSON result:

[{"Id":1,"Name":"Joe","Age":"33","Address":"Somewhere"},{"Id":2,"Name":"Jack","Age":"31","Address":"Somewhere"},{"Id":3,"Name":"Jill","Age":"23","Address":"Somewhere"}]

Error:

Microsoft JScript runtime error: Syntax error, unrecognized expression:

  • Post Points: 5
triffle
Points 335
Replied On: Thu, Apr 26 2012 4:48 PM Reply

Here's the full message...
Microsoft JScript runtime error: Syntax error, unrecognized expression: [{"Id":1,"Name":"Joe","Age":"33","Address":"Somewhere"},{"Id":2,"Name":"Jack","Age":"31","Address":"Somewhere"},{"Id":3,"Name":"Jill","Age":"3","Address":"Somewhere"}]

  • Post Points: 20
Replied On: Thu, Apr 26 2012 4:56 PM Reply

Laxmi2012:
1. To merge igGrid cells.

The merged cells feature is coming up as a CTP (beta-like) in the upcoming release which will be out in matter of a week or so so you can check it out and use it.

Laxmi2012:
2. To set CSS for Cells/Rows/Columns.

What sort of CSS do you need?

  • Post Points: 5
Replied On: Thu, Apr 26 2012 5:00 PM Reply

Hi triffle,


Actually, I'm not sure I understand you - are you receiving a JavaScript error when accessing the input parameter of your AJAX call's success callback function?

Are you sure that that param (msg) really has a property "d"?

If possible, can you provide us with a sample project or a piece of dummy data with the same structure you are trying to use for the igGrid?


Thanks in advance! 

  • Post Points: 20
triffle
Points 335
Replied On: Thu, Apr 26 2012 5:19 PM Reply

I'm using JQuery-1.7.2 -- this is where the error is occurring. 

 It happens on this line of jquery:
 
                   $("#SearchResults").igGrid({
                        dataSource: msg,
                        dataSourceType: 'json',
                        responseDataKey: 'd'
                    });

 Here is the ajax call to get the json data:
        function getData() {
            $.ajax({
                type: 'POST',
                url: 'SearchService.asmx/SearchEntity',
                data: "{SearchCriteria: '" + $("#SearchText").val() + "'}",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',               
                success: function (msg) {
                    //var grid = $("#SearchResults")[0];
                    //grid.dataSource = msg.d;
                    //grid("dataSourceObject", msg.d);

                    $("#SearchResults").igGrid({
                        dataSource: msg,
                        dataSourceType: 'json',
                        responseDataKey: 'd'
                    });

//                    $("#SearchResults").igGrid("dataSourceObject", msg);
//                    $('#SearchResults').igGrid('dataBind');
                  
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Something bad happened.  Code: " + xhr.status + ". Error: " + xhr.responseText);
                }
            });
        }
    });

I'm using fiddler,here's the fiddler response from calling my web service:

{"d":"[{\"Id\":1,\"Name\":\"Jack\",\"Age\":\"33\",\"Address\":\"Somewhere\"},{\"Id\":2,\"Name\":\"Joe\",\"Age\":\"31\",\"Address\":\"Somewhere\"},{\"Id\":3,\"Name\":\"Jill\",\"Age\":\"24\",\"Address\":\"Somewhere\"}]"}

  • Post Points: 5
triffle
Points 335
Replied On: Thu, Apr 26 2012 5:22 PM Reply

Here's the grid in my read function:

        $("#SearchResults").igGrid({
            autoGenerateColumns: false,
            columns: [
                { headerText: "Id", key: "Id", width: "50px", dataType:"string" },
                { headerText: "Name", key: "Name", width: "100px", dataType: "string" },
                { headerText: "Age", key: "Age", width: "50px", dataType: "string" },
                { headerText: "Address", key: "Address", width: "100px", dataType: "string" }
                ],
             height: '300px'
        });

  • Post Points: 5
triffle
Points 335
Replied On: Thu, Apr 26 2012 5:25 PM Reply

Here's the related scripts/css that I'm referencing.  Could the later versions of JQuery/JQueryUI have something to do with it?

        <script src="scripts/jquery-1.7.2.min.js" type="text/javascript" ></script>
        <script src="scripts/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
        <script src="scripts/ig.ui.js" type="text/javascript"></script>
        <script src="scripts/jquery.tmpl.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" />
        <script src="css/ig.ui.min.js" type="text/javascript"></script>

 

 

  • Post Points: 5
triffle
Points 335
Replied On: Thu, Apr 26 2012 5:27 PM Reply

Where's my web method code:
    <WebMethod()> _
    <ScriptMethod(ResponseFormat:=ResponseFormat.Json)>
    Public Function SearchEntity(ByVal SearchCriteria As String) As String
        Dim entities As List(Of Ent) = New List(Of Ent)()
        Dim jqGrid As JQGrid = New JQGrid

        Dim ent1 As Ent = New Ent
        ent1.Id = 1
        ent1.Name = "Jack"
        ent1.Age = "33"
        ent1.Address = "Somewhere"
        entities.Add(ent1)

        Dim ent2 As Ent = New Ent
        ent2.Id = 2
        ent2.Name = "Joe"
        ent2.Age = "31"
        ent2.Address = "Somewhere"
        entities.Add(ent2)

        Dim ent3 As Ent = New Ent
        ent3.Id = 3
        ent3.Name = "Jill"
        ent3.Age = "24"
        ent3.Address = "Somewhere"
        entities.Add(ent3)

        Dim jsonString As String = New System.Web.Script.Serialization.JavaScriptSerializer().Serialize(entities)

        Return jsonString
    End Function

  • Post Points: 20
Page 1 of 2 (28 items) 1 2 Next > | RSS