CODEWITHSUNDEEP
javascriptjqueryflexigrid
Akosha
Akosha

Reputation: 471

Import span tag into Flexigrid definition

I have table defined with FlexiGrid. Call to all variables is ok. One column is color which I pick with Simple Color Picker JavaScript. Before start to use Flexigrid I was defining one column as:

<span style="background: <c:out value="${current.colore}" />">&nbsp;&nbsp;&nbsp;</span>

This was showing me small square with choised color. Now I don't know how to do the samo but with FlexiGrid.

My question is: How to import span tag into FlexiGrid table definition to read value for color and to paint me one box with that color at every row?

Code for table is:

$(document).ready(function() {
    $("#newTable").flexigrid({
    url: 'agendaTipoAppuntamentoInitJson.do',
    dataType: 'json',
    colModel : [
        {display: 'ID',                 name : 'idTipoAppuntamento', width : 40, sortable : false, align: 'center', hide: true},
        {display: 'Codice',             name : 'codice', width : 60, sortable : false, align: 'left'},
        {display: 'Descrizione',        name : 'descrizione', width : 130, sortable : false, align: 'left'},
        {display: 'Descr. breve',       name : 'descrBreve', width : 80, sortable : false, align: 'left'},
        {display: 'Colore',             name : 'colore', width : 80, sortable : false, align: 'left'},
        {display: 'ID Struttura',       name : 'idStruttura', width : 60, sortable : false, align: 'left', hide: true},
        {display: 'Descr. Struttura',   name : 'descrizioneStruttura', width : 150, sortable : false, align: 'left'},
        {display: 'ID Spec',            name : 'idSpecializzazione', width : 60, sortable : false, align: 'left', hide: true},
        {display: 'Descr. Spec',        name : 'descrizioneSpecializzazione', width : 150, sortable : false, align: 'left'},
        ],
    usepager: true,
    title: 'Gestione tipi appuntamento',
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    width: 950,
    height: 370,
    singleSelect: true,
    click: editMe
}); });

Upvotes: 0

Views: 384

Answers (1)

Anwar
Anwar

Reputation: 4508

I had went through something similar like yours before. Try before sending your Json data from your-server side to put this:

In your server-side -Before sending it to flexigrid- create your Json data as follow:

total: (no of rec)
 page : (page no)
 rows : [{cell: [ (col1 value) , <span style="background: <c:out value=" + MyColorValue1 + " />">&nbsp;&nbsp;&nbsp;</span> ,.. ] },
        {cell: [ (col1 value) , <span style="background: <c:out value=" + MyColorValue2 + " />">&nbsp;&nbsp;&nbsp;</span>  ,.. ] }]

In case if it doesn't properly show your span, use > and < instead of < and >.

Upvotes: 1

Related Questions