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

Kendo Grid in Dynamically created div

9 Answers 427 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bulut
Top achievements
Rank 1
Bulut asked on 09 Mar 2018, 04:58 PM

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

9 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 12 Mar 2018, 09:13 AM
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.
0
Bulut
Top achievements
Rank 1
answered on 12 Mar 2018, 04:00 PM

I changed it as

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

 

still nothing :(

0
Bulut
Top achievements
Rank 1
answered on 12 Mar 2018, 05:03 PM
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.     
0
Georgi
Telerik team
answered on 13 Mar 2018, 11:59 AM
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.
0
Bulut
Top achievements
Rank 1
answered on 13 Mar 2018, 07:33 PM

It doesn't work.

 

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

0
Georgi
Telerik team
answered on 14 Mar 2018, 01:37 PM
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.
0
Bulut
Top achievements
Rank 1
answered on 14 Mar 2018, 04:05 PM
Thank you Georgi! Works perfectly!
0
Bulut
Top achievements
Rank 1
answered on 09 Nov 2018, 10:42 PM
Is there a way to make scroll function work. also paging,etc not working. even you set the height of the grid it overflows. Any ideas how to fix those?
0
Accepted
Georgi
Telerik team
answered on 13 Nov 2018, 02:41 PM
Hello Bulut,

The table overflows since the height of the grid exceeds the height of the container. A possible workaround is to set the overflow of the div to auto.

e.g.

<div style="width:300px;overflow:auto;" id = "grid"></div>

Below you will find a modified version of the sample:


Further information regarding the overflowing of the table can be found in the following article:




Regards,
Georgi
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Bulut
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Bulut
Top achievements
Rank 1
Share this question
or