[jpereraParticipant]

Hello everyone,
I found that the problem was mine with the variables that i’m using to do the methods for show the buttons.
Everything work fine with the grid.

Thank you all.

[jpereraParticipant]

thank you very much Nadezhda, it will be very helpful those examples…

Jose

[jpereraParticipant]

Please, don’t give me a documentation again,
I have read it a lot of time and I wrote that the theme change works fine, this is not the problem, the problem is that in FireFox have a bug that the components jqxDateTimeInput and jqxComboBox show the text in white into a jqxwindow, no matter the theme that you have on the initialization of the control….
Thanks…
Jose

[jpereraParticipant]

Hello, the issue that i was talking previously it seem to be some bug on Firefox because a test the application in IE v11 and it works fine…
Please if you find any solution please advice me so i could fix it..

Thank you

[jpereraParticipant]

Look I don’t have an account in JSFiddle but i will give you here a fragment of my code, i hope it’s look good.
I have include all the css of the themes:

 <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.arctic.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.black.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.classic.css" />
    <link type="text/css" rel="stylesheet" href="~/Content/JQWidgets/jqx.darkblue.css" />

This is the code html for the one of the component with the problem:

<div id="popupWindowThemeConfiguring">
    <div>
        <span>
            <img src="~/Content/Images/imChangeTheme.png" alt="" style="margin-right: 15px" /><b>MySecurity Account</b>- Change Theme...
        </span>
    </div>
    <div style="overflow: hidden;">
        <table>
            <tr>
                <td><div id="jqxTheme"></div></td>
                <td><input type="submit" value="Change" class="btn-primary" onclick="RedirectHome()" /></td>
            </tr>
        </table>
    </div>
</div>

As you could see this is html for a widget window and a combo that show a local array and a button…
The follow code is for the initialization of the widgets:

 $("#popupWindowThemeConfiguring").jqxWindow({ showCollapseButton: false, isModal: true, animationType: 'fade', resizable: false, showCloseButton: true, width: "320px", height: "100px" });
function ShowThemeWindow() {
            var themeVal = $.cookie("MSATheme");
            if (themeVal != '' && themeVal != null)
                themeVal = themeVal;
            else
                themeVal = "bootstrap";
            var source = [
                        "android",
                        "artic",
                        "black",
                        "bootstrap",
                        "classic",
                        "darkblue",
                        "energyblue",
                        "fresh",
                        "highcontrast",
                        "metro",
                        "metrodark",
                        "office",
                        "orange",
                        "shinyblack",
                        "summer"

            ];
            $("#jqxTheme").jqxComboBox({ source: source, width: '200', height: '20', placeHolder: "Change the Website Theme...", });
            $("#popupWindowThemeConfiguring").jqxWindow('open');
        }

If you check you will see that i don’t have a property theme on the combobox and i don’t know why when the window show the combo show me the placeHolder text correct and the list is correct and when you select on item in the list it selected but put the text on white.
At the last this the code that I’m using to change the theme for all the components:
the follow code is the function that i’m calling when you select a theme in the combo and press the button CHANGE, i’m refreshing all the pages.

 function RedirectHome() {
            $.cookie("MSATheme", $("#jqxTheme").jqxComboBox('val'));
            window.location.href = '@Url.Action("Index", "WorkPanel")';
        }

And this the code that i’m using to assign the them in the initialization:

var themeVal = $.cookie("MSATheme");
            if (themeVal != '' && themeVal != null)
                themeVal = themeVal;
            else
                themeVal = "bootstrap";

One last consideration, I believe that the problem is with the jqxwindow because the components only have the issue when i’m showing it in the jqxwindow.

Thank you very much…

Jose

[jpereraParticipant]

Hello,
I having so trouble with the themes that’s why i’m writing in the same post, i did the changed theme dinamically and it works very fine so far, the only issue that i have is with the combobox and the jqxDateTime, in those case when i put a theme like bootstrap for example all the values (the texts) are in color white then you can’t see the text but the value is in and it is correct…
I check the theme and it’s assigned a correct theme value…
Any idea of what could be happened!!!.
Thanks
Jose

[jpereraParticipant]

Thank you very much i solved the problem i was include the base script, I’m sorry…

Jose

[jpereraParticipant]

Thanks Dimitar, I will try to do it….

