Dynamically change column layout (column grouping) properties

If you want to change the order of columns or change the properties of a group column after applying layout to the grid using setColumnLayout(), use layoutByName(). (This cannot be changed using the traditional columnByName() or setColumnProperty().)

layout1 = [
   {
     name: "companyGroup",
     direction: "horizontal",
     items: [
       "Country",
       "CompanyName"
     ],
     header: {
       text: "Company",
     }
   },
   "OrderID",
   "CustomerID",
   "EmployeeID",
   "OrderDate",
   "Phone"
];
 
gridView.setColumnLayout(layout1);
 
 
function btnVindex() {
   var vidx = gridView.layoutByName("companyGroup").vindex == 0 ? 3:0;
   gridView.layoutByName("companyGroup").vindex = vidx;
}
 
function btnHeaderText() {
   var headerTxt = gridView.layoutByName("companyGroup").header.text == "Company" ? "Company" : "Company";
   gridView.layoutByName("companyGroup").header.text = headerTxt;
}
 
function btnDirection() {
   var dir = gridView.layoutByName("companyGroup").direction == "horizontal" ? "vertical" : "horizontal";
   gridView.layoutByName("companyGroup").direction = dir;
}
 
function btnVindex1() {
   var vidx = gridView.layoutByName("OrderDate").vindex == 4 ? 0:4;
   gridView.layoutByName("OrderDate").vindex = vidx;
}

Column layout (column grouping)Resizing column width