How populate Kendo grid with Ajax?

1
votes

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"
});
3
jqueryajaxkendo-uigridkendo-grid
Either use a Kendo UI DataSource and configure it to the grid or use the grid's setDataSource() method. - Brett
Also, why are you looping over data.d and stringifying it when you could easily just bind it to the grid? This is wasteful. Your data.d is already an array of objects with the same property names that your grid columns bind to. - Brett

3 Answers

1
votes

Try this at the end of the ajax success: 

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

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

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]
0
votes

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.