Related
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.
I'm trying to understand how Stream works, but I just don't get it... I have two feeds I want to create, they should be seperate from each other.
With the example below I thought that I'm first adding activities as Eric, I have one activity that goes just to Eric's feed, one that goes to the cpaentries feed and one that goes to the productcafe feed.
const ericToken = client.feed('timeline', 'eric').token
var ericFeed = client.feed('timeline', 'eric', ericToken);
// Add the activity to the feed
ericFeed.addActivity({
actor: 'eric',
tweet: 'Hello world',
verb: 'tweet',
object: 1
});
ericFeed.addActivity({
actor: 'eric',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet',
object: 1,
to: ['timeline:cpaentries']
});
ericFeed.addActivity({
actor: 'eric',
tweet: 'Hello world, Product CafeNew',
verb: 'tweet',
object: 1,
to: ['timeline:productcafe']
});
Now I am trying to ONLY retrieve the timeline containing cpaentries activities. Think of this as the main feed every user should see when they open the app. I'm just generally confused about client.feed, the to field and following as well I suppose.
const cpaToken = client.feed('timeline', 'cpaentries').token
var cpaFeed = client.feed('timeline', 'cpaentries', cpaToken);
cpaFeed.get({limit:5}).then(function(body) {
console.log(body);
/* on success */
}).catch(function(reason) {
console.log(reason);
/* on failure, reason.error contains an explanation */
});
This snippet basically just shows all posts, not only the cpaentries posts as I was hoping it would do.
Here's the body of my result:
{ results:
[ { actor: 'eric',
foreign_id: '',
id: 'd2435d01-21bb-11e8-81f8-128899f22c76',
object: '1',
origin: null,
target: '',
time: '2018-03-07T03:58:40.503118',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet' },
{ actor: 'eric',
foreign_id: '',
id: '83eb9b0e-21bb-11e8-a2ca-0a51ae8e7f7a',
object: '1',
origin: null,
target: '',
time: '2018-03-07T03:56:29.065704',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet' },
{ actor: 'eric',
foreign_id: '',
id: 'fc9b804e-2154-11e8-b02a-128899f22c76',
object: '1',
origin: null,
target: '',
time: '2018-03-06T15:42:33.381897',
tweet: 'Hello halli hallo world, CPA Entries',
verb: 'tweet' },
{ actor: 'eric',
foreign_id: '',
id: '3602f521-2152-11e8-853b-0a51ae8e7f7a',
object: '1',
origin: null,
target: '',
time: '2018-03-06T15:22:41.199850',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet' },
{ actor: 'eric',
foreign_id: '',
id: '281b133f-2152-11e8-8533-0a51ae8e7f7a',
object: '1',
origin: null,
target: '',
time: '2018-03-06T15:22:17.869808',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet' } ],
}
With the example below I thought that I'm first adding activities as Eric, I have one activity that goes just to Eric's feed, one that goes to the cpaentries feed and one that goes to the productcafe feed.
That's almost correct. In your example, all activities will go into Eric's feed. The second activity will go into Eric's feed, and be copied to the cpaentries feed. The third activity will go into Eric's feed, and be copied to the productcafe feed.
You can think of the to param as a collection of feeds to which the activity will be copied.
To get the behavior you thought would happen, the second and third activities would be added directly to the cpaentries and productcafe feeds respectively, with no to param. E.g.:
const cpaentriesFeed = client.feed('timeline', 'cpaentries', cpaentriesToken);
cpaentriesFeed.addActivity({
actor: 'eric',
tweet: 'Hello world, CPA EntriesNew',
verb: 'tweet',
object: 1
});
const productcafeFeed = client.feed('timeline', 'productcafe', productcafeToken);
productcafeFeed.addActivity({
actor: 'eric',
tweet: 'Hello world, Product CafeNew',
verb: 'tweet',
object: 1
});
Trying to print data which is stored in lists on a NodeJS server on the front end using the hbs view package. Using Express and hbs.
This is what the code looks like on the server:
app.get("/", function(request, response){
response.render("index", {list: list});
});
And on the front end:
{{{body}}}
{{#each list}}
<p>{{ x }}</p>
{{/each}}
Data is stored like:
[{ x:
{ type: 'uri',
value: 'http://example.org/hospital/Basildon_University_Hospital' },
name: { type: 'literal', value: 'Basildon_University_Hospital' },
city: { type: 'literal', value: 'Basildon' },
county: { type: 'literal', value: 'Essex' },
email: { type: 'literal', value: 'pals#btuh.nhs.uk' },
phone: { type: 'literal', value: '01268_524900' },
lat: { type: 'literal', value: '51.557685852050781' },
long: { type: 'literal', value: '0.45057165622711182' } }]
When trying to output the property x, all I get is [object Object] printed, same goes for any other property in the data. Tried using list.x but then I get nothing printed at all.
Also have other data stored like:
[ { Concept:
{ type: 'uri',
value: 'http://www.openlinksw.com/schemas/virtrdf#QuadMapFormat' } } ]
Not even printing [object Object]
What can I do to get the values printed and access the objects and lists with hbs?
Don't forget to add the below on server side
var Handlebars = require('hbs');
Handlebars.registerHelper('json', function(context) {
return JSON.stringify(context);
});
And then
app.get("/", function(request, response){
response.render("index", {list: list});
});
then Use this
{{{body}}}
{{#each list}}
<p>{{ json x }}</p>
{{/each}}
Working example
jsfiddle
I can't get {{this.username}}
when I do:
{{#each history}}
{{this.username}} <!--THIS WILL NOT SHOW ANYTHING - OBJ in history->
{{this}} <!-- Shows data just fine, but cant get to any values like line above -->
{{/each}}
{{this}} <!-- THIS WILL SHOW ARRAY OF OBJECTS OK
{{history}} alone outputs this:
{ _id: 59fe71a6167aaa05f4dcf43c,
userid: 'asd',
name: 'asd',
email: 'asd#asd.com',
passwords: 'asd',
product: 'asd',
issues: 'asd',
serial: 'asd',
accessories: 'asdddddddd',
__v: 0 }
{ _id: 59fe8c8c49830e09d82de3f1,
userid: 'asd',
name: 'asd',
email: 'asd#gmagoaimg.com',
passwords: 'sdfgasdg',
product: 'afafafa',
issues: 'fasfasf',
serial: 'asdfa3a3fasfe',
backedup: 'on',
accessories: 'asdfgasdf',
__v: 0 }
{ _id: 59fe8f26703bf10a2a985f10,
userid: 'asd',
name: 'Homer Gomez',
email: 'ajsidfaos#faksdofa.com',
passwords: 'asdfasdf',
product: 'This is the product',
issues: 'This is the prod desc',
serial: 'afjdofajosdf98988',
backedup: 'on',
accessories: 'asdfasdf',
__v: 0 }
etc...
Now, my route sends over the data,
router.get('/service_history', function(req, res) {
//compares req['user'].name with the Job.userid if the same:
req['user'].service_history = []; // clears the user history
Job.find()
.then( function(doc){
//console.log(doc);
doc.forEach(function(job){
//if (err) throw err
if(job.userid == req['user'].name){
console.log(job);
req['user'].service_history.push(job);
}
});
});
res.render('service_history', { history: {data: req['user'].service_history} } );
});
: {{history}}
and when I render the page of this handlebars code, I can render the objects that I have pasted above in this post, above,
{{#each history}}
Thanks for any feedback, and sorry again for the newbish needs
I am starting to use Sencha Touch and have already read their "Getting Started" gide, however I am currently stuck in what I want to do and haven't been able to find any proper tutorial or example of what I need.
I want to make a panel so that when a user clicks on a specific button the panel slides and the toolbar on top disappears (or slides as well) and a new one appear just as it would happen on a native iOS app.
Here's my Sencha code so far:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
/*HANDLERS
*********************************************************************************/
var showAlert = function(btn, event) {
Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
};
var tapHandler = function(button, event) {
};
/*BUTTONS
*********************************************************************************/
var aboutAppBtn = [{
text: 'Sobre App',
ui: 'round',
handler: showAlert
}];
var checkInBtn = [{
text: 'Check-in',
ui: 'forward',
handler: tapHandler
}];
var buscarCercaBtn = [{
text: 'Buscar local...',
ui: 'button',
handler: showAlert
}];
var buttonsGroup1 = [{
text: 'Sobre App',
ui: 'round',
handler: showAlert
}, {
text: 'Check-in',
ui: 'forward',
handler: tapHandler
}];
/*PHONE || SCREEN
**********************************************************************************/
if (Ext.is.Phone) {// Phone has far less screen real-estate
var dockedItems = [{
xtype: 'toolbar',
dock : 'top',
ui: 'light',
title: 'My Toolbar',
items: buttonsGroup1
}];
}else{
//var dockedItems = [topTB];
aboutAppBtn.push({xtype: 'spacer'});
var dockedItems = [{
xtype: 'toolbar',
dock : 'top',
ui: 'light',
title: 'My Toolbar',
items: aboutAppBtn.concat(checkInBtn)
},{
xtype: 'button',
dock: 'bottom',
ui: 'action',
text: 'Buscar local...',
handler: showAlert
}];
}
var green = {
style: 'background-color:#3b7E00; color:white;',
title: 'Green',
html: 'Green'
};
var blue = {
style: 'background-color:#0F0; color:white;',
title: 'Blue',
html: 'Blue'
};
/*PANELS
**********************************************************************************/
var mainPanel = new Ext.Panel({
dockedItems: dockedItems,
layout: 'card',
cardSwitchAnimation: {type: 'flip', duration: 500},
fullscreen : true,
items: [green, blue]
});
}
});
To make the card transition when you click a button use the setActiveItem method in your handler:
var tapHandler = function(button, event) {
mainPanel.setActiveItem(1);
};
It can also take a reference to the panel component directly (which is useful if you ever change the order of the cards and the indices change).
Your toolbar is docked to the outer container, not to the cards, so it won't change when you change cards. You could dock two different toolbars to the card panels instead if you wanted it to change (or alter it programmatically, I suppose).
Also you can use the 'spacer' type to spread your buttons apart to each side of the tool. Here is your code adjusted to do what I think you probably want (on phone only, for clarity)
Ext.setup({
onReady: function() {
/*HANDLERS
*********************************************************************************/
var showAlert = function(btn, event) {
Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
};
var tapHandler = function(button, event) {
mainPanel.setActiveItem(blue, {type: 'slide'});
};
var backHandler = function(button, event) {
mainPanel.setActiveItem(green, {type: 'slide', direction: 'right'});
};
/*UI
*********************************************************************************/
var green = new Ext.Panel({
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'My Toolbar',
items: [{
text: 'Sobre App',
ui: 'round',
handler: showAlert
}, { xtype:'spacer'}, {
text: 'Check-in',
ui: 'forward',
handler: tapHandler
}]
}],
style: 'background-color:#3b7E3b',
html: 'Green'
});
var blue = new Ext.Panel({
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'Check-in',
items: [{
text: 'Back',
ui: 'back',
handler: backHandler
}]
}],
style: 'background-color:#3b3b7E',
html: 'Blue'
});
var mainPanel = new Ext.Panel({
layout: 'card',
fullscreen : true,
items: [green, blue]
});
}
});