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

Content in kendo grid hidden help me

1 Answer 59 Views
Grid
This is a migrated thread and some comments may be shown as answers.
duy
Top achievements
Rank 1
Veteran
duy asked on 27 Oct 2020, 09:04 AM

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 )

1 Answer, 1 is accepted

Sort by
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 28 Oct 2020, 06:57 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
duy
Top achievements
Rank 1
Veteran
Answers by
Eric R | Senior Technical Support Engineer
Telerik team
Share this question
or