Filtering Foreign Key Data

[Andrea Perazzolo]

Hi,

I have a question regarding the definition of Foreign Key Data when defining a column.

I am in need to filter the possible values of a drop down edit Field, based on another value of the Row.

For example: I have a list of people, each with a role.

When I edit the row, I want to select only the people of the role present in the Row, and not all defined in the DataSource defined in the column when I defined the Grid.

Is it possible this function?

    Thanks in advance

     Andrea Perazzolo

[Ragavee U S]

Hi Andrea,

Based on your requirement, we have created a sample and the same can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/118216/12.4_Sample813240959.zip

In the above sample, we have refreshed the dataSource of the “Country” dropdownlist based on the “Designation” dropdown value. So when editing a row, and when the value in the Designation dropDown changes, the dataSource in the Country dropdownlist changes with respect to the Designation selected.

Please refer the below code snippet.

@(Html.EJ().Grid<object>("Grid")

    . . . . .

       .Columns(col =>

                {

                   . . . . .

col.Field("CustomerID").HeaderText("Designation").ForeignKeyField("CustomerID").ForeignKeyValue("ContactTitle").DataSource(((IEnumerable<object>)ViewBag.name)).Add();//Dropdownlist based on which the Country column dropdown is refreshed

                    col.Field("ShipCity").HeaderText("Country").ForeignKeyField("ShipCity").ForeignKeyValue("Country").DataSource(((IEnumerable<object>)ViewBag.country)).Add();//Refreshed upon change in Designation Column

        })

        .ClientSideEvents(eve=>eve.ActionComplete("Complete"))

)

@(Html.EJ().ScriptManager())

<script type="text/javascript">   

    function Complete(args) {

        if (args.requestType == "beginedit" || args.requestType == "add") {

            $("#GridCustomerID").ejDropDownList({ change: "ValChange" });//bind the change event to dropdown

            if (args.requestType == "beginedit") {

                var titleObj = $("#GridCustomerID").data("ejDropDownList");//get the edited dropdown object

                $.ajax({

                    url: 'Home/DataSource',

                    type: 'GET',

                    data: { "titleValue": titleObj.currentValue },//passed the selectedValue of the dropdown to server side

                    success: function (data1) {

                        $("#GridShipCity").ejDropDownList({ dataSource: data1 });//assign the filtered dataSource obtained from serverSide

                    }

                })

            }

        }

    }

    //change event of the Designation dropdown.

    function ValChange(e) {

        $.ajax({

            url: 'Home/DataSource',

            type: 'GET',

            data: { "titleValue": e.text },//pass the selectedValue of the dropdown to server side

            success: function (data1) {

                $("#GridShipCity").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide

            }

        })       

    }

</script>

[In Controller]

public ActionResult DataSource(string titleValue)

        {

            var userTemplates = EmployeeRepository.GetAllRecords().Where(c => c.ContactTitle == titleValue).ToList();//filter the data based on the titleValue

            var data = new List<object>();

            foreach (var Cust in userTemplates)

            {

                data.Add(new { value = Cust.ShipCity, text = Cust.Country });

            }          

            return Json(data, JsonRequestBehavior.AllowGet); //pass the filtered data to the client side

        }

Please try the above solution and get back to us if you need any further assistance.

Regards,

Ragavee U S

[David]

Hi!

I download example and try it.

I have a similar case but i don't know ViewBag.country on start... So, when i try edit the dropDownList work perfectly but when save the grid, i have empty box.

I guess because foreign key datasource of grid is empty... Is there a way to fill that when?

Thanks!

[Ragavee U S]

Hi David,

Thanks for your interest in Syncfusion products.

In our previously updated sample, both the “Designation” and “Country” columns are foreign key columns. It is also essential to provide the dataSource for the foreignKey column.

As we are quite unclear on the scenario you have reported, could you please share below details

1.       Elaborately explain your requirement and the replication procedure

2.       By “when I try edit the dropdownlist it works perfectly”, which column did you actually mean? “Designation” or the “Country” column?

3.       If possible, please replicate the issue in the sample provided and share. The information provided will be helpful for us to assist you accordingly.

Regards,
Ragavee U S.