[jpereraParticipant]

Thank you very much Dimitar, you are right!!!

Jose

[jpereraParticipant]

Thanks Dimitar, i’m going to give the code, but It’s important that you check this because I found a solution and it was not putting the filterable property in the grid, in that case was a solution for me but maybe someone need the grid to be filterable and this could cause a problem:
this is the function

 function LoadSourceContactPhoneSchedule() {
            var rowPhoneindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
            var selectedPhone = $('#gvContactPhones').jqxGrid('getrowdata', rowPhoneindex);
            var DayTimeNum = null;
            if (selectedPhone.DayTimeNum != undefined)
                DayTimeNum = selectedPhone.DayTimeNum;
            var rowindexContact = $('#gvContacts').jqxGrid('getselectedrowindex');
            var contactSelected = $('#gvContacts').jqxGrid('getrowdata', rowindexContact);

            var sourcePhoneSchedule =
                {
                    type: "POST",
                    url: '@Url.Action("LoadAccountPhoneSchedule", "Account")',
                    data: { DayTimeNum: DayTimeNum },
                    dataType: "json",
                    datafields: [
                                 { name: 'CloseDow', type: 'string' },
                                 { name: 'CloseTime', type: 'string' },
                                 { name: 'DayTimeNum', type: 'int' },
                                 { name: 'OpenDate', type: 'date', format: "M/d/yyyy" },
                                 { name: 'OpenDow', type: 'string' },
                                 { name: 'OpenTime', type: 'string' },
                    ],
                    beforeLoadComplete: function (records) {
                        for (var i = 0; i < records.length; i++) {
                            if (records[i].OpenDate != null) {
                                var date = new Date(records[i].OpenDate);
                                var mil = date.getTime();
                                var time = parseInt(mil);
                                records[i].OpenDate = new Date(parseInt(time) + new Date(time).getTimezoneOffset() * 60000);
                            }
                        }
                        return records;
                    },
                    addrow: function (rowid, rowdata, position, commit) {
                        var params = "{" + "'ContactNum':" + contactSelected.ContactNum + "," + "'SeqNum':" + selectedPhone.SeqNum + "," + "'DayTimeNum':" + DayTimeNum + "," + "'DayCode':'" + rowdata.DayCode + "'," + "'AddReplace':'" + rowdata.AddReplace + "'," + "'OpenTime':'" + rowdata.OpenTime + "'," + "'CloseDay':'" + rowdata.CloseDay + "'," + "'CloseTime':'" + rowdata.CloseTime + "'}";
                        alert(params);
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("SaveContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Phone Saved Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    },
                    updaterow: function (rowid, rowdata, commit) {
                        var rowOldData = $('#gvContactPhoneSchedule').jqxGrid('getrowdata', rowid);
                        var params = "{" + "'CloseDowOld':'" + rowOldData.CloseDow + "'," + "'CloseTimeOld':'" + rowOldData.CloseTime + "'," + "'OpenDowOld':'" + rowOldData.OpenDow + "'," + "'OpenTimeOld':'" + rowOldData.OpenTime + "'," + "'CloseDow':'" + rowdata.CloseDow + "'," + "'CloseTime':'" + rowdata.CloseTime + "'," + "'DayTimeNum':" + DayTimeNum + "," + "'OpenDow':'" + rowdata.OpenDow + "'," + "'OpenTime':'" + rowdata.OpenTime + "'}";
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("UpdateContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Phone Updated Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    },
                    deleterow: function (rowid, commit) {
                        var data = $('#gvContactPhoneSchedule').jqxGrid('getrowdata', rowid);
                        var params = "{" + "'CloseDow':'" + data.CloseDow + "'," + "'CloseTime':'" + data.CloseTime + "'," + "'DayTimeNum':" + data.DayTimeNum + "," + "'OpenDow':'" + data.OpenDow + "'," + "'OpenTime':'" + data.OpenTime + "'}";
                        $.ajax({
                            type: "POST",
                            url: '@Url.Action("DeleteContactPhoneSchedule", "Contact")',
                            data: params,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (data) {
                                if (data.Success == true) {
                                    $("#lbNotificationSuccess").text("Day Time Remove Successfully");
                                    $("#jqxNotificationSuccess").jqxNotification("open");
                                    commit(true);
                                }
                                else {
                                    $("#lbNotification").text("An error occured. " + data.Message);
                                    $("#jqxNotification").jqxNotification("open");
                                    commit(false);
                                }
                            }
                        });
                    }
                }
            var dataAdapterPhoneSchedule = new $.jqx.dataAdapter(sourcePhoneSchedule);
            return dataAdapterPhoneSchedule;
        }

And this is the Initialization of the grid:

function InitializeContactPhoneSchedule() {
            var editrow = -1;
            var tooltiprenderer = function (element) { $(element).jqxTooltip({ position: 'mouse', content: $(element).text(), theme: 'bootstrap' }); }
            $("#gvContactPhoneSchedule").jqxGrid({
                width: "100%",
                theme: 'bootstrap',
                altrows: true,
                sortable: true,
                selectionmode: 'singlerow',
                pageable: true,
                pagesize: 20,
                enableellipsis: true,
                columnsresize: true,
                showtoolbar: true,
                updatedelay: 50,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addContactPhoneSchedule" type="button" value="Add New" />&nbsp;&nbsp;');
                    container.append('<input id="deleteContactPhoneSchedule" type="button" value="Delete Row" />&nbsp;&nbsp;');
                    container.append('<input id="refreshContactPhoneSchedule" type="button" value="Refresh" />&nbsp;&nbsp;');
                    $("#addContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "primary" });
                    $("#deleteContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "warning" });
                    $("#refreshContactPhoneSchedule").jqxButton({ theme: 'bootstrap', template: "success" });
                    $("#addContactPhoneSchedule").on('click', function () {
                        $("#cbContactPhoneCreateDayCode").jqxComboBox('clearSelection');
                        $("#cbContactPhoneCreateAddReplace").jqxComboBox('clearSelection');
                        $("#cbContactPhoneCreateScheduleCloseDay").jqxComboBox('clearSelection');
                        $("#tbContactPhoneCreateScheduleOpenHHMM").val('');
                        $("#tbContactPhoneCreateScheduleCloseHHMM").val('');
                        var offset = $("#gvContactPhoneSchedule").offset();
                        $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                        $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow('open');
                    });
                    $("#deleteContactPhoneSchedule").on('click', function () {
                        if (confirm("Are you sure do you want delete?") == false)
                            return;
                        var selectedrowindex = $("#gvContactPhoneSchedule").jqxGrid('getselectedrowindex');
                        var rowscount = $("#gvContactPhoneSchedule").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#gvContactPhoneSchedule").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#gvContactPhoneSchedule").jqxGrid('deleterow', id);
                        }
                    });
                    $("#refreshContactPhoneSchedule").on('click', function () {
                        var dataAdapter = LoadSourceContactPhoneSchedule();
                        $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapter });
                    });
                },
                columns: [
                                { text: 'Open', datafield: 'OpenDow', sortable: true, rendered: tooltiprenderer },
                                { text: 'HH:MM', datafield: 'OpenTime', sortable: true, rendered: tooltiprenderer },
                                { text: 'Close', datafield: 'CloseDow', sortable: true, rendered: tooltiprenderer },
                                { text: 'HH:MM', datafield: 'CloseTime', sortable: true, rendered: tooltiprenderer },
                                {
                                    text: 'Edit', datafield: 'Edit', width: 40, columntype: 'button', cellsrenderer: function () {
                                        return 'Edit';
                                    }, buttonclick: function (row) {
                                        editrow = row;
                                        var offset = $("#gvContactPhoneSchedule").offset();
                                        $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });
                                        var dataRecord = $("#gvContactPhoneSchedule").jqxGrid('getrowdata', editrow);
                                        $("#tbContactPhoneEditScheduleCloseHHMM").jqxDateTimeInput('val', ConvertTimeStringToDate(dataRecord.CloseTime));
                                        $("#tbContactPhoneEditScheduleOpenHHMM").jqxDateTimeInput('val', ConvertTimeStringToDate(dataRecord.OpenTime));
                                        var item = $("#cbContactPhoneEditScheduleOpen").jqxComboBox('getItemByValue', dataRecord.OpenDow);
                                        $("#cbContactPhoneEditScheduleOpen").jqxComboBox('selectItem', item);
                                        var item = $("#cbContactPhoneEditScheduleClose").jqxComboBox('getItemByValue', dataRecord.CloseDow);
                                        $("#cbContactPhoneEditScheduleClose").jqxComboBox('selectItem', item);

                                        $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow('open');
                                    }
                                }
                ]

            });
            $("#btSaveCreateContactPhoneSchedule").click(function () {
                var daycodevalue = $("#cbContactPhoneCreateDayCode").jqxComboBox('val');
                var addReplace = $("#cbContactPhoneCreateAddReplace").jqxComboBox('val');
                var closeDayvalue = $("#cbContactPhoneCreateScheduleCloseDay").jqxComboBox('val');
                var openHHMM = $("#tbContactPhoneCreateScheduleOpenHHMM").val();
                var closeHHMM = $("#tbContactPhoneCreateScheduleCloseHHMM").val();
                var row = { DayCode: daycodevalue, AddReplace: addReplace, OpenTime: openHHMM, CloseDay: closeDayvalue, CloseTime: closeHHMM };
                var commit = $('#gvContactPhoneSchedule').jqxGrid('addrow', null, row);
                $("#popupWindowCreateContactPhoneDetailSchedule").jqxWindow('hide');

                var rowindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
                var dataRecord = $("#gvContactPhones").jqxGrid('getrowdata', rowindex);
                var dataAdapterSchedule = LoadSourceContactPhoneSchedule(dataRecord.DayTimeNum);
                $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapterSchedule });

                var selectedrowindex = $("#gvContacts").jqxGrid('getselectedrowindex');
                var dataRecord = $("#gvContacts").jqxGrid('getrowdata', selectedrowindex);
                var dataAdapterPhone = LoadSourceContactPhone(dataRecord.ContactNum);
                $("#gvContactPhones").jqxGrid({ source: dataAdapterPhone });
            });
            $("#popupWindowEditContactPhoneDetailSchedule").on('open', function () {
                $("#cbContactPhoneEditScheduleOpen").jqxComboBox('focus');
            });
            $("#btSaveEditContactPhoneSchedule").click(function () {
                if (editrow >= 0) {
                    var closeDow = $("#cbContactPhoneEditScheduleClose").jqxComboBox('val');
                    var openDow = $("#cbContactPhoneEditScheduleOpen").jqxComboBox('val');
                    var closeHHMM = $("#tbContactPhoneEditScheduleCloseHHMM").val();
                    var openHHMM = $("#tbContactPhoneEditScheduleOpenHHMM").val();
                    var row = { CloseDow: closeDow, CloseTime: closeHHMM, OpenDate: null, OpenDow: openDow, OpenTime: openHHMM };
                    var rowID = $('#gvContactPhoneSchedule').jqxGrid('getrowid', editrow);
                    var commit = $('#gvContactPhoneSchedule').jqxGrid('updaterow', rowID, row);
                    $("#popupWindowEditContactPhoneDetailSchedule").jqxWindow('hide');
                    var rowindex = $('#gvContactPhones').jqxGrid('getselectedrowindex');
                    var dataRecordl = $("#gvContactPhones").jqxGrid('getrowdata', rowindex);
                    var dataAdapter = LoadSourceContactPhoneSchedule(dataRecordl.DayTimeNum);
                    $("#gvContactPhoneSchedule").jqxGrid({ source: dataAdapter });
                }
            });
        }

Thanks again, and have a good day!!
Jose

[jpereraParticipant]

Thank you very much, I’m sorry for my title, my English is not good enough then i use easy words, and in fact was my mistake but in that case don’t work for me.
Thanks for your help!!
Jose

[jpereraParticipant]

Thanks Dimitar, yes it is in the same parent folder…

[jpereraParticipant]

Thanks Dimitar, I will do and I post it here to you could analyze it…

[jpereraParticipant]

Another important thing, when I execute any action of update, delete or insert in any detailrow and I went to another detail row and try to update for example the method: var dataRecord = $(“#gvContactEmail”).jqxGrid(‘getrowdata’, editrow);
don’t get any data too!!,
I think it is a bug!!!

[jpereraParticipant]

Sorry, you could check for example in the variable initrowdetails the comment //Email I load all the information for the tab email and this is one of the insert with issue!!
Sorry for the large code but it is a big function

[Author]

Posts