I have a handsontable with data that would have a property that indicates a specific status (hasShipped if specifics are required). Is there a way to remove the "remove row" button from a row where the hasShipped value is true?
Table definition, in case it's important:
var hot = new Handsontable(container, {
data: hotData,
dataSchema: { Product: null, UOM: "EA", QtyShipped: 0 },
columns: [
{
data: 'Product',
title: "Product",
type: "text",
readOnly: isShipped
},
{
data: 'UOM',
title: "UOM",
readOnly: true,
type: "text"
},
{
data: 'QtyShipped',
title: "Qty<br />Shipped",
type: "numeric",
readOnly: isShipped
}],
allowInsertRow: true,
//allowRemoveRow: true, //TODO: Depending on mode and row
autoWrapCol: true,
colHeaders: true,
columnSorting: { column: 0, sortOrder: false },
contextMenu: ['undo', 'redo', 'row_above', 'row_below', 'remove_row'],
currentColClassName: 'activeCol',
currentRowClassName: 'activeRow',
dropdownMenu: true,
fixedColumnsLeft: 1,
outsideClickDeselects: false,
readOnly: <%= IsWatchList.ToString().ToLower() %>,
removeRowPlugin: true,
rowHeaders: true,
stretchH: "all", //used in conjunction #hot-container styling to make the table take up 100% of parent width
});
Given that I was already implementing the code to remove a row and had altered the code to insert my own custom styled button, I knew where the buttons were being injected.
Thanks to MonkeyZues's comment, I looked at the code where I was injecting the remove row button and, depending on the value of the HasShipped property, was able to inject (or not) the required row buttons
if (jsonObject != "") {
if (jsonObject.LoadDetails[row]["HasShipped"] == true) {
div.appendChild(btnNode);
elem.appendChild(div);
}
}
Related
I am using bootstrap-table and data is loading from URL. In the table I have setup checkboxes for ID column. My problem is that the all checkboxes are checked when the page is load. I found this question here, but its not help me to fix my issue.
This is my JS:
var $_bsTable = $('#table')
$_bsTable.bootstrapTable({
toggle: "table",
url: "./includes/view_suppliers.inc.php",
columns: [{
field: 'sid',
checkbox: true,
printIgnore: true,
//width: 64
},
{
field: 'image',
title: 'Image',
sortable: false,
align: 'center'
},
{
field: 'name',
title: 'Supplier Name',
sortable: true
},
{
field: 'address',
title: 'Address',
sortable: true
}
],
icons: {
columns: 'fa-th-list text-orange-d1',
detailOpen: 'fa-plus text-blue',
detailClose: 'fa-minus text-blue',
export: 'fa-download text-blue',
print: 'fa-print text-purple-d1',
fullscreen: 'fa fa-expand',
search: 'fa-search text-blue'
},
toolbar: "#table-toolbar",
theadClasses: "bgc-white text-grey text-uppercase text-80",
//clickToSelect: true,
checkboxHeader: true,
search: true,
searchAlign: "left",
//showSearchButton: true,
sortable: true,
//detailView: true,
//detailFormatter: "detailFormatter",
pagination: true,
sidePagination: 'client',
// serverSort: false,
paginationLoop: false,
showExport: true,
showPrint: true,
showColumns: true,
showFullscreen: true,
mobileResponsive: true,
//checkOnInit: true,
})
Hope somebody may help me out.
Are you maybe giving a value to checkboxes in your HTML?
From official documentation:
If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the checkbox by use an formatter (return true to check, return false to uncheck).
Here you can see an example: https://examples.bootstrap-table.com/#column-options/checkbox.html
Using Tabulator 4.4.3
When filtering the checkbox normally, everything works
If I set a filtered checkbox to true on a column, it works:
headerFilterEmptyCheck: function (value) {
return !value;
},
However, with using persistentFilter: true and I reload the page, that checkbox filter will only display true=true, never false or null when unchecked (just return 0 rows)
My Column Definition
{
title: "do it?",
field: "hasToDoIt",
responsive: 0,
formatter: "tickCross",
formatterParams: {
allowEmpty: true,
allowTruthy: false,
tickElement: "<i class='fa fa-check'></i>",
crossElement: ""
},
headerFilter: "tickCross",
headerFilterEmptyCheck: function (value) {
return !value; //only filter when the value is true
},
sorter: "string",
headerSortTristate: true,
width: 80,
align: 'center'
},
Table Definition
new Tabulator("#" + config.Key, {
index: "_id",
reactiveData: true,
persistenceMode: true,
persistenceID: "accountsummary",
persistentSort: true,
persistentFilter: true,
autoResize: true,
layout: "fitColumns",
responsiveLayout: true,
virtualDomBuffer: 100,
headerSortTristate: true, //enable tristate header sort for all columns
data: this.state.Data,
columns: this.state.Columns,
groupBy: "Geo",
groupToggleElement: "header",
groupStartOpen: true,
sortOrderReverse: true,
initialSort: [{ column: "Geo", dir: "asc" }, { column: "Account", dir: "asc" }],
rowClick: (e, row) => {
});
}
After selecting the checkbox, reloading the page, the checkbox should show the filtered results and unchecking the box show return to show all rows
This is because persistent filters functionality only persists filters set through the setFilter function, not header filters.
how can i have a regular expression on a igTextEditor in igGrid Updating?
i tried to use validate option but it didn't worked.
$("#schedulerTable").igGrid({
columns: $scope.schedulerColumns,
width: "87%",
height: "300px",
fixedHeaders: true,
autoGenerateColumns: false,
autofitLastColumn: true,
autoCommit: true,
renderCheckboxes: true,
responseDataKey: "results",
dataSource: $scope.schedulerData,
updateUrl: "",
primaryKey: 'Id',
features: [
{
name: "Updating",
generatePrimaryKeyValue: function (evt, ui) {
nextPrimarykey -= 1;
ui.value = nextPrimarykey;
},
enableAddRow: true,
enableDeleteRow: true,
editMode: "row",
columnSettings: [
{
columnKey: "Id",
editorType: "numeric",
editorOptions: {
readOnly: true
}
}, {
columnKey: "Time",
editorType: "text",
editorOptions: {
},
validatorOptions: {
regExp: /^[a-zA-Z]{1}[a-zA-Z0-9_\.\-]*\#\w{2,10}\.\w{1,10}$/,
onblur: true,
onchange: true
},
required: true,
validation: true,
defaultValue: "00:00"
},
{
columnKey: "Mo"
},
{
columnKey: "Tu"
},
{
columnKey: "We"
},
{
columnKey: "Th"
},
{
columnKey: "Fi"
}]
}]
});
i want to achive a time picker in the Time Column but that doesn't exist so i try to get only time in the textEditor by regular expression.
the grid gets loaded with columns named Time, Mo- Friday.
if you click on add in grid you can click in the input field and fill your time. the time should get validated before clicking on done and show a error message.
to see how the table look like: https://codepen.io/ablablabla/pen/PJLbJz
The lack of validation is because the validatorOptions belong to the editorOptions (as those get passed down to whatever editor you choose as provider). The validation: true only gets some defaults, which really won't do much for a text field besides the required.
And then the RegExp option (which is for an email in the snippet above as far as I can tell) has been pattern since 15.2 :) So in the end for that time column you can try:
//...
editorOptions: {
validatorOptions: {
pattern: /^\d{1,2}\:\d{2}$/,
onblur: true,
onchange: true
},
},
//..
Here's an updated codepen: https://codepen.io/anon/pen/YrgYxj
Edit: Or if you want to set the error message:
//...
editorOptions: {
validatorOptions: {
pattern: {
expression: /^\d{1,2}\:\d{2}$/,
errorMessage: "Time should match a pattern like 00:00"
},
onblur: true,
onchange: true
},
},
//..
Depending on your goals you could also use a Mask Editor or a Date Editor as provider. Also the obligatory docs link: https://www.igniteui.com/help/iggrid-updating
P.S. Bind to an empty array to avoid the error for that first row that has no values and more importantly primary key.
I am using this html code for Keno UI grid
function loadPhoneGrid(salesRepsId){
$("#phone-grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "operations/get_phones_sales_reps.php?salesRepsId="+salesRepsId,
type: "GET"
},
update: {
url: "operations/edit_phone_number.php?salesRepsId="+salesRepsId,
type: "POST"
},
destroy: {
url: "operations/delete_phone.php",
type: "POST"
},
create: {
url: "operations/add_phone.php?salesRepsId="+salesRepsId,
type: "POST",
},
},
schema: {
data:"data",
total: "data.length", //total amount of records
model: {
id: "PhoneId",
fields: {
PhoneType: { defaultValue: { PhoneTypeId: 1, PhoneTypeName: "Work"} },
PhoneNumber: { type: "string" },
IsMainPhone: {type: "boolean", editalbe:true},
}
}
},
pageSize: 5,
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: false,
groupable: false,
batch: true,
toolbar: ["create", "save", "cancel"],
editable: true,
columns: [
{
field:"PhoneType",
title:"Type",
editor: PhoneTypeDropDownEditor,
template: "#=PhoneType.PhoneTypeName#"
},
{
field: "PhoneNumber",
title:"Phone Number",
},
{
field: "IsMainPhone",
title:"Is Main",
width: 65,
template: function (e){
if(e.IsMainPhone== true){
return '<img align="center" src ="images/check-icon.png" />';
}else{
return '';
}
}
// hidden: true
},
{ command: "destroy", title: " ", width: 90 },
],
});
}
The code in the server side is (add_phone.php)
<?php
require_once("../lib/Phone.php");
$phone = array();
foreach($_POST as $name => $value){
$phone[$name] = $value;
}
Phone::AddPhoneNumber($_GET["salesRepsId"], $phone);
?>
For the first time, I added a new record. add_phone.php is calling once and everything is working fine. For the second time (with out refresh the page) when I try to add a new record, add_phone.php is called twice. One of them contains the first record which has been added to database before and the second is the new the data.
in the result I have 3 records ( 2 same data of first insert) and one new.
This an example to make it clear ( inspect the post request with firebug)
first click on save button (false, (111) 111-1111, 4,Fax) // after I enter this phone (111) 111-1111
second click on save button (false, (111) 111-1111, 4,Fax) in addition to (false, (222) 222-2222, 3,Work) // after I added this (222) 222-2222
Any help ??
May be your ajax request raise an error. You can see it by subscribing to the error event of your datasource.
In case of error, the data are not synchronized in your datasource. In your case, I think your dataitem stay in "dirty mode" so the datasource try to insert them for each synchronization...
I've got some code that, when switching which row is selected, it triggers a save of the previously selected row.
The row is being successfully saved without any problem, however the successfunc isn't being called at all - my console.log output never shows up, and the code in this function isn't being run. I also tried specifying the function as the aftersavefunc, but couldn't get that to work either.
Seems like a simple syntax problem, but I can't quite get it right. Am I not specifying this function properly?
As a side note, I realize that reloading the entire grid after a row save seems like overkill, but in the context of where this particular piece of code is, within the larger structure of my app, this snippet of code is a special case.
The full jqGrid code is:
var lastSelectedMainGridRowID = 0;
var lastSelectedSubGridRowID = 0;
var translationsFeed = "/update/translations/ajax/translations_feed.php";
var translationsEdit = "/update/translations/ajax/translations_edit.php";
var translationsSubGridFeed = "ajax/translations_subgrid_feed.php";
var translationsSubGridFeedEdit = "ajax/translations_subgrid_feed_edit.php";
$(document).ready(function () {
$("#translationsList").jqGrid({
caption : "Translations",
datatype : "xml",
url : translationsFeed,
editurl : translationsEdit,
mtype : "get",
pager : "#translationsPager",
rowNum : 20,
autowidth : true,
sortname : "phrase",
sortorder : "asc",
viewrecords : true,
multiselect : false,
hidegrid : false,
height : 300,
altRows : true,
rownumbers : true,
toolbar : [false],
loadComplete: function(data) {
jQuery("#translationsList").setSelection (0, true);
},
colNames : ["phrase_id", "translation_id", "language_cd", "Phrase", "Translation", "Modified", "Created", "Active"],
colModel : [
{ name : "phrase_id", index : "phrase_id", sortable : true, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "translation_id", index : "translation_id", sortable : false, search : false, editable: true, edittype : "text", editrules: { edithidden: true }, hidden: true},
{ name : "language_cd", index : "language_cd", sortable : true, search : true, editable: true, edittype : "text", editrules: { edithidden: true, required : true }, hidden: true },
{ name : "Phrase", width:200, index : "phrase", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: true } },
{ name : "Translation", width:200, index : "translation", sortable : true, search : true, editable: true, edittype : "text", editrules: { required: false } },
{ name : "Modified", width:100, index : "modify_dt", sortable : true, search : true },
{ name : "Created", width:100, index : "create_dt", sortable : true, search : true },
{ name : "Active", width:20, index : "active", sortable : true, search : true, editable: true, edittype: "checkbox", editoptions: {value:"Yes:No", checked: true} }
],
onSelectRow: function(id) {
jQuery('#translationsList').jqGrid('saveRow', lastSelectedMainGridRowID);
jQuery('#translationsList').jqGrid('editRow', id, true);
lastSelectedMainGridRowID = id;
},
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url: translationsSubGridFeed + "?phrase_id=" + row_id,
editurl: translationsSubGridFeedEdit,
datatype: "xml",
colNames: ['phrase_id', 'translation_id', 'language_cd', 'Translations', 'Language', 'Active'],
colModel: [
{name:"phrase_id", index:"phrase_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"translation_id", index:"translation_id", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"language_cd", index:"language_cd", sortable: false, editable: true, edittype : "text", editrules: { edithidden :true }, hidden: true},
{name:"Translation", index:"translation", sortable: true, editable: true, edittype:"text", width:589},
{name:"Language", index:"language_disp", sortable: true, editable: false, width:250},
{name:"Active", index:"active", sortable: true, editable: true, edittype:"checkbox", editoptions:{value:"Yes:No", checked: true}, width:80}
],
height: "100%",
rowNum:20,
sortname: 'language_cd',
sortorder: "asc",
onSelectRow: function(id) {
jQuery("#"+subgrid_table_id).jqGrid('saveRow', lastSelectedSubGridRowID, function(response) {
console.log("Data: " + response.responseText);
return false;
});
jQuery("#"+subgrid_table_id).jqGrid('editRow', id, true);
lastSelectedSubGridRowID = id;
}
});
}
});
Perhaps I don't need to use saveRow. In this case, what I'm doing is:
When you click on a row, it becomes editable
If you then click on a second row, the first row is saved (and no longer selected), and the new second row then becomes editable. Similar to saving a row "onBlur", so to speak.
I don't see the place of code where responseData variable are defined. The code responseData[0] should throw an exception, so the console.log("Data: " + responseData[0]); will not display any data. The line of code should be probably fixed as
console.log("Server response: " + result.responseText);
UPDATED: Without having the data for the both grid and for example the subgrid corresponds the first row one can't debug the code. Reading is not so effective. If you posted the test data (two XML files) I could try to localize the problem.
An important error is that you only declare subgrid_table_id variable, but not assign a value for it. Typically one construct an unique id name subgrid_table_id based on the subgrid_id. For example
var subgrid_table_id = subgrid_id+"_t";
instead of var subgrid_table_id; only.
Nevertheless some things I find a little suspected:
I don't understand why you return return false; from the successfunc. It means that you interpret the server response as an error and the normal actions on successful server response should be interrupted. I would recommend you additionally use errorfunc parameter of saveRow. In my server code the server always return error HTML status code in case of the server error. So I never need use successfunc and use aftersavefunc and errorfunc only.
The subgrid has many column which already exist in the corresponding row of the parent grid. The potential problems here are not only spending of additional memory. You don't posted the grid data and so I don't know what values you use as rowids for grids. It is very important to have no id duplicates on the HTML page. So you should be careful in the subject. Why you need ? Probably you can just use extraparam parameter of saveRow and editRow instead of the usage of phrase_id, translation_id and language_cd hidden columns having editable: true, editrules: { edithidden :true }, hidden: true properties?