Foreign Key Question

[DavidOBrien]

I have a editable grid where the first column is ProjectID

function updateGrid() {

 

    if ( $("#grid").data("kendoGrid") != undefined ) {

        $("#grid").empty();

    }               

    var lob = $("#lob").data("kendoComboBox").value(); 

    var queryurl = "./grid_projectselections.php?delob=" + escape(lob);

    var updateurl = "./grid_projectselections.php?delob=" + escape(lob);

    var element = $("#grid").kendoGrid({

        dataSource: {                                   

            pageSize: 200,

            type: "json", 

            batch: true ,

            serverSorting: false,                                   

            transport: {

                read: {

                    url: queryurl,

                    dataType: "json",

                    cache: false,

                    data: {

                        q: lob

                    }                               

                },

                update: {

                    url: updateurl,

                    dataType: "json"                               

                },

                parameterMap: function(options, operation) {

                    if (operation !== "read" && options.models) {

                        return {models: kendo.stringify(options.models)};

                    }

                }                           

            },

            schema: {

                data: "data",

                total: "total",

                model: {

                    fields: {

                        ProjectID: { editable: true },

                        HR_LEVEL_5: { editable: false },

                        HR_LEVEL_6: { editable: false },

                        HR_LEVEL_7: { editable: false },

                        HR_LEVEL_8: { editable: false },

                        HR_LEVEL_9: { editable: false },

                        ExecDescr: { editable: false },

                        OrgDescr: { editable: false },

                        GroupDescr: { editable: false },

                        RegionDescr: { editable: false },

                        SectionDescr: { editable: false }               

                    }

                }

            }                           

        },                          

        selectable: true,

        filterable: true,

        resizable: true,                                       

        editable: true,

        groupable: false,

        pageable: {

            numeric: true,

            refresh: true,                       

            previousNext: true,

            input: true,

            info: true

        },

        columns: [

            { field: "ProjectID", editor: ProjectDropDownEditor, values: projectDS },

            "HR_LEVEL_5" ,

            "HR_LEVEL_6" ,

            "HR_LEVEL_7" ,

            "HR_LEVEL_8" ,

            "HR_LEVEL_9" ,

            "ExecDescr" ,

            "OrgDescr" ,

            "GroupDescr" ,

            "RegionDescr" ,

            "SectionDescr"

            ]

    });

}

inside this grid when in edit mode the first column should be a drop down

function ProjectDropDownEditor(container, options) {

     $('<input required data-text-field="ProjectName" data-value-field="ProjectID" data-bind="value:' + options.field + '"/>')

         .appendTo(container)

         .kendoDropDownList({

             autoBind: false,

             dataSource: {

                 type: "json",

                 transport: {

                     read: { url: "./grid_projectsdropdown.php"},

                 }

             }

         });

 }

The grid is initially populated when a user makes a selection from a combobox placed above the grid

$("#lob").width(360).kendoComboBox({

    placeholder: "Select LOB...",

    dataTextField: "LineOfBusiness",

    dataValueField: "LineOfBusiness",

    width: 360,

    dataSource: {

        contentType: "application/json; charset=utf-8",

        serverFiltering: true,

        transport: { read: "./ajax/lobs.php" },

        schema: { data: "data", total: "total" }

    },

    change: function() {

        var value = this.value();

        if (value) {                               

 

            if (value == '') {

                return;

            }                       

            updateGrid();      

        } else {

        }

    }

});

The populating the grid is based off the choice make in the combo... that part works. The problem I am having is ... the dropdown editor needs to be based off the combobox value also and the datasource for the project names

var projectDS = new kendo.data.DataSource({

    transport: {                   

        read: { url: "./grid_projectsdropdown.php"},

        dataType: "json"

    },

    schema: { data: "data", total: "total" }

});

which I have returning all records instead of filtering just on the ones from that lineofbusiness

What I want to do in (pseudo code)
                      select ProjectID, ProjectName from projects where lineofbusiness = combobox.value()

to build the dropdown editors options and the datasource I am using the same datasource for each if I could just get the LineofBusiness to be sent in the read call

also the ProjectID column shows the ProjectID not the ProjectName like I assume it would if they were linked?

I need a push in the right direction... my brain is fried...

[Daniel]

Hello David,

In order to pass the needed parameter with the dropdown request, I can suggest either to use a global parameter and save it when the Grid is being filtered or an inline function which passes the parameter to the ProjectDropDownEditor  function e.g.

{ field: "ProjectID", editor: function(container, options){
    ProjectDropDownEditor(container, options, lob);
}, values: projectDS },


function ProjectDropDownEditor(container, options, lob) {
     $('<input required data-text-field="ProjectName" data-value-field="ProjectID" data-bind="value:' + options.field + '"/>')
         .appendTo(container)
         .kendoDropDownList({
             autoBind: false,
             dataSource: {
                 type: "json",
                 transport: {
                     read: {
                        url: "./grid_projectsdropdown.php",
                        data: {
                            parameterName: lob
                        }
                    },
                 }
             }
         });
 }

The ProjectName is not shown because currently the values option does not support using a dataSource. An array of objects with fields "text" and value is needed. You could use the dataSource change event to convert the data in the needed format and then use the array instead:

var values = [];
var projectDS = new kendo.data.DataSource({

    transport: {                  

        read: { url: "./grid_projectsdropdown.php"},

        dataType: "json"

    },

    change: function(){

         values = getValues(this.data(), "ProjectID", "ProjectName ");

    },

    schema: { data: "data", total: "total" }

});

 

function getValues(data, valueField, textField) {

    var values = [];

    for (var i = 0; i < data.length; i++) {

        values.push({text: data[i][textField], value: data[i][valueField]});

    }  

    return values;

}

Also, from the code you provided it does not seem to be necessary to recreate the Grid each time. If the URL needs to be constructed dynamically, then you could specify a function. A function can also be used for the request data option. If recreating the Grid is needed, then I would recommend to destroy it first:

var gridElem = $("#grid"),
    gridObject = gridElem.data("kendoGrid");
if ( gridObject != undefined ) {
    gridObject.destroy();
    gridElem.empty();
}

Regards,
Daniel
the Telerik team