Populating Kendo Grid With Search Results MVC app

Question

I have been working on an application that implements CRUD actions. I am fairly new to Kendo. I have created an observable object, which will allow me to send a whole object to my controller. My controller then gets the object and filters out the client name and then send it to a repo class that calls my database and searches for the user name. Once the results are retrieved in a list, they are sent back to my controller, which then returns it as a JSON object that will be populated my grid. From the Kendo examples and documentation I have created the following code, but the Kendo grid does not seem to populate.

This is My JS/Kendo Script:

$(document).ready(function () {
var viewModel = kendo.observable({
    client: {
        clientName: "",
        clientNumber: "",
        clientType: "",
    },

    dropdownlist: ["HCC", "Tax", "Audit", "Advisory"],

    create: function (e) {
        var userRequest = $("#clientname").val();
        if (userRequest) {
            client.read();
            client.sync();
        }
        if (!userRequest) {
            e.preventDefault();
            alert("Please Enter Client Name");
        }
    }
});

kendo.bind($("#engagementForm"), viewModel);

var client = new kendo.data.DataSource({
    transport: {
        read: {
            url: "Client/SearchClient",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            method: "POST",
        },
        destroy: {
            url: "Client/DeleteClient",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            complete: function (e) {
                alert("Client Removed");
            }

        },
        update: {
            url: "Client/EditCustomer",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            complete: function (e) {
                alert("Client Updated");
            }
        },
        create: {
            url: "Client/CreateInformation",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: "POST",
            complete: function (e) {
                alert("Client Created");
            }
        },
        parameterMap: function (data, operation) {
            switch (operation) {
                case "read":
                    return JSON.stringify(viewModel);
                    break;
                case "create":
                    return JSON.stringify(data);
                    break;
                case "update":
                    return JSON.stringify(data);
                    break;
                case "destroy":
                    return JSON.stringify(data);
                    break;
            }
        }
    },

    schema: {
        data: "list",
        model: {
            id: "clientNumber",

            fields: {
                clientNumber: { type: "int" },
                clientName: { type: "string" },
                clientType: { type: "string" },
            },
        }
    }
});

$("#grid").kendoGrid({

        dataSource: {
            type: "json",
            transport: {
                read: "Client/SearchClient",
                contentType: "application/json; charset=utf-8",
            }
        },

    toolbar: ["create"],
    columns: [{
        field: "clientNumber",
        title: "Client Number",
    },
    {
        field: "clientName",
        title: "Client Name",
    },
    {

        field: "clientType",
        title: "Client Type",
        editor: function (e) {
            $('<input data-role="dropdownlist" id = "dlist" data-bind="source: dropdownlist , value: clientType">')
            .appendTo(e)
            .kendoDropDownList({
                optionLabel: "Engagement Types",
                dataSource: viewModel.dropdownlist,
            });
        }
    },
    {
        command: ["edit", "destroy"]
    }],
    editable: "popup",
    edit: function (e) {
        if (e.model.isNew() == false) {
            $('input[name=clientNumber]').parent().html(e.model.clientNumber);
        }
    }
})


});

This is my controller that will receive the wanted search from the user:

[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
    Repo repo = new Repo();
    var search = client.clientName; // Just want to get the client name
    repo.SearchClient(search); // Sending Just the Client Name 
    JsonResult result = new JsonResult();
    return Json(new
    {
        list = result,
        //count = result.Count
    }, JsonRequestBehavior.AllowGet);
}

This is my Repo class that will search for the client name:

public List<ClientInfo> SearchClient(string clientName)
{
    List<ClientInfo> client = new List<ClientInfo>();
    using (SqlConnection conn = new SqlConnection(connectionString))
    {
        conn.Open();
        try
        {
            SqlCommand command = new SqlCommand("SELECT * FROM Table_1 WHERE ClientName =@clientName", conn);
            command.Parameters.AddWithValue("@clientName", clientName);
            SqlDataReader reader = command.ExecuteReader();

                while (reader.Read())
                {
                    ClientInfo data = new ClientInfo();
                    data.clientName = reader["ClientName"].ToString();
                    data.clientNumber = reader["ClientNumber"].ToString();
                    data.clientType = reader["ClientType"].ToString();
                    client.Add(data);
                }                    
        }
        catch
        {
            throw;
        }
    }
    return client;
}

UPDATED 12/21/15 1:50 pm EST

I have took this approach to simplify things. This should work but I am getting a 404 error in Fiddler.

My Updated Controller for my problem:

public ActionResult SearchResult()
{
    Repo repo = new Repo();
    ClientInfo data = new ClientInfo();
    List<ClientInfo> searchResult = new List<ClientInfo>();
    searchResult = repo.SearchClient(data);
    JsonResult result = new JsonResult();
    result.Data = searchResult;
    result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
    return result;
}

[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
    Repo repo = new Repo();
    repo.SearchClient(client);
    return null;

}

My updated Kendo Grid:

$("#grid").kendoGrid({

    dataSource: {

        transport: {
            read: "Client/SearchResult",
            contentType: "application/json; charset=utf-8",
            type: "json",
        }
    },

    toolbar: ["create"],
    columns: [{
        field: "clientNumber",
        title: "Client Number",
    },
    {
        field: "clientName",
        title: "Client Name",
    },
    {

        field: "clientType",
        title: "Client Type",
        editor: function (e) {
            $('<input data-role="dropdownlist" id = "dlist" data-bind="source: dropdownlist , value: clientType">')
            .appendTo(e)
            .kendoDropDownList({
                optionLabel: "Engagement Types",
                dataSource: viewModel.dropdownlist,
            });
        }
    },
    {
        command: ["edit", "destroy"]
    }],
    editable: "popup",
    edit: function (e) {
        if (e.model.isNew() == false) {
            $('input[name=clientNumber]').parent().html(e.model.clientNumber);
        }
    }
})

Answer 1

Your repo.SearchClient(search) is returning List<ClientInfo> and result variable is empty JsonResult. Make this way:

[HttpPost]
public ActionResult SearchClient(ClientInfo client)
{
    Repo repo = new Repo();
    var search = client.clientName; // Just want to get the client name
    return Json(new
    {
        list = repo.SearchClient(search),
        //count = result.Count
    }, JsonRequestBehavior.AllowGet);
}