Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://docs.dhtmlx.com/suite/grid/customization/ below:

JavaScript Grid - Customization | DHTMLX Suite 9 Docs

There is a possibility to make changes in the look and feel of a grid.

Related sample: Grid. Styling (custom CSS)

For this you need to take the following steps:

• add a new CSS class(es) with desired settings in the <style> section of your HTML page or in your file with styles (don't forget to include your file on the page in this case)

<style>
    .my-first-class {
        
    }
    
    .my-second-class {
        
    }
</style>

• specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the Grid configuration:

const grid = new dhx.Grid("grid_container", { 
    css:"my-first-class my-second-class"
});

For example:

<style>
    .custom {
        --dhx-font-color-primary: #fff;
        --dhx-background-primary: #3A434A;
        --dhx-s-grid-header-background: #2C3338;

        --dhx-border-color: #4A555E;
        --dhx-border: var(--dhx-border-width) solid var(--dhx-border-color);
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { minWidth: 150, id: "country", header: [{ text: "Country" }] },
            { id: "population", header: [{ text: "Population" }] },
            { id: "yearlyChange", header: [{ text: "Yearly Change" }] },
            
        ],
        adjust: true,
        data: dataset,
        css: "custom",
    });
</script>

Related sample: Grid. Styling selection (custom CSS)

Here is an example of how you can style selection in Grid:

<style>
    .custom {
        --dhx-color-primary: #ff5252;
        --dhx-s-grid-selection-background: rgba(255, 198, 198, 1);
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { minWidth: 150, id: "country", header: [{ text: "Country" }] },
            { id: "population", header: [{ text: "Population" }] },
            { id: "yearlyChange", header: [{ text: "Yearly Change" }] },
            
        ],
        adjust: true,
        data: dataset,
        selection: true,
        css: "custom"
    });
</script>

You can easily set some styling to the text of header cells by applying some inline style or a CSS class to the text property of the header of a column:

<style>
    .title {
        font-size: 1.2em;
        color: tomato;
    }
    
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
              { width: 200, id: "country", header: [{ text: "<span style='font-size:2em'>Country</span>" }] },
              { width: 150, id: "population", header: [{ text: "<span class='title'>Population</span>" }] },
              { width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
              { width: 150, id: "netChange", header: [{ text: "Net Change" }] },
              { width: 150, id: "density", header: [{ text: "Density (P/Km²)" }] },
              { width: 150, id: "area", header: [{ text: "Land Area (Km²)" }] },
        ],
        data: dataset
    });
</script>

Related sample: Grid. Styling header cells (custom CSS)

You can easily set some styling to the text of footer cells by applying some inline style or a CSS class to the text property of the footer of a column:

<style>        
    .custom_footer{
        font-size: 18px;
        text-decoration: underline;
    }    
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            width: 200, id: "country", header: [{ text: "Country" }],
            footer: [
                { text: '<div class="custom_footer">Total</div>' },
                { text: '<div class="custom_footer">Minimal value</div>' },
            ],
            htmlEnable: true
        },
        {
            width: 150, id: "population", header: [{ text: "Population" }],
            footer: [
                { text: ({ totalPopulation}) => `${totalPopulation}`},
                { text: ({ minimalValue }) => `${minimalValue}`}
            ],
        },
    ],
    summary: { 
        totalPopulation: ["population", "sum"],
        minimalValue: ["population", "min"]
    },
    data: dataset
});
</script>

Related sample: Grid. Styling footer cells (custom CSS)

It is possible to change the appearance of grid rows by applying custom CSS styles to them. There are two ways to do it:

• via the rowCss property in the configuration of Grid. As a value of property set a function that takes the id of a row as a parameter and returns a string with the name of a CSS class.

<style>
    .my_custom_row {
        background: coral;
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            
        ],
        rowCss: function (row) { return row.custom ? "my_custom_row" : "" },
        data: dataset
    });
</script>

Related sample: Grid. Custom row style

• with the help of the addRowCss() method:

<style>
    .myCustomClass{
        background:greenyellow;
    }
</style>

<script>
    const rowId = grid.data.getId(1);
    grid.addRowCss(rowId, "myCustomClass");
</script>

Related sample: Grid. Add row CSS

where:

It is easy to style necessary cells using the addCellCss() method. It takes three parameters:

