I am using jquery jtable to display tables from mysql db. In one of the tables, I want user to be allowed to insert only one row. i.e. disable add new record button once first row is inserted.
Is it possible to do this?
I have following structure defined for jtable:
$('#SchoolTableContainer').jtable({
title : 'Schools List',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'name ASC', //Set default sorting
actions : {
listAction : 'ControllerAdminSchool?action=list',
createAction : 'ControllerAdminSchool?action=create',
updateAction : 'ControllerAdminSchool?action=update',
deleteAction : 'ControllerAdminSchool?action=delete'
},
fields : {
id : {
title : 'School Id',
key : true,
list : false
},
name : {
title : 'Name'
},
address : {
title : 'Address'
},
email : {
title : 'Email'
},
phone : {
title : 'Phone'
},
website : {
title : 'Website'
},
remark : {
title : 'remark'
}
}
});
$('#SchoolTableContainer').jtable('load');
Similarly can enable/disable edit & delete buttons individually for each row depending upon some condition (e.g. if name has some particular value say admin then disable delete)?
Also how to add custom button in each row (e.g. to view details I can click on a view button and can view full details of corresponding row)?
To dynamically disable the "add new record" functionality you can remove the button by defining a function handling the recordsLoaded event:
recordsLoaded: function(event, data) {
var rowCount = data.records.length;
if (rowCount>=1){
$('#tableContainer').find('.jtable-toolbar-item.jtable-toolbar-item-add-record').remove();
}
}
similarly, to keep the behavior of your table coherent you should implement the same kind of logic for the events rowInserted and rowsRemoved.
I'm aware that it's a DOM fiddling rather than controlling the behavior of jtable to stop offering the action, however hikalkan's (jtable's author) answer here leads me to believe it's the preferred approach.
For the custom buttons on each row i normally implement the first solution described here.
Related
I have data with Active & Inactive records which I displays using tabulator ver 4.6 javascript library. My requirement is to show Active data initially on page load.
I created table using below code & added initialHeaderFilter & initialFilter to dispaly an active records which works perfectly. But when I clears filter for column relation_status it does not show all data meaning here it does not show inactive records.
$('#example-table').tabulator({
layout:"fitColumns",
pagination:"local", //paginate the data
paginationSize:5,
initialHeaderFilter: [{field:'Relation_Status', value:'Active'}] ,
initialFilter:[ {field:"Relation_Status", type:"=", value:"Active"}],
columns: [
{ field: "Relation_Type", title: 'Relation Type' , headerFilterParams:{values:true}, headerFilter:"select" , headerFilterParams:paramLookup },
{ field: "Relation_Status", title: 'Relation Status' ,editorParams:{values:{"Active":"Active", "Inactive":"Inactive"}},
editor:"select", headerFilterParams:{values:true}, headerFilter:"select" },
{ field: "Related_clientCompany", title: 'Related Company' },
{ field: "Job_Link", title: 'Action ' },
]
} );
$("#example-table").tabulator("setData", RelatedCompanies);
My table looks as below when it load initially & it shows filter value "Active" in header & displays filtered data correctly but clearing filter (Below in red mark there is cross button X to clear records) does not show All records (including inactive) & it only shows Active records. What setting I am missing here ?
I used below code which solved my issue which I used after setData().
table.setHeaderFilterValue("Relation_Status", "Active");
And I commented below code
//initialHeaderFilter: [{field:'Relation_Status', value:'Active'}] ,
//initialFilter:[ {field:"Relation_Status", type:"=", value:"Active"}],
Hello I am refactoring a class in Sencha Touch, my proposal is creating dynamically segmented button in a toolbar. In the parent class I am implementing this solution:
{
xtype : 'segmentedbutton',
cls : 'filterbar-customer-segmented-button',
itemId : 'surveyFilterCustomerSegmentedButton',
pressedCls: 'filterbar-segmented-button-pressed',
items: []
}
In two different controllers I am using this to create items inside of the segmented-button:
createSegmentedFilters: function (store){
var segmentedFilterCustomer = this.getSegmentedButton();
segmentedFilterCustomer.setItems([
{
text : Survey.util.I18n.getLabelWithArgs('CustomerHeaderAll', store.getCount()),
itemId : 'showAllCustomers',
iconCls : 'user',
iconMask: true,
pressed : true
},
{
text : Survey.util.I18n.getLabelWithArgs('CustomerHeaderWithSurvey', this.filterWithSurveys(store)),
itemId : 'showCustomersWithSurvey',
iconCls : 'compose',
iconMask: true
}
]);
},
and when I load the view call to the method createSegmentedFilters but I am having a curious behaviour only I can load once the segmentedbutton, it is like the component is working in one way..
In my home-view I have two buttons with two different options, calling to two different views and controllers, toolbar is the same except the number of items inside the component segmented-button, for this weird reason is happening?
Thank you!!
I'm trying to get a grid on a website to allow the user the ability to edit cell values for only certain properties. I'm sorry if this is basic level, but I'm new to this type of advanced website design.
I've been looking around and found two previous questions that I tried to draw my functionality from:
How to find if an array contains a specific string in JavaScript/jQuery?
nggrid how can I disable/enable individual column
Combining these, I created the following code so that any row that has "Value" equal to anything in my noneditable list will not be open for the user to change:
noneditable = [ "hamburger", "fries" ]
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
/**enableCellEdit : true**/
cellEditableCondition : '$.inArray(row.getProperty(\'value\'), noneditable) == -1'
} ]
};
I'm running this, and its compiling, but all cells in column "Value" are noneditable, even the ones contained in the list (tried both > -1 and == -1 to see if I had just gotten the logic wrong, but both produce the same results). Any thoughts? And thank you in advance.
UPDATE (3/27/15):
I was unable to find the solution to this problem, instead I worked around it by just adding another property on the list of values to be displayed. My operational code is:
$scope.gridOptions = {
data : 'gridData',
enableRowSelection : false,
enableCellEditOnFocus : true,
showFooter : true,
columnDefs : [ {
field : 'name',
displayName : 'Parameter',
enableCellEdit : false
}, {
field : 'value',
displayName : 'Value',
cellEditableCondition : 'row.getProperty(\'editable\')'
}]
};
I'm just posting this code in case it helps someone else out.
I have an ExtJS form which contains several items that have the same name. I expect that when the form is loaded with the values from server-side all of those equally named components will get assigned the same relevant value.
Apparently, what happens is that only the first element from the group of equally named gets the value, others are skipped.
Is there an easy way to alter this observed behavior?
UPDATE
Below is the code of the form:
var productionRunAdvancedParametersForm = new Ext.form.FormPanel({
region : 'center',
name : 'productionRunAdvancedParametersCommand',
border : false,
autoScroll : true,
buttonAlign : 'left',
defaults : {
msgTarget : 'side'
},
layoutConfig : {
trackLabels : true
},
labelWidth : 200,
items : [
{
xtype : 'fieldset',
title : 'ASE',
collapsible : true,
autoHeight : true,
items : [ {
xtype : 'hidden',
name : 'genScens'
}, {
xtype : 'checkbox',
name : 'genScens',
fieldLabel : 'GEN_SCENS',
disabled : true
}]
}]
,
listeners : {
beforerender : function(formPanel) {
formPanel.getForm().load({
url : BASE_URL + 'get-data-from-server.json',
method : 'GET',
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
},
failure : function(form, action) {
Ext.Msg.alert("Error", Ext.util.JSON.decode(action.response.responseText).errorMessage);
}
});
}
}
});
The server response is:
{"data":{"genScens":true},"success":true}
What happens is only the hidden component gets value 'true', the disabled checkbox doesn't get checked. If I swap them in the items arrays, then the checkbox is checked but the hidden doesn't get any value.
The behaviour you see is exactly what I'd expect.
Inside a form, using the same field name multiple times -unless you use it for radiobuttons, which is not the case- is an error. Just think about what the form submit function should do in this case: should it send the same key (input name) twice, possibly with different values?
(Obviously, in the case of radiobuttons the answer is simple: sent the input name as key, and the checked radiobutton's value as value).
What Ext does here is, scan the form seaching for the input field matching the name, and then assign the value to the first matching input (since it assumes no duplicate names).
You can work it around simply by:
using two different names in the form (eg. genScens and genScens_chk )
sending the same value under two different keys in the server-side response, e.g.
{"data":{"genScens":true,"genScens_chk":true},"success":true}
Please note: if you cannot alter the server response, still use two different names, just add a callback to the success function, setting the genScens_chk value accordingly, like that:
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
else{
formPanel.getForm().findField("genScens_chk").
setValue(responseData.data.genScens);
}
},
I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)
Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}
The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );