[ADrew2Participant]

Got it!

Here is the code for the column:

{
            text: 'Employee #', 
            columngroup: 'ProductDetails',
            datafield: 'EmployeeNum',
            width: "14.2%", 
            
            rendered: changeColor,
            
            minwidth: 100
            //centers the column header and column cells
              //cellsalign: 'center', align: 'center'
            
        },

Then set the function using a font-weight, font-style, color, etc:

function changeColor (header){
  header.css('font-weight', 'bold');
  header.css('color','#ffffff');
};

This styles the text within the header column only

[ADrew2Participant]

Perfect. Thanks!

[ADrew2Participant]

I was able to get the icons to appear. Here is the updated code.

columns: any[] =
    [
        {
            text: 'Edit temp', 
            columngroup: 'ProductDetails',
            datafield: 'EditTemp', 
            width: "14.2%", 
            minwidth: 100
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                return glyphiconGridButton('edit-prospect', 'Edit temp', 'edit', row);
            }
        },

Followed by the function

function glyphiconGridButton(cssclass, label, image, id) {
    return '<div style="width: 100%; text-align: center; padding-top: 2px;">' +
        '<button class="btn btn-info btn-xs jqxgrid-button ' + cssclass + '" aria-label="' + label + '" data-id="' + id + '">' +
        '<span class="glyphicon glyphicon-' + image + '" aria-hidden="true"></span>' +
        '<span class="sr-only">' + label + '</span>' +
        '</button>' +
        '</div>';
}

However, I would like the glyph icon to be clickable and not work as a text feild. I want to link to another html page when you click the glyph icon. The html page in question is employee.edit.html. All within the same root folder.

[ADrew2Participant]

Here is my new code based on this plunker I found here. plunker
However, it does not work correctly. Am i missing something?

 columns: any[] =
    [
        {
            text: 'Edit temp', 
            columngroup: 'ProductDetails',
            datafield: 'EditTemp', 
            width: "14.2%", 
            minwidth: 100,
            cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                return glyphiconGridButton('edit-prospect', 'Edit temp', 'edit', row);
            }
        },

[ADrew2Participant]

Got it!

<jqxGrid
    [width]='1505' [source]='dataAdapter' [pageable]='true' [height]='500'
    [editable]='true' [columns]='columns' [theme]='"energyblue"'>
 </jqxGrid>

[Author]

Posts