themebulider color is not working for the deatiltab grid

[pankhiParticipant]

hi

I am using theme builder to change the color of my widgets used.
The theme bulider changes the color of the grid but did not change the color of the tab .
i have used the foloeing row detail:- http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/rowdetails.htm

[Peter StoevKeymaster]

Hi pankhi,

You should apply your custom theme to the Tabs widget, too.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[pankhiParticipant]

Hi i have mention it in widget too. Following is my code . i have mentioned the theme name while initializing the grid.
FOlowwing is my code. Can you please tell where i have to mention other than while initializing the grid
`$=jQuery.noConflict();
$(document).ready(function(){
//===========================
// show the grid for inbox
//===========================
var url = “/messages/inboxjson”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘TimeStamp’,type: “date”},
{ name: ‘Priority’,type: “string”},
{ name: ‘Type’,type: “string” },
{ name: ‘Reason’ ,type: “string”},
{ name: ‘Subject’ ,type: “string”},
{ name: ‘HtmlBody’ ,type: “string”},
{ name: ‘id’ ,type: “int”},
{ name: ‘MessageRead’ ,type: “int”},
],
id: ‘id’,
url: url,
pagesize: 30,
};

var initrowdetails = function (index, parentElement, gridElement, datarecord) {
var tabsdiv = null;
var detail = null;
var title=null;
tabsdiv = $($(parentElement).children()[0]);
if (tabsdiv != null) {
detail = tabsdiv.find(‘.detail’);
title = tabsdiv.find(‘.title’);

// if msg is unread mark the text with bold font
if(datarecord.MessageRead==”0″){
var container = $(‘<div style=”margin: 5px; font-weight: bold;”></div>’)
}else{
var container = $(‘<div style=”margin: 5px;”></div>’)
}
container.appendTo($(detail));

var manageemail= $(‘<div style=”float: left; width: 20%;”></div>’);
var leftcolumn = $(‘<div style=”float: left; width: 40%;”></div>’);
var rightcolumn = $(‘<div style=”float: left; width: 40%;”></div>’);

container.append(leftcolumn);
container.append(rightcolumn);
container.append(manageemail);

var settings= $(“<div class=’jqx-rc-all’ style=’margin: 10px;’><b>Email Status:</b></div>”);
var settingsmargin= $(“<div style=’margin-top: 10px;’></div>”);
var selectbox= $(‘<select style=”width:124px !important;” class=”selectbox”><option value=”select”>Select Status</option><option value=”read” selected >Read</option><option value=”unread”>Unread</option><option value=”archived”>Archived</option></select>’);

settingsmargin.append(selectbox);
settingsmargin.appendTo(settings);
manageemail.append(settings);

var Priority = “<div style=’margin: 10px;’><b>Priority:</b> ” + datarecord.Priority + “</div>”;
var TimeStamp = “<div style=’margin: 10px;’><b>Date:</b> ” + dataAdapter.formatDate(datarecord.TimeStamp, DateTimeFomat) + “</div>”;
var Subject = “<div style=’margin: 10px;’><b>Subject:</b> ” + datarecord.Subject + “</div>”;
var HtmlBody= “<div style=’margin: 10px;’>” + datarecord.HtmlBody+ “</div>”;

$(leftcolumn).append(Priority);
$(leftcolumn).append(TimeStamp);
$(leftcolumn).append(Subject);
$(leftcolumn).append(HtmlBody);

var Type = “<div style=’margin: 10px;’><b>Type:</b> ” + datarecord.Type + “</div>”;
var Reason = “<div style=’margin: 10px;’><b>Reason:</b> ” + datarecord.Reason + “</div>”;

$(rightcolumn).append(Type);
$(rightcolumn).append(Reason);

$(tabsdiv).jqxTabs({ width: 750, height: 170});

//===============================================
// ajax to mark as unread for read message
//===============================================
$(‘.selectbox’).change(function(){
var value = $(this).val();
if(value != “select”){
// if(confirm(‘Are you sure you want to ‘+ value +’ message ?’)){
if(value == “unread”){
//————————————
// ajax to mark the message as unread
//————————————
var updateId= “id=” + datarecord.id;
$.ajax({
url: ‘/messages/updatereadmessagesajax’,
data: updateId,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
// window.location.href = “/messages/unreadmessages”;
}else {
alert(‘Something went wrong.Please try again.’);
}
}
});
}
if(value == “read” ){
//————————————
// ajax to mark the message as read
//————————————
var messageId= “id=” + datarecord.id;
$.ajax({
url: ‘/messages/updatemessagesajax’,
data: messageId,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
// window.setTimeout(‘location.reload()’,5000); //reloads after 5 seconds
}else {
alert(‘Something went wrong.Please try again.’);
}
}
});
}
if(value == “archived” ){
//————————————
// ajax to mark the message as unread
//————————————
var archivedId= “id=” + datarecord.id;
$.ajax({
url: ‘/messages/updatearchivedmessagesajax’,
data: archivedId,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
// window.location.href = “/messages/archivedmessages”;
}else {
alert(‘Something went wrong.Please try again.’);
}
}
});
}
// }
}
});
//———————————————————————–
// ajax called to UPDATE the column “MessageRead” when user read message
//———————————————————————–
var messageId=’id=’+datarecord.id;
$.ajax({
url: ‘/messages/updateunreadmessagesajax’,
data: messageId,
type: “POST”,
cache: false,
async: false,
success: function(response)
{
if(response==”success”){
// window.setTimeout(‘location.reload()’,6000);
//window.location.reload();
}else{
alert(‘Something went wrong please try again.’);
}
},
error: function (response) {
// cancel changes.
alert(‘Something went wrong please try again.’);
}

});

}
}

var dataAdapter = new $.jqx.dataAdapter(source, {
beforeLoadComplete: function (records, originalData, c) {
for (var i = 0; i < records.length; i++) {

// show date if it is present in db
if(originalData[i].TimeStamp==”0″ ){
records[i].TimeStamp=””
}else{
records[i].TimeStamp= new Date(originalData[i].TimeStamp* 1000)
}

// add for priority acc to the no.
if(originalData[i].Priority==”0″){
records[i].Priority=”Important”
}else if(originalData[i].Priority==”1″){
records[i].Priority=”Normal”
}else if(originalData[i].Priority==”2″){
records[i].Priority=”Low”
}else{
records[i].Priority=””
}

};

return records;
},
});

var expandData = new Array();
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
theme: KiouiTheme,
source: dataAdapter,
filterable: true,
showfilterrow: true,
pageable: true,
autoheight: true,
sortable: true,
altrows: true,
enabletooltips: true,
pagesizeoptions: [’30’, ’60’, ’90’],
selectionmode: ‘singlerow’,
columnsresize: true,
rowdetails: true,
enablebrowserselection: true,
rowdetailstemplate: {
rowdetails: “<div style=’margin: 10px;’><ul style=’margin-left: 30px;’><li class=’title’>Detail<div class=’detail’></div></div>”,
rowdetailsheight: 200
},

ready: function () {
var data = $(‘#jqxgrid’).jqxGrid(‘getrows’);
for (var i = 0; i < data.length; i++) {
expandData.push(false);
};

$(“#jqxgrid”).on(“rowclick”, function (event) {
var column = event.args.column;
var rowindex = event.args.rowindex;
var columnindex = event.args.columnindex;
if (expandData[rowindex] == false) {
$(‘#jqxgrid’).jqxGrid(‘showrowdetails’, rowindex);
} else {
$(‘#jqxgrid’).jqxGrid(‘hiderowdetails’, rowindex);
};
});

$(‘#jqxgrid’).on(‘rowexpand’, function (event) {
var args = event.args;
var row = args.rowindex;
expandData[row] = true;
});

$(‘#jqxgrid’).on(‘rowcollapse’, function (event) {
var args = event.args;
var row = args.rowindex;
expandData[row] = false;
});

},
initrowdetails: initrowdetails,
columns: [
{ text: ‘Date (PST)’, datafield: ‘TimeStamp’, type: ‘date’, cellsformat: DateTimeFomat},
{ text: ‘Priority’, datafield: ‘Priority’},
{ text: ‘Type’, datafield: ‘Type’ , cellsformat: ‘c2’},
{ text: ‘Subject’, datafield: ‘Subject’ ,cellsformat: ‘c2’},
],
});

});

[Peter StoevKeymaster]

Hi pankhi,

As I wrote, the jqxTabs theme is not set in the initrowdetails i.e set the theme property where you create the jqxTabs widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts