How to set allowSorting false for particular column after IgGrid getting loaded? - ignite-ui

I have globalized this below Grid initialization as a common function. I have used sorting as default for all columns. I need to set "allowSorting" for particular column after IgGrid getting loaded. I have added a sample code here. I am unable to set "allowSorting" in this variable "colSettings".
$("#gridSorting").igGrid({
primaryKey: "ProductID",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number" },
{ headerText: "Product Name", key: "Name", dataType: "string", template: '<a id="name${ProductID}">${Name}</a>' },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", template: '<input type="text" class="txtBox" id="${ProductID}" value="" />' },
{ headerText: "Product Key", key: "ProductKey", dataType: "string", template: '<input type="text" class="txtBox1" maxlength="4" id="${ProductKey}" value="${ProductKey}" />' }
],
features: [
{
name: "RowSelectors",
enableCheckBoxes: true,
enableRowNumbering: false
},
{
name: "Selection",
mode: 'row',
multipleSelection: true
},
{
name: "Sorting",
type: "local"
}
],
width: "500px",
dataSource: products
});
var colSettings = [
{
columnKey: 'ProductID',
allowSorting: true
},
{
columnKey: 'Name',
allowSorting: true
},
{
columnKey: 'ProductNumber',
allowSorting: false
}
];
$("#gridSorting").igGridSorting("option", "columnSettings", colSettings);
Please advise me how to set "allowSorting: false" for particular column in this example.

Related

Tabulator 4.5 get data from api but do not render the table with data

In a modal context , Tabulator get data from api but do not render the table.
If I put a sleep of 500 milliseconds before return json from the api, the data show up.
<div class="form-group">
<div id="tablePersonnages"></div>
</div>
<script type="text/javascript">
var table = new Tabulator("#tablePersonnages",({
pagination: "local",
paginationSize: 10,
history: true,
ajaxURL: '#Url.Action("ObtenirPersonnages", "FicheHistorique")',
ajaxParams: { idFiche: '#Model' },
ajaxConfig: "POST",
layout: "fitColumns",
locale: true,
langs: {
"fr-fr": {
"ajax": {
"loading": "Chargement", //ajax loader text
"error": "Erreur" //ajax error text
},
"pagination": {
"first": "Début", //text for the first page button
"first_title": "Première page", //tooltip text for the first page button
"last": "Fin",
"last_title": "Dernière page",
"prev": "Préc",
"prev_title": "Page précédente",
"next": "Suiv",
"next_title": "Page suivante"
}
}
},
columns: [ //Define Table Columns
{ title: "Id", field: "Id", visible: false },
{ title: "Nom", field: "Nom", headerFilter: "input", headerFilterPlaceholder: " " },
{ title: "Prenom", field: "Prenom", headerFilter: "input", headerFilterPlaceholder: " " },
{ title: "Fonction", field: "Fonction", headerFilter: "input", headerFilterPlaceholder: " " },
{ title: "Naissance", field: "Naissance" },
{ title: "Deces", field: "Deces" },
{ formatter: link, width: 10 }
]
}));
On Modal Open Event
Call table.redraw(true) If still doesn't work put the redraw in a setTimeout()

Tabulator: How to get a column of a column group?

