KendoGrid resizable not work

#1

Hello!
I’ve a problem with a kendo grid. I’ve used tag resizable = true on kendo grid, but I don’t know why the cells are not resizable.
Thanks for your support!

This is my source code:

                            "title": "{~Enterprise.Facility.FacilityTabPanel.AdvancedConsumption.title~}",
                            "id" : "Fornitures2",
                            "component": "UIViewKendoGrid",
                            "paginate": false,
                            "filterable": false,
                            "resizable": true,
                            "expandable": false,
                            "expandOnClick": true,
							"renderTo": "#BigGrid2",
                            "data": {
                                "collection": {
                                    "collection": true,
                                    "c3type": "ServicePoint",
                                    "c3function": "getCalculatedAdvanced",
                                    "responseSelector": null,
                                    "c3arguments": {
                                        "idParentFacility" : "{{ params.id }}",
                                        "spec": {
                                            "filter": "assets.denormParents.from.id== '{{ params.id }}'",
                                            "include": "facility.facilityLevel,facility.buildingNameAnswer"
                                        }
                                    }

                                }
                            },
                            "columns": [
                                {
                                    "width": 160,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.Fornitures.element~}",
                                    "field": "element"
                                },
                                {
                                    "width": 120,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.Fornitures.building~}",
                                    "field": "building"
                                },
                                {
                                    "width": 150,
                                    "sortable": false,
                                    "label": "{~Enterprise.ServicePointCharacteristicSet.Classification~}",
                                    "field": "classf"
                                },
                                {
                                    "width": 120,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.Fornitures.department~}",
                                    "field": "rep"
                                },
                                {
                                    "width": 120,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.Fornitures.type~}",
                                    "field": "typeMs"
                                },
                                {
                                    "width": 100,
                                    "sortable": false,
                                    "label": "{~Enterprise.ServicePointMotornamePlateTablePnKw.TitleTable~}",
                                    "field": "MaxConsumption"
                                },
                                {
                                    "width": 110,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.Consumption.type~}",
                                    "field": "standByConsumption"
                                },
                                {
                                    "width": 100,
                                    "sortable": false,
                                    "label": "{~Enterprise.ServicePointMotornamePlateTable.numberOfStepLabel~}",
                                    "field": "numberOfStep"
                                },
                                {
                                    "width": 150,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.ValueCalculatedMeasured.type~}",
                                    "field": "value_metric"
                                },
                                {
                                    "width": 120,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.ValuePercentForniture.type~}",
                                    "field": "value_calc_perc",
									"format": {
										"funk": "appendString",
										"args": "%"
										}
                                },
                                {
                                    "width": 120,
                                    "sortable": false,
                                    "label": "{~Enterprise.Facility.FacilityTabPanel.ValueUseDestination.type~}",
                                    "field": "value_mes_perc",
									"format": {
										"funk": "appendString",
										"args": "%"
										}
                                }
                            ]
                        }
0 Likes

#2

It can be very difficult to notice that the columns are in fact resizable. I was just doing this yesterday actually - "resizable": true worked for me but you have to hover your cursor around a bit before the cursor changes to the symbol indicating you can resize

0 Likes

#3

I don’t understand… when I have to declare resizable:true ?

0 Likes

#4

You set "resizable": true on the grid when you want the grid columns to be resizable. As @scott.kruyswyk mentioned, you need to hover over the divider between column headers to see the resize cursor and then click+drag to resize.

Note that the individual cells are not resizable, but individual columns are resizable (via the column header)

0 Likes

#5

@matt I know… I hovered over the divider between column headers, but the resize cursor does not appear.
Any other suggestion?
I’ve found this: in the kendo class (html, css) “k-resize-handle” doesn’t exists. It could be this?

0 Likes

#6

I’ve found another point:
Only on my pc, I can resize this kendogrid only with zoom to 67%.
On the others pc the working is variable.
With Microsoft Edge always works, incredible!

0 Likes

#7

What browser are you using?

I see the .k-resize-handle class in application.css, so I’m not sure why it’s not there in your case.

0 Likes

#8

I try with Opera, Chrome, Firefox and Microsoft Edge.
with edge always works, with opera and chrome not

0 Likes

#9

What versions of those browsers?

0 Likes

#10

I’m using the last version

0 Likes

#11

Do you see this in the rendered HTML?

<div class="k-resize-handle" style="top: 0px; left: 294px; height: 50px; width: 9px; display: none;">
  <div class="k-resize-handle-inner"></div>
</div>

The style values will probably be different, but at least the elements with classes k-resize-handle and k-resize-handle-inner should appear. It will be a child of the .k-grid element and a sibling of the <table> element.

0 Likes

#12


I don’t have k-resize-handler but I have k-grid

0 Likes

#13

0 Likes