Here is code my jqgrid editing through form.
$("#DataEnergy").jqGrid('navGrid', '#pagergrid',
{}, //options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} },// add options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} }, // edit options
{editdata: { id_res: $('#resurs').val(), id_obj: readCookie('id_obj')} }, // del options
{} // search options
);
When editing, the data the editdata must be sent in the post request.
Why is not there why?
First of all you should use correct names of parameters: editData and delData (the case is very important in JavaScript).
The next problem is that the call of navGrid will be executed once, but you want probably to have the values of $('#resurs').val() and readCookie('id_obj') at the moment of editing/ading/deliting. To fix the problem you can use function (methods) inside of editData and delData:
var myData = {
id_res: function () { return $('#resurs').val(); },
id_obj: function () { return readCookie('id_obj'); }
};
$("#DataEnergy").jqGrid('navGrid', '#pagergrid',
{}, // navGrid options
{ editData: myData }, // add options
{ editData: myData }, // edit options
{ delData: myData }, // del options
);
For more information see some other old answers: this, this, this, this
Related
I'm working on a project that is using Vue.js and Vue Router as the frontend javascript framework that will need to use a select box of users many places throughout the app. I would like to use select2 for the select box. To try to make my code the cleanest I can, I've implemented a custom filter to format the data the way select2 will accept it, and then I've implemented a custom directive similar to the one found on the Vue.js website.
When the app starts up, it queries the api for the list of users and then stores the list for later use. I can then reference the users list throughout the rest of the application and from any route without querying the backend again. I can successfully retrieve the list of users, pass it through the user list filter to format it the way that select2 wants, and then create a select2 with the list of users set as the options.
But this works only if the route that has the select2 is not the first page to load with the app. For example, if I got to the Home page (without any select2 list of users) and then go to the Users page (with a select2), it works great. But if I go directly to the Users page, the select2 will not have any options. I imagine this is because as Vue is loading up, it sends a GET request back to the server for the list of users and before it gets a response back, it will continues with its async execution and creates the select2 without any options, but then once the list of users comes back from the server, Vue doesn't know how to update the select2 with the list of options.
Here is my question: How can I retrieve the options from an AJAX call (which should be made only once for the entire app, no matter how many times a user select box is shown) and then load them into the select2 even if the one goes directly to the page with the select2 on it?
Thank you in advance! If you notice anything else I should be doing, please tell me as I would like this code to use best practices.
Here is what I have so far:
Simplified app.js
var App = Vue.extend({
ready: function() {
this.fetchUsers();
},
data: function() {
return {
globals: {
users: {
data: []
},
}
};
},
methods: {
fetchUsers: function() {
this.$http.get('./api/v1/users/list', function(data, status, response) {
this.globals.users = data;
});
},
}
});
Sample response from API
{
"data": [
{
"id": 1,
"first_name": "John",
"last_name": "Smith",
"active": 1
},
{
"id": 2,
"first_name": "Emily",
"last_name": "Johnson",
"active": 1
}
]
}
User List Filter
Vue.filter('userList', function (users) {
if (users.length == 0) {
return [];
}
var userList = [
{
text : "Active Users",
children : [
// { id : 0, text : "Item One" }, // example
]
},
{
text : "Inactive Users",
children : []
}
];
$.each( users, function( key, user ) {
var option = { id : user.id, text : user.first_name + ' ' + user.last_name };
if (user.active == 1) {
userList[0].children.push(option);
}
else {
userList[1].children.push(option);
}
});
return userList;
});
Custom Select2 Directive (Similar to this)
Vue.directive('select', {
twoWay: true,
bind: function () {
},
update: function (value) {
var optionsData
// retrive the value of the options attribute
var optionsExpression = this.el.getAttribute('options')
if (optionsExpression) {
// if the value is present, evaluate the dynamic data
// using vm.$eval here so that it supports filters too
optionsData = this.vm.$eval(optionsExpression)
}
var self = this
var select2 = $(this.el)
.select2({
data: optionsData
})
.on('change', function () {
// sync the data to the vm on change.
// `self` is the directive instance
// `this` points to the <select> element
self.set(select2.val());
console.log('emitting "select2-change"');
self.vm.$emit('select2-change');
})
// sync vm data change to select2
$(this.el).val(value).trigger('change')
},
unbind: function () {
// don't forget to teardown listeners and stuff.
$(this.el).off().select2('destroy')
}
})
Sample Implementation of Select2 From Template
<select
multiple="multiple"
style="width: 100%"
v-select="criteria.user_ids"
options="globals.users.data | userList"
>
</select>
I may have found something that works alright, although I'm not sure it's the best way to go about it. Here is my updated code:
Implementation of Select2 From Template
<select
multiple="multiple"
style="width: 100%"
v-select="criteria.reporting_type_ids"
options="globals.types.data | typeList 'reporttoauthorities'"
class="select2-users"
>
</select>
Excerpt from app.js
fetchUsers: function() {
this.$http.get('./api/v1/users/list', function(data, status, response) {
this.globals.users = data;
this.$nextTick(function () {
var optionsData = this.$eval('globals.users.data | userList');
console.log('optionsData', optionsData);
$('.select2-users').select2({
data: optionsData
});
});
});
},
This way works for me, but it still kinda feels hackish. If anybody has any other advice on how to do this, I would greatly appreciate it!
Thanks but I'm working on company legacy project, due to low version of select2, I encountered this issue. And I am not sure about the v-select syntax is from vue standard or not(maybe from the vue-select libaray?). So here's my implementation based on yours. Using input tag instead of select tag, and v-model for v-select. It works like a charm, thanks again #bakerstreetsystems
<input type="text"
multiple="multiple"
style="width: 300px"
v-model="supplier_id"
options="suppliers"
id="select2-suppliers"
>
</input>
<script>
$('#app').ready(function() {
var app = new Vue({
el: "#app",
data: {
supplier_id: '<%= #supplier_id %>', // We are using server rendering(ruby on rails)
suppliers: [],
},
ready: function() {
this.fetchSuppliers();
},
methods: {
fetchSuppliers: function() {
var self = this;
$.ajax({
url: '/admin_sales/suppliers',
method: 'GET',
success: function(res) {
self.suppliers = res.data;
self.$nextTick(function () {
var optionsData = self.suppliers;
$('#select2-suppliers').select2({
placeholder: "Select a supplier",
allowClear: true,
data: optionsData,
});
});
}
});
},
},
});
})
</script>
I have handsontable and I don't know what event that I need to validate a specific cell if its empty or not.
technically I have specific cell to be a required cell, if the cell is empty then it will call a callback or return false after executing a post.
I have used beforeChange() function before and I think it is not appropriate event for the issue.
Here's an image link.
What you want to do is use the validator option in the columns setting.
Here is some more information on validators and an example but below is the code that would go with it.
emptyValidator = function(value, callback) {
if (isEmpty(value)) { // isEmpty is a function that determines emptiness, you should define it
callback(false);
} else {
callback(true);
}
}
Then in the columns setting, supply each column and if that column should have all its cells be non-empty, supply this as the validator, just like they show in the handonstable example page.
Here is my work around: http://jsfiddle.net/Yulinwu/s6p39uje/
Firstly, you can add a custom property named required to the column settings.
hot = new Handsontable(container, {
...
columns: [{
...
}, {
type: 'numeric',
format: '$ 0,0.00',
required: true, // Add a new setting named required
validator: Handsontable.NumericValidator
}]
});
Then, you can add a listener to beforeValidate event using addHook, which returns false if a cell is required but empty.
hot.addHook('beforeValidate', function(value, row, prop, source) {
var ifRequired = this.getCellMeta(row, prop).required;
console.log(ifRequired);
if (ifRequired && value === '') {
return false
} else {
return 0
}
});
Use allowEmpty:false for that column like:-
{
data: 'EmpNo',
type: 'numeric',
allowInvalid: false,
allowEmpty:false
}
And in the setting of handsontable use afterValidate as below-
afterValidate: function (isValid, value, row, prop, source) {
if (!isValid) {
$("#submitBtn").prop("disabled", true);
alert('Only non empty numbers are allowed');
}
else {
$("#submitBtn").prop("disabled", false);
}
}
I have a PHP-script to handle the AJAX-Requests of many different jqGrid's.
I generate the "ORDER BY" statement with the 'sidx' and 'sord' parameters and the "LIMIT" statement with the 'page' and 'rows' parameters.
Similar to the PHP-example here.
The problem is, that in the PHP-script I can not determine if the loadonce-parameter of the current jqGrid is set or not.
But only if it is not set, I have to filter the returned data (LIMIT by page and rows).
How can I force jqGrid to send an additional parameter?
I dont want to change all my Grids. Is there a global way of doing it?
------ EDIT ------
With the help from this answers (here and here) i got this now.
$.extend($.jgrid.defaults, {
postData: {
loadingType: function() {
var isLoadonce = $("#list1").jqGrid('getGridParam', 'loadonce');
console.log('isLoadonce: ' + isLoadonce);
return isLoadonce ? 'loadAll' : 'loadChunk';
},
},
});
This works, if the Grid has the ID "list1". How can I reference the current Grid without ID?
------ EDIT 2 ------
This seems to work. It looks to me a bit like a hack. Is there a better way?
$.extend($.jgrid.defaults, {
serializeGridData: function(postData) {
var isLoadonce = $(this).jqGrid('getGridParam', 'loadonce');
var newPostData = $.extend(postData, {
loadingType: isLoadonce ? 'loadAll' : 'loadChunk'
});
return $.param(newPostData);
},
});
To pass in an extra parameter you can add:
postData: { ExtraDataName: ExtraDataValue },
then whenever jqGrid goes to get data it will pass that name pair to your controller.
With serializeGridData, jqGrid provides an event to modify the data sent with the Request. The event is called in the context of the current Grid, so we can access the current Grid with this.
By exdending $.jgrid.defaults we can make all Grids sending their loadonce parameter as additional requestparameter without changing any Grid.
$.extend($.jgrid.defaults, {
serializeGridData: function(postData) {
var isLoadonce = $(this).jqGrid('getGridParam', 'loadonce');
var newPostData = $.extend(postData, {
loadingType: isLoadonce ? 'loadAll' : 'loadChunk'
});
return $.param(newPostData);
},
});
I am using inlineNav as follows:
var inlineparams = {
addParams: {useFormatter:false},
editParams: {extraparam: {
"action": "ajaxgrid",
"subaction": "jqedit",
"tableid": "sysbuglist",
"sessionid":"fd7c74d8-d3cb-102f-bd56-0015171f0bcc"
}},
add:true,
edit:true,
save:true,
cancel:true,
aftersavefunc:reloadGrid};
$("#navgrid").jqGrid("inlineNav","#navgrid_bottompager", inlineparams);
So, I am using the add, edit, save, cancel buttons on the bottompager.
Question: How do I get control after a save to the server? Saving to the server is working well, I just want to refresh the grid after a save.
From the source code for inline editing, you can see that there is no explicit aftersavefunc for inlineNav, either in the options or in the save button's callback:
if(o.save) {
$($t).jqGrid('navButtonAdd', elem,{
...
onClickButton : function () {
var sr = $t.p.savedRow[0].id;
if(sr) {
...
if( $($t).jqGrid('saveRow', sr, o.editParams) ) {
$($t).jqGrid('showAddEditButtons');
}
}
}
However, you can pass aftersavefunc as part of editParams:
var inlineparams = {
addParams: {useFormatter:false},
editParams: {extraparam: {
"action": "ajaxgrid",
"subaction": "jqedit",
"tableid": "sysbuglist",
"sessionid":"fd7c74d8-d3cb-102f-bd56-0015171f0bcc"},
aftersavefunc: reloadGrid},
...
That should do it. Just be aware that aftersavefunc will be invoked on edit as well as save, since both operations support this callback.
function bind_single_select() {
if (!$("input#single").length > 0) {
$("span.single_select").prepend("<input type='checkbox' name='single' id='single' checked='checked' style='vertical-align:middle' />");
}
$("table#gridTable").find("tr").click(function () {
if ($("input#single").attr("checked")) {
$(".trSelected").removeClass("trSelected");
$(this).addClass("trSelected");
}
});
}
I found this in Flexigrid but in JQGrid How can I do it.
Another Question :
.navButtonAdd('#pager',
{ caption: "Add",
buttonimg: "/Areas/Pages/Content/Images/add.png",
onClickButton: function () {
PopupCenter('<%= Url.Action("CreatePublisher","Publisher") %>',
'CreatePublisher', '500', '300');
}, position: "last"
})
the buttonimg is not work even I use
ui-icon-plus
Thanks in Advance.
The second part of your question is very easy to answer. The parameter buttonimg is no more supported in the navButtonAdd function. You should use buttonicon instead. An example you can find here. In general as a value of buttonicon you can use any from the jQuery UI Framework Icons.
To toggle multipleSearch parameter you can just define search parameters of navGrid separately and toggle the value of the multipleSearch property. To make all more easy I suggest to use an additional parameter recreateFilter:true.
var grid = jQuery('#list');
var pSearch = { multipleSearch:false, recreateFilter:true };
grid.jqGrid({
// all jqGrid parameters
}).jqGrid ('navGrid', '#pager', {edit:false, add:false, del:false, refresh:true, view:false},
{},{},{},pSearch));
$("#pager_left table.navtable tbody tr").append ( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="navMultiSearch"/>Multi-Search</div></td>');
$(".myMultiSearch").change(function() {
if ($(this).is(':checked')) {
pSearch.multipleSearch = true;
$(".myMultiSearch").attr("checked","checked");
}
else {
pSearch.multipleSearch = false;
$(".myMultiSearch").removeAttr("checked");
}
});
On the small demo I inserted both internal and external checkboxes to the navigation bar and a custom button additionally: