I have a rough model of my application which looks some like as shown in picture below:
I am using jquery easyui data-grid framework to get this but i am not able to insert radio group type as one of my column as shown in Status column of my picture. Can anyone please help me how to insert radio button inside data-grid table? And other thing is, is the datagrid is only way to get these type of functions or any other way through which we can get same thing? If anyone know any other way please help me.
Thank you.
I am using easyui grid and other components too. You can use easyui datagrid's formatter property look here
On formatter property you can add any innerHTML like radiobuttons,buttons,labels etc to datagridcolumns.Look my example below, I am using this sample on my project;
var btnid="";
FILL_TESTGRID: function (_data) {
try {
$('#TestGrid').datagrid({
singleSelect: true,
remoteSort: false,
fitcolumns: true,
nowrap: false,
columns: [[
{ field: 'ID', title: 'ID', sortable: true },
{ field: 'NAME', title: 'NAME', sortable: true },
{ field: 'action', title: 'ColumntTitle3', formatter: function (value, row, index) {
var col;
if (row.ID!= null) {
col = '<input type="button" id="Btn'+row.ID+'" onclick="TestFunc(' + row.ID + ')" value="Add" class="GridButton"/>';
btnid = "Btn"+row.ID; //set to a global for getting out grid
}
return col;
}
}
]]
}
catch (err) {
alert(err)
}
}
}
document.getElemntById(btnid); //getting button, radio or text (value,checked etc)
Related
Ho guys, i'm using angular ui grid in my project..heres my code :
$scope.gridOptions = {
enableSorting: false,
enableRowSelection: true,
multiSelect: false,
exporterMenuCsv: false,
// enableGridMenu: true,
enableSelectAll: true,
enableColumnResizing: true,
enableSorting: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi; //set gridApi on scope
gridApi.core.on.renderingComplete($scope, function () {
$timeout(function () {
var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
gridBodyElem.addEventListener('mouseup', handleGridClick);
});
});
},
columnDefs: [
{ field: 'name',displayName:'Name',cellClass: 'gridField'},
{ field: 'uniqueid',displayName:'ID',cellClass: 'gridField'},
{ field: 'devicetime',displayName:'GPS DATE',cellClass: 'gridField'},
{ field: 'adress',displayName:'Adresse',cellClass: 'gridField'},
{ field: 'company',displayName:'Company',cellClass: 'gridField'}
]
};
it works good but i want to use a treeview in this grid to obtain like this table grid below..
what i want exacly is, when i click on item, i want to show a html code below like the image above...is there anyone has any idea how to do this..??
Example controller :
var SomeController = function () {
this.customHtml = '<ul><li>render me please</li></ul>';
}
Example view :
<div ng:bind="customHtml"></div>
Gives :
<div>
"<ul><li>render me please</li></ul>"
</div>
i am facing a problem which i want to generate a button in grid column by using reconfigure function.
i find my code consist of the Extjs error during renderer function 'Uncaught TypeError: Cannot read property 'dom' of null'
i checked that it should be come from "renderTo: id3", do you have any idea on it? Do i do something wrong in my render button function in the grid?
Although i pop up error message, but the UI still can show the button i genereated. it is very confused.
var createColumns = function (json) {
var keys = getKeysFromJson(json[0]);
return keys.map(function (field) {
if(field!='unread'&&field!='linkerType'&&field!='linkParam'&&field!='refNumber'&&field!='oid'&&field!='refOwner'){
return {
text: Ext.String.capitalize(field),
//flex : 1,
dataIndex: field,
sortable: true,
menuDisabled: true,
renderer: function (val, metadata, record) {
if(field=='action') {
var str = val.split(":");
metadata.style = "text-align: left";
if(str[2]=='true'&&str[1]=='false'){
var id3 = Ext.id();
Ext.defer(function () {
Ext.widget('button', {
renderTo: id3,
margin: '0 0 0 10',
iconAlign: 'center',
tooltip:'Ok to Ship Again',
cls: 'x-btn-default-small',
text: '<img src="images/OKToShipAgain.png">',
handler: function() {
items=[];
items.push({
"oid" : record.get('oid'),
"refNumber" : record.get('refNumber'),
"refOwner" : record.get('refOwner')
});
Ext.Ajax.request({
url: '#{csMenuBean.contextPath}/ws3/todolistservice/submitOktoship',
params: {data: Ext.encode(items)},
success : function(response){
}
});
}
})
}, 50);
return Ext.String.format('<span id="{0}"></span>', id3);
}
I'm using a form to edit Model. I receive data in JSON. Here's my problem:
I receive data for Checkbox only in INT: 1 or 0, I cannot change it. JSON:
{ "checkboxValue": 1 }
This field in ExtJS model is defined as INT type. Model:
{name: "checkboxValue", type: Ext.data.Types.INT},
then I set values to form this way:
formCmp.loadRecord(loadedStore.getAt(0));
and my checkbox is set correctly: when I receive 1 it's checked, 0 - unchecked.
But when I try to save record and send data to server this way:
form.updateRecord(form.getRecord());
record.save();
I need Checkbox to have also INT value - 1 or 0. But it has only BOOL value - true or false so when JSON is sent that value is NaN.
{
"checkboxValue": NaN
}
I think, that function .updateRecord(..) go through all elements and when it gets to checkbox it tries to get value, and the value is BOOL
Does anybody know how to make checkbox' output value INT?
Ext.form.Basic.updateForm uses getFieldValues method to retrieve new data for the updated record, while getFieldValues method returns only boolean values for checkboxes regardless of such properties as inputValue or uncheckedValue. So I would use convert function for the model's field to transform provided boolean value into an integer in a way like that:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'flag',
type: 'int',
convert: function (v, record) {
return typeof v === 'boolean' ? (v === true ? 1 : 0) : v;
}
}
],
...
});
Here is a complete jsfiddle
I think it can be done with some simple overrides
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Pizza Order',
items: [
{
xtype: 'fieldcontainer',
fieldLabel: 'Toppings',
defaultType: 'checkboxfield',
items: [
{
boxLabel : 'Topping?',
name : 'topping',
id : 'checkbox1',
// include these two properties in your checkbox config
uncheckedValue: 0,
setValue: function(checked) {
var me = this;
arguments[0] = checked ? 1 : me.uncheckedValue;
me.callParent(arguments);
return me;
}
}
]
}
],
renderTo: Ext.getBody()
});
Basically I have a Kendo Grid where a couple of my columns also have Kendo DropDowns.
I would like to attach a ToolTip based on the value the user chooses from the "Instrument" dropdown.
Here's my grid javascript code (using MVVM pattern):
tradesGrid = $("#tradesGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Trade" }
],
columns: [{
field: "TradeId"
},
{
field: "Instrument",
editor: instrumentsDropDownEditor, template: "#=Instrument#"
},
{ command: ["edit", "destroy"] },
],
sortable: true,
editable: "popup",
});
and here's the Editor function for the Instrument dropdown :
function instrumentsDropDownEditor(container, options) {
var instrItems = [{
"optionInstr": "OPTION 22/11/2013 C70 Equity"
}, {
"optionInstr": "OPTION 26/11/2013 C55 Equity"
},
{
"optionInstr": "OPTION 30/11/2013 C80 Equity"
}
];
var input = $('<input id="Instrument" name="Instrument">');
input.appendTo(container);
input.kendoDropDownList({
dataTextField: "optionInstr",
dataValueField: "optionInstr",
dataSource: instrItems, // bind it to the brands array
optionLabel: "Choose an instrument"
}).appendTo(container);
}
and on my Html view file I'm starting with this idea :
<span class="key-button"
title="Instrument Details!!!"
data-role="tooltip"
data-auto-hide="true"
data-position="right"
data-bind="events: { show: onShow, hide: onHide }"
</span>
I don't have time to rig up a jsFiddle right now, but I'm pretty sure this would work...
Init your tooltip in javascript, and specify content that is a function:
var myTooltip = "";
var tooltipWidget = $("#whatever").kendoTooltip({
filter: "a",
content: function (item) { return myTooltip; },
...
}).data("kendoTooltip");
Then on your dropdown widget, specify a change function handler that sets myTooltip to whatever contents you want.
var onSelect = function (e) {
myTooltip = ...;
tooltipWidget.refresh();
};
$("#dropdownlist").kendoDropDownList({
select: onSelect,
...
});
Or you can change the title property on your HTML element, if that is easier. However, the tooltip widget won't refresh its contents after it has been displayed, which is why you need to manually call tooltipWidget.refresh() after you change the contents.
Two quick questions here... How can I use this example
http://try.sencha.com/touch/2.0.0/examples/list-search/
of a searchable list, but opened in a NEW view? The example has it defined as the main application in app.js, but I would like to use it in "FirstApp.view.searchlist"
I know the answer is pretty easy but I am still a young grasshoppa and need a push in the right direction.
Also, rather than pulling the data from the embedded store like the example, I would like to modify it to pull my data from my external/proxy JSON store, which is defined as follows:
Store:
Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',
config:{
autoLoad:true,
model:'FirstApp.model.people',
sorters: 'lastName',
proxy:{
type:'ajax',
url:'http://xxxyyyzzz.com/data/dummy_data.json',
reader:{
type:'json',
rootProperty:'results'
}
}
}
});
Model:
Ext.define('FirstApp.model.people', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName' , 'image','status', 'phone','rank','attendance', 'discipline','recent']
}
});
So, how can I turn that example into a "view" inside my application, with my data store and model?
Any help is greatly appreciated! Thank you!
Jake
-----------UPDATE-------------
Ok fantastic. I was able to implement the search feature (stoked) by combining your methods with another tutorial I found. Now one more question...Seems so easy but it is tough! How can I open my new 'Details' view once an item is selected/clicked ??
Search list:
Ext.define('FirstApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
config: {
store : 'Students',
itemTpl:
'<h1>{firstName:ellipsis(45} {lastName:ellipsis(45)}</h1>' ,
itemCls:'place-entry',
items: [
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'searchfield',
placeHolder: 'Search People...',
itemId: 'searchBox'
}
]
}
]
}
});
Details view (that I want to open when name is clicked from Search list/Mainpanel view):
Ext.define('FirstApp.view.Details',{
extend:'Ext.Panel',
xtype:'details',
config:{
layout:'fit',
tpl:'<div class="image_container"><img src="{image}"></div>' +
'<h1>{firstName:ellipsis(25)} {lastName:ellipsis(25)}</h1>'+
'<div class="status_container">{status:ellipsis(25)}</div> '+
'<div class="glance_container"> <div class="value_box"><div class="value_number"> {rank:ellipsis(25)}</div> <p class="box_name">Rank</p> </div> <div class="value_box"><div class="value_number"> {attendance:ellipsis(25)}</div> <p class="box_name" style="margin-left: -10px;">Attendance</p> </div> <div class="value_box"><div class="value_number">{discipline:ellipsis(25)}</div> <p class="box_name" style="margin-left: -4px;">Discipline</p> </div> <div class="value_box"><div class="value_number"> {recent:ellipsis(25)}</div> <p class="box_name">Recent</p> </div> </div> '+
'<h2>Phone:</h2> <div class="phone_num"><p>{phone:ellipsis(25)}</p></div>'+
'<h3>Some info:</h3><p>Round all corners by a specific amount, defaults to value of $default-border-radius. When two values are passed, the first is the horizontal radius and the second is the vertical radius.</p>',
scrollable:true,
styleHtmlContent:true,
styleHtmlCls:'details'
}
})
Search Controller:
Ext.define('FirstApp.controller.SearchController', {
extend : 'Ext.app.Controller',
config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['StudentStore'],
models : ['people'],
refs: {
myContainer: 'MainPanel',
placesContainer:'placesContainer'
},
control: {
'mainPanel': {
activate: 'onActivate'
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
},
'placesContainer places list':{
itemtap:'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onSearchKeyUp: function(searchField) {
queryString = searchField.getValue();
console.log(this,'Please search by: ' + queryString);
var store = Ext.getStore('Students');
store.clearFilter();
if(queryString){
var thisRegEx = new RegExp(queryString, "i");
store.filterBy(function(record) {
if (thisRegEx.test(record.get('firstName')) ||
thisRegEx.test(record.get('lastName'))) {
return true;
};
return false;
});
}
},
onClearSearch: function() {
console.log('Clear icon is tapped');
var store = Ext.getStore('Students');
store.clearFilter();
},
init: function() {
console.log('Controller initialized');
},
onItemTap:function(list,index,target,record){ // <-----NOT WORKING
this.getPlacesContainer().push({
xtype:'details',
store:'Students',
title:record.data.name,
data:record.data
})
}
});
Good question. I assume you are trying to build a List or dataview. The key here is to give your store a 'storeId'. I have modified your store below:
Ext.define('FirstApp.store.StudentStore',{
extend:'Ext.data.Store',
config:{
storeId: 'Students', // Important for view binding and global ref
autoLoad:true,
model:'FirstApp.model.people',
sorters: 'lastName',
proxy:{
type:'ajax',
url:'http://xxxyyyzzz.com/data/dummy_data.json',
reader:{
type:'json',
rootProperty:'results'
}
}
}
});
Then inside your view, you reference the store to bind to. Here is an example List view from one of my applications. Notice the config object has 'store' which references our above store:
Ext.define('app.view.careplan.CarePlanTasks', {
extend: 'Ext.dataview.List',
xtype: 'careplanTasks',
requires: [
'app.view.template.CarePlan'
],
config: {
store: 'Students', // Important! Binds this view to your store
emptyText: 'No tasks to display',
itemTpl: Ext.create('app.view.template.CarePlan'),
},
constructor : function(config) {
console.log('CarePlan List');
this.callParent([config]);
}
});
Now that you have a storeId, you can access this store anywhere in your application by doing the following:
Ext.getStore('Students')
You can load records from your server by calling the load method as well:
Ext.getStore('Students').load();
You can do this anywhere in your application, but typically it's best to do in your controllers.
Hope this helps.
======= Updates to your updates ======
So looking at your code I think you need to modify your List view and the controller. Give 'FirstApp.view.MainPanel' an xtype: 'MainPanel'. Next modify your controller config as follows:
config: {
profile: Ext.os.deviceType.toLowerCase(),
stores : ['StudentStore'],
models : ['people'],
refs: {
mainPanel: 'MainPanel', // set the object KEY to the name you want to use in the control object and set the VALUE to the xtype of the view
placesContainer:'placesContainer'
},
control: {
'mainPanel': { // this matches the key above, which points to your view's xtype
activate: 'onActivate',
itemtap: 'onItemTap' // listen for the item tap event on this List
},
'mainPanel searchfield[itemId=searchBox]' : {
clearicontap : 'onClearSearch',
keyup: 'onSearchKeyUp'
},
'placesContainer places list':{
itemtap:'onItemTap'
}
}
},