jqxwindow

[arunParticipant]

  $(document).ready(function () {
            $("#jqxdrpEqpFilter").jqxDropDownList({ width: 180, theme: 'energyblue' });
            $("#jqxLoader").jqxLoader({ width: 200, text: "Processing...", theme: 'energyblue' });
            $("#btnRefresh").jqxButton({ width: 60, theme: 'energyblue' });
            $("#btnBack").jqxButton({ width: 60, theme: 'energyblue' });

            $.ajax({
                url: "SetupCommonMakers.aspx/BindEquipmentDropDown",
                type: "POST",
                data: "",
                contentType: "application/json;",
                success: function (data) {
                    var eqpList = {
                        datatype: "json",
                        localdata: data.d,
                        datafields: [
                            { name: 'EqpName' },
                            { name: 'EQ_EquipmentID' }
                        ]
                    }
                    var eqpListDataAdapter = new $.jqx.dataAdapter(eqpList, { autoBind: true });
                    $("#jqxdrpEqpFilter").jqxDropDownList({
                        source: eqpListDataAdapter,
                        displayMember: 'EqpName',
                        valueMember: 'EQ_EquipmentID',
                        selectedIndex: 0,
                        height: '25px',
                        theme: 'energyblue'
                    });
                    $("#jqxdrpEqpFilter").jqxDropDownList('insertAt', { label: 'All Equipment', value: '-1' }, 0);
                }
            });
            var data = { eq_EquipmentID: -1 };
            $.ajax({
                url: "SetupCommonMakers.aspx/BindGrid",
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json;",
                success: function (data) {
                    var eqpGridsource = {
                        datatype: "json",
                        localdata: data.d,
                        datafields: [
                            { name: 'Enh_EqpMakersID' },
                            { name: 'Origin' },
                            { name: 'VesselID' },
                            { name: 'CompanyCode' },
                            { name: 'EqpName' },
                            { name: 'EQ_EquipmentID' },
                            { name: 'Ori_MakerName' },
                            { name: 'CommonMakerName' },
                            { name: 'AddlStrField1' },
                            { name: 'AddlIntField1' },
                            { name: 'zChkNo' },
                            { name: 'ToTrf' }
                        ]
                    }
                    var eqpGridDataAdapter = new $.jqx.dataAdapter(eqpGridsource, { autoBind: true });
                    $("#jqxGrid").jqxGrid({
                        source: eqpGridDataAdapter,
                        width: 630,
                        theme: 'energyblue',
                        height: 570,
                        columns: [
                            { text: 'EqpName', datafield: 'EqpName', width: 180 },
                            { text: 'Ori_MakerName', datafield: 'Ori_MakerName', width: 180 },
                            { text: 'CommonMakerName', datafield: 'CommonMakerName', width: 180 },
                             {
                                 text: 'Edit', datafield: 'Edit', theme: 'energyblue', width: 70, filterable: false, cellsrenderer: function () {
                                     return "<span style='margin: 4px; margin-left: 5px;cursor: pointer; float: left; position: relative;text-decoration: underline;color:blue;' >Edit</span>";
                                 }
                             },
                            { text: 'Origin', datafield: 'Origin', hidden: true },
                            { text: 'VesselID', datafield: 'VesselID', hidden: true },
                            { text: 'CompanyCode', datafield: 'CompanyCode', hidden: true },
                            { text: 'EQ_EquipmentID', datafield: 'EQ_EquipmentID', hidden: true },
                            { text: 'Enh_EqpMakersID', datafield: 'Enh_EqpMakersID', hidden: true },
                            { text: 'AddlStrField1', datafield: 'AddlStrField1', hidden: true },
                            { text: 'AddlIntField1', datafield: 'AddlIntField1', hidden: true },
                            { text: 'zChkNo', datafield: 'zChkNo', hidden: true },
                            { text: 'ToTrf', datafield: 'ToTrf', hidden: true }
                        ]

                    });
                }
            });
            $("#jqxdrpEqpFilter").bind('select', function (event) {
                var itemindex = event.args.index;
                var itemLabel = event.args.item.value;
                if (itemindex == 0) {
                    $("#jqxGrid").jqxGrid('clearfilters');
                }
                else {
                    var filtergroup = new $.jqx.filter();
                    var filter_or_operator = 1;
                    var filtervalue = itemLabel;
                    var filtercondition = 'contains';
                    var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                    // add the filters.
                    $("#jqxGrid").jqxGrid('addfilter', 'EQ_EquipmentID', filter);
                    // apply the filters.
                    $("#jqxGrid").jqxGrid('applyfilters');
                }
            });

            $("#jqxGrid").bind('cellclick', function (event) {
                var editrow = event.args.rowindex;
                if (event.args.datafield == 'Edit') {
                    var offset = $("#bodytag").offset();
                    $("#popupWindowforEdit").jqxWindow({ position: { x: parseInt(offset.left) + 241, y: parseInt(offset.top) + 220 } });
                    var dataRecord = $("#jqxGrid").jqxGrid('getrowdata', editrow);
                    $("#lbleqp").text(dataRecord.EqpName);
                    $("#lblOriMaker").text(dataRecord.Ori_MakerName);
                    $.ajax({
                        url: "SetupCommonMakers.aspx/BindCommonMakersDropDown",
                        type: "POST",
                        data: "",
                        contentType: "application/json;",
                        success: function (data) {
                            var eqplList = {
                                datatype: "json",
                                localdata: data.d,
                                datafields: [
                                    { name: 'CommonMakerName' }
                                ]
                            }
                            var eqpListDataAdapter = new $.jqx.dataAdapter(eqplList, { autoBind: true });
                            var eqpRecords = eqpListDataAdapter.records;
                            var GetVsllistintoArray = [];
                            for (var m = 0; m < eqpRecords.length; m++) {
                                GetVsllistintoArray.push(eqpRecords[m]['CommonMakerName']);
                            }
                            $("#txtdrpCommonMaker").jqxInput({
                                placeHolder: "Enter a Equipment",
                                height: 25,
                                width: 200,
                                minLength: 1,
                                source: GetVsllistintoArray,
                                theme: 'energyblue'

                            });
                        }
                    });
                    $("#btnUpdate").jqxButton({ theme: 'energyblue' });
                    $("#btncancel").jqxButton({ theme: 'energyblue' });
                    $("#popupWindowforEdit").jqxWindow('open');
                    $("#popupWindowforEdit").jqxWindow({ width: 530, height: 200, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.03, theme: 'energyblue' });
                }
            });
        });

when i click the “Edit column ” these jqxwindow will appear in my jqxwindow i have “textbox and grid and with some btn” when i click the enter button while the texbox is focus the jqxwindow gets closed and page get reloading.. In jqxwindow “Ismodel” is not working i can able to access the background data.. please help me with these.

Thanks
Arun

[Peter StoevKeymaster]

Hi arun,

Your issue is that you try to open something which is not created. Create the window and then call its methods.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[arunParticipant]

Thanks a lot
Peter Stoev

I find the issue.

[arunParticipant]

I have another problem in the above same example …In the jqxWindow there is “Inputbox” when enter some text and I click the “Enter” button the jqxWindow gets closed and it again reloads the page..Can you please help me with these..

Thanks a lot again..

[Peter StoevKeymaster]

Hi Arun,

The window is not closed when Enter is pressed by default so I suppose you have some logic which closes it. For reference, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm#demos/jqxwindow/defaultfunctionality.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts