We Keep Coding

How to add empty data row in Datatable using angular2+?

I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.

I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.

You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts

There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}

jqGrid columns order should be user specific

In my project, I have a scenario in which a user can drag and drop jqGrid columns. When the same user visits the site again, we have to display the jqGrid column order how he had modified in his previous visit. So, the order of jqGrid columns should be user specific. Can anyone help me how to achieve this? (and I need return type and format of jQgrid column).

The implementation of behavior which you need is not very simple. I would recommend you to save the changed column order in localStorage like it described in the answer and this one. Try the old demo using Column Chooser button first.
To save changed column order you need to register the callback which jqGrid should call after drag&drop of column headers. One can use update callback of sortable option defined as object (instead of true). So the code will be like
var $grid = $("#list"); // your grid
...
$grid.jqGrid({
... // all other option of jqGrid
sortable: {
update: function (perm) {
saveColumnState.call($grid, perm); // save permutation
}
}
});
The function saveColumnState are described in the referenced above answers and are included in the referenced above demo too.

Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch

I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers

Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});

jQuery not all tables rows are getting selected

I am working on the enterprise application where I need to remove all the classes of a specific table rows.
I am using following jQuery selector for selecting all the rows
var bodyTable = $(".ui-jqgrid-bdiv table tbody");
var bodyRows = $(bodyTable).find("tr");
The HTML for the div in which table resides is in the following jsFiddle
jsFiddle
In jsFiddle it works as expected and returns all 11 rows but in the application it only selects the first row and the following code returns 1
$(bodyTable).find("tr").length;
I am not able to determine what could be stopping it.
Any pointers why jquery would only select first row?

if you want to execute something on each row ... try this
$(bodyTable).find("tr").each(function(){
//operation on each row
}

Well, It turned out be a case of putting the code in the wrong event.
Our application is event driven application and I was writing the code at initial event when the UI is being displayed.
#shhade slman comment made me look at the other events and after putting the same code in the data rendering event worked as expected. I knew it is something inside the application as the code in jsFiddle was working.
Thanks all for your input that nudged me into the right direction.

editable datagrid with ability to clone individual rows

Im looking for a way to render an html table as an editable datgrid, with the ability to clone individual rows. I dont need to save any of the changes made, just superficially edit the cells because i then use a jquery plugin to scrape the table as is on screen and save it.
Ive tried jeditable, but its designed for posting the output of its edits to a page, not just superficially making the changes.
Ideally, i could control what types of inputs are displayed onclick based on what column they are on. The table cells are unnamed. If they need to be named, there are a total of 34 columns, so i would need to know how to name those individually.
Thanks in advance.

Jeditable's target can be a function (see the "Submitting to function instead of URL" section of the jeditable homepage) - you could pass an empty handler and use it.
[Edit]
The handler should return a string (that will be displayed on the page)
(taken from the example page)
$('#test').editable(function(value, settings) {
return(value);
}, {
type : 'textarea',
submit : 'OK',
});
It work nicely, I just tried it out.
[/Edit]