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 618 Views

Grid

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

14 Answers, 1 is accepted

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?

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>

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />

<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.mobile.all.min.css" rel="stylesheet" />

<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

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

answered on 24 Sep 2020, 07:17 AM

whatsapp-image-2020-09-24-at-12-45-42-pm-(1).jpeg

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

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