[update] grid column properties examples, minor fixes

Author: mafanya23

docs/grid/api/grid_adjustcolumnwidth_method.md

@@ -19,6 +19,6 @@ grid.adjustColumnWidth("b", "header");
 
 @descr:
 
-If no value is set to the *adjust* parameter, the **adjustColumnWidth** method sets it to *true*.
+If no value is set to the `adjust` parameter, the `adjustColumnWidth()` method sets it to *true*.
 
 [comment]: # (@relatedapi: grid/api/grid_adjust_config.md)

docs/grid/api/grid_aftercolumndrag_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterColumnDrag event of Grid in the documentat
 
 # afterColumnDrag
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires after dragging of a column is finished
 

docs/grid/api/grid_aftercolumndrop_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterColumnDrop event of Grid in the documentat
 
 # afterColumnDrop
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires before the user has finished dragging a column but after the mouse button is released
 

docs/grid/api/grid_afterrowresize_event.md

@@ -6,7 +6,9 @@ description: You can explore the afterRowResize event of Grid in the documentati
 
 # afterRowResize
 
-{{pronote This functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.}}
+:::tip pro version only
+The described functionality requires PRO version of the DHTMLX Grid (or DHTMLX Suite) package.
+:::
 
 @short: fires after the height of a row is changed
 

docs/grid/api/grid_spans_config.md

@@ -107,7 +107,7 @@ const grid = new dhx.Grid("grid_container", {
             column: "population",
             rowspan: 9,
             text: "Some text",
-            toltipTemplate: ({ value, count }) => (`value: ${value}; count: ${count}`),
+            tooltipTemplate: ({ value, count }) => (`value: ${value}; count: ${count}`),
         },
     ],
     data: dataset

docs/grid/api/gridcolumn_properties/gridcolumn_adjust_property.md

@@ -23,10 +23,10 @@ adjust?: "data" | "header" | "footer" | boolean;
 const grid = new dhx.Grid("grid_container", { 
     columns: [
         { id: "country", header: [{ text: "Country" }], adjust: "header" },
-        { id: "population", header: [{ text: "Population" }] }
+        // more columns configuration objects
     ],
     adjust: false,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_align_property.md

@@ -20,10 +20,10 @@ align?: "left" | "center" | "right";
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { id: "name", header:  [{ text: "Name", align: "center" }], align: "right"}
-        // more options
+        { id: "name", header: [{ text: "Name" }], align: "right" }, 
+        // more columns configuration objects
     ],
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_autowidth_property.md

@@ -23,10 +23,10 @@ autoWidth?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         { id: "country", header: [{ text: "Country" }], autoWidth: false },
-        { id: "population", header: [{ text: "Population" }] },
+        // more columns configuration objects
     ],
     autoWidth: true,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_closable_property.md

@@ -27,27 +27,18 @@ closable?: boolean;
 const grid = new dhx.Grid("grid_container", {
     columns: [
         {
-            width: 150,
             id: "country",
             header: [{ text: "Country" }],
             // grouping of the "country" column is permanently enabled
             // and can't be switched off via the group panel
             closable: false, 
         },
-        {
-            width: 150,
-            id: "population",
-            header: [{ text: "Population" }],
-            groupable: true,
-        },
-        { width: 150, id: "destiny", header: [{ text: "Density (P/Km²)" }] },
-        { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
+        // more columns configuration objects
     ],
     group: {
-        order: ["country", "population"]
+        order: [ "country" ]
     },
-    groupable: true,
-    data: dataset
+    // more options
 });
 ~~~
 

docs/grid/api/gridcolumn_properties/gridcolumn_dateformat_property.md

@@ -26,13 +26,10 @@ dateFormat?: string;
 ~~~jsx
 const grid = new dhx.Grid("grid_container", {
     columns: [
-        { 
-            width: 150, id: "date", header: [{ text: "Date" }], 
-            type: "date", dateFormat: "%M %d %Y"
-        },
-        // more columns
+        { id: "date", header: [{ text: "Date" }], type: "date", dateFormat: "%M %d %Y" },
+        // more columns configuration objects
     ],
-    data: dataset
+    // more options
 });
 ~~~