Content in kendo grid hidden help me

[duy]

Hi Telerik admin !

When i using Kendo UI for jQuery with Kendo grid object. I have a problem :

     Open page have kendo grid in browser PC. It work verry good.

    But when open by browser Mobile, content in kendo grid be hidden.

Please help me to show grid on Mobile is fully as in PC.

Tks verry much !

( picture in PC and Moblie in attachment file )

[Eric R | Senior Technical Support Engineer]

Hi Duy,

Thank you for providing the screenshots. A Grid can render adaptively to the screen. This can be achieved by setting the mobile property to true. See the following example and the Adaptive Rendering documentation for more details.

Example

This was taken directly from the Adaptive Rendering demo except I the mobile display logic.

<div id="grid-wrap">
    <div id="grid"></div>
</div>
<script>
    $(document).ready(function () {
        var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + "/Products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: crudServiceBaseUrl + "/Products/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: crudServiceBaseUrl + "/Products/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: crudServiceBaseUrl + "/Products/Create",
                        dataType: "jsonp"
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },
                batch: true,
                pageSize: 20,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { validation: { required: true } },
                            UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                            Discontinued: { type: "boolean" },
                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            toolbar: ["create"],
            height: 450,
            mobile: true,
            sortable: true,
            pageable: true,
            resizable: true,
            filterable: true,
            columnMenu: true,
            columns: [
                { field: "ProductName", title: "Product Name", filterable: { multi: true, search: true }, width: "120px" },
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "120px" },
                { field: "Discontinued", width: "120px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "popup"
        });
    });
</script>

Wrapping Up

For additional reference, I created a Dojo sample which can also be used in locally as well. 

Additionally, the browser developer tools can also be used to test how it will render in various mobile devices. See the Simulate Mobile Devices with Device Mode in Chrome article for reference.

Please let me know if you need any additional information. Thank you for using the jQuery forums.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik