I have my table where I can add new rows by simply clicking "Add" button (solution found on SO). What I want is detecting if new row added this way has any empty cells in order to disable "Save" button under the whole table so that user cannot save such changes to DB.
Any ideas?
Why not use the handy validation of AngularJS?
Define your cellTemplates like this:
$scope.gridOptions = {
data: 'myData',
columnDefs: [{
field: 'name',
displayName: 'Name',
cellTemplate: '<div class="ngCellText"><input type="text" required ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\"></div>'
}, {
field: 'age',
displayName: 'Age',
cellTemplate: '<div class="ngCellText"><input type="text" required ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\"></div>'
}]
};
Note the required attribute in the inputs.
Then put the whole grid in a form and give the SAVE button a ng-disabled directive.
<button ng-disabled="signup_form.$invalid" ng-click="save()">Save</button>
Here is a minimalistic Plunker
Related
I am trying to get dropdown values in header for one of the field in ui-grid. For the same field I have the dropdown for every row working fine. Based on the header dropdown selection every dropdown values in rows should be selected. Here is my plunker link. Can someone help please?
Here's a link!
var jsonDef = { name: 'Status', field: 'Status', width: 150,
editType: 'dropdown',
editableCellTemplate: 'ui-grid/dropdownEditor',
headerCellTemplate: '<div class="ui-grid-cell-contents header-tcsi"><select
ng-required = "true" ng-options="options.id as options.type for tcsiOption
in grid.appScope.MainCtrl" ng-model="grid.appScope.selectedTCSI"></select>
</div>',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'type',
filter: {
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT }
};
var options = [{
id: 1,
type: 'Closed'
}, {
id: 2,
type: 'Pending'
}, {
id: 3,
type: 'Open'
}];
You were using the ng-options incorrectly. If you want to access something from the appScope you have to the attach it to the controller $scope. Then you can change your template where you use the options like so:
headerCellTemplate: '<div class="ui-grid-cell-contents header-Status"><select ng-required = "true" ng-options="options.id as options.type for options in grid.appScope.dropdownoptions" ng-change= "grid.appScope.selectionChanged()"ng-model="grid.appScope.selectedStatus"></select> </div>'
Pay attention to ng-options:
ng-options="options.id as options.type for options in grid.appScope.dropdownoptions"
The way you've written your code, you need to listen to when the dropdown changes and then update the values in the grid. Check the
Updated Plnkr for the working example.
This is my ui-grid
$scope.gridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'view', cellTemplate: '<input type="checkbox" ng-model="fieldView" ng-checked="checked" ng-init="checked=row.entity.required" ng-disabled="checked" ng-click="grid.appScope.view(fieldView,row.entity);getExternalScopes().showMe(row.entity.required)">', enableSorting: false, enableColumnMenu: false },
{ name: 'edit', cellTemplate: '<input type="checkbox" ng-model="fieldEdit" ng-checked="checked" ng-init="checked=row.entity.required" ng-disabled="checked" ng-click="grid.appScope.edit(fieldEdit,row.entity);getExternalScopes().showMe(row.entity.required)">', enableSorting: false, enableColumnMenu: false }
]
};
In the above UI-grid contains 3 columns.view and edit column contains checkboxes,I want to uncheck all checked checkboxes in UI-grid,because first I render some data and check checkboxes then I render another data from api.but in this case whatever first time check the checkboxes those are not clear at the time second time data rendering to UI-grid.
I got the answer.
$scope.gridOptions.data=[];
I need to sort and hide the respective column on click of the respective ui-icons.
ui-icon-close -> On click of this, respective column should be made hidden.
ui-icon-arrowthick-2-n-s -> On click of this icon, table should be sorted with respect to the values of that column.
Here is the plunker link
HTML:
<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
JS:
$scope.gridOptions1 = {
enableSorting: true,
columnDefs: [
{ field: 'name', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'gender', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
{ field: 'company', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>'}
],
onRegisterApi: function( gridApi ) {
$scope.grid1Api = gridApi;
}
};
you can simply use the properties of 'col' and hide the column, the important thing is to refresh grid after every action,
col.hideColumn();
similarly you can sort using the gridApi functionality,
$scope.grid1Api.grid.sortColumn(col,$scope.uiGridConstants.ASC, false );
here is the plunk
but you should know that there is already column menu service that can do these for you
here is the link
http://ui-grid.info/docs/#/tutorial/121_grid_menu
OK, here is the case: I have a grid , the last column is a button to delete this row, and I also need to click on a row to jump to a new page. But when I click the delete button, it will also jump to the new page, how can I resolve the confict? Thanks!
In controller:
$scope.gridOptions =
{
data: 'students',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'school', displayName: 'Name'},
{field: '', displayName: 'Delete', cellTemplate:
'<div class="ngCellText" ng-class="col.colIndex()">' +
'<a class="glyphicon glyphicon-remove" ng-click="deleteStudent(row)"></a></div>'}
]
};
$scope.deleteStudent = function(row) {....}
$scope.selectStuent = function(row) {$location.path(....)}
In html:
<div class="gridStyle" ng-grid="gridOptions" ng-click="selectStudent()"></div>
I'm working with ui-grid which is the latest version of ng-grid. Here is how I resolve the similar issue. It seems to work well with ng-grid.
<a class="glyphicon glyphicon-remove" ng-click="$event.stopPropagation();deleteStudent(row)"></a>
I made a simple example in Plunker to demonstrate it.
I want to perform inline editing when I click on button then it activate textfield for title and numberfield for duration.How can it be achieve as I am new in Sencha.
{
xtype: 'list',
store: "Plays",
itemId:"playsList",
mode: 'MULTI',
loadingText: "Loading PlaysList...",
emptyText: '<div class="notes-list-empty-text">No PlayList found.</div>',
itemTpl: '<div class="list"><div class="list-item-title">{title}</div><div class="list-item-narrative">{duration}</div><div class="list-item-hide">{hidden}</div></div>',
grouped: true,
},
{
xtype: "button",
iconCls: "inlineedit",
iconMask: true,
itemId: "inlineediting"
},
So when I click on button it activate or have editing feature at list for title textfield and for duration numberfield.
My guess would be to do something like this :
Add a editing field to you model
fields: [
... // Other fields
{name:"editing", type:"boolean", defaultValue: false},
]
Use this kind of template
itemTpl: new Ext.XTemplate(
'<tpl if="editing == false">',
'<input type="text" name="title" value="{title}" disabled/>',
'<tpl else>',
'<input type="text" name="title" value="{title}"/>',
'</tpl>'
)
Then when you click on the button, you need to follow these steps :
Get your store
Loop through all the records of the store
For each records, set the editing value to true
Then the template will re-render and the inputs will be editable.
Of course you need to do work on the CSS to hide to the user that it's an input.
Finally, when the editing is done (I presume you will have some sort of 'Done' button), you need to go through all the items of your list and update the store with their new values.
I haven't tried it but I've done things similar in the past.
Hope this helps