Nested Foreign Key in Grid

[Software]

Using kendo ui web.

Picture the following scenario - The 3 simplified tables below are linked via keys:

InspectionTable
-InpsectionId
-RouteScheduleId
-InspectionDetail

RouteScheduleTable
-RouteScheduleId
-RouteId
-ScheduleId

RouteTable
-RouteId
-RouteNumber

ScheduleTable
-ScheduleId
-ScheduleName

In my kendo ui web Grid I want the following data:

|InspectionDetail| |RouteNumber| |ScheduleName|

Handling simple foreign keys I have no problems with. However, no doubt you can see my dilema now as the foreign keys are nested. These are the issues that pops up when I normalize tables too tight :(

Can you smooth the above scenario for me?
I will then apply it to my actual situation.

[Vladimir Iliev]

Hi Marsha,

I would suggest to use Grid Hierarchy in current case:

- Main Grid to be bound to the "InspectionTable" and show only  "InpsectionId" and "InspectionDetail" fields in the columns
- Child Grid to be bound to the "RouteScheduleTable". The Grid should have 2 ForeignKeyColumns for the "RouteId" and "ScheduleId" fields.

Similar example can be found in our CodeLibrary:

• Grid: Ajax Hierarchy editing
  

Regards,
Vladimir Iliev
Telerik

 

 

[Software]

Thanks for the reply Vladimir,

However, I am not using the MVC wrappers as you have provided in the example, I am using web (HTML). Also I am calling my services from WebApi.

//Houdini

[Software]

I have worked myself towards a possible solution for this issue.
However would like to know this: when edit mode is set to popup on the grid and the edit button is pressed for a row, the popup dialog displays with the various options. What I want to know is how do I subscribe to events of the items on the dialog. For example if the dialog has a drop down list on it how do I handle the even when a user changes the value (before pressing update). I see the values being changed in the grid as I make changes in the edit dialog - I want to handle those changes as they occur, I don't want to wait until I press update.

//Houdini

[Vladimir Iliev]

Hi Houdini,


You can either use the "edit" event of the grid to attach the needed event handlers to the widgets or define entirely custom editor template where the you can directly set the event handlers to the widgets.

e.g.:

function onEdit(e) {
    e.container.find("[name=OrderDescription]").bind("change", function () {
        alert("change");
    })
}

Regards,
Vladimir Iliev
Telerik

 

 

[Software]

Thanks Vladimir,

I had taken the custom editor approach where I added the change even handler to the widget. The change event fires wonderfully with no issues. The issue lies in trying to update the fields in the dialog while it is open.

Example:
Both depotComboBox and dispatcherComboBox are on the popup dialog. Changing a value in the depotComboBox should cause immediate changes in the dispatcherComboBox, such as it's enabled property and it's values.

Custom editor for depotComboBox looks like:

function depotEditor(container, options) {
        $('<input id="depotDDL" required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoComboBox({
                dataSource: viewModel.depotsDD,
                autoBind: false,
                dataTextField: "text",
                dataValueField: "value",
                placeholder: "Select a Depot",
                filter: "contains",
                suggest: true,
                change: function (e) {
                    viewModel.depotDDLReady = true;

                    var cmb = this;
                    if (cmb.selectedIndex < 0)
                        cmb.value(null);

// note the following code will cause the change event handler on dispatcherData (dataSource) to fire
                    dispatcherData.filter({
                        "field": "DepotId",
                        "operator": "eq",
                        "value": viewModel.currentDepot
                    });
                }

            });
    }

The change event of this combobox will cause the dispatcher DataSource  to do some filtering and make the updates to an object on the viewModel (to which the dispatcher Combobox is bound).

The dispatcherData (DataSource) looks like this:

var dispatcherData = new kendo.data.DataSource({
        transport: {
            read: dispatcherService,
        },
        schema: {
            data: "Data",
            total: "Count",
            errors: "Errors",
            model: {
                id: "DispatcherId",
                fields: {
                    DispatcherId: { type: "number" },
                    DepotId: { type: "number" },
                    FullName: { type: "string" },
                }
            }
        },
        serverPaging: true,
        pageSize: 500,
        error: function (er) {
            alert(er.errors);
            this.cancelChanges();
        },
        change: function (e) {

           //this updates the data source (an object on the viewModel) the dispatcher ComboBox is bound to, yet the dispatcher //ComboBox does not update it's values
            var data = this.view();
            viewModel.set("dispatchersDD", data);

//The testData below is just to verify that my bindings were firing  properly, which they are, as a textbox is bound to testData is being updated nicely. The  dispatcher ComboBox enabled property is bound to depotDDLEnable - that doesn't work

            if (viewModel.depotDDLReady) {
               // $("#dispatcherDDL").data("kendoComboBox").dataSource.query();
              //  $("#dispatcherDDL").data("kendoComboBox").refresh();
                viewModel.set("depotDDLEnbale", true);
                viewModel.set("testData", kendo.toString(new Date(), "hh:mm:ss tt"));
            }
        }

    });

The custom editor for the dispatcher ComboBox looks like this:

function dispatcherEditor(container, options) {
        $('<input id="dispatcherDDL" required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoComboBox({
                enabled: viewModel.depotDDLEnbale,
                dataSource: viewModel.dispatchersDD,
                autoBind: false,
                dataTextField: "text",
                dataValueField: "value",
                placeholder: "Select a Dispatcher",
                filter: "contains",
                suggest: true,
                change: function (e) {
                    var cmb = this;
                    if (cmb.selectedIndex < 0)
                        cmb.value(null);

                }

            });
    }

And here are the relevant areas of the viewModel:

    var viewModel = new kendo.observable({
        currentDepot: "",
        depotDDLReady: false,
        depotDDLEnbale: false,
        testData: "some data",

        depots: [],
        depotsDD: {},
        dispatchers: [],
        dispatchersDD: {},

        }
    });

Observing the flow of execution in the developer's tool it is evident that viewModel fields are updated properly on changing the value in the deportComboBox. However, while the dialog stays open no changes are made to the dispatcherComboBox. The changes, are seen when the dialog is closed and reopened (by clicking the edit button). I am not sure why it retains the combobox retains its orginal values while the dialog is open. It's almost as if it made a copy for itself.
I am really ripping my hair out on this one. I really went all out to wrap my head around it. Never in the history using telerik products have I ever had this complexity in accomplishing such simple task. I appreciate you assisting Vladimir, and thanks for helping out.

//Houdini

[Vladimir Iliev]

Hi Marsha,

Basically in current scenario you should use the "cascadeFrom" option of the second dropDownList as it seems that you are trying to implement functionality that is already build-in (online demo can be found here).

Also as this thread is out of the original topic, may I kindly ask you to open a new support thread for the Grid? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

Regards,
Vladimir Iliev
Telerik