How populate Kendo grid with Ajax?

Question

I have a grid on a page and I wanna populate the grid with the results of Ajax function, but I don't know do this correctly. I already seen some examples, but I don't know how to use them in my situation. So, thanks for the help.

Ajax Function:

$.ajax({
   type: "POST",
   url: "../ContractManagerWS.asmx/LanguagesGet",                        
   dataType: "json",
   contentType: "application/json; charset=utf-8",
   success: function (data) {
      var result = '{ "languages": [ ';
      for (var i = 0; i < data.d.length; ++i) {
         result += '{ "LANG_ID": "' + data.d[i].LANG_ID + '", "LANG_DT_DEACTIVATED": "' + data.d[i].LANG_DT_DEACTIVATED + '", "LANG_TX_CODE": "' + data.d[i].LANG_TX_CODE + '", "LANG_TX_NAME": "' + data.d[i].LANG_TX_NAME + '" },';
      }
      console.log(result += ' ] }');
   }
});

var result returns

 {
    "languages": [
                  {
                    "LANG_ID": "0",
                    "LANG_DT_DEACTIVATED": "",
                    "LANG_TX_CODE": "pt-BR",
                    "LANG_TX_NAME": "Português"
                  },
                  {
                    "LANG_ID": "1",
                    "LANG_DT_DEACTIVATED": "",
                    "LANG_TX_CODE": "en-US",
                    "LANG_TX_NAME": "English"
                  },
                 ]
 }

My Grid:

$("#grid").kendoGrid({        
    reorderable: true,
    resizable: true,
    columnMenu: {
        filterable: false,
        sortable: false
    },
    filterable: {
        mode: "row"
    },
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    scrollable: {
        virtual: true
    },
    toolbar: ["create"],
    height: 300,
    columns: [
        { field: "LANG_ID", title: "ID"},
        { field: "LANG_TX_NAME", title: "Nome"},
        { field: "LANG_TX_CODE", title: "Código"},
        { command: ["Editar"], title: "Editar"},
        { command: ["Desativar"], title: "Desativar" },
        { field: "LANG_DT_DEACTIVATED", title: "Desativado em"}
    ],
    editable: "popup"
});

Answer 1

Try this at the end of the ajax success:

var ds = new kendo.data.DataSource({
    data: result["languages"]
});

$("#grid").data("kendoGrid").setDataSource(ds);

Answer 2

Ok. And I need to set something else? Cause, the grid is still empty.

data.d returns:

[Object, Object]
       0: Object
         LANG_DT_DEACTIVATED: null
         LANG_ID: 0
         LANG_TX_CODE: "pt-BR"
         LANG_TX_NAME: "Português"
         __type: "ContractManager.Language"
         __proto__: Object
       1: Object
         LANG_DT_DEACTIVATED: null
         LANG_ID: 1
         LANG_TX_CODE: "en-US"
         LANG_TX_NAME: "English"
         __type: "ContractManager.Language"
         __proto__: Object
       length: 2
       __proto__: Array[0]

Answer 3

I just do not understand why the "languages" inside [ ].

var ds = new kendo.data.DataSource({
    data: result["languages"]
});

But what I tried to do in my Ajax function...

When I put the result in data data: { "languages": [result] }, didn't work.

But when I copied the result of console.log(result); and put in data data: { "languages": [{ "LANG_ID": "0", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "pt-BR", "LANG_TX_NAME": "Português" }, { "LANG_ID": "1", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "en-US", "LANG_TX_NAME": "English" }, ] }, worked.

So, I really don't know what is wrong.

$.ajax({
    type: "POST",
    url: "../ContractManagerWS.asmx/LanguagesGet",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        var result;
        for (var i = 0; i < data.d.length; ++i) {
            result +=' { "LANG_ID": "' + data.d[i].LANG_ID + '", "LANG_DT_DEACTIVATED": "' + data.d[i].LANG_DT_DEACTIVATED + '", "LANG_TX_CODE": "' + data.d[i].LANG_TX_CODE + '", "LANG_TX_NAME": "' + data.d[i].LANG_TX_NAME + '" },';
        }
        var dataSource = new kendo.data.DataSource({

            //didn't work
            data: { "languages": [result] },

            //worked
            data: { "languages": [{ "LANG_ID": "0", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "pt-BR", "LANG_TX_NAME": "Português" }, { "LANG_ID": "1", "LANG_DT_DEACTIVATED": "null", "LANG_TX_CODE": "en-US", "LANG_TX_NAME": "English" }, ] }, 

            schema: { data: "languages" }
        });            
        $("#grid").data("kendoGrid").setDataSource(dataSource);
    }
});

And thanks for the tips so far.