Click here to Skip to main content
15,880,796 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:

I am facing issue with cascading dropdown list inside a webgrid.
Here is the scenario.
i have two drop down lists, one for table name and one for column names. My cascading has to work in such a way that the after table is selected the columns related to that table should only reflect in the next drop down. Also then i choose a tableName based on some primaryKey , Foreign Key relation the columns should be selected from a method which creates an object of entity data model in a method which inturn returns a Json Object containing the column names
I intend to do it with a JQuery in my view but as i'm new to coding i'm stuck :( ... can someone please advice on what is going wrong with my code.

My View is as Follow"

<div id="grid">
        tableStyle: "gridTable",
        headerStyle: "gridHead",
                rowStyle: "gridRow",
        footerStyle: "gridFooter",
                alternatingRowStyle: "gridAltRow",
        columns: wg.Columns(
                             wg.Column("DestnColumn", "Destination Column"),
                                     wg.Column(header: "SourceTable", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceTables)),
                                     wg.Column(header: "ColumnNames",format: @item => Html.DropDownList("value",new SelectList(string.Empty,"input_field_id","input_field_name"),"Select Column")),
                                   // wg.Column(header: "SourceColumn", format: @item1 => Html.DropDownList("value1", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceColumnsNames)),
                                             wg.Column("DataSize", "Size"),
                                     wg.Column("DataType", "Data Type"))


<script type="text/javascript">
    $(document).ready(function () {

        $("#SourceTable").change(function () {
                type: 'POST',
                url: '@Url.Action("GetColumn")',
                dataType: 'json',
                data: { id: $("#SourceTable").val() },
                success: function (SourceColumn) {
                    $.each(SourceColumn, function (i, Colmn) {
                        $("#ColumnNames").append('<option value="' + SourceColumn.Value + '">' +
                        SourceColumn.Text + '</option>');
                error: function (ex) {
                    alert('Failed to retrieve columns.' + ex);
            return false;


my controller is as follow:

public JsonResult GetColumn(string TableName)
    List<string> ColName = new List<string>();
     int id = (from m in db.inputs where m.input_name == TableName select m).Max(p => p.input_id);
    input_field Ifield = new input_field();
    var str = (from m in db.input_field where m.input_id == id select new { m.input_field_name, m.input_field_id }).ToList();

    return Json(new SelectList(str, "input_field_id", "input_field_name"));

I am trying to populate value in second dropdown list .
Please help me out people

Thanks and regards
Archana Rajan

1 solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900