CODEWITHSUNDEEP
javascriptslickgrid
chris
chris

Reputation: 561

SlickGrid not populating properly from Ajax call returning JSON

I have a slickgird which saves to the database and the calculatons work. however my issue is when returning data from the database to populate a slickgrid. I am calling an Ajax query which returns the data fine in the following format,

[
{
    'HeaderService': 'ServicerReview',
    'Service': '',
    'Numberof': '',
    'at': '',
    'Charged': '',
    'Total': '',
    'Total2': '',
    'Discount': '',
    'FFO': '',
    'EC': '',
    'ECat': '',
    'ECCost': '',
    'ECCostTotal': '',
    'ECCostTotal2': '',
    'Margin': ''
},
{
    'HeaderService': '',
    'Service': 'SeniorReviewer',
    'Numberof': '1',
    'at': '@',
    'Charged': '£600.00',
    'Total': '£600.00',
    'Total2': '',
    'Discount': '',
    'FFO': '',
    'EC': '1',
    'ECat': '',
    'ECCost': '£350.00',
    'ECCostTotal': '£350.00',
    'ECCostTotal2': '',
    'Margin': ''
},    
 .. and so on.
]

(. being other records of the same structure). which populates a variable called currentData Then I decorate the grid by

  var columns = [{ id: "HeaderService", name: "Category", field: "HeaderService", options: serviceHeaders, editor: Slick.Editors.SelectOption, width: 200 },
           { id: "Service", name: "Service", field: "Service", options: serviceActuals, editor: Slick.Editors.SelectOption, width: 150 },
           { id: "Numberof", name: "No", field: "Numberof", editor: Slick.Editors.Text, width: 50 },
           { id: "at", name: "", field: "at", width: 30 },
           { id: "Charged", name: "Per Unit", field: "Charged", editor: Slick.Editors.Text },
           { id: "Total", name: "Total", field: "Total", editor: Slick.Editors.Text },
           { id: "Total2", name: "Sub Total", field: "Total2", editor: Slick.Editors.Text },
           { id: "Discount", name: "Discount", field: "Discount", options: ",Yes", editor: Slick.Editors.SelectOption, cssClass: "greenbackground", width: 50 },
           { id: "FFO", name: "Fixed Fee", field: "FFO", editor: Slick.Editors.Text, cssClass: "greenbackground" },
           { id: "EC", name: "EC", field: "EC", editor: Slick.Editors.Text, width: 50 },
           { id: "ECat", name: "Cat", field: "ECat", editor: Slick.Editors.Text, width: 30 },
           { id: "ECCost", name: "Cost", field: "ECCost", editor: Slick.Editors.Text },
           { id: "ECCostTotal", name: "CostTotal", field: "ECCostTotal", editor: Slick.Editors.Text },
           { id: "ECCostTotal2", name: "CostTotal2", field: "ECCostTotal2", editor: Slick.Editors.Text },
           { id: "Margin", name: "Margin", field: "Margin", editor: Slick.Editors.Text }, ];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    editable: true,
    cellHighlightCssClass: "changed"
};

var currentData;

$(function () {
    var json = null;
    $.ajax({
        async: false,
        global: false,
        type: 'GET',
        url: '@Url.Action("GetDetailsforQuote")',
        dataType: "json",
        success: function (data) {
            currentData = "[" + data.toString() + "]";
            debugger;
            return data;
        }
    });

    data = currentData;
    alert(data);
    grid = new Slick.Grid("#myServicesGrid", data, columns, options);

But the grid is then displayed on the screen, the columns are fine but there are loads of empty rows, with no data(the data should only have 6 records). any ideas to what I am doing wrong?

Upvotes: 1

Views: 1862

Answers (1)

chris
chris

Reputation: 561

Got it... had to add

     data = eval("[" + currentData + "]");

    grid = new Slick.Grid("#myServicesGrid", data, columns, options);

thanks for looking.

Upvotes: 1

Related Questions