Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
InfraOracle
695
Not able to bind to grid
posted

Hi,

WCF webservice returning JSON Sting to UI, I am able to see data in browser, but not able to bind to grid. It is working if i assigned to string and bind to grid. 

Code below :

<script id="JsonDataTemplate" type="text/x-jquery-tmpl">

        <tr> <td> ${Description} </td> <td></tr>

 </script>

 

 $.ig.loader({

            scriptPath: '../../js/',

            cssPath: '../../css/',

            resources: 'igDataSource'

        });

 

 $.ig.loader(function () {

            BindJson();

        });

 

function BindJson() {

            $('table thead').html("<tr><th>Applies To</th></tr>");

 

            var jsonSchema = new $.ig.DataSchema("json", { fields: [

       {name: "Description", type: "string" } ]

            });

 

            url = "http://localhost:4293/DealService.svc/Get_data"; // Returning JSON String : [{ "Description": "Mock subject", "Id": 242, "Notes": "" }]

         

           // ds = new $.ig.DataSource({ dataSource: url, schema: jsonSchema, responseDataType: "json" });   tried but not working

            ds = new $.ig.DataSource({dataSource: url}); //tried not working

            // ds  = new $.ig.JSONDataSource({ dataSource: categoriesWithProducts, responseDataKey: "d" });  tried not working

 

           // ds = new $.ig.DataSource({ dataSource: jsonData });  Working with local JSON string

            ds.dataBind();

 

            $("#t1 tbody").empty();

            $("#JsonDataTemplate").tmpl(ds.dataView()).appendTo("#t1 tbody");

        }

 jsonData = [{ "Description": "Mock subject"}]; 

 

Can you please let me know. Thanks

  • 19693
    Verified Answer
    posted

    Hello InfraOracle ,

    The issue, that you are experiencing, happens because the databinding is still not completed when you append the dataView .

    For the purpose you do this in the callback function when data binding is complete.

    $.ig.loader().load("igGrid.*,igDataSource,igShared,igTemplating",
        function () {
            rowTemplate = "  ${ProductID}   ${Name}   ${ProductNumber} ${StandardCost}";
            url = "http://localhost:2880/AdventureWorksService.svc/Product?$format=json";
            ds = new $.ig.DataSource({
                type: "remoteUrl",
                dataSource: url,
                responseDataKey: "d",
                fields: [
                    { name: "ProductID", type: "number" },
                    { name: "Name", type: "string" },
                    { name: "ProductNumber", type: "string" },
                    { name: "StandardCost", type: "number" }
                ],
                callback: function (success, error) {
                    if (success) {
                        $("#JsonDataTemplate").tmpl(ds.dataView()).appendTo("#table1");
                    } else {
                        alert(error);
                    }
                }
            });
            ds.dataBind();
        });

    Please take a look at the help article regarding this :

    http://help.infragistics.com/NetAdvantage/jquery/2012.1?page=igDataSource_Getting_started_with_igDataSource_and_WCF.html

    More for the igDataSource options you can find in the API documentation:

    http://help.infragistics.com/jQuery/2012.1/ig.DataSource#options

    Hope this helps.