Kendo grid not showing any data

Question

Presently, the javascript should data being received, but it is now showing up in the grid.

Here is the code in my *.cshtml file, which is to show the results of a given query:

                        <div class="col-md-6 fill-height">
                           <div class="row btn-row">
                                <div class="sxs">
                                    <button id="run-test-rule-btn" title="Test Rule">
                                    </button>
                                    <span class="button-caption">Test Rule</span>
                                </div>
                            </div>
                            <div class="row">
                                <textarea id="rule-sql" name="Rule Sql" style=""></textarea>
                            </div>
                            <div class="row fill-height">
                                <div id="query-results-grid">
                                </div>
                            </div>
                        </div>

Here is some of the code in my *.js file:

var IDS = {
    queryResultsGrid: "#query-results-grid",
    ...
    runTestRuleBtn: "#run-test-rule-btn",
};
var Grids = {
    TestRuleResultsGrid: null,
    ...
};

var PageState = {
    ...
    AddingRule: false,
    TestRuleResult: null
};

function initQueryResultsGrid() {
    $(IDS.queryResultsGrid).kendoGrid({
        selectable: true,
        scrolable: true,
        sortable: false,
        columns: [
            { field: "UWI", title: "UWI", width: "100%", attributes: { tabindex: "1" } }
        ],

        change: function() {
            var selectedDataItem = this.dataItem(this.select());
            if (PageState.Selected.TestRuleResult !== selectedDataItem.TestRuleResult) {
                PageState.Selected.TestRuleResult = selectedDataItem.TestRuleResult;
                testRuleResultsSelectionChanged();
            }
        },
        editable: false
    });

    Grids.TestRuleResultsGrid = $(IDS.queryResultsGrid).data('kendoGrid');
}

function execTestRule() {
    $.ajax({
        type: 'POST',
        url: "ExecuteTestRule",
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify({
            ruleSql : PageState.SqlEditor.RuleSql.getValue(),
            parameters: PageState.RuleParameters
        }),
        success: function (matchedUwiList) {
            PageState.TestRuleResult = matchedUwiList;

            var dataSource = new kendo.data.DataSource({
                data: matchedUwiList
            });
            Grids.TestRuleResultsGrid.setDataSource(dataSource);
            PageState.Selected.ChildUwi = null;
            updateButtonStates();
        }
    });
}

Here is the code in my controller:

    public ActionResult ExecuteTestRule(string ruleSql, List<PdsMatchRuleParam> parameters = null)
    {
        return Json(new MatchDataSource().ExecuteTestRule(ruleSql, parameters), JsonRequestBehavior.AllowGet);
    }

Here is the code in my model:

    public List<string> ExecuteTestRule(string ruleRawSql, List<MatchRuleParam> parameters)
    {
        var da = new DataAccess();
        var ruleSql = ruleRawSql.Replace(@"{KEY}", "#*$pkey");
        var dbParameters = new List<DataAccess.DbParameter>();

        dbParameters.Add(new DataAccess.DbParameter("pkey", DbType.AnsiString, 4000,
            parameters[4].DefaultValue));
        var dt = da.Select(ruleSql, dbParameters.ToArray());
        var uwis = (from DataRow r in dt.Rows
            select r["UWI"].ToString()).ToList();

        return uwis;
    }

Here is the data that is present in dataSource Grids.TestRuleResultsGrid.setDataSource(dataSource); so I know it is getting the proper data from the database:

matchedUwiList
["10115348", "10115348-001", "10117434-000"]

What am I missing? TIA.

Answer 1

@JamieD77 has the right idea--this is what I ended up doing--adding an anonymous type to give some structure to the JSON objects, though @JamieD77's answer is better because he has kept the anonymous object in the controller, which I think is a better place for it:

    public object ExecuteTestRule(string ruleRawSql, List<PdsMatchRuleParam> parameters)
    {
        var da = new DataAccess();
        var ruleSql = ruleRawSql.Replace(@"{KEY}", "#*$pKey");
        var dbParameters = new List<DataAccess.DbParameter>();

        dbParameters.Add(new DataAccess.DbParameter("pKey", DbType.AnsiString, 4000,
            parameters[4].DefaultValue));
        var dt = da.Select(ruleSql, dbParameters.ToArray());
        var uwis = (from r in dt.AsEnumerable()
            select new
            {
                UWI = r.ToString()
            }).ToList();

        return uwis;
    }

Answer 2

this is a lot to process but my first instinct would be to change your ExecuteTestRule to return a json result that contains UWI as a field name

public ActionResult ExecuteTestRule(string ruleSql, List<PdsMatchRuleParam> parameters = null)
    {
        return Json(new MatchDataSource().ExecuteTestRule(ruleSql, parameters)
            .Select(a => new {UWI = a}), JsonRequestBehavior.AllowGet);
    }