We Keep Coding

sapui5 sap.ui.table How to uncheck the checkbox of table row programatically

Im facing a small issue in sap.ui.table. I want to uncheck the checkbox of the table if i delete the record. Here im able to delete the record, But the selection of checkbox was not getting cleared and it is appending for the below row.
In the above image if you see, if i delete "Rani Test", Rani Test row will get deleted but checkbox will get selected to "Surya Test". Please check the below code..
onPressDelete: function(evt) {
var deleteRecord = evt.getSource().getBindingContext('familyDetailsModel').getObject();
var tableId = this.getView().byId("familyDetailsModel");
var index = tableId.getSelectedIndex();
//this.getView().byId("familyDetailsModel").removeSelectionInterval(index,1);
for (var i = 0; i < this.getView().getModel('familyDetailsModel').getData().length; i++) {
if (this.getView().getModel('familyDetailsModel').getData()[i] == deleteRecord) {
this.getView().byId("familyDetailsModel").removeSelectionInterval(i, i);
this.getView().getModel('familyDetailsModel').getData().splice(i, 1);
this.getView().getModel('familyDetailsModel').refresh();
break;
}
}
},
In the above code, splice() method im using to delete the row which is working perfectly. But checkbox is not getting deselected. To uncheck the checkbox im trying with removeSelectionInterval() method. But it is not behaving as expected.
Can someone please help me to sort this issue
Thanks in advance

This line var index = tableId.getSelectedIndex(); returns -1 in your scenario. Furthermore, to delete one line you need to specify removeSelectionInterval(index,index);
The second parameter is not the number of positions to delete. Is the indexTo, so you want to remove from the selected row, to the selected row.
Getting the row index from the event will work better for you. Try this:
var iIndex = oEvent.getSource().getParent().getIndex();
var oTable = this.getView().byId("__table0");
oTable.removeSelectionInterval(iIndex, iIndex);
Here the snippet: https://plnkr.co/edit/wkMc4LcjYYS3K73ClYUc?p=preview

Kendo grid - How to get access to Parent row model on add / edit child row (detail grid)

I am using Kendo hierarchical grid for displaying Categories in my Parent (primary) grid and Products as child rows (detail grid).
Here is my DEMO.
I am using a custom template for Add / Edit of my Products.
In the pop up form I want to display the parent Category name and some of its details in the lables above the form fields for Product.
Now on every Product add or Edit, in the form I want to show up the details of the Parent Category and also want to dynamically submit the parent CategoryId with the product create / update request
In my below JS code, I can access the current detail grid wrapper by using below code, but can't figure out how can I access the parent row model details
.....
.......
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
....
......
//ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS
edit: function(e) {
var detailGridWrapper = this.wrapper;
//Want to get Parent Category model
//Retrieve some attributes out of the Category model, so that I can display them in the popup Add / Edit Product form
........
.....

With $(detailGridWrapper).closest("tr").prev() you can get the parent grid current row, the one user have expanded. Then with $("#grid").data("kendoGrid").dataItem() you can get the parent grid current model:
var detailGridWrapper = this.wrapper,
mainGrid = $("#grid").data("kendoGrid"),
$parentGridTr = $(detailGridWrapper).closest("tr").prev(),
parentData = mainGrid.dataItem($parentGridTr);
console.log(parentData);
Updated demo
Note that when you transverse through your closest TR, you got the detail row instead of the real data row actually. So you need to get the data row - that is when .prev() comes in - to get the right row for .dataItem().

Here is the DEMO of how I implemented it finally:
JS code snippet:
.....
.......
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
....
......
//ON CLICK ADD/EDIT BUTTON FOR CHILD ROWS
edit: function(e) {
//alert('clciked');
var detailGridWrapper = this.wrapper;
// GET PARENT ROW ELEMENT
var parentRow = detailGridWrapper.closest("tr.k-detail-row").prev("tr");
// GET PARENT GRID ELEMENT
var parentGrid = parentRow.closest("[data-role=grid]").data("kendoGrid");
// GET THE PARENT ROW MODEL
var parentModel = parentGrid.dataItem(parentRow);
// Retrieve Parent Category data out of the model
var CategoryId = parentModel.CategoryId;
var CategoryName = parentModel.Name;
// HERE e.container IS THE ADD/EDIT POPUP FORM ELEMENT
e.container
.find("#span_CategoryId") // get the span element for the field
.html(CategoryId) // set the value
.change(); // trigger change in order to notify the model binding
e.container
.find("#span_CategoryName") // get the span element for the field
.html(CategoryName) // set the value
.change(); // trigger change in order to notify the model binding
}

I'm a little late on this. For me, this worked nice and clean.
Maybe it will be still helpful for someone.
e.data
function detailInit(e) {
//Right here
var CategoryId = e.data.CategoryId;
var parentEvent = e;
$("<div/>").appendTo(e.detailCell).kendoGrid({
edit: function(e) {
//Or here
var CategoryId = parentEvent.data.CategoryId;
}
});
}

How to refresh datatable column data

I use data table plugin with table as data source. I have to change some column value via javascript when the user types in some numbers into an input (this input is part of the table too and I have to export this values to). It is working well but when I want to export the table the columns witch was changed with javascript is not displayed in the exported file.
I think the problem is that I have not refreshed the datatable plugin. Is this correct? If yes how do I refresh the datasource? If no what can be the problem and how can I solve it?
I tried the refresh() method (var dataTableObject = $(this).parents('table').dataTable(); dataTableObject.refresh();) and the $(this).parents('table').dataTable() but is not working.
Edit: Here is how do I change the cell value:
$item.find('input.quantity-coefficient').each(function (i, d) {
$(d).off('change').on('change', function () {
var multiplier = $(this).val();
//var dataTableObject = $(this).parents('table').dataTable();
$($(this).data("row-price-info-class")).each(function (i, d) {
var priceContainer = $(d);
var price = parseFloat(priceContainer.data('price-value'));
var priceInfoRatioContainer = $(priceContainer.data("ratio-input-class"));
if (multiplier * price == 0) {
priceInfoRatioContainer.closest("td").addClass("no-euro");
priceInfoRatioContainer.html(" ");
} else {
priceInfoRatioContainer.closest("td").removeClass("no-euro");
priceInfoRatioContainer.html(localizeNumber(multiplier * price));
}
});
//TODO redrow the data
$(this).parents('table').dataTable().fnDraw();;
});
});

You can refresh the dataTable with fnDraw(). In your example:
$(this).parents('table').dataTable().fnDraw();

Thank you guys but I think I found the solution in this post: jquery DataTables - change value of a cell not just display value
When I tried it on the first time the problem was that I started the row numbering from 1 and not from 0.
So for the others who may have this issue to, I have to use something like this:
(this).parents('table').dataTable().fnUpdate("new value", 0, 2)
To update the cell value. Actually this is not what I asked because this is not refresh all the table, but this is a solution for me now.

on button click delete from datatable and also from array

foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!

If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}

'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}

How do I manipulate a jqGrid's search/filters?

I have a jqGrid with a navBar that has search: true and multipleSearch: true. I would like to add a button to my UI that automatically adds an additional rule to the search.
I've tried manipulating the postData for the filter directly, but values added this way don't show up in the search UI.
I've also tried accessing the search box directly using jQuery, like this:
$('#fbox_list').searchFilter().add();
$('#fbox_list .sf .data input').each(function(index) {
alert($(this).val());
});
But, in addition to feeling hackish, it only works if the user has already clicked on the search button (the fbox_list div is not constructed on load).
Has anyone else dealt with an issue like this?

For the sake of posterity, here is the hack I'm currently using. The grid has an ID of list and the pager has an ID of pager:
jQuery(document).ready(function() {
//Initialize grid.
//Initialize the navigation bar (#pager)
//Hack to force creation of the search grid.
//The filter's ID is of the form #fbox_<gridId>
jQuery('#pager .ui-icon-search').click();
jQuery('#fbox_list').searchFilter().close();
//Example button events for adding/clearing the filter.
jQuery("#btnAddFilter").click(function() {
//Adds a filter for the first column being equal to 'filterValue'.
var postFilters = jQuery("#list").jqGrid('getGridParam', 'postData').filters;
if (postFilters) {
$('#fbox_list').searchFilter().add();
}
var colModel = jQuery("#list").jqGrid('getGridParam', 'colModel');
//The index into the colModel array for the column we wish to filter.
var colNum = 0;
var col = colModel[colNum];
$('#fbox_list .sf .fields select').last().val(col.index).change();
$('#fbox_list .sf .data input').last().val('filterValue');
$('#fbox_list .sf .ops select.field' + colNum).last().val('eq').change();
$('#fbox_list').searchFilter().search();
});
jQuery("#btnClearFilter").click(function() {
$('#fbox_list').searchFilter().reset();
});
});

If you mean the filter toolbar, you can do this: (status is the col name -- so, replace "#gs_status" w/ "#gs_" + your_col_name
jQuery("#distributor_grid").jqGrid('showCol',['status']);
jQuery(".ui-search-toolbar #gs_status")
.val('ALL')
;
$('#distributor_grid').RefreshData(); // triggers toolbar

to clear inputs, selects and reset grid
$("td#refresh_navGrid").click();