Foreign Key Question

2 posts, 0 answers
  1. DavidOBrien
    DavidOBrien avatar
    14 posts
    Member since:
    Sep 2012

    Posted 18 Feb 2013 Link to this post

    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...
  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top