Delete rows from Kendo Grid with Pagination - javascript

I have a kendo grid(with pagination Enabled) with some entries. Say, I have 5 pages and I have selected(clicked on checkbox) one row from each page and then clicked on top level action DELETE. I am not able to figure out how to delete the entries from the grid and the data source?
I tried below code, which deletes the entries from the page which is visible in the grid (on screen)
var grid = $("#grid").data("kendoGrid");
var userSelectionInfo = usersService.getUserSelectionInfo();
for(var userName in userSelectionInfo) {
if(userSelectionInfo[userName]) {
var selector = '#' + userName+ '_actions';
grid.removeRow($(selector).closest('tr'));
}
}
I tried one more approach:
I created an array of objects which will remain after deletion operation from the original array of objects and then added into the grid data source.
var newData = [];
var userSelectionInfo = usersService.getUserSelectionInfo();
for(var i = 0; i < users.length; i++) {
if(users[i].userName&& !userSelectionInfo[users[i].userName]) {
newData.push(users[i]);
}
}
loadUsersIntoGrid(newData);
Is there any better approach or kendo API which I am missing?
Thanks in advance.

You can delete from the dataSource instead of grid.First push the id of each selected item to an array, say DeleteList. Then you can delete from the datasource on clicking the top DELETE.
for(i=0; i<= DeleteList.length; i++)
{
grid.dataSource.remove(grid.dataSource.get(DeleteList[i]));
}

Related

Custom function on table column reordering --> change underlying table model

I use SheetJS to upload an excel sheet to a ui.table. While uploading I add a technical ID to my column names, which I will need later on in my project. This is how I am adding the technical ID:
getColumnNames: function(worksheet, aData) {
var firstRow = aData[0];
var oColumns = [];
var cells = Object.keys(worksheet);
for (var i = 0; i < Object.keys(firstRow).length; i++) {
var columnName = Object.keys(firstRow)[i];
var technicalName = "COL" + ('0' + (i+1)).slice(-2);
oColumns.push({
columnId: columnName,
technicalId: technicalName
});
}
return oColumns;
},
When creating the Model, I bind both the columnId and the technicalId to each column.
My users should have the option to reorder the table columns in order to do a mapping to another table. (Context here is not really relevant) So basically there is another table below my uploaded table and a user should be able to reorder the columns of the "uploadTable" to match them with the table below.
Now in order to do a proper mapping, my technical ID has to be adjusted after the reordering is done. Therefore I'd like to add a function that's being executed after the user clicked a "refresh" button.
This function should adjust the technical columnNames. --> E.g. data gets uploaded, column on position 1 has the technical ID "COL01" now it gets dragged to position 2 --> technical ID should change to COL02 and vice versa.
I believe, the only way to do this is by accessing the DomRef of the table, because that's the only place where the actual current table structure is stored, but I'm not exactly sure how I would proceed.
My reordering function only gets the data so far:
onReorder : function() {
var table = this.getView().byId("uploadData");
var currentStructre = table.getDomRef();
},
I would appreciate any hints towards this. If anything is unclear, I'm happy to explain it!
sap.ui.table.Table allows its columns to be reordered by dragging and dropping, and the event columnMove is fired after.
One could keep track of and update some sequence label (e.g. ids) using an approach like this:
Remember ids (for example column label as id):
ids = oTable.getColumns().map(oColumn => oColumn.getAggregation('label').getText())
Update ids:
oTable.attachColumnMove(function(oEvent) {
var from = oEvent.getParameter('column').getIndex();
var to = oEvent.getParameter('newPos');
var name = names.splice(from, 1);
names.splice(to, 0, name);
// Then write new ids to model;
})

jqGrid: all rows in “inline edit mode” by default, save row data on focus out

I have a jqGrid where a row is editable on click (i.e. 'editRow' inside 'OnSelectRow' works fine). But my requirement is to "load the grid with ALL ROWS IN EDIT MODE by default (Inline edit)", so there should not be any need for me click individual rows.
so i implemented following code:
loadComplete: function () {
var $this = $(this),
ids = $this.jqGrid('getDataIDs'),
i,
l = ids.length;
for (i = 0; i < l; i++) {
$this.jqGrid('editRow', ids[i], true);
}
}
but i cant save row data on focus out.can any one please suggest me a way to do it.

How to tell if a row contains cells with textbox with javascript

