How to access to nested objects keys

How to access to nested objects keys - javascript

I am trying to get the value from a data file with nested objects.
I want to create a label for each entry that i have under the EN object. So I would like to end up having a "mail" label a "quote" label and a "phone" label.
In the label I want to put the content of tabLabel and tabIcon by accessing it.
With Object.Keys() i can see the strings but when I try to console.log them I get undefined.
I did this function but is not working:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
for (let i = 0; i < keys; i += 1) {
return `
<div class="${ID}_tab-form__headerItemWrap">
<label for="taLabel-here"><i class="tabIcon-here"></i></label>
</div>
`;
}
}
This is the data:
const TabFormData = {
EN: {
mail: [
{
tabLabel: 'Email Our Team',
tabIcon: 'fa fa-envelope',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: true,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: true,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
quote: [
{
tabLabel: 'Request a Quote',
tabIcon: 'fa fa-file-invoice-dollar',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: false,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: false,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
call: [
{
tabLabel: 'Call Me Back',
tabIcon: 'fa fa-phone',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
},
IT: {
},
};

Your problem is in the loop.
for (let i = 0; i < keys; i += 1)
In here you're checking if i is less than an array object, which is not what you want.
You want to compare i against the number of items in the array.
So that would become this:
for (let i = 0; i < keys.length; i += 1)
Your string literal is also wrong, ID in this case is an undefined variable. I assume you want the name of the key. For this issue it should become:
<div class="${keys[i]}_tab-form__headerItemWrap">
Also, once you return from the for loop, it'll automatically break on the first iteration (meaning you'll always get only one item). What you could do is build your whole string first then return it.
That would make your function become:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
var str = "";
for (let i = 0; i < keys.length; i += 1) {
str +=
`<div class="${keys[i]}_tab-form__headerItemWrap">
<label for="taLabel-here"><i class="tabIcon-here"></i></label>
</div>
`;
}
return str;
}
Here's a Fiddle.

If I understand correctly, you are looking something like this:
let cb = (v) => `<div class="${v[0]}"><label for="${v[1][0]['tabLabel']}"><i class="${v[1][0]['tabIcon']}"></i></label></div>`
Object.entries(TabFormData['EN']).map(cb);
Object.keys() returns the only the keys of the object, however it seems that you want to access the values as well. So, in your case Object.entries() is preferred.
I recommend to read the link below:
https://javascript.info/keys-values-entries

As reported by #Adriani6, you have issues in the loop, but to actually answer your question, here's how to access the nested objects:
function generateLabel() {
const keys = Object.keys(TabFormData.EN);
for (let i = 0; i < keys.length; i += 1) {
let currentTabObject = TabFormData.EN[keys[i]];
console.log(currentTabObject[0].tabLabel);
console.log(currentTabObject[0].tabIcon);
}
}

Assuming you assign TabFormData.EN to a variable called data and the Object.keys result of TabFormData.EN to a variable called keys, you can use:
${keys[i]} to retrieve the name and append it to your div classname,
${data[keys[i]][0].tabLabel} to retrieve the tabLabel property value and append it to your <label> tag, and
${data[keys[i]][0].tabIcon} to retrieve the tabIcon property value and append it to your <i> tag.
You can ignore the <hr> tags, the <button> tag and the rendered <div> tags and just check the object property references in the code snippet below if you want. They are just there for illustrating the code results in the jsFiddle and the code snippet below:
/* JavaScript */
var x = document.getElementById('abc');
var btn = document.getElementById('btn');
function generateLabel() {
const data = TabFormData.EN;
const keys = Object.keys(data);
for (let i = 0; i < keys.length; i += 1) {
x.innerHTML += `
<hr>
<div class="${keys[i]}_tab-form__headerItemWrap">
<label for="${data[keys[i]][0].tabLabel}">
<i class="${data[keys[i]][0].tabIcon}-here">
class of this div is ${keys[i]}_tab-form__headerItemWrap, label for this is ${data[keys[i]][0].tabLabel} and icon is ${data[keys[i]][0].tabIcon}
</i>
</label>
</div>
<hr>`
}
}
btn.addEventListener('click', generateLabel);
const TabFormData = {
EN: {
mail: [
{
tabLabel: 'Email Our Team',
tabIcon: 'fa fa-envelope',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: true,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: true,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
quote: [
{
tabLabel: 'Request a Quote',
tabIcon: 'fa fa-file-invoice-dollar',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'Email Address',
type: 'email',
name: 'email',
required: false,
hint: 'Please, provide a valid email.',
},
{
label: 'Your Message',
type: 'textarea',
required: false,
name: 'message',
hint: 'Write us a message.',
rows: 20,
cols: 50,
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
call: [
{
tabLabel: 'Call Me Back',
tabIcon: 'fa fa-phone',
},
{
label: 'First Name',
type: 'text',
name: 'name',
required: true,
hint: 'Please, provide your Name.',
},
{
label: 'Last Name',
type: 'text',
name: 'surname',
required: true,
hint: 'Please, provide your Last Name.',
},
{
label: 'Phone Number',
type: 'number',
name: 'telephone',
required: true,
hint: 'Please, provide a valid number',
},
{
label: 'About You',
required: true,
select: [
'Home use',
'Business use',
'Freelance, professional',
],
},
],
},
IT: {
},
};
/* CSS */
<!-- HTML -->
<button id="btn">
Click Me
</button>
<div id="abc"></div>

Related

Recursively build an object based on the keys & values from another?

I want to programmatically build a dynamic data object based on a context object, like in the example below.
const context = {
...other props...,
groups: [
{
heading: 'basic',
canHaveMultiple: false, // data.basic = {username: { type: 'text', value: '' }, password: { type: 'password', value: ''}}
inputs: [
{
name: 'username',
type: 'text',
placeholder: 'username',
},
{
name: 'password',
type: 'password',
placeholder: 'password',
},
],
},
{
heading: 'about',
canHaveMultiple: false, // data.about = {about: { type: 'textarea', value: '' }}
inputs: [
{
name: 'about',
type: 'textarea',
placeholder: 'about',
canHaveMultiple: false,
},
],
},
{
heading: 'hobbies',
canHaveMultiple: true, // data.hobbies = { model: { title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''} }, values: [ { title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''} }]
inputs: [
{
name: 'title',
type: 'text',
placeholder: 'about',
canHaveMultiple: false,
},
{
name: 'description',
type: 'description',
placeholder: null,
canHaveMultiple: false,
},
],
},
{
heading: 'friends',
canHaveMultiple: true, // data.friends = { model: {title: {type: 'text', value: '' }, description: { type: 'textarea', value: '' }} }, values: [{ name: {type: 'text', value: ''},hobbies: [{ title: {type: 'text', value: ''}, description: {type: 'textarea', value: ''}} }] }
inputs: [
{
name: 'name',
type: 'text',
placeholder: 'this is fine',
canHaveMultiple: false
},
{
name: 'hobbies',
type: 'nested',
canHaveMultiple: true,
inputs: [
{
name: 'title',
type: 'textarea',
placeholder: 'about',
canHaveMultiple: false,
},
{
name: 'description',
type: 'textarea',
placeholder: 'about',
canHaveMultiple: false,
},
]
}
],
},
],
}
The output data should be something like so:
data: {
basic: {
username: {
type: 'text',
value: '',
},
password: {
type: 'password',
value: ''
}
},
about: {
about: {
type: 'textarea',
value: '',
}
},
hobbies: {
model: {
title: {
type: 'text',
value: '',
},
description: {
type: 'textarea',
value: '',
}
},
values: [
{
title: {
type: 'text',
value: '',
},
description: {
type: 'textarea',
value: '',
}
}
]
},
friends: {
model: {
name: {
type: 'text',
value: '',
},
hobbies: {
title: {
type: 'text',
value: '',
},
description: {
type: 'textarea',
value: '',
}
}
},
values: [
]
},
}
In essence,
groups[int].heading becomes the top level property of the data object, and
each group along with each of the child from inputs has a canHaveMultiple property, which distinguishes whether the resulting object structure will be either:
canHaveMultiple == false
group.input.name: {
group.type,
value: ''
}
OR
canHaveMultiple == true
{
model: {
group.input.name: {
type: group.input.type,
value: ''
},
... etc
},
values: [{
group.input[0].name: {
type: group.input[0].type,
value: '',
},
group.input[1].name: {
type: group.input[1].type,
value: '',
}
}]
}
The model is there so that I can easily push a new copy of that object into the values array.
So here is my question:
Is there a way to recursively do this so that the program will create the data object from the context object, and keep looking down the context object chain for any 'nested' type (also within the inputs array) until there is none left? Is this do-able and efficient or am I thinking and going about this the wrong way?
*PS: I have been trying real hard and wrecking my head for a few days now on this but I cannot seem to get it working for Nested Objects beyond 3 levels because I am a newbie in recursion. Please help me :(

This function first group by heading (using reduce) then goes recursively over the inputs fields. That is if an input has inputs we loop that too.
const context={groups:[{heading:"basic",canHaveMultiple:!1,inputs:[{name:"username",type:"text",placeholder:"username"},{name:"password",type:"password",placeholder:"password"},]},{heading:"about",canHaveMultiple:!1,inputs:[{name:"about",type:"textarea",placeholder:"about",canHaveMultiple:!1},]},{heading:"hobbies",canHaveMultiple:!0,inputs:[{name:"title",type:"text",placeholder:"about",canHaveMultiple:!1},{name:"description",type:"textarea",placeholder:null,canHaveMultiple:!1},]},{heading:"friends",canHaveMultiple:!0,inputs:[{name:"name",type:"text",placeholder:"this is fine",canHaveMultiple:!1},{name:"hobbies",type:"nested",canHaveMultiple:!0,inputs:[{name:"title",type:"textarea",placeholder:"about",canHaveMultiple:!1},{name:"description",type:"textarea",placeholder:"about",canHaveMultiple:!1},]}]},]}
function transform(arr) {
var result = arr.reduce(function(agg, item) {
var heading = item.heading
var canHaveMultiple = item.canHaveMultiple
var parent;
agg[heading] = {}
if (canHaveMultiple === false) {
parent = agg[heading]
}
if (canHaveMultiple === true) {
agg[heading] = {
model: {},
values: []
}
parent = agg[heading]['model']
}
function do_inputs(parent, inputs) {
inputs.forEach(function(input) {
if (!input.inputs) {
parent[input.name] = {
type: input.type,
value: ''
// todo: placeholder and other properties
}
} else {
// nested
parent[input.name] = {}
do_inputs(parent[input.name], input.inputs)
}
})
}
do_inputs(parent, item.inputs)
return agg;
}, {})
return result;
}
console.log(transform(context.groups));
.as-console-wrapper {
max-height: 100% !important;
}

I have two snippets which might get you most of the way there.
The first one is perhaps too simple, ignoring your model/value part. But it should be easy to understand:
const convert = (xs) => Object .fromEntries (
xs .map (({name, type, inputs = []}) =>
[name, inputs .length ? convert (inputs) : {type, value: ''}]
)
)
const restructure = (context) => ({
data: Object .fromEntries (context .groups .map (
({heading, inputs}) => [heading, convert (inputs)]
))
})
const context = {other: "props", groups: [{heading: "basic", canHaveMultiple: !1, inputs: [{name: "username", type: "text", placeholder: "username"}, {name: "password", type: "password", placeholder: "password"}]}, {heading: "about", canHaveMultiple: !1, inputs: [{name: "about", type: "textarea", placeholder: "about", canHaveMultiple: !1}]}, {heading: "hobbies", canHaveMultiple: !0, inputs: [{name: "title", type: "text", placeholder: "about", canHaveMultiple: !1}, {name: "description", type: "description", placeholder: null, canHaveMultiple: !1}]}, {heading: "friends", canHaveMultiple: !0, inputs: [{name: "name", type: "text", placeholder: "this is fine", canHaveMultiple: !1}, {name: "hobbies", type: "nested", canHaveMultiple: !0, inputs: [{name: "title", type: "textarea", placeholder: "about", canHaveMultiple: !1}, {name: "description", type: "textarea", placeholder: "about", canHaveMultiple: !1}]}]}]}
console .log (restructure (context))
.as-console-wrapper {max-height: 100% !important; top: 0}
The second one does add the model/value part at the expense of some additional complexity. And it's not clear to me if it's entirely correct, although I think it's close:
const convert = (xs) => Object .fromEntries (
xs .map (({name, type, inputs = [], canHaveMultiple}) => [
name,
canHaveMultiple
? {model: convert (inputs), values: [convert (inputs)]}
: inputs.length ? convert (inputs) : {type, value: ''}
])
)
const restructure = (context) => ({
data: Object .fromEntries (context .groups .map (
({heading, inputs, canHaveMultiple}) => [
heading,
canHaveMultiple
? {model: convert (inputs), values: [convert (inputs)]}
: convert (inputs)
]
))
})
const context = {other: "props", groups: [{heading: "basic", canHaveMultiple: !1, inputs: [{name: "username", type: "text", placeholder: "username"}, {name: "password", type: "password", placeholder: "password"}]}, {heading: "about", canHaveMultiple: !1, inputs: [{name: "about", type: "textarea", placeholder: "about", canHaveMultiple: !1}]}, {heading: "hobbies", canHaveMultiple: !0, inputs: [{name: "title", type: "text", placeholder: "about", canHaveMultiple: !1}, {name: "description", type: "description", placeholder: null, canHaveMultiple: !1}]}, {heading: "friends", canHaveMultiple: !0, inputs: [{name: "name", type: "text", placeholder: "this is fine", canHaveMultiple: !1}, {name: "hobbies", type: "nested", canHaveMultiple: !0, inputs: [{name: "title", type: "textarea", placeholder: "about", canHaveMultiple: !1}, {name: "description", type: "textarea", placeholder: "about", canHaveMultiple: !1}]}]}]}
console .log (restructure (context))
.as-console-wrapper {max-height: 100% !important; top: 0}
In both of them, we could simplify a lot if you had a consistent interface. That is, if groups was called inputs and heading was called name, we could consolidate the two repetitive functions into a single one.

Add readonly field upon editing in ApostropheCMS

I want to make a particular field readonly when i edit some field.
module.exports = {
extend: 'apostrophe-pieces',
name: xyz,
label: xyz,
addFields: [{
nameL: 'latitude',
lable: 'latitude',
type: 'string',
required: true
}
}

You can do this by adding readOnly: true to the definition of your field:
module.exports = {
extend: 'apostrophe-pieces',
name: xyz,
label: xyz,
addFields: [
{
name: 'latitude',
label: 'latitude',
type: 'string',
required: true,
readOnly: true
}
]
}

Data not Displaying correctly while using JqGrid Grouping

I am trying to show data in group using jqGrid. It creates multiple group for same name.
Below is My Code
jQuery("#jqGridManage").jqGrid({
datatype: "local",
data: Projectdata,
colNames: ['Action', 'Opportunity Id', 'Salesforce Opportunity ID', 'Project Name (Opportunity Name)', 'Project Type', 'Type Of Revenue', 'Milestone Description', 'Amount', 'PO Number', 'PO Amount', 'Close Date', 'Assigned To',
'Business Unit', 'Product', 'Channel Name', 'Sales Person', 'Vertical', 'Customer Name', 'Customer Contact','Region'],
colModel: [
{ name: 'actionBtn', search: false, frozen: true, width: 200, align: 'center'},
{ name: 'OpportunityID', index: 'id', frozen: true },//, cellattr: arrtSetting
{ name: 'SalesforceOpportunityId', index: 'invdate', frozen: true },
{ name: 'OpportunityName', index: 'name', frozen: true },
{ name: 'ProjectTypeLongName', index: 'amount', frozen: true },
{ name: 'ProjectTypeChildName', index: 'tax', frozen: true },
{ name: 'ChannelName', index: 'total', frozen: true },
{ name: 'Amount', index: 'amount' },
{ name: 'PONumber', index: 'closedate' },
{ name: 'POAllocatedAmount', index: 'closedate' },
{ name: 'CloseDate', index: 'closedate' },
{ name: 'AssignedTo', index: 'note' },
{ name: 'BusinessUnit', index: 'note' },
{ name: 'Product', index: 'product' },
{ name: 'Channel Name', index: 'stage' },
{ name: 'SalesPerson', index: 'salesperson' },
{ name: 'Vertical', index: 'vertical' },
{ name: 'CustomerName', index: 'customername' },
{ name: 'CustomerContactNumber', index: 'currency' },
{ name: 'Region', index: 'amountexpected' }
],
shrinkToFit: false,
pager: "#jqGridPagerManage",
viewrecords: true,
autowidth: true,
height: 450,
sortname: "OpportunityID",
grouping: true,
groupingView: {
groupField: ["OpportunityID"],
groupColumnShow: [true, true],
groupCollapse: false,
groupDataSorted: true
},
resizeStop: function () {
resizeColumnHeader.call(this);
fixPositionsOfFrozenDivs.call(this);
fixGboxHeight.call(this);
},
loadComplete: function () {
fixPositionsOfFrozenDivs.call(this);
},
gridComplete: function () {
var ids = $("#jqGridManage").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var rowId = ids[i],
// statusId = $("#list").jqGrid ('getCell', rowId, 'statusId'),
// activeBtn = "";
// if (statusId == 0) { // Inactive
activeBtn = "<button class='ManageEditBtn ManageEdit'><i class='fa fa-edit'></i> Edit</button> <button class='ManageEdit ManageCreate'><i class='fa fa-plus'></i> Create Invoice</button>";
//"onclick='publish(" + rowId + ")' />";
// }
jQuery("#jqGridManage").jqGrid('setRowData', rowId, { actionBtn: activeBtn });
}
},
})
In my code data coming from backend. I am grouping by OpportunityID; there are 4 opprtunity id's but each group is showing multiple times. Below is My screenshow for reference.
I have referred other same questions also but that are not helpful. Can anybody help me in this?

colModel, which you use have many inconsistencies. You should remove of index properties. If you use index in combination with datatype: "local", then the value of index property should corresponds the name property or to reference name of another column of colModel. The best choice is not using any index property at all.
Additionally you have to fix the name of Channel Name column. The value of name property will be used for building ids of some internal elements on the HTML page and HTML5 don't allow the usage of spaces in id.

The problem IMHO is that your data coming from the server should be sorted by OpportunityID. Check if this is true.
Another cause can be in your gridComplete event. Remove this event and see if the grouping is ok.

JSGrid add icon instead of text based on true or false value

I am trying to add an icon(a lock) based on whether a value is true or false in a JSGrid.
I have a variable called SoftLock, and if this is true I want to insert a lock icon on the grid.
I have the following fields but am unsure about how to continue:
var fields = [
{ name: 'ID', type: 'text', visible: false },
//THIS FIELD BELOW
{ name: 'SoftLock', type: 'text', title: 'Locked', formatter : function () {return "<span class='fa fa-lock'><i class='fa fa-lock' aria-hidden='true'></i></span>"} },
//THIS FIELD ABOVE
{ name: 'Status', type: 'select', items: MatterStatusEnum.List, valueField: 'Id', textField: 'Name', width: 70, title: 'Account Status' },
{ name: 'AttorneyRef', type: 'text', title: 'Reference' },
{ name: 'Investors', type: 'text', title: 'Investor/s' },
{ name: 'AccountNumber', type: 'text', width: 70, title: 'Account Number' },
{ name: 'IntermediaryName', type: 'text', title: 'Intermediary Name' },
{ name: 'CreatedBy', type: 'text', title: 'Captured By' },
{ name: 'RequestedDate', type: 'date', title: 'Requested Date'}
];
I have used the formatter with no luck. Also, how can I show an icon if true, and nothing if false.
Any help would be appreciated.

I solved this by using the itemTemplate as follows:
{
name: 'SoftLock', type: 'text', title: 'Locked', width: 30,
itemTemplate : function (value, item) {
var iconClass = "";
if (value == true) {
iconClass = "fa fa-lock"; //this is my class with an icon
}
return $("<span>").attr("class", iconClass);
}
Simple as that :)

Much later but try the following
{
type: "control",
editButton: true
}
Also the answer is better described in the formal documentation.
http://js-grid.com/docs/#control

Building an object with required and optional paramaters

I am trying to create a grid builder object. This grid builder has a method, buildGrid, which I've designed to expect an object defining a bunch of paramaters for a grid:
buildOrdersGrid: function () {
var ordersGrid = buildGrid({
gridElementID: 'OrdersGrid',
gridPagerElementID: 'OrdersGridPager',
colNames: ['Order ID', 'Project Subcode', 'Incident Number', 'Cost Center', 'Name', 'Customer'],
colModel: [
{ name: 'ID', hidden: true },
{ name: 'ProjectSubcode' },
{ name: 'IncidentNumber' },
{ name: 'CostCenter' },
{ name: 'Name' },
{ name: 'Customer' }
],
defaultCaption:'Orders: no filter applied',
});
return ordersGrid;
}
function buildGrid(data) {
var grid = $('#' + data.gridElementID);
var gridPager = $('#' + data.gridPagerElementID);
grid.jqGrid({
datatype: 'local',
colNames: data.colNames,
colModel: data.colModel,
gridview: true,
height: 'auto',
pager: gridPager,
viewrecords: true,
multiselect: true,
defaultCaption: data.defaultCaption,
caption: data.defaultCaption,
shrinkToFit: false
});
return grid;
}
Something like that, but it's really new code, so open to advice on how to improve.
Now, I would like to extend this buildGrid method such that it can take non-predefined properties and give them to the jqGrid. Something like:
buildTaskGrid: function () {
var tasksGrid = buildGrid({
gridElementID: 'TasksGrid',
gridPagerElementID: 'TasksGridPager',
colNames: ['Order', 'Task ID', 'Task #', 'Type', 'Status', 'Assignee', 'Current Location', 'Dest Location', 'Change No', 'Net Patched', 'SAN Patched'],
colModel: [
{ name: 'Order' },
{ name: 'TaskID', hidden: true },
{ name: 'TaskNo' },
{ name: 'Type' },
{ name: 'Status' },
{ name: 'Assignee' },
{ name: 'CurrentLocation' },
{ name: 'DestLocation' },
{ name: 'ChangeNo' },
{ name: 'NetPatched' },
{ name: 'SANPatched' }
],
defaultCaption:'Tasks: no filter applied',
//Decorate with task-specific properties.
grouping: true,
groupingView: {
groupField: ['Order'],
groupColumnShow: [false]
},
ondblClickRow: function (rowid) {
$(this).trigger('taskDoubleClicked', selector.getRowData(rowid));
}
});
return tasksGrid;
}
I'm not sure how I should best 'find' the unanticipated properties and give them to the grid. Any ideas?

I think you can use this http://api.jquery.com/jQuery.extend/

Develop Reference

JavaScript is the programming language of the Web.

How to access to nested objects keys - javascript

Related

Recursively build an object based on the keys & values from another?

Add readonly field upon editing in ApostropheCMS

Data not Displaying correctly while using JqGrid Grouping

JSGrid add icon instead of text based on true or false value

Building an object with required and optional paramaters

Categories

Resources