jQWidgets Forums

jQuery UI Widgets Forums Grid Additional filter – how to set it up

This topic contains 4 replies, has 2 voices, and was last updated by  ivailo 9 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • kavvson
    Participant

    Hello I want to create an extra filter type

    For now I made a form ajax that would update the whole grid my js is

    $("#form_filter").submit(function() {
    $("#jqxgrid").jqxGrid('beginupdate');
    $("#jqxgrid").jqxGrid('updatebounddata', 'cells'); //refresh data
        var url = "serverfiltering_paging_and_sorting_data.php"; // the script where you handle the form input.
    
        $.ajax({
               type: "GET",
               url: url,
               data: $("#form_filter").serialize(), // serializes the form's elements.
               success: function(data)
               {
                   alert(data); // show response from the php script.
               }
             });
    
        return false; // avoid to execute the actual submit of the form.
    	$("#jqxgrid").jqxGrid('endupdate');
    });

    And a part of my filter

    <form class="form-horizontal" id="form_filter" role="form">
    <div class="row">
      <div class="col-sm-4">              
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="awizacje">Awizacje</label>
                            <div class="col-sm-10">
    						<div class="input-group">
    						  <div class="input-group-addon"><input type="checkbox" name="c_awizo"></div>
    						 
                                <?PHP $zlecenie->populate_dropdown_awizacje(); ?>
    					
    						</div>
                            </div>
    						
                        </div>
                        <div class="form-group"><!-- dropdown -->
                            <label class="control-label col-sm-2" for="priorytet">Priorytet</label>
                            <div class="col-sm-10">
                               <div class="input-group">
    						   <div class="input-group-addon"><input type="checkbox" name="c_priorytet"></div>
    						 
                                <?PHP $zlecenie->populate_dropdown_priorytet(); ?>
    					
    						   </div>
                            </div>
                        </div>
    					
    					 <div class="form-group">
                            <label class="control-label col-sm-2" for="adres">Adres</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="f_adres" placeholder="Podaj adres">
                            </div>
                        </div>
    		 <div class="form-group">
                            <label class="control-label col-sm-2" for="adres">Nr. Zlec</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="f_nr_zlec" placeholder="Numer zlecenia">
                            </div>
                        </div>
                   </div>

    The file generator serverfiltering_paging_and_sorting_data.php – is provided by you. How could I manage it to get my desired output that after the form submit I will get the data reloaded with my filters.\Thanks


    ivailo
    Participant

    Hi kavvson,

    Look at this demo.
    Here is presented how to add custom filters. You can add your filter condition this way and it will serialize the data and prevent changes of your php code.

    Add also this code to update the new data.
    url: ‘serverfiltering_paging_and_sorting_data.php’,
    filter: function()
    {
    // update the grid and send a request to the server.
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    },

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com


    kavvson
    Participant

    Would you be so kind and provide me with the example? I am not able to figure out how to make it


    kavvson
    Participant

    ^


    ivailo
    Participant

    Hi kavvson,

    Here is a demo, presented filtering from aditional input fields.

    To make it server filtered you have to organize your source like this.

    var source =
    		{
    
    			.....
                            /// add this code for sending parameters to the filtering script and update the grid when the new data is loaded
    			url: 'serverfiltering_paging_and_sorting_data.php',
    			filter: function()
    			{
    				// update the grid and send a request to the server.
    				$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
    			},
    			cache: false
    		};	

    This is the most that we can help you.
    You have to follow the same logic to set it according the needs of your project and rest of your code.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.