How to programatically add/delete rows of a grid?

[Jason Cochran]

OK I got it!

$("[dsid='myGrid']") // this is the alternate syntax for Tiggr("myGrid")

function deleteRow(rowId) {
var rowTarget = "[dsid='myGrid'] tr:eq(" + rowId + ")";
$(rowTarget).remove();
}

ref: http://blog.tiggzi.com/2011/09/gettin...

[Jason Cochran]

In hindsight, it would be better not to use a row number, because when you delete one, the order will become useless.

Another method is this:

===============================================================

Tiggr("myGrid tbody").empty(); // empty the grid; the default is one row from the builder

var counter = 1; // keep track of our rows

function gridInsertRow(title){
var newRowNum = counter ++;
var html = "<tr id='GridAddRowObj_" + newRowNum + "'>";
html += "<td style='font-weight:bold; margin: 5px 10px 0px 0px;'>" + title + "</td>";
html += "<td><a href='#' onclick='gridDeleteRow(" + newRowNum + ");' data-role='button' data-icon='delete' data-iconpos='notext'>Delete</a></td>";
html += "</tr>";
Tiggr("myGrid").append(html);
Tiggr("myGrid").trigger('create'); // for refreshing the controls so the JQuery Mobile styles will show up
return false;
}

function gridDeleteRow(rowId) {
console.log("gridDeleteRow: " + rowId);
var rowTarget = "#GridAddRowObj_" + rowId;
console.log("rowTarget: " + rowTarget);
$(rowTarget).remove();
return false;
}

===============================================================

Put all of the above JavaScript in a file (left-hand menu - Create New JavaScript) and call it something like ModifyGrid().

Then setup a click event for custom javascript on a button in the builder:

===============================================================

var title = Tiggr("txtTitle").val(); // this is from a text input field on your screen
if(title == "") {
alert("You must enter a title!");
return;
}
gridInsertRow(title);
Tiggr("txtTitle").val("");

===============================================================

[maxkatz]

Thanks for sharing this!

[Karthikeyan Manoharan]

How to duplicate the element is it coding or in events ?

[Maryna Brodina]

Hello!

Grid component is HTML table: https://developer.mozilla.org/en-US/d..., you can clone it using jQuery method clone():
http://api.jquery.com/clone/

[Karthikeyan Manoharan]

Thanks for the information

[RobertJay]

Can someone please confirm that Jason's approach for dynamically adding grid rows is still recommended. Thanks.

[Yurii Orishchuk]

Hi Robert.

Yes this approach should work.

We have tested it and it's ok.

Regards.

[RobertJay]

Thank you very much Yurii.