Kendo Grid in Dynamically created div

8 posts, 0 answers
  1. Bulut
    Bulut avatar
    6 posts
    Member since:
    Dec 2016

    Posted 09 Mar Link to this post

    Hi,

    I want to use the grid on google maps and I created custom control and when I try to use grid it doesn't work. I also don't get any errors on my console.

    Kendo grid doesn't show in #routeGrid

    and my script is as follow;

    var map = null;
    function CenterControl2(controlDiv, map) {

        // Custom Control
        var controlUI = document.createElement('div');
        controlUI.style.marginTop = '15px';
        controlUI.style.cursor = 'pointer';
        controlUI.style.textAlign = 'center';
        //controlUI.style.backgroundColor = 'white';
        controlUI.className = 'col-xs-12 col-sm-12 col-md-12 col-lg-12';
        controlUI.title = 'Please click to see';
        controlDiv.appendChild(controlUI);

        var controlText = document.createElement('div');
        controlText.innerHTML = '<div id="routeGrid"></div>';
        controlUI.appendChild(controlText);
    }

    function initialize() {

        if (map == null) {
            var mapTypeIds = [];
            for (var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }
            mapTypeIds.push("OSM");

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 7,
                center: new google.maps.LatLng(36.1447400, -5.3525700),
                gestureHandling: 'cooperative',
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: false,
                zoomControl: true,
                mapTypeControl: false,
                streetViewControl: false,
                mapTypeControlOptions: {
                    mapTypeIds: mapTypeIds
                }
            });


            //Custom Control
            var centerControlDiv = document.createElement('div');
            centerControlDiv.id = 'shipmapdiv';
            var centerControl = new CenterControl2(centerControlDiv, map);
            centerControlDiv.index = 1;
            centerControlDiv.style.zIndex = '3';
            map.controls[google.maps.ControlPosition.TOP_LEFT].push(centerControlDiv);

            var maptiler = new google.maps.ImageMapType({
                getTileUrl: function (coord, zoom) {
                    var tilesPerGlobe = 1 << zoom;
                    var x = coord.x % tilesPerGlobe;
                    if (x < 0) {
                        x = tilesPerGlobe + x;
                    }
                    // See above example if you need smooth wrapping at 180th meridian
                    return "http://tiles.openseamap.org/seamark/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
                },
                tileSize: new google.maps.Size(256, 256),
                name: "OpenStreetMap",
                isPng: true,
                maxZoom: 18,
                opacity: 1
            });

            map.overlayMapTypes.insertAt(0, maptiler);

            google.maps.event.trigger(map, 'resize');
            google.maps.event.addListener(map, 'tilesloaded', function () {
                var mapDiv = document.getElementById("map");
                if (mapDiv.style.visibility != "visible")
                    mapDiv.style.visibility = "visible";
            });
        }
    }

    var rg = null;
    rg = $("#routeList").kendoGrid({
        dataSource: {
            //data: [{ r_Id: null, PortName: null, Type: null, Distance: null, SecaDistance: null, SeaTime: null, PortTime: null, ManoTime: null, OrderNo: 0, Port: { PortName :null} }],
            type: "json",
            change: function (e) {
                if (e.items.length > 0) {
                    if (e.action == "remove") {
                        PortRemove(e.items[0]);
                    }
                    else if (e.action == "itemchange") {
                        if (e.field == "port") {
                            var message = e.items[0].PortName;
                            if (e.items[0].port != undefined) {
                                e.items[0].PortName = e.items[0].port.PortName;
                                e.items[0].isSECA = e.items[0].port.isSECA;
                                var myLatLng = { lat: e.items[0].port.LatDec, lng: e.items[0].port.LonDec };
                                if (e.items[0].marker != null)
                                    e.items[0].marker.setMap(null);

                                var marker = new google.maps.Marker({
                                    position: myLatLng,
                                    map: map,
                                    title: e.items[0].port.PortName,
                                    portInfo: e.items[0]
                                });
                                PortAdd(marker);
                            }
                        }
                    }
                }
            },
            schema: {
                data: "data",
                model: {
                    fields: {
                        r_Id: { type: "number" },
                        PortName: { type: "string" },
                        isSECA: { type: "boolean" },
                        Type: { type: "string" },
                        Distance: { type: "number", editable: false },
                        SecaDistance: { type: "number" },
                        Speed: { type: "number" },
                        SeaTime: { type: "number", editable: false },
                        PortTime: { type: "number" },
                        ManoTime: { type: "number" },
                        OrderNo: { type: "number", editable: true }
                    }
                }
            },
            pageSize: 10

        },
        height: 350,
        selectable: "row",
        toolbar: ["create", "save"],
        groupable: false,
        sortable: true,
        //change: onChange,
        edit: onLegAdd,
        remove: onLegRemove,
        editable: { createAt: "bottom", mode: "inline" },
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{
            field: "r_Id",
            hidden: true
        },
        {
            command: ["edit", "destroy"], title: "&nbsp;", width: "180px", locked: true, lockable: false
        },
        {
            field: "port",
            title: "Port",
            editor: PortDropdown,
            template: '#:PortName #',
            // template: "#= (data.description ? data.description.name : '') #",
            width: 210,
            hidden: false,

        },

        {
            field: "Type",
            width: 120,
            title: "Type",
            defaultValue: "Load",
            editor: TypeDropdown
        },
        {
            //field: "IsSECA",
            width: 100,
            title: "SECA?",
            //defaultValue: false,
            template: '<input type="checkbox" #= isSECA ? \'checked="checked"\' : "" # class="chkbx" />'
        },
        {
            field: "Speed",
            width: 100,
            title: "Speed"
        },
        {
            field: "Distance",
            width: 120,
            title: "Distance"
        },
        {
            field: "SecaDistance",
            width: 120,
            title: "SECA Distance"

        },
        {
            field: "SeaTime",
            width: 120,
            title: "Sea Time"
        },
        {
            field: "PortTime",
            width: 120,
            title: "Port Time"
        },
        {
            field: "ManoTime",
            width: 120,
            title: "Mano. Time"
        },
        {
            field: "OrderNo",
            width: 120,
            title: "No",
            hidden: true
        }]
    });

  2. Georgi
    Admin
    Georgi avatar
    229 posts

    Posted 12 Mar Link to this post

    Hello Bulut,

    Thank you for the provided code.

    I have investigated it and noticed that the created div has an id `routeGrid`. However, in the configuration the grid a div with an id `routeList` is used. Therefore no div is selected and the grid is not initialized.

    e.g.
    //created div
     
    controlText.innerHTML = '<div id="routeGrid"></div>';
     
    //selected div
     
    $("#routeList").kendoGrid({

    Could you please make sure that the correct element is selected?

    I look forward to your reply.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Bulut
    Bulut avatar
    6 posts
    Member since:
    Dec 2016

    Posted 12 Mar in reply to Georgi Link to this post

    I changed it as

    var controlText = document.createElement('div');
        controlText.innerHTML = '<div id="routeList"></div><div id="routeGrid"></div>';
        controlUI.appendChild(controlText);

     

    still nothing :(

  4. Bulut
    Bulut avatar
    6 posts
    Member since:
    Dec 2016

    Posted 12 Mar Link to this post

    I think the problem is my kendo.web.min.js is loaded in head and the script file I used to create div is in footer. So when the kendo script is loading #routeList is not there yet. Is there any way to initialize it later? If I load my script on head then I receive an error that kendoGrid is not a function.     
  5. Georgi
    Admin
    Georgi avatar
    229 posts

    Posted 13 Mar Link to this post

    Hello Bulut,

    Thank you for the update.

    In case there are no JavaScript errors the issue is not caused because of missing script references.

    A possible cause is that the initialization script of the grid is executed before the div is added to the DOM.

    Could you please make sure that the div is already available in the DOM when the Kendo Grid is initialized?

    e.g.

    var rg = null;
    rg = $("#routeList") // <--- ensure that this line selects an actual element.

    Having said that, sharing a demo that clearly replicates the issue would definitely help us fully understand the case and we will be able to provide further assistance to the best of our knowledge.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Bulut
    Bulut avatar
    6 posts
    Member since:
    Dec 2016

    Posted 13 Mar in reply to Georgi Link to this post

    It doesn't work.

     

    I created a sample fiddle . I tried to to create simple example showing it is not working :(

  7. Georgi
    Admin
    Georgi avatar
    229 posts

    Posted 14 Mar Link to this post

    Hello Bulut,

    Thank you for the sample.

    I have investigated it and noticed that the grid is initialized within the document ready event handler. However, the Map is not created yet when the document ready event is triggered. Therefore the div is not selected and no grid is initialized.

    I have modified the sample to initialize the grid when the map is created and the grid is rendered as expected:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Bulut
    Bulut avatar
    6 posts
    Member since:
    Dec 2016

    Posted 14 Mar in reply to Georgi Link to this post

    Thank you Georgi! Works perfectly!
Back to Top