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

Detail Grid Columns resize on resizing parent grid column

3 Answers 544 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anil
Top achievements
Rank 1
Anil asked on 25 Dec 2016, 11:59 AM

Hi, 

 

I am creating a detail grid inside a parent grid using kendo UI grid's detail-init property. The Detail grid uses share the same column names of that parent.

On initial load, the detail grid columns widths are same as the parent grid's. When i resize the parent grid column, the  detail grid's column width is not changing accordingly.

How do i set the  detail grid's column width to match of the parent grid column on resize?

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 26 Dec 2016, 01:52 PM
Hi Anil,

The detail Grids are separate Kendo UI Grid instances with their own configuration properties that are not related to the master Grid ones.

The desired functionality is not built-in, or supported out-of-the-box, but can be achieved via some custom coding. A possible approach is to handle the master Grid's columnResize event where the event data exposes information about the column being resized, the old width, and the new width. This information can be used to store the new width in a variable that can be used in detail Grids' column widths configuration (columns.width).

For the already opened detail Grids, the respective columns can be selected, and manipulated programmatically via jQuery/JavaScript.

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Richard
Top achievements
Rank 1
answered on 09 Dec 2018, 01:27 AM
This seems a common business problem - I have been working for two days on a solution using the MVC HtmlHelper and straight JQuery. I've seen working code sample from RadGrid, but it is dated - shouldn't there be a sample for this very common use-case? I'm attaching the image from the RadGrid sample - same thing I am trying to achieve...
0
Tsvetomir
Telerik team
answered on 11 Dec 2018, 06:08 PM
Hi Richard,

The auto resizing functionality has been implemented only when resizing the whole grid. This behavior can be observed in the following demo:
https://demos.telerik.com/kendo-ui/grid/hierarchy

Applying  the resizing of the parent grid to the child grids is rather a custom functionality and we have not currently created a public resource covering this behavior. What I can suggest is to subscribe to the columnResize event and then resize the child elements using CSS. You can see a possible way to achieve this in this Dojo sample:
https://dojo.telerik.com/uXexoXEv

columnResize:function(e){
  var grid = this;
  var gridColumns = grid.columns;
  var resizedColumnIndex;
 
  for(var i=0; i<grid.columns.length; i+=1){
    if(gridColumns[i].field == e.column.field){
      resizedColumnIndex = i;
      break;
    }
  }
   $(".k-detail-cell .k-grid").each(function(){
  $(this).find("colgroup col")
 .eq(resizedColumnIndex)
 .css({width: e.newWidth});
 })
}


Also, as a reference on how to resize a column, you can use the following article:
https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/apply-minimum-width-during-column-resize#apply-minimum-width-during-column-resize

Should you have any additional questions, feel free to contact me.


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Anil
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Richard
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or