<style>
.myCustomClass{
    background:greenyellow;
}
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            
        ],
        data: dataset,
        adjust: true
    });

    const rowId = grid.data.getId(1);

    grid.addCellCss(rowId, "country", "my_сustom_сlass");
</script>

Related sample: Grid. Add cell CSS

You can mark particular cells in a grid using the mark property of a column configuration. You need to set its value as a function that takes the following parameters:

The function should return a string with a custom CSS class for your mark.

<style>
    .my_custom_mark {
        background: lightcoral;
    }
    
    .total_col {
        background: #f2f2f2;
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            {
                id: "population", header: [{ text: "Population" }],
                
                mark: function (cell, data, row, column) {
                    return cell > 100000000 ? "my_custom_mark" : ""
                }
            }, 
            {
                id: "density", header: [{ text: "Density (P/Km²)" }],
                
                mark: function (cell, data) { return "total_col"; }
            },
        ],
        data: dataset
    });
</script>

Related sample: Grid. Conditional formatting. Marking cells with colors

It is also possible to highlight cells with minimum and (or) maximum values in a grid using the mark property of a column configuration. The property is an object which takes two optional parameters:

<style>
    .max_cell {
        background: #f44336;
        color: #FFF;
    }

    .min_cell {
        background: #4CAF50;
        color: #FFF
    }
</style>

<script>
    const grid = new dhx.Grid("grid_container", {
        columns: [
            { width: 200, id: "country", header: [{ text: "Country" }] },
            {
                width: 150, id: "population", header: [{ text: "Population" }],
                mark: {
                    min: "min_cell",
                    max: "max_cell"
                }
            },
            
        ],
        data: dataset
    });
</script>

Related sample: Grid. Mark cells

It is possible to customize the content of cells of Grid via the template property of a column configuration. The template option is a function that takes three parameters:

const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{text: "Country"}] },
        { width: 150, id: "population", header: [{text: "Population"}] },
        { width: 150, id: "netChange", header: [{text: "Net Change"}],
          htmlEnable: true,
          template: function (text, row, column) {
            return "<input type=\"checkbox\" " + (text /> 300000 ? "checked": "")  + ">";
          }
        }
    ],
    data: dataset
});

Related sample: Grid. Cell templates

Starting from v7.0, you can assign event handlers to HTML elements of a custom template of Grid cells via using the eventHandlers configuration property of Grid, for instance:

const grid = new dhx.Grid("grid_container", {
    columns: [
        { width: 200, id: "country", header: [{ text: "Country" }], htmlEnable: true },
        { width: 150, id: "netChange", header: [{text: "Net Change"}],
            htmlEnable: true,
            tooltip: false,
            template: function (text, row, column) { 
                return "<div className='cell__template'><input type='checkbox' 
                    disabled " + (text /> 3000000 ? "checked" : "") + " ></div>";
            }
        },
        
    ],
    data: data,
    eventHandlers: { 
        onmouseover: { 
            cell__template: function(event, data) { 
                console.log(JSON.stringify(data.row, null, 2)); 
            } 
        } 
    } 
});

Related sample: Grid. Handling events in template

Starting with v7.1, you can customize the content of the tooltip of a column via the tooltipTemplate configuration option of the column. The tooltipTemplate function takes three parameters:

const grid = new dhx.Grid("grid_container", {
    columns: [
        {
            width: 200, id: "country", header: [{ text: "Country" }], align: "left",
            htmlEnable: true, 
            tooltipTemplate: function (value, row, column) { 
                if (row.country === "Bangladesh") {
                    return false; 
                }
                return `<div className="custom-tooltip"> 
                    <img src="../data/common/img/02/${row.avatar}.jpg" /> 
                    <span>Last edit time:<br/>${row.editing.toUTCString()}</span> 
                </div>`; 
            } 
        },
        { width: 150, id: "population", header: [{ text: "Population" }] },
        { width: 150, id: "yearlyChange", header: [{ text: "Yearly Change" }] },
        
    ],
    data: dataset
});

info

To prevent a tooltip from being shown, return false from the function (from v7.1.12).

Related sample: Grid. Rich tooltip template for the first column

Related sample: Grid. Tooltip template

note

You should enable the htmlEnable option in the configuration of Grid (or configuration of the column) to activate HTML support for the tooltip.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4