Chaudhary Kaleem Ahmad Chaudhary Kaleem Ahmad - 2 months ago 23
jQuery Question

how to bold a row in jtable based on value of a column c#, mvc, json

I am new to JTable. I have JSon data returning from controller and loading that data into JTable.
Json data has a boolean column, say 'ShowBold'; I want to bold the whole row in JTable where ShowBold is true but on the other hand I dont want to show 'ShowBold' in JTable.
I am using c#, mvc 4 and data comming in JSon format

Any guidance please.

My code is as under:

<script language="JavaScript">
$(document).ready(function () {
$('#MyDiv').jtable({
title: 'Client Data',
paging: true,
pageSize: 10,
sorting:true,
actions: { listAction: '/Home/getClientData/@Model.ID' },
fields: { ClientID: {title: 'Client ID', width: '15%' },
ClientName: {title: 'Client Name', width: '15%'},
Address: {title: 'Address', width: '15%'},
AmountDue: {title: 'Amount Due', width: '15%'},
ShowBold: {title: 'Show Bold', width: '15%'}
});

$('#MyDiv').jtable('reload');

});

</script>

<div id="MyDiv">Client data here.... </div>



  • I don't want to show 'ShowBold' in JTable

  • I want to bold all rows where 'ShowBold' = true in JTable.

  • My data is in JSon format.

  • I am using C#, MVC, Entity framework


Answer

Just remove column ShowBold from jtable initialization, and use display function at each column level where you can style your cell.

 $('#MyDiv').jtable({
title: 'Client Data',
paging: true,
pageSize: 10,
sorting:true,
actions: { listAction: '/Home/getClientData/@Model.ID' },
fields: { 
    ClientID: {title: 'Client ID', width: '15%',
        display: function (data) {
        if(data.record.ShowBold) 
            return '<b>'+data.record.ClientID+'</b>'
        else
            return data.record.ClientID;
        }
    },
    ClientName: {title: 'Client Name', width: '15%',
        display: function (data) {
        if(data.record.ShowBold) 
            return '<b>'+data.record.ClientName+'</b>'
        else
            return data.record.ClientName;
        }
    },
    Address: {title: 'Address', width: '15%',
        display: function (data) {
        if(data.record.ShowBold) 
            return '<b>'+data.record.Address+'</b>'
        else
            return data.record.Address;
        }
    },
    AmountDue: {title: 'Amount Due', width: '15%',
        display: function (data) {
        if(data.record.ShowBold) 
            return '<b>'+data.record.AmountDue+'</b>'
        else
            return data.record.AmountDue;
        }
    }
}

});

Comments