I have a table that is built dynamically from a user specified query to a database and I want to give the user the option to edit the data from the generated HTML table. When the user double clicks on the row containing the data they want to edit, I have a new row appear underneath it with textboxes for them to submit new values. Right now, when the user clicks double clicks two rows, both rows of textboxes remain in the table and I want to delete the first row before the second shows up. My question is, what is a good was to find table rows containing textboxes so that I can perhaps use JavaScript's deleteRow() function?
I'm generating rows like so:
function editRow(row) {
var table = document.getElementById("data");
var newRow = table.insertRow(row.rowIndex + 1);
var cell;
for (var i = 0; i < row.childNodes.length; i++) {
cell = newRow.insertCell(i);
textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = row.childNodes[i].innerHTML;
textBox.style.textAlign = "center";
textBox.style.width = "90%";
cell.appendChild(textBox);
}
}
and the only way I can I can think of doing it is something like (pseudo code):
for all table rows
if row.childNodes.innerHTML contains 'input'
deleteRow(index)
Thanks for the help
You could use jQuery. Assuming row is a DOM element, this should work:
var textBoxes = $("input:text", row);
i guess the easiest option would be to add the created rows to an array. This way you simply have to delete the rows inside the array and not iterate through the whole table.
I ended up doing the following:
function editRow(row) {
var table = document.getElementById("data");
clearExistingTextBoxes(table);
...
}
function clearExistingTextBoxes(table) {
var tBoxRow = table.getElementsByTagName("input");
if (tBoxRow.length > 0) {
tBoxRow = tBoxRow[0].parentNode.parentNode;
table.deleteRow(tBoxRow.rowIndex);
}
}
Assuming I'm only going to be clearing one row at a time.

How to delete selected row in titanium tableview?

i make simple application on titanium using table view. I have some custom row with checkbox on the left side. Here's my code :
var pickingData = [];
for (var i = 0; i<25; i++){
var row = Ti.UI.createTableViewRow({
className:'forumEvent', // used to improve table performance
backgroundSelectedColor:'cyan',
layout:'vertical'
});
if (Titanium.Platform.osname === 'android'){
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
value:false,
left:10
});
row.add(checkbox);
}
var rndMatNo = (randomInt(50000)+10000) //randomInt is my random number function
var lblMatNo = Ti.UI.createLabel({
realValue:rndMatNo,
text:'Mat No : ' + rndMatNo,
font:{fontFamily:'Arial', fontSize:DefaultFontSize, fontWeight:'bold'},
left:10,
color:'#222'
});
row.add(lblMatNo);
pickingData.push(row);
}
var tempPickingTable = Titanium.UI.createTableView({
data:pickingData,
editable: Titanium.Platform.osname === 'iphone' ? true : false,
name:'Picking table'
});
tempPickingTable.addEventListener('longclick',function(e){
for (var i=0, length=tempPickingTable.data[0].rows.length;i<length;i++){
if (tempPickingTable.data[0].rows[i].children[0].value === true){
tempPickingTable.deleteRow(i); //Still error when i'm using delete row because index out of bound
}
}
});
all i want is delete the row based on checkbox when it checked. i've tried looping for every row and check the checkbox and then delete the row, but it still give me error index out of bound.
has anyone know how to do that? thanks in advance..
There are some bugs in deleting rows from TableView in Android. You can try to create a new data array with all the rows except the ones that have been checked and then set the data for the tableview again.
You're iterating forward through the array, and deleting the rows, which modifies the array, so it makes sense that you'd go out of bounds. Have you tried iterating backwards?
tempPickingTable.addEventListener('longclick',function(e){
for (var i=tempPickingTable.data[0].rows.length;i>=0;i--){
if (tempPickingTable.data[0].rows[i].children[0].value === true){
tempPickingTable.deleteRow(i);
}
}
});

javascript dropdown to change all dropdown in table

I have a requirement of changing all dropdown values in all the rows in a tale based on master dropdown. say someone selects "value 2" in dropdown1, dropdown2 values in all the rows in the table should show "value2".
function change(){
var cid = document.frm.locdropdown.selectedIndex;
document.frm.locdropdown2.selectedIndex = cid;
}
is the java script I use to change it but this changes only first row.
please help..
From your example code it looks like you've given the same ID to all your locdropdown2 elements? Maybe you should post an example of your table HTML. It's normal practice to give unique IDs to elements, so you may want to test the NAME attribute instead, but anyway something like the following should work:
function change() {
var cid = document.frm.locdropdown.selectedIndex;
var inputs = document.getElementsByTagName("input");
for (var i=0, l = inputs.length; i < l; i++) {
if (inputs[i].id == "locdropdown2")
inputs[i].selectedIndex = cid;
}
}
Another option is to loop through each row in the table. The following example assumes your locdropdown2 inputs are the only thing in the third column, but you can adapt to suit your actual layout:
function change() {
var cid = document.frm.locdropdown.selectedIndex;
var tableRows = document.getElementById("yourTableId").tBodies[0].rows;
for (var i=0, l=tableRows.length; i < l; i++) {
tableRows[i].cells[2].firstChild.selectedIndex = cid;
}
}
Note: I haven't actually tested any of that code, but it should be more than enough to get you started and you can tweak as needed. (You can use Google to learn about tBodies, rows, cells, firstChild, etc.)

Categories