Kendo Grid changing depending on DropDownList

Question

Before I start I'll just say that I've looked at other answers before posting and none specifically help me.

I need to create a Kendo UI grid in ASP.NET MVC that changes depending on what the users selects from a DropDownList. I will eventually be using data from a database, but currently I'm trying to learn with random hard-coded data.

I found a tutorial online that shows me how to do it with data from a sample database, but I can't set that up for reasons I cant explain. So I'm trying to adapt the code from that tutorial to work with my controllers and models. This might be set up completely wrong as I'm relatively new to ASP.NET MVC.

So here's the tutorial I'm trying to follow.

This is my controller:

       public class LookupValueController : Controller
        {
            private List<LookupModel> tables = new 
List<LookupModel>()
                { new LookupModel() { TableName = "Table1", 
Description = "Table 1" },
                  new LookupModel() { TableName = "Table2", 
Description = "Table 2" } };

        private List<LookupValueModel> values = new List<LookupValueModel>()
            { new LookupValueModel() { TableName = "Table1", Description = "Value 1", LookupCode = "1" },
              new LookupValueModel() { TableName = "Table2", Description = "Value 2", LookupCode = "2"} };


        // GET: LookupValue
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetAllTableA()
        {
            try
            {

                var table = tables;

                return Json(table, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }

        public ActionResult GetAllTableB()
        {
            try
            {

                var value = values;

                return Json(value, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }
    } 

Then my 2 models:

    public class LookupValueModel
    {
        public string TableName { get; set; }
        public string LookupCode { get; set; }
        public string Description { get; set; }
    } 

    public class LookupModel
    {
        public string TableName { get; set; }
        public string Description { get; set; }
    }

I've tried just changing the values in the view in the tutorial but it doesn't work, as I believe it isn't as simple as just changing some text.

I'm pretty stuck for how to do this and don't know where to go from here. I know this is a very long winded post with lots of code, but I would really appreciate some help.

Where am I going wrong adapting the tutorial code? What do I have to change to get it to work with hard-coded data?

Answer 1

That's not that hard. What you need to do is to change the DataSource's url for each Action you want. So, depending on what options user selects in the DDL, you change the DataSource. Check this demo .

What you need to change in from the above demo is that your grid's DataSource will call an url instead of a hard-coded json, right? In that url, you change the desired action:

let changeTableData = function changeTableData(option) {
    let dataSource = new kendo.data.DataSource({
          transport: {
              url: "MyApp/" + option
          }
        });

    $("#grid").data("kendoGrid").setDataSource(dataSource);
};

It will read the new url and fetch the data into the grid and updated it.

UPDATE

The transport url ir the url path to your action, eg

let url;
if (option == "A") {
    url = "@Url.Action("TableA")";
} 
else if (option == "B") {
    url = "@Url.Action("TableB")";
}

let dataSource = new kendo.data.DataSource({
    transport: {
        url: url
    }
});

Answer 2

1) Remove the grid from this view and create a new partialview and just have the grid located in that.

Now this can be one of two ways. Either an onclick via the drop down list or an onchange. Your choice

function Getdropdown()
{
    var id = $("#//dropdownID").val();  //Get the dropdown value

    var json = '{dropdownId: ' + id + '}';
    $.ajax({
        url:'@Url.Action("ViewGrid", "//Controller")',
        type:'POST',
        data:json,
        contentType:'Application/json',
        success:function(result){
            $("//The Id of of the div you want the partial to be displayed in in the cshtml").html(result);
        }
    });

}

2) Get the value of the dropdown and pass it to a controller method that calls this new partial view, sending it the ID in a model

public ActionResult ViewGrid(int dropdownId)
{
    AModel model = new AModel
    {
        DropDownID = dropdownId
    };

    return PartialView("_theGridPartial", model);
}

3) Change your grid to look like this:

 @(Html.Kendo().Grid<KendoMvcApp.Models.EmployeeA>()  
    .Name("EmpGrid")  
    .Selectable()  
    .Columns(columns =>  
    {  

        columns.Bound(c => c.FirstName);  
        columns.Bound(c => c.LastName);  

    })  
    .DataSource(dataSource => dataSource  
        .Ajax()  
        .Read(read => read.Action("GetAllEmployee", "GridDataSource", new {id = Model.DropDownID}))  
    )  
) 

4) This is the new Controller read

    public ActionResult GetAllEmployee([DataSourceRequest]DataSourceRequest request, int id)  
    {  
        try  
        {  
            //Have a call that gets the table data based on the id you are passing into here. This id will be the table id you have got from your dropdown list 
        }  
        catch (Exception ex)  
        {  
            return Json(ex.Message);  
        }  

    } 

This should allow you to change the table based on the dropdown.