Inserting a Bootstrap Glyphicon within a jqxgrid

[ADrew2Participant]

Within Angular I am trying to insert a Bootstrap Glyphicon within my jqxgrid. I want one column to contain multiple glyphicon-edit icons.

Here is the creation of the grid

                 <div class="panel-body">
		    	<jqxGrid
		          [width]="'100%'" [theme]='"energyblue"' [source]='dataAdapter' [pageable]='true' [height]='500' [altrows]='true'
		          [columns]='columns'>
		       </jqxGrid>
		   </div>	

And here is what is contained in the grid. I want the glyp icon in the EditTemp column

The datafields and columns:

datafields: [  
            { name: 'EditTemp', type: 'int' },
            { name: 'EmployeeNum', type: 'int' },
            { name: 'FullName', type: 'string' },
            { name: 'MarketCenter', type: 'string' },
            { name: 'FunctionTitle', type: 'string' },
            { name: 'HireDate', type: 'string' },
            { name: 'TermDate', type: 'string' }
        ],

columns: any[] =
    [
        {
            text: 'Edit temp', columngroup: 'ProductDetails',
            datafield: 'EditTemp', width: "14.2%", minwidth: 100
        },
        {
            text: 'Employee #', columngroup: 'ProductDetails',
            datafield: 'EmployeeNum', width: "14.2%", minwidth: 100
        },
        {
            text: 'Name', columngroup: 'ProductDetails',
            datafield: 'FullName', width: "14.2%", minwidth: 100
        },
        {
            text: 'M/C', columngroup: 'ProductDetails', 
            datafield: 'MarketCenter', width: "14.2%", minwidth: 100
        },
        {
            text: 'Function', columngroup: 'ProductDetails',
            datafield: 'FunctionTitle', width: "14.2%", minwidth: 100
        },
        {
            text: 'Hire Date', columngroup: 'ProductDetails',
            datafeild: 'HireDate', width: "14.2%", minwidth: 100
        },
        {
            text: 'Term Date', columngroup: 'ProductDetails',
            datafeild: 'TermDate', width: "14.2%", minwidth: 100
        }
    ]; 

Do i have to set the gyl within the xml file?

<Employ EmployeeID="1">
    <EditTemp>
        <a href="#">
          <span class="glyphicon glyphicon-edit"></span>
        </a>
    </EditTemp>
    <EmployeeNum>2793</EmployeeNum>
    <FullName>Brian Miller</FullName>
    <MarketCenter>458-Salt Lake City</MarketCenter>
    <FunctionTitle>Controller</FunctionTitle>
    <HireDate>10/12/2008</HireDate>
    <TermDate>10/12/2009</TermDate>
  </Employ>

Any help is much appreciated.

[Peter StoevKeymaster]

Hi ADrew2,

You can try the cellsrenderer Grid column callback function to override the built-in cells rendering with custom content such as glyph icons.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[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]

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.

[Author]

Posts