Content in kendo grid hidden help me

2 posts, 0 answers
  1. duy
    duy avatar
    10 posts
    Member since:
    Feb 2019

    Posted 27 Oct 2020 Link to this post

    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 )

  2. Eric R | Senior Technical Support Engineer
    Admin
    Eric R | Senior Technical Support Engineer avatar
    462 posts

    Posted 28 Oct 2020 Link to this post

    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/.

Back to Top