How can i resize a Grid column in an ipad?

15 posts, 0 answers
  1. William
    William avatar
    2 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2012 Link to this post

    Hello,

    Viewing the demos of the grid in an ipad,
    i try to resize a column, but can´t, how do it?
  2. GungFooMon
    GungFooMon avatar
    17 posts
    Member since:
    Apr 2012

    Posted 27 Jun 2012 Link to this post

    I was wondering about the same thing...
    It seems as if there isn't really a mouseover event (since well.. no mouse :D)..
    This probably means that this issue needs to be addressed by the KendoUI team. :(
  3. Sandeep
    Sandeep avatar
    7 posts
    Member since:
    May 2013

    Posted 18 Jul 2013 Link to this post

    Hi

    Anybody from Kendo can answer this?
  4. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 18 Jul 2013 Link to this post

    Hello,

    Grid column resizing is currently supported only with a mouse, because it relies on the mouseover event. Touch support for this feature is in our to-do-list for future implementation. Sorry about any inconvenience caused.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. C
    C avatar
    6 posts
    Member since:
    Sep 2014

    Posted 08 Oct 2014 Link to this post

    Is there an update on this issue, or a workaround?  Column resize still does not work on iPad
  6. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 09 Oct 2014 Link to this post

    Hello,

    Column resizing on touch devices has been supported for almost a year now. You need to enable the widget's adaptive mode and touch & hold a column header to make the column resizer appear.

    http://demos.telerik.com/kendo-ui/grid/adaptive

    http://docs.telerik.com/kendo-ui/web/grid/adaptive

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. C
    C avatar
    6 posts
    Member since:
    Sep 2014

    Posted 09 Oct 2014 in reply to Dimo Link to this post

    Excellent, thank you.
  8. C
    C avatar
    6 posts
    Member since:
    Sep 2014

    Posted 17 Oct 2014 in reply to Dimo Link to this post

    I resize a column in that demo, in Chrome or Safari on iPad.  If I touch and hold a column header, the resizer icon appears but dragging that icon scrolls the entire grid left or right, it does not resize the column.  On android Chrome, the resizer icon does not appear, instead Chrome's context menu ("Open in new tab", etc) is posted. The resizer icon only seems to work on a desktop browser.

    http://demos.telerik.com/kendo-ui/grid/adaptive

    Am I doing something wrong, or does column resizing really not work on touch?
  9. C
    C avatar
    6 posts
    Member since:
    Sep 2014

    Posted 17 Oct 2014 in reply to C Link to this post

    C said:I resize a column in that demo, in Chrome or Safari on iPad.  ...


    I meant, "I cannot resize a column in that demo..."
  10. C
    C avatar
    6 posts
    Member since:
    Sep 2014

    Posted 21 Oct 2014 in reply to C Link to this post

    I cannot resize a column in this demo on a touch interface:

    http://demos.telerik.com/kendo-ui/grid/adaptive

    In Chrome or Safari on iPad, if I touch and hold a column header the resizer icon appears but dragging that icon scrolls the entire grid left or right, it does not resize the column.  On android Chrome, the resizer icon does not appear, instead Chrome's context menu ("Open in new tab", etc) is posted. The resizer icon only seems to work on a desktop browser.

    Am I doing something wrong, or is column resizing not working on touch?
  11. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 22 Oct 2014 Link to this post

    Hello,

    I made some tests and It appears that there is a regression in columns resizing on touch devices, which results in changes we made to the core touch event handling that we have. Please use Kendo UI 2014.1.528, if possible, while we fix the issue. Apologies for the inconvenience.


    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
    </head>
    <body>
        <div data-role="view" data-init="initGrid" data-stretch="true">
        <div data-role="header"></div>
        <div id="grid"></div>
    </div>
    <script>
        function initGrid() {
            var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service";
            var 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,
                pageable: true,
                mobile: "phone",
                height: kendo.support.mobileOS.wp ? "24em" : 430,
                resizable: true,
                toolbar: ["create"],
                columns: [
                    { field:"ProductName", title: "Product Name" },
                    { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "100px" },
                    { field: "UnitsInStock", title:"Units In Stock", width: "100px" },
                    { field: "Discontinued", width: "100px" },
                    { command: ["edit", "destroy"], title: " ", width: "160px" }
                ],
                editable: "popup",
                filterable: true,
                sortable: true,
                columnMenu: true
            });
        }
    </script>
     
    <style scoped>
        /* Grid columns with no width are collapsed if the space is not enough, thus min-width on the tables is needed */
        .k-grid table
        {
            min-width: 600px;
        }
     
        /* Android's default browser doesn't support properly min-width on tables */
        @media screen and (max-width: 699px) {
            .km-phone .km-android .k-grid table
            {
                width: 600px;
            }
        }
    </style>
     
     
    <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
    </body>
    </html>


    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Chris
    Chris avatar
    4 posts
    Member since:
    Dec 2014

    Posted 14 Mar 2015 in reply to Dimo Link to this post

    Column resizing still doesn't work on touch, even in the latest release. Will this be fixed?
  13. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 19 Mar 2015 Link to this post

    Hello Chris,

    I tested column resizing on iPad and Nexus tablets, and it works as expected with Q1 2015:

    http://runner.telerik.io/fullscreen/@dimodi/EyUKO

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. kishor
    kishor avatar
    17 posts
    Member since:
    Jan 2016

    Posted 24 Sep 2020 in reply to Dimo Link to this post

    with the help of "https://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance/adaptive?_ga=2.241344007.489346496.1600927765-713728719.1600063961"

    i used mobile:true or mobile:"phone" but in real mobile device grid data not showing.

    When i remove mobile:true or mobile:"phone" then in real mobile device grid data showing.

    I need to resize column in real mobile

  15. Tsvetomir
    Admin
    Tsvetomir avatar
    796 posts

    Posted 29 Sep 2020 Link to this post

    Hi Kishor,

    I have tested out the described behavior in our live demo below. It appears that the resizing of the columns work as expected:

    https://demos.telerik.com/kendo-ui/grid/adaptive-rendering

    Can you try out the demo above and let me know if the issue can be replicated there? Also, if you are not already utilizing the latest version of the Kendo UI library, update to the latest one and check if the issue persists.

     

    Kind regards,
    Tsvetomir
    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