If you take a look at the first example at http://tabulator.info/examples/4.4#column-groups, how do I get a reference to the column "Personal Info", so I can toggle/show/hide it?
I tried it with var col = table.getColumn("Personal Info") but that did not work (as expected).
I would prefer a vanilla JS solution which uses the built-in tabulator API. But jQuery is also ok as an alternative.
Here is a jsfiddle https://jsfiddle.net/jmartsch/g7xewtf6/17/
I found out, that I can use console.log(table.getColumn('gender').getParentColumn());
This does work, but it is not very elegant. It would be nice to have a solution that directly selects the column group header.
const tabledatasimple=[{id:1,name:"Oli Bob",location:"United Kingdom",gender:"male",rating:1,col:"red",dob:"14/04/1984"},{id:2,name:"Mary May",location:"Germany",gender:"female",rating:2,col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",location:"France",gender:"female",rating:0,col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",location:"USA",gender:"male",rating:1,col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",location:"Canada",gender:"female",rating:5,col:"yellow",dob:"31/01/1999"},{id:6,name:"Frank Harbours",location:"Russia",gender:"male",rating:4,col:"red",dob:"12/05/1966"},{id:7,name:"Jamie Newhart",location:"India",gender:"male",rating:3,col:"green",dob:"14/05/1985"},{id:8,name:"Gemma Jane",location:"China",gender:"female",rating:0,col:"red",dob:"22/05/1982"},{id:9,name:"Emily Sykes",location:"South Korea",gender:"female",rating:1,col:"maroon",dob:"11/11/1970"},{id:10,name:"James Newman",location:"Japan",gender:"male",rating:5,col:"red",dob:"22/03/1998"}];
const table = new Tabulator("#example-table", {
height: "311px",
data: tabledatasimple,
columnVertAlign: "bottom", //align header contents to bottom of cell
columns: [{
title: "Name",
field: "name",
width: 160
},
{ //create column group
title: "Work Info",
columns: [{
title: "Progress",
field: "progress",
align: "right",
sorter: "number",
width: 100
},
{
title: "Rating",
field: "rating",
align: "center",
width: 80
},
{
title: "Driver",
field: "car",
align: "center",
width: 80
},
],
},
{ //create column group
title: "Personal Info",
field: "pInfo",
columns: [{
title: "Gender",
field: "gender",
width: 90
},
{
title: "Favourite Color",
field: "col",
width: 140
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date",
width: 130
},
],
},
],
});
const columns = table.getColumns(true);
doSomething = (colName) => {
columns.forEach((col) => {
if (col.getDefinition().field === colName) {
col.hide();
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.4.1/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.4.3/css/tabulator_modern.css" rel="stylesheet" />
<div id="example-table"></div>
<button id="hidePInfo" onclick="doSomething('pInfo')">Hide Personal Info</button>

Can't call a nested key in Mongoose and Express (undefined)

I have a Mongoose Schema that display results. I can display the result array but not what's inside.
{
"_id": {
"$oid": "5cfa15e123d2f414da760635"
},
"objectID": 21078,
"cars_getroute": "volvo-123-gt-coach-1967-1968",
"gm_url": "https://www.url.com",
"results": [
{
"marque": "Volvo",
"model": "Amazon 123 GT",
"model_year": "1967",
"price_str": "£4 982",
"price_int": 4982,
"price_currency": "£",
"sold": true,
"auction_house": "Anglia Car Auctions",
"auction_country": "Grande-Bretagne",
"auction_date": "25 août 2018",
"auction_datetime": "2018-08-25",
"auction_url": null,
"image_urls": null,
"price_int_eu": 5523
},
{
"marque": "Volvo",
"model": "Amazon 123 GT",
"model_year": "1968",
"price_str": "CHF9 000",
"price_int": 9000,
"price_currency": "CHF",
"sold": true,
"auction_house": "Oldtimer Galerie",
"auction_country": "Suisse",
"auction_date": "29 avril 2017",
"auction_datetime": "2017-04-29",
"auction_url": null,
"image_urls": "https://www.url.com/img/auctions/car/thumb/17-4-11-f8a85a227775570cdeb80ba0a437cc40.jpg",
"price_int_eu": 8309
},
{
"marque": "Volvo",
"model": "Amazon 123 GT",
"model_year": "1968",
"price_str": "Estimate £6 000 - £7 000 (unsold)",
"price_int": null,
"price_currency": null,
"sold": false,
"auction_house": "Herefordshire Vintage Auctions",
"auction_country": "Grande-Bretagne",
"auction_date": "20 octobre 2016",
"auction_datetime": "2016-10-20",
"auction_url": "http://www.url.com/Motor_details.php?pid=188&motor=188_01.jpg",
"image_urls": "https://www.url.com/img/auctions/car/2016-10-4a5a09eeb5c685e053e421c45656dcf7.jpg",
"price_int_eu": null
}
]
}
And the model:
const DemocarauctionSchema = new Schema({
objectID: {
type: Number
},
cars_getroute: {
type: String
},
gm_url: {
type: String
},
"results": { type: [{
marque: {
type: String
},
model: {
type: String
},
model_year: {
type: String
},
price_str: {
type: String
},
prince_int: {
type: Number
},
price_currency: {
type: String
},
sold: {
type: Boolean
},
auction_house: {
type: String
},
auction_country: {
type: String
},
auction_date: {
type: String
},
auction_datetime: {
type: String
},
auction_url: {
type: String
},
image_urls: {
type: String
},
price_int_eu: {
type: Number
},
}]}
},
{
collection: 'democarficheauction'
});
And when I call console.log(democarauctions.results.marque), nothing appears.
Is it a problem with my Schema ? Because There are multiple "marque" keys in the "results" array ?
It's working well with gm_url, objectId and cars_getroute.
EDIT: here is my Express route:
router.get('/demo/:cars_getroute', (req, res, next) => {
Promise.all([Democar.findOne({ cars_getroute: req.params.cars_getroute }), Democarauction.findOne({ cars_getroute: req.params.cars_getroute })])
.then(result => {
const [democars, democarauctions] = result;
console.log(democarauctions.results.marque)
res.render('demo/fichecar-demo', {
marque: democars.marque,
modele: democars.modele,
sous_modele: democars.sous_modele,
sous_modele2: democars.sous_modele2,
type: democars.type,
precision: democars.precision,
years_interval: democars.years_interval,
cote_actual: democars.cote_actual.toLocaleString('fr-FR'),
img_url: democars.img_url,
cote_1989_eu_excp: democars.cote.cote_1989.cote_1989_eu.cote_1989_excp,
cote_1989_eu_concours: democars.cote.cote_1989.cote_1989_eu.cote_1989_concours,
cote_1989_eu_base: democars.cote.cote_1989.cote_1989_eu.cote_1989_base,
cote_1989_eu_be: democars.cote.cote_1989.cote_1989_eu.cote_1989_be,
cote_1989_eu_me: democars.cote.cote_1989.cote_1989_eu.cote_1989_me,
cote_1989_eu_ar: democars.cote.cote_1989.cote_1989_eu.cote_1989_ar,
cote_1989_eu_epa: democars.cote.cote_1989.cote_1989_eu.cote_1989_epa,
cote_2004_excp: democars.cote.cote_2004.cote_2004_excp,
cote_2004_concours: democars.cote.cote_2004.cote_2004_concours,
cote_2004_base: democars.cote.cote_2004.cote_2004_base,
cote_2004_be: democars.cote.cote_2004.cote_2004_be,
cote_2004_me: democars.cote.cote_2004.cote_2004_me,
cote_2004_ar: democars.cote.cote_2004.cote_2004_ar,
cote_2004_epa: democars.cote.cote_2004.cote_2004_epa,
cote_2014_excp: democars.cote.cote_2014.cote_2014_excp,
cote_2014_concours: democars.cote.cote_2014.cote_2014_concours,
cote_2014_base: democars.cote.cote_2014.cote_2014_base,
cote_2014_be: democars.cote.cote_2014.cote_2014_be,
cote_2014_me: democars.cote.cote_2014.cote_2014_me,
cote_2014_ar: democars.cote.cote_2014.cote_2014_ar,
cote_2014_epa: democars.cote.cote_2014.cote_2014_epa,
cote_2017_excp: democars.cote.cote_2017.cote_2017_excp,
cote_2017_concours: democars.cote.cote_2017.cote_2017_concours,
cote_2017_base: democars.cote.cote_2017.cote_2017_base,
cote_2017_be: democars.cote.cote_2017.cote_2017_be,
cote_2017_me: democars.cote.cote_2017.cote_2017_me,
cote_2017_ar: democars.cote.cote_2017.cote_2017_ar,
cote_2017_epa: democars.cote.cote_2017.cote_2017_epa,
cote_2019_excp: democars.cote.cote_2019.cote_2019_excp,
cote_2019_concours: democars.cote.cote_2019.cote_2019_concours,
cote_2019_base: democars.cote.cote_2019.cote_2019_base,
cote_2019_be: democars.cote.cote_2019.cote_2019_be,
cote_2019_me: democars.cote.cote_2019.cote_2019_me,
cote_2019_ar: democars.cote.cote_2019.cote_2019_ar,
cote_2019_epa: democars.cote.cote_2019.cote_2019_epa,
cote_actual_chart: democars.cote_actual,
cote_actual_excp: democars.cote.cote_2019.cote_2019_excp.toLocaleString('fr-FR'),
cote_actual_concours: democars.cote.cote_2019.cote_2019_concours.toLocaleString('fr-FR'),
cote_actual_base: democars.cote.cote_2019.cote_2019_base.toLocaleString('fr-FR'),
cote_actual_be: democars.cote.cote_2019.cote_2019_be.toLocaleString('fr-FR'),
cote_actual_me: democars.cote.cote_2019.cote_2019_me.toLocaleString('fr-FR'),
cote_actual_ar: democars.cote.cote_2019.cote_2019_ar.toLocaleString('fr-FR'),
cote_actual_epa: democars.cote.cote_2019.cote_2019_epa.toLocaleString('fr-FR'),
perfo_1989: democars.performance.perfo1989,
perfo_2004: democars.performance.perfo2004,
perfo_2014: democars.performance.perfo2014,
perfo_2017: democars.performance.perfo2017,
results: democarauctions.results,
marqueauction: democarauctions.results.marque
}
});
})
.catch(err => {
// handle error.
console.log(err);
})
});
Here is my HTML template:
<div class="results__container--content">
{{#each results}}
<div class="results__container--box">
<h1>{{marqueauction}}</h1>
</div>
{{else}}
<div class="results__container--box">
<p>Aucun résultat d'enchères n'est disponible pour ce modèle.</p>
</div>
{{/each}}
</div>
results is an array, you should loop over the array to get the value of marque
let marqueauction = [];
for(let i =0; i < democarauctions.results.length; i++) {
marqueauction.push(democarauctions.results[i].marque)
}
res.render('demo/fichecar-demo', {
marqueauction: marqueauction
});
You can now render the marque in your HTML by looping over the marqueauction.

Export To Excel filtered data with Free jqgrid 4.15.4 in MVC

I have a question regarding Export to Excel in free-jqgrid 4.15.4. I want to know how to use this resultset {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]} into my Business Logic Method.
Just for more clarification, I've using OfficeOpenXml and if I don't use filtered resultset(aforementioned) it is working fine and I'm able to download file with full records in an excel sheet. But I'm not sure what to do or how to utilize the resultset {"groupOp":"AND","rules":[{"field":"FirstName","op":"eq","data":"Amit"}]}
If required I can share my controller and BL code.
I have added a fiddle which shows implementation of Export to Excel button in jqGrid pager.
Before coming to here, I've read and tried to understand from following questions:
1] jqgrid, export to excel (with current filter post data) in an asp.net-mvc site
2] Export jqgrid filtered data as excel or CSV
Here is the code :
$(function () {
"use strict";
var mydata = [
{ id: "10", FirstName: "test", LastName: "TNT", Gender: "Male" },
{ id: "11", FirstName: "test2", LastName: "ADXC", Gender: "Male" },
{ id: "12", FirstName: "test3", LastName: "SDR", Gender: "Female" },
{ id: "13", FirstName: "test4", LastName: "234", Gender: "Male" },
{ id: "14", FirstName: "test5", LastName: "DAS", Gender: "Male" },
];
$("#list").jqGrid({
data: mydata,
colNames: ['Id', 'First Name', 'Last Name', 'Gender'],
colModel: [
{
label: "Id",
name: 'Id',
hidden: true,
search: false,
},
{
label: "FirstName",
name: 'FirstName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "LastName",
name: 'LastName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
label: "Gender",
name: 'Gender',
search: true, edittype: 'select', editoptions: { value: 'Male:Male;Female:Female' }, stype: 'select',
},
],
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
},
loadComplete: function (id) {
if ($('#list').getGridParam('records') === 0) {
//$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
}
else {
var lastsel = 0;
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
}
},
loadonce: true,
viewrecords: true,
gridview: true,
width: 'auto',
height: '150px',
emptyrecords: "No records to display",
iconSet:'fontAwesome',
pager: true,
jsonReader:
{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "Id"
},
});
jQuery("#list").jqGrid("navButtonAdd", {
caption: "",
buttonicon: "fa-table",
title: "Export To Excel",
onClickButton: function (e) {
var projectId = null;
var isFilterAreUsed = $('#grid').jqGrid('getGridParam', 'search'),
filters = $('#grid').jqGrid('getGridParam', 'postData').filters;
var Urls = "/UsersView/ExportToExcel_xlsxFormat?filters="+ encodeURIComponent(filters); //' + encodeURIComponent(filters);/
if (totalRecordsCount > 0) {
$.ajax({
url: Urls,
type: "POST",
//contentType: "application/json; charset=utf-8",
data: { "searchcriteria": filters, "projectId": projectId, "PageName": "MajorsView" },
//datatype: "json",
success: function (data) {
if (true) {
window.location = '/UsersView/SentFiletoClientMachine?file=' + data.filename;
}
else {
$("#resultDiv").html(data.errorMessage);
$("#resultDiv").addClass("text-danger");
}
},
error: function (ex) {
common.handleAjaxError(ex.status);
}
});
}
else {
bootbox.alert("There are no rows to export in the Participant List")
if (dialog) {
dialog.modal('hide');
}
}
}
});
});
https://jsfiddle.net/ap43xecs/10/
There are exist many option to solve the problem. The simplest one consist of sending ids of filtered rows to the server instead of sending filters parameter. Free jqGrid supports lastSelectedData parameter and thus you can use $('#grid').jqGrid('getGridParam', 'lastSelectedData') to get the array with items sorted and filtered corresponds to the current filter and sorting criteria. Every item of the returned array should contain Id property (or id property) which you can use on the server side to filter the data before exporting.
The second option would be to implement server side filtering based on the filters parameter, which you send currently to the server. The old answer (see FilterObjectSet) provides an example of filtering in case of usage Entity Framework. By the way, the answer and another one contain code, which I used for exporting grid data to Excel using Open XML SDK. You can compare it with your existing code.
In some situations it could be interesting to export grid data to Excel without writing any server code. The corresponding demo could be found in the issue and UPDATED part of the answer.

getting profile information using passport-linkedin-oauth2

I am using passport-linkedin-oauth to connect to linkedin from node.js. I am getting results in the format :
{ provider: 'linkedin',
id: 'd8UCzVLeQ4',
displayName: 'Sunanda Saha',
name: { familyName: 'Saha', givenName: 'Sunanda' },
emails: [ { value: 'sunanda.saha90#gmail.com' } ],
photos:
[ { value: 'https://media.licdn.com/dms/image/C4D03AQFrIK2nFzHrCA/profile-displayphoto-shrink_100_100/0?e=1535587200&v=beta&t=uSLIk3r-gZ8yxdKK_X3g8M1a4usPXmkLbQbyhvhwu0w' } ],
_raw: '{\n "apiStandardProfileRequest": {\n "headers": {\n "_total": 1,\n "values": [{\n "name": "x-li-auth-token",\n "value": "name:Hhbi"\n }]\n },\n "url": "https://api.linkedin.com/v1/people/d8UCzVLeQ4"\n },\n "distance": 0,\n "emailAddress": "sunanda.saha90#gmail.com",\n "firstName": "Sunanda",\n "formattedName": "Sunanda Saha",\n "headline": "Student at National Institute of Technology Durgapur",\n "id": "d8UCzVLeQ4",\n "industry": "Computer Hardware",\n "lastName": "Saha",\n "location": {\n "country": {"code": "in"},\n "name": "Durgapur Area, India"\n },\n "numConnections": 43,\n "numConnectionsCapped": false,\n "pictureUrl": "https://media.licdn.com/dms/image/C4D03AQFrIK2nFzHrCA/profile-displayphoto-shrink_100_100/0?e=1535587200&v=beta&t=uSLIk3r-gZ8yxdKK_X3g8M1a4usPXmkLbQbyhvhwu0w",\n "pictureUrls": {\n "_total": 1,\n "values": ["https://media.licdn.com/dms/image/C4D00AQHRGUNS3tX9nA/profile-originalphoto-shrink_900_1200/0?e=1530086400&v=beta&t=OpBcFgQZf3T6itjXiRUruXYwBmJ0E-Lth3Vk-HwSMT8"]\n },\n "positions": {"_total": 0},\n "publicProfileUrl": "https://www.linkedin.com/in/sunanda-saha-b02098144",\n "relationToViewer": {"distance": 0},\n "siteStandardProfileRequest": {"url": "https://www.linkedin.com/profile/view?id=AAoAACLlVTIBohmGBTmRaxEcHqMt7a-RpvQakIE&authType=name&authToken=Hhbi&trk=api*a5259465*s5577785*"}\n}',
_json:
{ apiStandardProfileRequest:
{ headers: [Object],
url: 'https://api.linkedin.com/v1/people/d8UCzVLeQ4' },
distance: 0,
emailAddress: 'sunanda.saha90#gmail.com',
firstName: 'Sunanda',
formattedName: 'Sunanda Saha',
headline: 'Student at National Institute of Technology Durgapur',
id: 'd8UCzVLeQ4',
industry: 'Computer Hardware',
lastName: 'Saha',
location: { country: [Object], name: 'Durgapur Area, India' },
numConnections: 43,
numConnectionsCapped: false,
pictureUrl: 'https://media.licdn.com/dms/image/C4D03AQFrIK2nFzHrCA/profile-displayphoto-shrink_100_100/0?e=1535587200&v=beta&t=uSLIk3r-gZ8yxdKK_X3g8M1a4usPXmkLbQbyhvhwu0w',
pictureUrls: { _total: 1, values: [Array] },
positions: { _total: 0 },
publicProfileUrl: 'https://www.linkedin.com/in/sunanda-saha-b02098144',
relationToViewer: { distance: 0 },
siteStandardProfileRequest:
{ url: 'https://www.linkedin.com/profile/view?id=AAoAACLlVTIBohmGBTmRaxEcHqMt7a-RpvQakIE&authType=name&authToken=Hhbi&trk=api*a5259465*s5577785*' } } }
To get the information I am using
newUser.linkedin.name = profile.displayName;
newUser.linkedin.email = profile.emailAddress;
newUser.linkedin.location = profile.location;
I am getting the name but not email and location. How to get the other two. And also the gender.
According to the json you provided it should give you your required info in the following formate.
newUser.linkedin.name = jsonYouGave.formattedName;
newUser.linkedin.email = jsonYouGave.emailAddress;
newUser.linkedin.location = jsonYouGave.location.name;
jsonYouGave is the json which you updated in your answer.

Resources