This is a migrated thread and some comments may be shown as answers.

Foreign Key Question part 2

4 Answers 21 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Simon
Top achievements
Rank 1
Simon asked on 30 Nov 2015, 05:50 AM

Hi guys

I've tried to follow the following post on how to use Foreign Key from a datasource - something that seems not to be possible out of the box: http://d585tldpucybw.cloudfront.net/forums/foreign-key-question

When getValues is called the console.log show that it is actually populating  the array: OrganisationArray - maybe this is not before loaded when the grid is created? Please give me an advice in what direction to turn :-)

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <style> html {  font-size: 12px; font-family: Arial, Helvetica, sans-serif; } </style>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.silver.min.css" />  
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>

<div>
    <div id="grid" ></div>
    <script>

        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;
        }

        var OrganisationArray = [];

        var dsOrganisation = new kendo.data.DataSource({
            type: "odata-v4",
            transport: {
                read: { url: "http://localhost:8080/DataEntryService/Organisation" }
            },
            change: function () {
                OrganisationArray = getValues(this.data(), "OrganisationMDXMember", "Organisationen");
                //console.log(this.data().length);
                console.log(OrganisationArray.length);
                console.log(OrganisationArray[0]["value"]);
                console.log(OrganisationArray[0]["text"]);
                console.log(OrganisationArray[1]["value"]);
                console.log(OrganisationArray[1]["text"]);

            },
        });

        function organisationDropDownEditor(container, options) {
            $('<input required data-text-field="Organisationen" data-value-field="OrganisationMDXMember" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                    dataTextField: "Organisationen",
                    dataValueField: "OrganisationMDXMember",
                    minLength: 1,
                    filter: "contains",
                    suggest: true,
                    placeholder: "Vælg organisationsenhed...",
                    autoBind: false,
                    dataSource: dsOrganisation
                });
        }


        $(document).ready(function () {
            dsOrganisation.read();
            $("#grid").kendoGrid({
                columns: [
                    { field: "SkeyDefault", title: "Id", width: 20 },
                    { field: "Userid", title: "Userid", width: 50 },
                    { field: "Parameter", width: 50 },
                    {
                        field: "MDXParametervaerdi", width: 150,
                        editor: organisationDropDownEditor,
                        values: OrganisationArray
                    },
                    { command: ["destroy"], title: "&nbsp;", width: 70 }
                ],

                pageable: { refresh: true, pageSizes: true, buttonCount: 5 },
                sortable: true,
                filterable: true,
                groupable: false,
                editable: true,

                toolbar: ["create", "save", "cancel"], // "save", "cancel", "excel", "pdf"

                dataSource: {
                    type: "odata-v4",
                    transport: {
                        read:    /* GET    */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" },
                        update:  /* PUT    */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
                        destroy: /* DELETE */ { url: function (data) { return 'http://localhost:8080/DataEntryService/ReportingServicesUserDefault(' + data.SkeyDefault + ')'; } },
                        create:  /* POST   */ { url: "http://localhost:8080/DataEntryService/ReportingServicesUserDefault" }
                    },
                    pageSize: 20,
                    schema: {
                        model: {
                            id: "SkeyDefault",
                            fields: {
                                SkeyDefault: { editable: false, type: "number" },
                                Userid: { editable: true, type: "string", required: true },
                                Parameter: { editable: false, type: "string", required: true, defaultValue: "Organisation" },
                                // Parametervaerdi: { editable: true,  type: "string" },
                                MDXParametervaerdi: { editable: true, type: "string", required: true }
                            }
                        }
                    },
                    error: function (e) {
                        console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
                    }
                }
            });
        });

    </script>
</div>

</body>
</html>

4 Answers, 1 is accepted

Sort by
0
Simon
Top achievements
Rank 1
answered on 30 Nov 2015, 01:04 PM
Now im pretty sure the problem lies in the fact that the grid starts loading and finishes before the extra datasource dsOrganisation has finished loading - I've read a bit about callback functions but im pretty new to javascript and the kendo framework.What would be the correct aproach for loading datasource THEN loading grid?
0
Daniel
Telerik team
answered on 02 Dec 2015, 08:43 AM
Hello Simon,

Indeed, the problem will occur because the grid is initialized before the values are loaded. You should initialize the grid after the values are loaded in the change handler:
var OrganisationArray = [];
 
var dsOrganisation = new kendo.data.DataSource({
    type: "odata-v4",
    transport: {
        read: { url: "http://localhost:8080/DataEntryService/Organisation" }
    },
    change: function () {
        OrganisationArray = getValues(this.data(), "OrganisationMDXMember", "Organisationen");
        initGrid();
    }
});
 
$(document).ready(function () {
    dsOrganisation.read();
});
         
function initGrid() {
    $("#grid").kendoGrid({
       ...
    });
}


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Simon
Top achievements
Rank 1
answered on 02 Dec 2015, 09:27 AM

Hi Daniel

As simpel as that, thanks Daniel. :-) - one thing I had to change was that initGrid should only be initialized once (the change event is called every time I open the ComboBox) - I therefore used a variable for the purpose in the initGrid function but is there an "once" event handler or another maybe more generic way to do this?

0
Daniel
Telerik team
answered on 02 Dec 2015, 05:04 PM
Hi again,

Yes, you can bind a one time handler with the one method:
dsOrganisation.one("change", function() {
    ...
});
 
dsOrganisation.read();

You could also use the promise returned from the read method instead of a change handler:
dsOrganisation.read().done(function () {
    OrganisationArray = getValues(dsOrganisation.data(), "OrganisationMDXMember", "Organisationen");
    initGrid();
});


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Simon
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or