jQuery UI Widgets Forums Grid themebulider color is not working for the deatiltab grid

This topic contains 3 replies, has 2 voices, and was last updated by  Peter Stoev 9 years, 8 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • pankhi
    Participant

    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 Stoev
    Keymaster

    Hi pankhi,

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

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    pankhi
    Participant

    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 Stoev
    Keymaster

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.