I am using ng-grid and binding bootstrap calender control onto ng-grid as follows
$scope.EmployeeGridOptions.columnDefs = [
{
field: 'requestStartDate', displayName: 'Start Date',
cellTemplate: '<input ng-click="open($event,row.rowIndex)"
ng-model="row.entity.requestStartDate" datepicker-append-to-body=true datepicker-popup="MM/dd/yyyy" is-opened="false"></input>'
}
]
I want to open the data picker control when user click on textbox. Right now datepicker is getting opened all the time. Is there is any way to open an instance of datepicker when open function is fired.
$scope.calandar=function($event,row){
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
}
Help with regards to this is highly appreciated..Thank you.
Try ng-focus instead of ng-click.
Since I had multiple calendar controls on a web page. Built in angular does not have calendar controls. I do not have paging on the web page. Bootstrap calendar controls are very expensive. Hence used Jquery calendar control to by pass performance issues and functionality. Thank you.
$scope.OpenDatePicker = function (row, rowId) {
lastId = rowId + row.entity.employeeId;
position = $("#" + lastId).offset();
$("#dtpicker").val($("#" +lastId).val());
$('#dtpicker').datepicker('option', 'minDate', $("#PayPeriodEndDateMin").val());
$('#dtpicker').datepicker('option', 'maxDate', $("#PayPeriodEndDate").val());
$(".ui-datepicker-trigger").trigger("click");
}
Related
I have an angular ui grid working with selection, I want to populate a form with the contents of the selected record. I see no way to either reference the selected record or detect that row selection has occurred. Any ideas?
With ui-grid the api is a little different than the ng-grid example Aidan posted.
Normally you'd listen to the rowSelectionChanged event, refer: http://ui-grid.info/docs/#/api/ui.grid.selection.api:PublicApi
This would look something like the following:
$scope.selectionChanged = function( rowChanged ) {
if( rowChanged.isSelected ){
$scope.targetRow = rowChanged;
}
};
gridOptions = {
// other stuff
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.selection.on.rowSelectionChanged($scope, $scope.selectionChanged);
}
};
You should then be able to use $scope.targetRow as the target for your form. You'll probably need to turn off multiselect (check the selection gridOptions, or the selection tutorial), and deal with what happens when no row is selected.
In my application I tend to do the form as a popup (a modal or a separate page). When I do that it's much simpler, I just do a click event on the row itself, or (more commonly) a button on the row. Refer perhaps to http://ui-grid.info/docs/#/tutorial/305_appScope for an example. You can pass the row that was clicked upon into that click handler:
cellTemplate:'<button ng-click="grid.appScope.openModal( row.entity )">Edit</button>' }
You can then pass the entity (which would be an ngResource) into that modal, and once it edits it then it can just call save on the resource when it's done.
I did something similar to this in my (ng-grid based) tutorial series: https://technpol.wordpress.com/2013/11/09/angularjs-and-rails-4-crud-application-using-ng-boilerplate-and-twitter-bootstrap-3-tutorial-index/
It is customary to post what you have tried, please consider this in future. Here is a short sample that utilises the afterSelectionChange event for the ng-grid:
A grid with two divs to hold the selected data:
<div class='gridStyle' ng-grid='testGridOptions'></div>
<div>{{current.name}}</div>
<div>{{current.age}}</div>
some test data:
$scope.testData = [{name:'John', age:25},
{name:'Mary', age:30},
{name:'Fred', age:10},
{name:'Joan', age:20}];
configuration for the grid:
$scope.testGridOptions = {
data: 'testData',
multiSelect: false,
afterSelectionChange: function(data){
$scope.current = data.entity;
}
};
Hope this gets you started.
Aidan
This paragraph is translated from French.
I'm really stuck. my problem in my application is as follows:
I am currently developing an implementation Ext js. I would like to disable rows in a grouped grid. I use Ext.Fly function (() getNodes grid.getView () [index Store].) mask ().;
except that when the group in my inner gate is closed (collapsed). Ext.fly the statement returns a error (Ext.fly is null).
I wonder if there is a way to disable a row in a grouped grid other than Ext.fly.
Thank you in advance for the answer.
If it helps please try
Use grid beforeselect event to disable selection, view getRowClass method to style row .
viewConfig: {
getRowClass: function (record, index) {
// disabled-row - custom css class for disabled (you must declare it)
if (record.get('name') == disabled_name) return 'disabled-row';
}
},
listeners: {
beforeselect: function (sm, record) {
if (record.get('name') == disabled_name) return false;
}
},
Hope this helps you.
Below link might help you as well
http://www.sencha.com/forum/showthread.php?208836-Gridpanel-Row-Disable
I am working on a EXTJS application, where I am displaying data in an EXTJS grid.
There is an edit button against each row. Please check the image.
I want on clicking the edit link, a pop window will open with all the editable fields and I can edit the row from there.
Please help me achieving this.
Here is my code.
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('ID'));
}
}
}
Thanks
I'm not gonna do the coding for you, but here's what you'll need:
A window with a form panel.
The loadRecord method on the form panel's underlying basic form to the load record into the form
The getValues method on the basic form to retrieve the modified values
The set method on the record to write back the values from the form to the record
after click the button( you get the id of the row/record), you can open a window which contain a form grid, then load the data into the form.
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view
I want to dispaly 'Report' hyperlink on Gridpanel paging toolbar (or Title bar)
how can i do it (click on Report link display window with grid data)
Plz help me
Thanks in advance
How about something very simple like this. (The default object for Toolbar's add method is Button. Have a look at ExtJS API documentation if you want something more fancy.)
gridPanel.getTopToolbar().add({
text:'Visit Stackoverflow.com'
});
Providing a link in the ExtJS GridPanel Titlebar.
I will be creating a button in tools config of the gridpanel, and set its ui config to plain,
also you can write the handler according to your requirements.
Ext.create('Ext.grid.Panel',{
title: 'Demo Grid Panel'
tools: [
{ ui: 'plain',text: 'Open Window', handler : function(){ //link handler}}
]
});