I'm facing an issue with jqgrid multiple search (php back-end). The search dialog does not show the "+" (add filter) unless I click on the Reset button...
This is the code:
jQuery("#poi_grid").jqGrid({
url:'php/retrieve_pois.php',
datatype: "json",
colNames:['Name', 'Region', 'Type','Website','PDF','Lat','Lon'],
colModel:[
{name:'name',index:'name', width:150},
{name:'region',index:'region', width:70},
{name:'type',index:'type', width:70},
{name:'website',index:'website', width:90,sortable:false,search:false},
{name:'pdf',index:'pdf', width:150,align:"right",sortable:false,search:false},
{name:'lat',index:'lat', width:60, sortable:false,search:false},
{name:'lon',index:'lon', width:60, sortable:false,search:false},
],
pager:'#pager',
rowNum:20,
rowList:[20,30,50],
sortname: 'name',
viewrecords: true,
sortorder: "asc"
});
//Pager
jQuery("#poi_grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:false,refresh:false}
)
//Custom buttons
.navButtonAdd('#pager',{
caption:"",
title:"Search",
buttonicon:"ui-icon search",
onClickButton: function(){
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn']},
{multipleSearch:true}
);
},
position:"last"
});
This is what I get when I open the search dialog (searching works fine but I have no possibilities to add another filter):
When I click on the rest button in the lower left corner of the dialog (even without performing a search before) I see the "correct" structure of the dialog... and multiple filters search works:
How to solve and obtain the complete dialog without clicking on reset?
Thank you in advance
You made an error in the call of searchGrid. Instead of
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn']},
{multipleSearch:true}
);
you should use
jQuery("#poi_grid").jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn'], multipleSearch:true}
);
The problem which you describe with "Reset" button is just a bug in single field searching of jqGrid (see more here). Because of wrong usage of searchGrid the multipleSearch:true option will be ignored and the Searching dialog will be used as single field searching.
See this one.
jqGridObj = $('#poi_grid');
jqGridObj.navButtonAdd('#' + jqGridObj[0].id + '_toppager_left',{
caption:"",
title:"Search",
buttonicon:"ui-icon-search",
onClickButton: function(){
jqGridObj.jqGrid('searchGrid',
{sopt:['eq','ne','cn','bw','bn'], multipleSearch:true, showQuery: true}
);
},
position:"last"
});
Related
I'm using UI-Grid 3.0 unstable on an angular page that is loading data via Restangular. So far most of it seems to be ok. I am using the selection module along with it and I'm having difficulty with pages that are loading the {enableFiltering: true} gridOptions in that most of the pages are not showing the input box on the grid.
I invoke the ui-grid on the html page using:
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection></div>
and my gridOptions in my controller looks like this.
$scope.gridOptions = {
enableFiltering: true,
data: 'data',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'date', displayName: 'Date', cellFilter: 'date:\'MM-dd-yyyy\''}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
I honestly can't figure out why its not appearing on the page.
I don't understand 100% the problem, but I could go around it by overriding some css. The height in css were 100% and I changed them to auto.
.ui-grid-header-cell{
height:auto;
}
.ui-grid-cell-contents {
height: auto;
}
I hope this would be helpful.
This an awful hack, but I always use the filters, so I just tracked the container that was the wrong height. I had lost hours to this trying to find the cause and using all the suggested fixes.
The container turned out to have the class "ui-grid-header-canvas", so I just set the height to 54px after the grid had sized itself.(after I set the data)
$(".ui-grid-header-canvas").css("height","54px")
Sorry, but it works and I have a deadline..
I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f
I have an input box similar to this http://jqueryui.com/demos/autocomplete/#multiple with the add button. I want to add all values split by comma added to a list on enter. I can't manage to do this because the keypress with enter seems to be conflict with select event of autocomplete. The problem is that the user can add only one item. I want the user to add multiple items then press enter key to add them to the list at the same time.
The enter key event should happen only when the suggestion list of autocomplete is closed.
You can use the open and close events of autocomplete to keep track whether or not the suggestion list is currently open (storing this information somewhere - in the example below, in the "selectVisible" data):
$( "#tags" )
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.ENTER && !$(this).data("selectVisible") ) {
// Your code
}
...
})
.autocomplete({
open: function() {
$(this).data("selectVisible", true);
},
close: function() {
$(this).data("selectVisible", false);
},
...
});
Working example at jsFiddle.
I've used the jQuery Multiselect widget with great success before and I believe it is more intuitive to the user that they can select multiple options.
Also it handles the Enter key appropriately out of the box.
http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
I have a table in the following form on a side-panel:
<table>
<tr title='term1'><td>one</td></tr>
<tr title='term2'><td>two</td></tr>
<tr title='term3'><td>three</td></tr>
<tr title='term4'><td>four</td></tr>
</table>
When someone clicks on a row of that column, the title of that row is passed as an argument to a function which displays the search results in the main-panel.
$("#content-display").on('click', 'tr', function (){
searchResults($(this).attr('title'));
});
The title of that row is the search term used in a get request
function searchResults(searchTerm){
$.ajax({
url: "search.php",
data: {term: searchTerm},
success: function(data){
$("#content-display").html(data);
},
dataType: 'html'
});
}
Whenever someone clicks on a row in the table, the new search results replace the old in the #content-display div.
I would like to improve this functionality with jquery ui tabs so that each click on a <tr> element would create a new tab with those search results inside of it instead of replacing the existing search results whenever a new search is done.
How can I write the callback function to the add event so that it would append the dynamically generated content of the search query (search.php?term=dynamicString)?
Here's some sample code of callback function to the add event that adds static content:
var $tabs = $("#tabs").tabs({
tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
add: function (event, ui){
var tab_content = "testing";
$(ui.panel).append(tab_content);
}
});
You can try this.
jQuery UI Tabs support adding new tabs dynamically (you already added code for this).
It provides "add" method to add new items using AJAX
So, if I do this
$( "#tabs").tabs("add", "filename.php", "Search Heading");
It will load content from "firlename.php" when we click on that tab.
Also, we can select any tab using JavaScript.
$('#tabs').tabs('select', tab_index);
It will select any tab with the specified index.
In your case, I assume these two will fit nicely.
Example code will be :
$( "#tabs").tabs("add", "search.php?term=" + search_var, search_var);
$('#tabs').tabs('select', last_index);
You can try this from Google Chrome developer tools' console by going to this URL
http://jqueryui.com/demos/tabs/manipulation.html
Just add the following code in the console.
$( "#tabs").tabs("add", "collapsible.html", "Collapsible"); $('#tabs').tabs('select', 1);
Please let me know if I am missing something.
Friends, please suggest better solutions if any.
Thanks.
I hope you have a good morning.
I'd like to use jqGrid in my Asp.Net app. So far, I've been producing an html table and converting it to a grid, but I'd like to try a better approach: loading the data via an AJAX call as it's supposed with the grid. I found out how to fetch data, but I'd like to have the "Edit" and "Delete" columns in addition to the data columns. How do I achieve it?
I'd rather not craft the html for the buttons in my controller. The ideal solution would be to send just the data, and have jqGrid add the required columns based on some client-side templates and the id values. I can't do it manually since I can't add columns to the existing grid. So, what do I do?
Update. I don't need just to achieve edit/delete functionality. What I need is to add a column with HTML based on some template and the "id" value, like [More details]
Sending pure data back from the server is the correct way if you use jqGrid.
To implement Row editing like you want look at the jqGrid Demo and choose on the left part "Row Editing" and then "Custom Edit". I personally prefer to use so named "inline editing" (choose on the same demo "Input types" under "Row Editing"). You implement switching in editing mode by double-click instead of selecting the row (see jqGrid - edit only certain rows for an editable column as an example). To delete the rows you can use additionally "Delete" button from the "form editing". To use it you should add Navigator with respect of navGrid method and choose with the corresponding parameters the buttons in the toolbar which you need. To see this on the demo choose "Live Data Manipulation" and then "Navigator".
UPDATED: In the jqGrid Demo, see "Row Editing" and then "Custom Edit" you can see how you can use setRowData inside of gridComplete or loadComplete handle to set ANY HTML code fragment. Why do you don't like the method? You can also use predefined showlink formatter to display a link or use custom formatter and custom unformatter to display any HTML contain in a jqGrid cell.
You probably figured it out by now, but for whatever is worth here is my answer using a custom formatter. The Action column is rendered using a custom formatter that shows a button that calls a simple javascript function.
$(document).ready(function () {
$("#all-errors-list").jqGrid({
url: '/Error/AllErrors/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Error','Actions'],
colModel: [
{ name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
{ name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
{ name: 'ActionId', width:400, formatter: actionFormatter}
],
pager: '#all-errors-pager',
rowNum: 10,
rowList: [10, 20, 50],
sortname: 'Id',
sortorder: 'asc',
viewrecords: true,
imgpath: '<%=Html.ImagePath()%>',
caption: 'Open Errors',
height: "100%",
width: "100%",
gridComplete: function () { $("button").button(); }
})
function actionFormatter(cellvalue, options, rowObject) {
return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
}
I hope that helps.