jQWidgets Forums

Tagged: DropDownList, filter, grid, jqxDropDownList, jqxgrid

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 12 years, 3 months ago.

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

Author

Filter Grid from outer DropDownList Posts

February 12, 2013 at 11:48 pm Filter Grid from outer DropDownList #15105

taraman

Member

Hello,

I have two controls in the page:
1- DropDownListhas physicians
2- grid has surgeries

I need to filter the grid when change the dropDownList Selection

$(“#ddlPhysicians”).bind(‘select’, function (event) {
if (event.args) {
var item = event.args.item;
if (item) {
// need to add method here to filter the grid according to the value of selected item
}
}
});

This is the source used for grid:
var source = {
datatype: “json”,
type: “GET”,
url: url,
async: false,
datafields: [
{ name: “SurgeryId” },
{ name: “SurgeryDate”, type: “date” },
{ name: “PhysicianName” },
{ name: “PatientShortName” },
],
beforeprocessing: function (data) {
data = data.d ;
var returnData = {
totalrecords: data.count,
records: data.records
};
return returnData;
},
formatdata: function (data) {
return {
pagenum: data.pagenum,
pagesize: data.pagesize,
physicianId: $(“#ddlPhysicians”).jqxDropDownList(‘getSelectedItem’).value
};
}
};

Note: I am passing the physicianId to service method, which it query the database and return surgeries

February 13, 2013 at 9:00 am Filter Grid from outer DropDownList #15122

Dimitar

Participant

Hello taraman,

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Move the
        mouse cursor over a column header and click the dropdown button to open the filtering
        menu. </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = generatedata(500);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: adapter,
                theme: theme,
                filterable: true,
                sortable: true,
                autoshowfiltericon: true,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'Order Date', datafield: 'date', width: 160, cellsformat: 'dd-MMMM-yyyy' },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#events').jqxPanel({ width: 300, height: 80, theme: theme });
            $("#jqxgrid").bind("filter", function (event) {
                $("#events").jqxPanel('clearcontent');
                var filterinfo = $("#jqxgrid").jqxGrid('getfilterinformation');
                var eventData = "Triggered 'filter' event";
                for (i = 0; i < filterinfo.length; i++) {
                    var eventData = "Filter Column: " + filterinfo[i].filtercolumntext;
                    $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
                }
            });
            $('#clearfilteringbutton').jqxButton({ height: 25, theme: theme });
            $('#filterbackground').jqxCheckBox({ checked: true, height: 25, theme: theme });
            $('#filtericons').jqxCheckBox({ checked: false, height: 25, theme: theme });
            // clear the filtering.
            $('#clearfilteringbutton').click(function () {
                $("#jqxgrid").jqxGrid('clearfilters');
            });
            // show/hide filter background
            $('#filterbackground').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ showfiltercolumnbackground: event.args.checked });
            });
            // show/hide filter icons
            $('#filtericons').bind('change', function (event) {
                $("#jqxgrid").jqxGrid({ autoshowfiltericon: !event.args.checked });
            });
            var sourceDDL = [
                    "Andrew",
                    "Beate",
                    "Cheryl"
		        ];
            // Create a jqxDropDownList
            $("#jqxdropdownlist").jqxDropDownList({ source: sourceDDL, width: '200px', height: '25px', dropDownHeight: '75px' });
            $("#jqxdropdownlist").bind('select', function (event) {
                var itemLabel = event.args.item.label;
                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', 'firstname', filter);
                // apply the filters.
                $("#jqxgrid").jqxGrid('applyfilters');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div id="eventslog" style="margin-top: 30px;">
            <div style="width: 200px; float: left; margin-right: 10px;">
                <input value="Remove Filter" id="clearfilteringbutton" type="button" />
                <div style="margin-top: 10px;" id='filterbackground'>
                    Filter Background</div>
                <div style="margin-top: 10px;" id='filtericons'>
                    Show All Filter Icons</div>
            </div>
            <div style="float: left;">
                Event Log:
                <div style="border: none;" id="events">
                </div>
            </div>
        </div>
    </div>
    <div id='jqxdropdownlist' style="margin-left: 10px; float: left;">
    </div>
</body>
</html>

We hope it is helpful to you.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.