I able to move columns as expect and resize them as expected, but on a data reload of the grid or when returning to the page, the Grid reset back to the original layout.
var table = new Tabulator("#gvRecords", {
ajaxURL: document.getElementById('urlAPI').value + "/Properties/Get/",
selectable: false,
ajaxParams: { "PropertyID": PropertyID, "Tab": Tab },
movableColumns: true,
persistenceMode: "cookie",
persistenceID: "Properties",
persistentLayout: true,
Any help is appreciated, not sure why I doing wrong, I was able to have this work a while back when testing out Tabulator, but now that I trying to implement, I can't see to get it going.
Related
I'm trying to replace the jqgrid default delete dialog popup with sweetalert jquery. When I use the code below for delete button, it works fine, but it still shows the default jqgrid delete confirmation method.
Any idea on how to correctly call sweetalert confirmation dialog?
Thanks
url: editUrl,
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
beforeShowForm: function ($form) {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function () {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
},
You can't do it this way. The approach that you use is get from stackoverflow demo which replace the text in the existing dialog. It does not replace the dialog as itself.
To do what you want I recommend you to create a custom navigator button and define your own ajax function to delete the row again with your dialog. Do not forget to use in this case delRowData to delete the row locally too.
I have requirement enable/disable the columns in the tabulator. Column is disabled using toggle method and and i am enabling back using show method.
table.getColumns().forEach(col => {
if(true){
{
col.toggle();
}else{
col.show();
}
});
I configured persistence mode as below
persistence: {
sort: true, //persist column sorting
filter: true, //persist filter sorting
columns: true, //persist columns
}
persistenceMode: "local",
persistentLayout:true,
Now problem is every time when i hide the column it works temporarily but when i reload or relogin everything comes. Expectation here is removed column should not appear. Rearranging the column order is retained after reload but not toggled one. Can some one advise how to persist the toggled column or is there any way to achieve this?
i have a combobox in EXT version 7 code. I have the editable config as true. My code is as below. This code is similar to what is present in the sencha docs. I have just changed the editable config to true . When we type anything in textfield it appends random characters and the search does not work as expected. Is it a bug with Ext 7? I am not able to figure out. Is someone else also facing something similar?
Ext.create({
fullscreen: true,
xtype: 'container',
padding: 50,
layout: 'vbox',
items: [{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
// For the dropdown list
itemTpl: '<span role="option" class="x-boundlist-item">{abbr} - {name}</span>',
// For the content of the text field
displayTpl: '{abbr} - {name}',
editable: true,
store: [
{ abbr: 'AL', name: 'Alabama' },
{ abbr: 'AK', name: 'Alaska' },
{ abbr: 'AZ', name: 'Arizona' }
]
}]
});```
I have the same problem with the combobox component in the modern toolkit. I tried the same setup in the Ext JS Version 6.5 and the same error occured.
The only workaround I found for now was to not use the displayTpl config.
Then it worked as intended.
EDIT:
I debugged a little bit into the ext-modern-all and found a solution.
If you want to be able to edit the input field as well as to use the displayTpl you have to set forceSelection: true. Otherwise it will treat your entry as new record and this bug will occur. (https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html)
I hope this helps.
IDK why the first answer was chosen as the correct answer, I hope my answer below can enlarge your knowledge minimally. When your problem was:
"When we type anything in textfield it appends random characters and the search does not work as expected."
I wanna try to understand that statement like this:
"You want to try to search the item on your store or options by typing random character at any position of any matched item"
At this case, you must add these properties to your combobox to achieve the goal:
anyMatch : true, // this is the key
caseSensitive : false, //by default this has been set automatically
minChars: 0,//by default this has been set automatically too
forceSelection: false // set to false to allow free input to textfield with no matched result and set to true to force the user to choose one of the last matched result rather than giving the opportunity to input free text
Before we conclude that the problem is a bug or not, we need to do the whole researches to get the exact conclusion. Don't forget to learn more on
https://docs.sencha.com/extjs/7.0.0/modern/Ext.field.ComboBox.html
Hope this help you.
I have implemented instantsearch.js with 1 search input and multiple indices, and multiple stats/pagination widgets. Everything seems to be working correctly except for the pagination widgets.
Here is a codepen https://codepen.io/flrrrhoffpauir/pen/EEpWre
collections.addWidget(
instantsearch.widgets.pagination({
container: '#collections-search-pagination',
showFirstLast: false,
labels: {
next: '>',
previous: '<',
},
cssClasses: {
root: 'search-pagination'
}
})
}
search.addWidget(
instantsearch.widgets.pagination({
container: '#stories-search-pagination',
showFirstLast: false,
labels: {
next: '>',
previous: '<',
},
cssClasses: {
root: 'search-pagination'
}
})
}
If you search for ‘martin’ and then click the Stories tab, you can see the results and that the pagination is working. If you now click the Collections tab, you can see that the pagination widget has the correct number of pages based on how many results were returned according to the stats widget, but then you click to go to page 2, you are just scrolled to the top of the page and it doesn’t load the page 2 data.
How can I get two or more pagination widgets on the page at once that both work correctly?
This is what I went off of to create the multiple index search, but they don't cover multiple pagination widgets: https://jsfiddle.net/j9nwpz34/49/
The searchFunction implementation should transfer all the information that needs to be synchronized. For example, in your case you have a pagination widget that you want to sync across instances of InstantSearch, so you want to transfer the pagination property on top of the query parameter.
var search = instantsearch(
{
/* appId: '',
apiKey: '',
indexName: 'movies',*/
searchFunction: function(helper) {
var query = movies.helper.state.query;
var page = movies.helper.state.page;
products.helper.setQuery(query);
products.helper.setPage(page)
products.helper.search();
helper.search();
},
searchParameters: {
hitsPerPage: 3
}
});
I've modified the JSFiddle to match your need. You can learn more about this state by going to the JS Helper documentation (internal state management of InstantSearch.js).
Update based on the jsFiddle provided:
The rest of the example still holds. However, one thing to note is that if you make a modification in the helper, it will reset the page. In the provided fiddle, you do such a change in the collections searchFunction. You will always set the query, which will always reset the page to 0. Hence the bug.
Here is a fixed fiddle
I am seeing two different behaviors and not sure why. Parts of the question are result of testing solutions implemented from other Q & A.
Summarized Grid create(I only included properties pertinent to question)...
grid setup1
url: jqDataUrl,
datatype: "json",
mtype: "GET",
//loadonce: true
// Default sorting
sortname: typeof prefs.sortCol !== "undefined" ? prefs.sortCol : "LastName",
sortorder: typeof prefs.sortCol !== "undefined" ? prefs.sortOrd : "asc",
sorttype: "text",
sortable: true,
postData: { filters: JSON.stringify({ "groupOp": "AND", "rules": [{ "field": "FirstName", "op": "cn", "data": "max" }]})},
search: true,
results 1 with search: true
When the above grid first loads, it loads with filtered results from postdata filters. If I go to edit url of a resulting row and come back, the record in grid not updated, even though the page/grid above is reloading from scratch from server.
grid setup 2
//same as above but
search: false
results 2 with search: false
When the grid loads this time, the filter not applied. If I go to edit url of a row and come back, the record is updated.
I've read a lot of posts about setting loadonce: true, and changing datatype from local to json and json to local for refreshing, but what I want is for the grid to always load, sort and filter from server data.
Although I understand that free jqGrid does things better, unfortunately, I cannot replace current jqGrid.js file.
My question is two part:
1) I do not see search as an option on wiki here so where is it defined.
2) Can and how do I get the postdata filters to apply on load AND my records updated on the grid after edit?
To answer my own questions:
1) search:true will send _search==true in the http request.
2) The postdata filters(aka where clause when querying data) was being sent in the http request, however, my controller was performing different operations based upon the search: value(aka _search) parsed from http request.
Inside my controller I was setting another property based upon the _search value, and the controller's property was then used to determine whether or not to refresh grid data or use session. It was using session and thus did not update my filtered results after edit.
Another issue I found, was that if I had search:true and manually reset postdata filters to {}, my controller had an error(non thrown w/o try/catch) when it tried to setup the linq with a null, and exited out of grid setup and displayed nothing.