We Keep Coding

Why am I not getting any values displayed in my ui-grid dropdown?

I have this following code for ui-grid column Definition:
{ name: "carrier_influence_group", displayName: "Carrier influence group", enableCellEdit: true, showSortMenu: false,
editableCellTemplate: 'ui-grid/dropdownEditor', editDropDownOptionsArray: [ { id: 11, value: 'Medium' }, { id: 12, value: 'Large' }],
editDropdownIdLabel: 'id',editDropdownValueLabel: 'name'}
I am binding the name of these object to the column.
Every thing is fine normally. The grid as such renders correctly. But when I dbl click to edit this row, the text in this row disappears. A dropdown appears but it has no option to select from.
I tried changing my array to:
[ { id: 11, name: 'Medium' }, { id: 12, name: 'Large' }]
What is missing here. I have seen this official code. Seems like all is similar except for a filter. I do not need any such filter. Is it necessary to have one. The official docs do not mention anything about it.
Already referred http://stackoverflow.com/questions/28323540/showing-readable-data-in-ui-grid-with-editable-drop-down-cell

First thing to try - it should be editDropdownOptionsArray not editDropDownOptionsArray (note the case).

Javascript library for table rendering

I need to show an array of objects in the table like representation. Table has columns with the properties, and when clicked on the column it should show more data inside the table. It should be sortable.
Is there a JS library that could do this, so I dont have to write this from scratch?
Please see the attached image with the JSON object.
When the user clicks on Ana, additional row is inserted.

I created the demo https://jsfiddle.net/OlegKi/kc2537ty/1/ which demonstrates the usage of free jqGrid with subgrids. It displays the results like
after the user clicks on the "+" icon in the second line.
The corresponding code you can find below
var mydata = [
{ id: 10, name: "John", lname: "Smith", age: 31, loc: { location: "North America", city: "Seattle", country: "US" } },
{ id: 20, name: "Ana", lname: "Maria", age: 43, loc: { location: "Europe", city: "London", country: "UK" } }
];
$("#grid").jqGrid({
data: mydata,
colModel: [
{ name: "name", label: "Name" },
{ name: "lname", label: "Last name" },
{ name: "age", label: "Age", template: "integer", align: "center" }
],
cmTemplate: { align: "center", width: 150 },
sortname: "age",
iconSet: "fontAwesome",
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowid) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
subgridData = [$(this).jqGrid("getLocalRow", rowid).loc];
$("#" + subgridDivId).append($subgrid);
$subgrid.jqGrid({
idPrefix: rowid + "_",
data: subgridData,
colModel: [
{ name: "location", label: "Localtion" },
{ name: "city", label: "City" },
{ name: "country", label: "Country" }
],
cmTemplate: { align: "center" },
iconSet: "fontAwesome",
autowidth: true
});
}
});
Small comments to the code. Free jqGrid saves all properties of input data in data parameter. I added id property to every item of input data. It's not mandatory, but it could be helpful if you would add more functionality to the grid. See the introduction for more details.
The columns are sortable based on the type of the data specified by sorttype property of colModel. To simplify usage some standard types of data free jqGrid provides some standard templates which are shortcurts for some set of settings. I used template: "integer" in the demo, but you could replace it to sorttype: "integer" if only sorting by integer functionality is important.
If the user click on "+" icon to expand the subgrid then jqGrid inserts new row and creates the div for the data part of the subgrid. You can replace subGridRowExpanded from above example to the following
subGridRowExpanded: function (subgridDivId) {
$("#" + subgridDivId).html("<em>simple subgrid data</em>");
}
to understand what I mean. The unique id of the div will be the first parameter of the callback. One can create any common HTML content in the subgrid. Thus one can create empty <table>, append it to the subgrid div and
then convert the table to the subgrid.
To access to the item of data, which corresponds to the expanding row one can use $(this).jqGrid("getLocalRow", rowid). The return data is the item of original data. It has loc property which we need. To be able to use the data as input for jqGrid we create array with the element. I's mostly all, what one have to know to understand how the above code works.
You can add call of .jqGrid("filterToolbar") to be able to filter the data or to add pager: true (or toppager: true, or both) to have the pager and to use rowNum: 5 to specify the number of rows in the page. In the way you can load relatively large set of data in the grid and the user can use local paging, sorting and filtering. See the demo which shows the performance of loading, sorting and filtering of the local grid with 4000 rows and another one with 40000 rows. All works pretty quickly if one uses local paging and not displays all the data at once.

