jQWidgets Forums

Tagged: createfilterwidget, datetimeinput, grid, jqxdatetimeinput, jqxgrid

This topic contains 6 replies, has 2 voices, and was last updated by arunthatham 10 years, 6 months ago.

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

Author

Remove time selection in grid column filtering Posts

November 25, 2014 at 7:42 am Remove time selection in grid column filtering #63253

Participant

Hi All,

I have a Date filtering in one of the column in jqxgrid. Even when my cells format is ‘MM/dd/yyyy hh:mm:ss tt’ my date picker should not have a time selection in the picker. please help me in this regard

November 25, 2014 at 9:10 am Remove time selection in grid column filtering #63260

Nadezhda

Participant

Hello arunthatham,

Here is an example which shows how to display ‘month/Day/Year’ date format in filter row when select date in date picker. This is achieved by ‘createfilterwidget’ function.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.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/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                  {
                      text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                  },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                  {
                      text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'MM/dd/yyyy hh:mm:ss tt',
                      createfilterwidget: function (column, columnElement, widget) {
                          $(widget).jqxDateTimeInput({ formatString: 'MM/dd/yyyy' });
                      }
                  },
                  { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                ]
            });
            $('#clearfilteringbutton').jqxButton({ height: 25 });
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton" type="button" />
</body>
</html>

Best Regards,
Nadezhda

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

November 25, 2014 at 10:58 am Remove time selection in grid column filtering #63270

arunthatham

Participant

hi nadezha,

Still i’m able to select the time in the date time picker inside the column filter. I’m setting the cells format using the setcolumn property. Is it because of that?

November 25, 2014 at 11:19 am Remove time selection in grid column filtering #63274

arunthatham

Participant

may be you can help me in setting the createfilterwidget method to the jqxgrid after grid initialization

November 25, 2014 at 12:26 pm Remove time selection in grid column filtering #63281

arunthatham

Participant

i’m using the filter menu which contains less than greater than options and and/or operator. I dont need time selection in that date picker. Please advice

November 26, 2014 at 7:35 am Remove time selection in grid column filtering #63350

Nadezhda

Participant

Hi arunthatham,

If you are not using filter row, please, see this post http://www.jqwidgets.com/community/topic/createfilterwidget-in-column-level-filtering/ in other way you can use ‘createfilterwidget’.

Best Regards,
Nadezhda

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

December 5, 2014 at 8:18 am Remove time selection in grid column filtering #63818

arunthatham

Participant

thanks nadezhda it is working

Author

Posts

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

You must be logged in to reply to this topic.