This is a migrated thread and some comments may be shown as answers.
How can i resize a Grid column in an ipad?
14 Answers 100 Views
This is a migrated thread and some comments may be shown as answers.
William
Top achievements
Rank 1
William asked on 26 Jun 2012, 08:01 PM
Hello,

Viewing the demos of the grid in an ipad,
i try to resize a column, but can´t, how do it?

14 Answers, 1 is accepted

Sort by
0
GungFooMon
Top achievements
Rank 1
answered on 27 Jun 2012, 03:58 PM
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. :(
0
Sandeep
Top achievements
Rank 1
answered on 18 Jul 2013, 09:22 AM
Hi

Anybody from Kendo can answer this?
0
Dimo
Telerik team
answered on 18 Jul 2013, 12:10 PM
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!
0
C
Top achievements
Rank 1
answered on 09 Oct 2014, 04:24 AM
Is there an update on this issue, or a workaround?  Column resize still does not work on iPad
0
Dimo
Telerik team
answered on 09 Oct 2014, 09:55 AM
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!
 
0
C
Top achievements
Rank 1
answered on 09 Oct 2014, 02:38 PM
Excellent, thank you.
0
C
Top achievements
Rank 1
answered on 17 Oct 2014, 12:23 PM
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?
0
C
Top achievements
Rank 1
answered on 17 Oct 2014, 12:24 PM
[quote]C said:I resize a column in that demo, in Chrome or Safari on iPad.  ...[/quote]

I meant, "I cannot resize a column in that demo..."
0
C
Top achievements
Rank 1
answered on 21 Oct 2014, 11:58 AM
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?
0
Dimo
Telerik team
answered on 22 Oct 2014, 08:21 AM
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!
 
0
Chris
Top achievements
Rank 1
answered on 14 Mar 2015, 03:55 PM
Column resizing still doesn't work on touch, even in the latest release. Will this be fixed?
0
Dimo
Telerik team
answered on 19 Mar 2015, 07:08 AM
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!
0
kishor
Top achievements
Rank 1
answered on 24 Sep 2020, 07:17 AM

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

0
Tsvetomir
Telerik team
answered on 29 Sep 2020, 05:36 AM

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

Tags
Grid
Asked by
William
Top achievements
Rank 1
Answers by
GungFooMon
Top achievements
Rank 1
Sandeep
Top achievements
Rank 1
Dimo
Telerik team
C
Top achievements
Rank 1
Chris
Top achievements
Rank 1
kishor
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or