I use datatables.net for all my "more complex than lists"-tables. I It's a very well kept library with loads of features and great flexibility.
In the "con" column I would say that it's so complex that it probably has quite a steep learning curve. Although the documentation is great so there is always hope for most problems.

Dynamically adding options and optgroups in Select2

With the following html:
<input type='hidden' id='cantseeme'>
I'm having no trouble creating a Select2 control dynamically, and adding my options:
// simplified example
var select2_ary = [];
select2_ary.push({
id : "one",
text : "one"
});
select2_ary.push({
id : "two",
text : "two"
});
$("#cantseeme").select2({
placeholder : "Pick a number",
data : select2_ary
});
However, I can't seem to figure out how to add optgroups this way. I found this discussion on github, and this article on a blog, but the former doesn't seem to discuss dynamic optgroup additions and I simply can't make any sense of the latter.
Anyone have any ideas?

I found the answer buried inside the github discussion you linked to, the object structure for optgroups is as follows:
{
id : 1,
text : 'optgroup',
children: [{
id : 2,
text: 'child1'
},
{
id : 3,
text : 'nested optgroup',
children: [...]
}]
}
Demo fiddle

Yes, koala_dev's answer above is correct. However, if you do not want option group headers to be selectable tags, then remove the "id" field from headers that you pass into select2. Children[ ] items still need an "id" field to be selectable. For example:
// `Header One` Is Selectable
[{
id : 0,
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]
// `Header One` Is Not Selectable
[{
text : "Header One",
children : [{
id : 0,
text : "Item One"
}, {
...
}]
}]

CKEditor appears gray in internet explorer

I visited a lot of websites to find a solution.
My editor works in almost every browser except internet explorer.
In internet explorer the space(textarea) to change the content isnt showing up, the rest of the editor is visible. Does anyone knows a solution? I didn't find it on the internet.
Updating the editor maybe is a solution, but it took me a while to configure it together with ckfinder, so I'm afraid that it ckfinder isn't working after an update.
The editor worked a few months ago, but I didn't work on the website for a few months.
<textarea id="textarea" name='text' class='editor'></textarea>
To show my editor.
<script>
$(document).ready(function(){
$('textarea.editor').ckeditor(
function() {
/* callback code */
},
{
language : 'nl',
uiColor : '#e9eaee',
toolbarStartupExpanded : false,
toolbar :
[
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks', 'Source'] },{ name: 'document', items : ['DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar' ] }
],
height: '225',
extraPlugins : 'tableresize'
} );
});
</script>

Try to disable your add-ons, and if the problem was solved, enable add-ons one by one to find the one which cause the problem.

Based on the comments on the previous answer, the problem is with IE10, right? Sounds like a version issue. IE10 is not supported for CKFinder 2.2.2, so you could try updating CKF.
It would help if you include the CKFinder, CKEditor and Browser versions in the question :).
It could be a config or general JS issue too - do you have a JSfiddle or other link we could check out? Also, have you checked what the Developer tools for IE10 reports, there could very well be informative errors there.

SimpleCart additional information with custom columns

I am using the SimpleCart Javascript Library.
I want to add an id to each product and when the user proceeds to checkout,
these id's would be sent as well.
Instead of these columns, for example:
Name Price
book 5$
I want to have a Product Id column include as well:
Id Name Price
3 book 5$
I've tried inserting the id into the options, but I had no luck doing so.
Can someone show me a detailed example doing so?

This can be set up like this:
In your simplecart set up under "cartColumns" add
{ attr: "id" , label: "ID" }
Like this:
cartColumns: [
{ attr: "image", label: "Item", view: "image"},
//Name of the item
{ attr: "name" , label: "Name" },
{ attr: "id" , label: "ID" },
//etc………
Then you can use either:
<span class="item_id">ID:1</span>
or like this:
simpleCart.add({ name: "Shirt" , price: 4, id: 1 });
and it should show up in your columns.

Based on the documentation examples for item.get and item.set you should be able to set your own columns.
var myItem = simpleCart.add({ productId: "A12", name: "Awesome T-Shirt" ,
price: 10 , size: "Small" });
myItem.get( "productId" ); // A12
myItem.set( "productId" , "C54" );
myItem.get( "productId" ); // C54
Also, each item has a built-in ID: simpleCart.Item.id()
var myItem = simpleCart.add({ name: "Shirt" , price: 4 });
myItem.id(); // "SCS-1"
You could also create a custom view for your own ID.
CREATING YOUR OWN VIEW
You can create custom views for the cart by
setting the view to a function instead of a string. The function
should take two arguments, the item for that row, and the column
details you specify.
{ view: function( item , column ){
// return some html
} ,
label: "My Custom Column"
}