jqGrid Search UI Not Refreshing/Redrawing - javascript

I'm using jqGrid to get back some data. The grid get's rendered with data and when it's loaded I add a filter and reload the grid. This basically removes certain files from the view upon first page load.
I have a checkbox on the page which toggles between two filters (including this data & excluding this data), each time it applies the filter then reloads the grid.
If I click the search button, the search popup displays my filter that I've just added.
If I then close it, change the filter through clicking this checkbox (it changes the data), then open the search popup again, my newly applied and obviously working filter is not displayed, only the previous filter!? No matter how many times I toggle the filter with the check box (which every time works to change the data), the filter in the popup does not change to what the current filter really is. Any ideas please?

I've found the solution...
"use strict";
/*global xmlJsonClass, jQuery, $ */
var rp_ge = {};
$.jgrid.extend({
searchGrid : function (p) {
p = $.extend({
recreateFilter: false,
drag: true,
sField:'searchField',
sValue:'searchString',
sOper: 'searchOper',
sFilter: 'filters',
recreateFilter was being set to false from within the library JS file on every 'reload' of the grid. So every time I added a new filter this was being reset to NOT recreate the filters in the popup.
Setting this to true solved the problem.

Related

Content added to DevExtreme dxPopup not working unless Popup has been shown already

I am using a DevExtreme Popup that will show whenever a user selects an option from a SelectBox. The Popup will identify placeholder values inside the selected value and present the user options to replace them with.
When the SelectBox value changes, I look for placeholders and append a dxSelectBox for each placeholder to a div valuesList inside the popup.
var matches = selectedValue.match(templateRegex);
if (matches.length > 0) {
matches.forEach(function (m) {
var newDiv = $("<div/>");
newDiv.dxSelectBox();
newDiv.appendTo("#valuesList");
});
$("#myPopup").dxPopup("instance").show();
}
The problem is the first time this runs, it doesn't append anything to the Popup content. Using the debugger I confirm that the code does run, but nothing gets added. The popup shows with no content. However, if I select the value again in the SelectBox, it runs and the popup gets new content appended to it as it should, as well as all subsequent changes. It's only the first time that doesn't work.
I confirmed this by adding this to the JavaScript:
$(document).ready(function () {
$("#myValuePopup").dxPopup("instance").show();
$("#myValuePopup").dxPopup("instance").hide();
});
With that added, content is correctly appending the first time I select a new value from the SelectBox, confirming that it only works if the Popup has already been shown. This seems to be a sloppy solution though, and it requires adding a bunch of checks to the onHidden event handler for the Popup since some variables it uses aren't initialized yet, so I'd rather not have to resort to it.
Is there another way to pre-initialize the dxPopup? I couldn't find anything going through the documentation. And the Popup's _initialized property is true even before being shown the first time.
Update:
The dxPopup is created using Razor inside my View:
#(Html.DevExtreme().Popup()
.ID("myPopup")
.OnHidden("myPopupClosed")
.ContentTemplate(
#<text>
<div id="valuesList">
</div>
</text>
)
)

Javascript/jQuery Dropdown menu update

I have two dropdown menus - when I select an option on the first I want the other to change to its corresponding option based on its matching value. I am currently using this JS code:
document.getElementById("select_1").onchange = function() {
console.log("select_1", this.options[this.selectedIndex]);
document.getElementById("select_75").value = this.options[this.selectedIndex].getAttribute("value");
};
However the end result does not change/update correctly unless I change manually the second (select_75) dropdown to another option and then back to the changed option (set by select_1).
Are there any changes I could make to the code or other setup entirely to try out in order make this happen? Open to using jQuery as well.

How to preserve filters on Kendo Grid refresh

The following command will refresh the grid if I change a property
$('#GridName').data('kendoGrid').refresh()
However I notice that my filtering is ignored. For example I have a status column that changes when the user clicks a button and the template image reload after using the refresh method. However, the current filter status is ignored so the item updates in the grid when it should disappear because of the filter. Is there a way to preserve the filtered items?
Solution:
var filters = $("#GridName").data("kendoGrid").dataSource.filter();
$("#GridName").data("kendoGrid").refresh();
$("#GridName").data("kendoGrid").dataSource.filter(filters);

Angularjs ng-grid change page but lose selectedItems

I am new to AngularJS and I started integrating with ng-grid. According to official site http://angular-ui.github.io/ng-grid/, there's a property "selectedItems" that you can set your list of selected items in current scope
selectedItems:$scope.mySelectedItems
I have no problem of getting selected list items in the current $scope.gridOptions. HOWEVER, I have no idea what to do when I change the page(FOr example using self-defined pagination) or when I need to reload the current gridOptions (for example user launched a new search creteria). Where I should re-initialize selectedItems?
I thought of 2 solutions but they wont work:
1.make a whole list of server data and do pagination on client side. It will remain selectedItems and show them correctly on the screen when I change pages. But when user launch a new search, I re-init selectedItems = [] in search Method. Unfortunately, when I select again in grid, selectedItems will always remains empty.
2.It's much pratical let server do pagination. In this case, how can I remember selectedItems and show them correctly on screen? Server-side paging exemple of Ng-grid has a bug when you change pages: it keeps selectedItems in $scope but lose them on UI. In this case, where I can init selectedItems?
got the solution:
https://github.com/angular-ui/ng-grid/pull/209
bascially specify the primaryKey column of gridOptions
$scope.gridOptions.primaryKey = 'FileRowNo';
and everything would work

Multy-filter page with transitions - Isotope & Quicksand JS problems

(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.

Categories