JSON to Kendo Grid

Question

I want to feed some json data to my Kendo Grid. I'm taking the html route. Here's what I have:

Given the following:

<div id="#grid"></div>

JSON:

"{\"Columns\":{\"Column\":[{\"@Name\":\"key1\",\"@DataType\":\"Boolean\",\"#text\":\"True\"},{\"@Name\":\"key2\",\"@DataType\":\"String\",\"#text\":\"Hello World\"},{\"@Name\":\"key3\",\"@DataType\":\"Integer\",\"#text\":\"999\"}]}}"

xml version of the JSON:

<Columns>
          <Column Name=""key1"" DataType=""Boolean"">True</Column>
          <Column Name=""key2"" DataType=""String"">Hello World</Column>
          <Column Name=""key3"" DataType=""Integer"">999</Column>
    </Columns>

My failed JavaScript attempt:

$("#grid").kendoGrid({
    sortable: true,
    groupable: true,
    scrollable: true,
    height: "300px",
    pageable: {
        pageSizes: 9
    },
    columns:
    [
        { field: "Name" },
    ],
    dataSource:
    {
        transport:
        {
            read:
            {
                url: "/controller/action?param=" + myParam,
                dataType: "jsonp"
            }
        }
    },
    schema:
    {
        data: "Column"
    }

});

Answer 1

As you are expecting json data so you must use dataType:"json" instead of dataType:"jsonp"

now to read data in appropriate format you may use read function as below

transport: {
      read: function(options) {
        $.ajax( {
          url: "/controller/action?param=" + myParam,
          dataType: "json",
          success: function(result) {
            options.success(result.Columns.Column);
          }
        });

      },

i hope this will help you

Answer 2

Abbas's answer is perfect; except, 'result' should be parsed as json: var jResult = $.parseJSON(result);

Here's my test data:

public string ValidationResult()
{
    var doc = new XmlDocument();
    var xml = @"
    <dataset>
        <table>
            <fname>a1</fname>        
            <age>aa1</age>
        </table>
        <table>
            <fname>a2</fname>        
            <age>aa2</age>
        </table>
        <table>
            <fname>a3</fname>        
            <age>aa3</age>
        </table>
    </dataset>";
    ;
    doc.LoadXml(xml);
    return JsonConvert.SerializeXmlNode(doc);
}

As per Abbas's answer here's the full version of binding the grid to the above xml->json resultset:

$("#grid").kendoGrid({
    sortable: true,
    groupable: true,
    scrollable: true,
    height: "600px",
    pageable: {
        pageSizes: 9
    },
    columns:
    [
        { field: 'fname' },
        { field: 'age' }
    ],
    dataSource:
    {
        transport:
        {
            read: function (options)
            {
                $.ajax(
                {
                    url: "/Controller/Action?param=" + paramVal,
                    dataType: "json",
                    success: function (result)
                    {
                        var jResult = $.parseJSON(result);
                        options.success(jResult.dataset.table);
                    }
                });
            }
        }
    },
});