I am using Smart-table to show reports to the user with Angular js.
Now,I want to customize table header and want a colspan in smart table 's header.
Does anyone know about this?Is it possible?
Please share example,plunker if anyone have achieved this
You can have whatever template you want in cellTemplate attr, where I have concatenated both first name and last name.
Like I have used,
scope.columnCollection = [
{ label: 'Name', map: 'FirstName', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.FirstName.$error.required">Required!</span>',cellTemplate:'<div class="name"><span>{{dataRow.FirstName +" "+dataRow.LastName}}</span><div>'}, //have whatever template you want and your custom css
//{ label: 'Last Name', map: 'LastName' },
{ label: 'User Name', map: 'UserName', validationAttrs: 'required' },
{ label: 'Password', map: 'Password', noList: true, editType: 'password' },
{ label: 'Customer', map: 'CustId', optionsUrl: '/GetCusts', editType: 'radio' },
{ label: 'Role', map: 'RoleId', optionsUrl: '/GetRoles', editType: 'select', defaultTemplate: '<option value="" ng-hide="dataRow[column.map]">---</option>', validationAttrs: 'required', validationMsgs: '<span class="error" ng-show="smartTableValidForm.RoleId.$error.required">Required!</span>' }, // NOTE: small hack which enables defaultTemplate option :)
{ label: 'E-mail', editType: 'email', map: 'Email' },
{ label: 'Cell Phone', map: 'Mobilephone', noEdit: true, validationAttrs: 'required' },
{ label: 'Locked', map: 'IsLocked', cellTemplate: '<input disabled type="checkbox" name="{{column.map}}" ng-model="dataRow[column.map]">', editType: 'checkbox', noAdd: true }
];
In css you can have your custom Css.
Please have a look at this
plunker
Hope this solves your problem :)
Based on the documentation you need to add something like this:
app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever#gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou#gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef#gmail.com'}
];
scope.columnCollection = [
{label: 'First Name', map: 'firstName'},
{label: 'same same but different', map: 'firstName'},
{label: 'Last Name', map: 'lastName'}
];
}]);
Your columnCollection will adjust the labels based on the mappings.
Related
I have a grid panel with a checkbox selection model. I also have an initial set of data to fill the grid: some of the rows that are inserted from code behind ( in the page load ) are checked (example in the image below);
My problem is that after the initial insertion of the rows I need to make the checkbox uncheckable.
Any suggestions?
I can't use gridPanel.setReadOnly(true) and also
BeforeDeselect Handler="return false;"
(because with that also the initial inserted rows appears unchecked).
Thanks
You can do following code
var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'email', 'phone'],
data: [{
id: 1,
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
id: 2,
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
id: 3,
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
id: 4,
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
var records = [store.getById(1), store.getById(3)];
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
selModel: {
selType: 'checkboxmodel'
},
listeners: {
boxready: function() {
this.getSelectionModel().select(records, false, true);
},
selectionchange: function() {
this.getSelectionModel().deselectAll(true);
this.getSelectionModel().select(records, false, true);
}
}
});
Records are rows that you want to be selected all the time
Note: It's in ExtJs not Ext.Net
I'm using Angular Formly and works very well if the model is a value of the scope, like a string:
{
key: 'name',
type: 'input'
}
The problem is that I'm using a more elaborated object to handle the model, with "controller as" syntax and the name as part of the user object:
vm.user = {name: 'john', lastname: 'doe'}
And then of course, the key would be:
{
key: 'user.name',
type: 'input'
}
(Usually the vm is taken out of the key in formly notation).
The problem is that Formly uses a bracketed notation to handle the model:
template = '<input ng-model=\"model[options.key]\">'
That when processed, spits out this output:
<input name="bd.form_input_user.name_1" type="text" ng-model="model.user.name">
Of course, the model doesn't have the user object and empty fields show.
So, my question is: How can I pass or link the appropriate object to the formly model when it's a more complex object?
Thanks in advance.
The model can be defined both at the form and the field level, so it is easy to use any property in an object graph as a form field. An example:
Markup:
<div ng-controller="MyCtrl as vm">
<formly-form model="vm.data" fields="vm.userFields">
<button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</formly-form>
</div>
JavaScript:
angular
.module('myApp', ['formly', 'formlyBootstrap'])
.controller('MyCtrl', ['$scope', function($scope) {
var vm = this;
vm.data = {
user: {
name: 'john',
lastname: 'doe'
},
extra: 'extra'
};
vm.userFields = [
{
model: vm.data.user,
key: 'name',
type: 'input',
templateOptions: {
type: 'text',
label: 'Name',
placeholder: 'Enter name'
}
},
{
model: vm.data.user,
key: 'lastname',
type: 'input',
templateOptions: {
type: 'text',
label: 'Lastname',
placeholder: 'Enter lastname'
}
},
{
key: 'extra',
type: 'input',
templateOptions: {
type: 'text',
label: 'Extra',
placeholder: 'Enter extra'
}}
];
}]);
A fiddle: http://jsfiddle.net/masa671/c37gxg3h/
I don't know how to give e-ng-options of xeditable in angular Formly.
Here is the formly Config:
formlyConfig.setType({
extends: 'select',
template: '<div><span editable-select="model[options.key]" e-ng-options="" e-name="{{::id}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableSelect'
});
Here is the select value:
{
className: 'col-xs-12 col-sm-6',
type: 'editableSelect',
key: 'gender',
templateOptions: {
label: 'Gender',
options: [
{name: 'Male', value: 'male'},
{name: 'Female', value: 'female'}]
}
}
Pls look at JSBIN
I just figured it out.
formlyConfig.setType({
extends: 'select',
template: '<div><span editable-select="model[options.key]" e-ng-options="s.value as s.name for s in {{options.templateOptions.options}}" e-name="{{::id}}" e-placeholder="{{options.templateOptions.placeholder}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableSelect'
});
Refered xeditable
I loop an array inside another array in angular.
fields:
[
{
label: 'First Name',
name: 'firstname',
key: '',
type: 'text',
//fixa requierd i templatesen
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: '',
required: true,
},
{
label: 'Email',
name: 'email',
key: '',
required: true,
type: 'email',
},
{
key: 'test',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
Whilst looping through field.labels, I want to access it's sibling "key". I tried using $parent scope, but that will include the entire scope. Then angular doesn't know what key it should use.
<div ng-repeat="field in fields">
<div ng-repeat="subfield in field.labels">
<!-- gets you parent's key -->
{{field['key']}}
<!-- you can play around with $index to reach the parent's siblings -->
<!-- just make sure index is in the range though -->
{{fields[$parent.$index - 1]['key']}}
{{fields[$parent.$index + 1]['key']}}
</div>
</div>
I am design ExtJs Gridpanel with Checkboxes...
How to get checked records for save the data
Use getSelections to get all selected records and getSelected to get the first record.
var selected = checkBoxSelectionModelObj.getSelections();
for (var i = 0; i < selected.length; i++)
{
alert(selected[i].data.code);
}
In ExtJs docs provide method to get selected record in grid grid.getSelection(). You can refer ExtJs docs
I have create small demo to show you, how it work. Sencha fiddle example
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}, {
name: 'AMargeia',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
id: 'testGrid',
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
selModel: {
checkOnly: false,
injectCheckbox: 'last',
mode: 'SIMPLE'
},
selType: 'checkboxmodel',
buttons: [{
text: 'Select All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().selectAll();
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('testGrid').getSelectionModel().deselectAll();
}
},{
text:'Print Selected Recod',
handler:function(){
var selection = Ext.getCmp('testGrid').getSelection();
if(selection.length){
let name='';
selection.map(item=>{
name+=item.get('name')+'<br>';
});
Ext.Msg.alert('Selected Record',name);
}else{
Ext.Msg.alert('Error','Please select record');
}
}
}]
});