jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

Author

Posts

May 14, 2013 at 1:55 pm in reply to: Change row background Change row background #21134

naatha

Member

Hi Dimitar,

Thanks for the code. But it didn’t work.

And I couldn’t understand for what the below variable declarations.

var redRow;
var greenRow;
var blueRow;

thanks

April 24, 2013 at 1:09 pm in reply to: Group Button + Theme Group Button + Theme #19906

naatha

Member

Hi Peter,

Changed the theme name, works like a charm…

thanks you very much for your help

April 24, 2013 at 9:42 am in reply to: Group Button + Theme Group Button + Theme #19890

naatha

Member

Hi Peter,

Thanks for you help, it works fine…

Now I am facing another problem.

I have created a new theme summer2 from the theme summer by only changing

.jqx-fill-state-pressed-summer2{border-color: #1faeff; background-color: #1faeff; color: #fff; }

line. (I want to use different color instead of orange color in the summer theme)

here is the summer2 theme i have crated:

.jqx-widget-summer2{border-color: #cacaca;}
.jqx-fill-state-normal-summer2, .jqx-widget-header-summer2{ border-color: #cacaca; background-color:#e4e5e5;}
.jqx-fill-state-hover-summer2, .jqx-scrollbar-thumb-state-normal-summer2, .jqx-scrollbar-thumb-state-normal-horizontal-summer2{ border-color:#222;  background-color:#888888; color: #fff;}
.jqx-fill-state-pressed-summer2{border-color: #1faeff; background-color: #1faeff; color: #fff; }
.jqx-fill-state-focus-summer2 { border-color: #555; }
.jqx-scrollbar-state-normal-summer2, .jqx-grid-bottomright-summer2, .jqx-panel-bottomright-summer2, .jqx-listbox-bottomright-summer2{background-color: #e4e5e5;}
.jqx-scrollbar-button-state-pressed, .jqx-scrollbar-button-state-hover{background-color: #e4e5e5; border-color: #222;}
/*icons*/
.jqx-menu-item-arrow-up-selected-summer2, .jqx-icon-arrow-up-hover-summer2, .jqx-icon-arrow-up-selected-summer2{background-image:url('images/icon-up-white.png');background-repeat:no-repeat;background-position:center;}
.jqx-menu-item-arrow-down-selected-summer2, .jqx-icon-arrow-down-hover-summer2, .jqx-icon-arrow-down-selected-summer2{background-image:url('images/icon-down-white.png');background-repeat:no-repeat;background-position:center;}
.jqx-menu-item-arrow-left-selected-summer2, .jqx-icon-arrow-left-hover-summer2, .jqx-icon-arrow-left-selected-summer2{background-image:url('images/icon-left-white.png');background-repeat:no-repeat;background-position:center;}
.jqx-menu-item-arrow-right-selected-summer2, .jqx-icon-arrow-right-hover-summer2, .jqx-icon-arrow-right-selected-summer2{background-image:url('images/icon-right-white.png');background-repeat:no-repeat;background-position:center;}
.jqx-tabs-close-button-hover-summer2, .jqx-tabs-close-button-selected-summer2{background-image:url(images/close_white.png);  background-repeat:no-repeat;  background-position:center;}
.jqx-scrollbar-summer2 .jqx-icon-arrow-up-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-up-hover-summer2{background-image:url('images/icon-up.png'); background-repeat:no-repeat; background-position:center;}
.jqx-scrollbar-summer2 .jqx-icon-arrow-down-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-down-hover-summer2{background-image:url('images/icon-down.png'); background-repeat:no-repeat; background-position:center;}
.jqx-scrollbar-summer2 .jqx-icon-arrow-left-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-left-hover-summer2{background-image:url('images/icon-left.png'); background-repeat:no-repeat; background-position:center;}
.jqx-scrollbar-summer2 .jqx-icon-arrow-right-selected-summer2, .jqx-scrollbar-summer2 .jqx-icon-arrow-right-hover-summer2{background-image:url('images/icon-right.png');background-repeat:no-repeat; background-position:center;}

Then i used these two themes in the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <link href="../../jqwidgets/styles/jqx.summer.css" rel="stylesheet" />
	 <link href="../../jqwidgets/styles/jqx.summer2.css" rel="stylesheet" />
    <link href="../../jqwidgets/styles/jqx.office.css" rel="stylesheet" />
    <link href="../../jqwidgets/styles/jqx.metro.css" rel="stylesheet" />
    <script type="text/javascript"  src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'office'
                // Create jqxButton widgets.
                $("#jqxWidget").jqxButtonGroup({ theme: theme, mode: 'radio' });
                $("#jqxButton1").jqxButton({ width: '150', height: '25' });
                $("#jqxButton1").click(function () {
                    var theme1 = $("#jqxWidget").jqxButtonGroup('theme');
                    $("#jqxWidget").jqxButtonGroup({ theme: 'summer' });
                    $.jqx.utilities.setTheme(theme1, 'summer', $("#jqxWidget"));
                });
                $("#jqxButton2").jqxButton({ width: '150', height: '25' });
                $("#jqxButton2").click(function () {
                    var theme2 = $("#jqxWidget").jqxButtonGroup('theme');
                    $("#jqxWidget").jqxButtonGroup({ theme: 'summer2' });
                    $.jqx.utilities.setTheme(theme2, 'summer2', $("#jqxWidget"));
                });
            });
        </script>
        <div id='jqxWidget'>
            <button style="padding:4px 16px;" id="Left">
                Left</button>
            <button style="padding:4px 16px;" id="Center">
                Center</button>
            <button style="padding:4px 16px;" id="Right">
                Right</button>
        </div>
        <div>
            <input type="button" value="Theme SUMMER" id='jqxButton1' />
        </div>
      
        <div>
            <input type="button" value="Theme SUMMER2" id='jqxButton2' />
        </div>
    
</body>
</html>

initial theme – office OK

click first button – theme summer OK

click second button – theme summer2 OK

then click first button – cant get the summer theme back.

What i am missing this time?

In the Theme Builder, can i start from an existing .css file and modify to get the custom one ?

Thanks

April 19, 2013 at 9:59 am in reply to: Changing theme Changing theme #19617

naatha

Member

Hi Mariya,

Thank you very much

April 11, 2013 at 10:53 am in reply to: Mouse Move Mouse Move #19056

naatha

Member

Hi Dimitar,

Is it possible to display multiple lines of text in tooltips?

Thanks

April 9, 2013 at 11:59 am in reply to: Date Filtering Column Date Filtering Column #18891

naatha

Member

Hi Peter,

thanks for the reply.

In my grid, i use filter row and i have two date columns. I have a button to save the grid state.

But i don’t want to save the state with date column filtered. So before save the state, i want to check is there any filter applied to any of the date column.

thanks

April 5, 2013 at 3:18 pm in reply to: Header Height & Showfilterrow Header Height & Showfilterrow #18672

naatha

Member

Thanks Mariya, it works fine.

April 5, 2013 at 9:31 am in reply to: Passing data to server using Ajax Passing data to server using Ajax #18648

naatha

Member

Thanks Peter

April 4, 2013 at 12:18 pm in reply to: Issues applying more than one filter Issues applying more than one filter #18598

naatha

Member

Thanks Dimitar and it works fine.

April 4, 2013 at 4:52 am in reply to: Issues applying more than one filter Issues applying more than one filter #18568

naatha

Member

Hi Dimitar,

Here is the code sample.

When i select the Filter1 – Date, i am getting the error with v 2.8 (worked fine with v 2.7)

My real problem with v 2.7 is:

Say i have 10 empty values in Ship Date column out of 100 rows.

When i select the Filter1-Date, the grid only displays 90 rows where the date is non-empty.

After that when i use the filterrow to search some one, it overwrite the existing filter.

How can i avoid this?

Thanks in advance.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />   
    <link rel="stylesheet" href="jqwidgets/styles/jqx.summer.css" type="text/css" />      
    <script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxgrid.columnsreorder.js"></script> 
    <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script>  
    <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="jqwidgets/globalization/jquery.global.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxradiobutton.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxgrid.storage.js"></script>    
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="Scripts/generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "summer";
            var ddlsource = [
                    "Select a filter ...",
                    "Filter1 - Date",
                    "Filter2 - First Name",
                    "Filter3 - Quantity",                    
		        ];
            $("#jqxWidget1").jqxDropDownList({ source: ddlsource, selectedIndex: 0, width: '200', height: '25', theme: theme, openDelay: 500, closeDelay: 750, animationType: 'none', autoDropDownHeight: true });
            $('#jqxWidget1').on('select', function (event) {
                var args = event.args;
                if (args) {
                    var index = args.index;
                    if (index == 0) {
                        addfilter('');
                    }
                    else if (index == 1) {
                        addfilter('date');
                        $("#jqxgrid").jqxGrid('sortby', 'date', 'desc');                        
                    }
                    else if (index == 2) {
                        addfilter('firstname');
                        $("#jqxgrid").jqxGrid('sortby', 'firstname', 'desc');
                    }
                    else if (index == 3) {
                        addfilter('quantity');
                        $("#jqxgrid").jqxGrid('sortby', 'quantity', 'desc');
                    }                    
                }
            });
            var addfilter = function (columnname) {
                $("#jqxgrid").jqxGrid('clearfilters');
                if (columnname == '') return;
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = '';
                var filtercondition = 'not_empty';
                var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                filtergroup.addfilter(filter_or_operator, filter1);
                $("#jqxgrid").jqxGrid('addfilter', columnname, filtergroup);
                $("#jqxgrid").jqxGrid('applyfilters');
            }
            
            // prepare the data
            var data = generatedata(100);
            var source =
            {
                localdata: data,
                datatype: "array",
                cache: false,
                datafields:
                [
                    { name: 'id', type: 'number' },
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date', format: 'dd/MM/yyyy' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '1000',
                source: dataAdapter,
                theme: theme,
                selectionmode: 'singlerow',
                sortable: true,
                showfilterrow: true,
                sorttogglestates: 2,
                filterable: true,
                altrows: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                autoshowfiltericon: true,
                showsortmenuitems: false,
                columnsresize: true,
                columnsreorder: false,
                pagesizeoptions: ['5', '10', '15', '20', '25'],
                enabletooltips: true,                      
                showstatusbar: true,
                columns: [
                  { text: 'ID', datafield: 'id', width: 50, cellsalign: 'center', align: 'center' },
                  { text: 'First Name', datafield: 'firstname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Last Name', datafield: 'lastname', width: 150, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Product', datafield: 'productname', width: 200, cellsalign: 'center', align: 'center', filtercondition: 'starts_with' },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 150, cellsalign: 'center', align: 'center', cellsformat: 'yyyy-MM-dd', filtertype: 'date' },
                  { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'center', align: 'center' },
                  { text: 'Price', datafield: 'price', width: 100, cellsalign: 'center', align: 'center', cellsformat: 'c2' }
                ]
            });            
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget1' style="float: left; margin-left: 75px; margin-right: 25px; margin-top: 30px; margin-bottom: 30px">                
    </div>    
    <div id='jqxWidget' style="margin-left: 75px; margin-bottom: 30px; margin-top: 30px">
        <div id="jqxgrid"></div>
    </div>       
</body>
</html>

April 3, 2013 at 12:20 pm in reply to: Issues applying more than one filter Issues applying more than one filter #18505

naatha

Member

Hi Dimitar,

I have just found out –

when i set showfilterrow: false, it works.

when i set showfilterrow: true, get the following error message:

Unhandled exception at line 7, column 14438 in http://localhost:64535/jqwidgets/jqxgrid.filter.js

0x800a138f – JavaScript runtime error: Unable to get property ‘filtervalue’ of undefined or null reference

thanks

April 3, 2013 at 12:05 pm in reply to: Issues applying more than one filter Issues applying more than one filter #18503

naatha

Member

Hi Dimitar,

I have updated to latest version.

I am using the following function filter function:

var addfilter = function (columnname) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);
if (columnname == ”) return;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = ”;
var filtercondition = ‘not_empty’;
var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
$(“#jqxgrid”).jqxGrid(‘addfilter’, columnname, filtergroup);
$(“#jqxgrid”).jqxGrid(‘applyfilters’);
}

when the column type is string, int works fine. But failed for date type.

Used to work fine with version 2.7.

Do i need to change anything?

Thanks

April 2, 2013 at 12:49 pm in reply to: Load grid state Load grid state #18413

naatha

Member

Hi Peter,

I use v 2.7

scenario:

In my project, i have the following options:

can pin/unpin column
can hide/show column
can save/load the grid state

I can save the state with some of the columns are pinned and some of the column are hidden.

But when i load the saved state, it displays all the pinned columns (can see the background color changed).

but when i move the horizontal scroll bar, the pinned columns also move.

I had the same problem when i pinned the column using

$(‘#jqxgrid’).jqxGrid(‘pincolumn’, columndatafield);

Later on i fixed this by adding

$(‘#jqxgrid’).jqxGrid(‘render’);

But when i add the same command after load the state –

$(“#jqxgrid”).jqxGrid(‘loadstate’, gridstate);

$(‘#jqxgrid’).jqxGrid(‘render’);

it does not show the pinned columns at all.

thanks for your help

March 28, 2013 at 11:05 am in reply to: Grid savestate Grid savestate #18200

naatha

Member

Hi Dimitar,

Thanks for your quick replay.

I want to allow the user to save their different grid setting by different name, like MySetting1, MySetting2….to a folder.

Later on the user can load the setting by selecting the names.

Is it possible?

thanks

March 19, 2013 at 7:51 am in reply to: Grid header Grid header #17399

naatha

Member

Hello,

It doesn’t work

if the column header is “Programming Language”, it appears like “Programming Lan…”

But i want it in two lines. Is it possible?

thanks

Author

Posts

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →