I am trying to add the data obtained from the form and display it to JQGrid.
I have the following elements in my Form.
Textbox for username
Datepicker for date of birth
Combobox for selecting the country.
Two buttons Add and Clear button.
Whenever i click the Add button ,it has to add a row to the JQGrid.Whenver i click the clear button it has to reset the entire table.
Currently,I am trying to display the data from the form to the row.
Below is my effort till now.
<script>
$(function() {
$( "#pwd" ).datepicker();
var source = [{
text: "Australia",
value: 0
},
{
text: "India",
value: 1
},
{
text: "United States",
value: 2
},
{
text: "United Kingdom",
value: 3
}];
$("#jqxComboBox").jqxComboBox({
source: source,
theme: 'energyblue',
width: '240px',
height: '30px',
displayMember: 'text',
selectedIndex: 0,
valueMember: 'value'
});
$('#add').click(function(){
name=$('#name').val();
date=$('#pwd').val();
country=$('#jqxComboBox').val();
alert(name);
$('#jqGrid').jqGrid('addRowData',name,date,country);
}); });
</script>
<style type="text/css">
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" role="form" id="add_form">
<input type="text" id="name"></input>
<input type="text" id="pwd"></input>
<div id="jqxComboBox"></div>
<input type="submit" value="add">
<input type="submit" value="reset">
</div>
</form><table id="jqGrid">
</table>
</body>
</html>
May be you should init jqGird first and run code like below :
$(function() {
$("#jqGrid").jqGrid({
'datatype' : 'local',
// if there is no data at the beginning, just define an empty array [],
// or you can set init data with data option below
'data' : [ {
'name' : 'testUser',
'date' : '15/4/2016',
'country' : 'somewhere'
} ],
'colNames' : [ 'Name', 'Date', 'Country' ],
'colModel' : [ {'name' : 'name'}, {'name' : 'date'}, {'name' : 'country'} ],
'loadComplete' : function() { // You can add data manually using code below.
// You can define a datarow variable as single object and also an
// array of objects.
// array data example: var datarow = [{"name":"addedName",
// "date":"16/4/2016", "country":"any"},
// {"name":"addedName2", "date":"16/4/2016", "country":"any2"}];
var datarow = {
"name" : "addedName",
"date" : "16/4/2016",
"country" : "any"
};
// second parameter of method below is rowid just for generate id
// attribute of tr element.
// if keep rowid variable as undefined, jqGrid will generate a
// random id instead.
var rowid;
// last paremeter tell jqGrid add new data after last row.
$("#jqGrid").jqGrid("addRowData", rowid, datarow, "last");
}
});
});
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.js"></script>
<script src="http://www.trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<table id="jqGrid"></table>
Related
I use Simplecartjs and I see they have custom to add function beforeCheckout.
<script>
//<![CDATA[
simpleCart({
// array representing the format and columns of the cart, see
// the cart columns documentation
cartColumns: [
{view:"image" , attr:"thumb", label: false },
{ attr: "name" , label: "Name" },
{ attr: "price" , label: "Price", view: 'currency' },
{ view: "decrement" , label: false },
{ attr: "quantity" , label: "Qty" },
{ view: "increment" , label: false },
{ attr: "total" , label: "SubTotal", view: 'currency' },
{ view: "remove" , text: "Remove" , label: false }
],
// "div" or "table" - builds the cart as a table or collection of divs
cartStyle: "div",
// how simpleCart should checkout, see the checkout reference for more info
checkout: {
type: "PayPal" ,
email: "you#hello.com"
},
// set the currency, see the currency reference for more info
currency: "USD",
// collection of arbitrary data you may want to store with the cart,
// such as customer info
data: {},
// set the cart langauge (may be used for checkout)
language: "english-us",
// array of item fields that will not be sent to checkout
excludeFromCheckout: [],
// custom function to add shipping cost
shippingCustom: null,
// flat rate shipping option
shippingFlatRate: 0,
// added shipping based on this value multiplied by the cart quantity
shippingQuantityRate: 0,
// added shipping based on this value multiplied by the cart subtotal
shippingTotalRate: 0,
// tax rate applied to cart subtotal
taxRate: 0,
// true if tax should be applied to shipping
taxShipping: false,
// event callbacks
beforeAdd : null,
afterAdd : null,
load : null,
beforeSave : null,
afterSave : null,
update : null,
ready : null,
checkoutSuccess : null,
checkoutFail : null,
beforeCheckout : null
});
//]]>
</script>
But I do not how to add new function for it. Write new script? For example, add function to alert 5s with content: "You are redirecting to Paypal" before redirect to Paypal.
Thank you very much.
include this
simpleCart.bind( 'beforeCheckout' , function( data ){
alert('You are redirecting to Paypal');
});
with timeOut looks like so:
simpleCart.bind( 'beforeCheckout' , function( data ){
setTimeout(function(){
alert('You are redirecting to Paypal')
}, 5000); // 5 seconds
});
at the end of the last .js file or create a new .js file which you include as last file:
In my Dgrid I have a column that displays the code (in number format) for an event.
enter image description here
I want to display the label not the number in the dgrid. So if 1 = Cat. In the database it shows as a 1 - but I want to display 'Cat' in dgrid. Can't find anything on how to do this.
Help or a lead in a direction would be helpful. Thanks!!
UPDATED: 6.16.15
Here is the code. I'm limited in what I can show.
These are some of the codes. 02 = XXXXX, 03 = XXXXX1, and so on and so on. Right now, the dgrid displays the numbers. It's kind of like a key. I need it to display what the number represents in the dgrid, not the number. So 02 should display 'Traffic Stop'. Not sure how to do a jsfiddle yet, and don't have a whole lot of extra time at the moment. I'm limited in what info I can give out, so I'd have to recreate a dummy version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XXXXXXXX Events</title>
<link rel="stylesheet" href="/static/web_ui/dgrid/css/skins/slate.css">
<h1>XXXXXXXX Events</h1>
<form id="queryForm">
<label for="XXXXXField">XXXXX Type contains:</label>
<input id="XXXXXField" name="event_type">
<button type="submit">Filter</button>
<button type="reset">Reset</button>
</form>
<script src="/static/web_ui/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
'dojo/_base/declare',
'dojo/dom',
'dojo/on',
'dstore/Rest',
'dstore/Request',
'dgrid/extensions/ColumnResizer',
'dgrid/extensions/ColumnReorder',
'dgrid/CellSelection',
'dgrid/extensions/DijitRegistry',
// 'dstore/Memory',
// 'dstore/Trackable',
// 'dstore/Cache',
'dgrid/OnDemandGrid'
// 'dojo/domReady!'
], function (declare, dom, on, Rest, Request, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry, OnDemandGrid) {
var store = new Rest({target:'/api/XXXXXXEvents/?format=json',
sortParam: 'ordering', ascendingPrefix:'', descendingPrefix:'-'
});
// var cacheStore = Cache.create(store, {
// cachedStore: new (Memory.createSubclass(Trackable)) ()
// });
var grid = window.grid = new (declare([OnDemandGrid, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry])) ({
collection: store,
selectionMode: 'single',
sort: 'id',
// idProperty: 'id',
columns: [
{field: 'id', label:'ID', resizeable: false},
{field: 'XXXXX_type', label:'XXXXX Type', resizeable: false},
{field: 'XXXXX_at', label:'XXXXX Time', resizeable: false},
{field:'XXXXX', label:'XXXXX Count', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false},
{field:'XXXXX_info', label:'XXXXX Info', resizeable: false},
{field:'hidden', label:'Hidden', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false},
{field:'XXXXX', label:'XXXXX', resizeable: false}
]
}, 'grid');
grid.startup();
on(dom.byId('queryForm'), 'submit', function(event) {
event.preventDefault();
grid.set('collection', store.filter({
// Pass a RegExp to Memory's filter method
// Note: this code does not go out of its way to escape
// characters that have special meaning in RegExps
last: new RegExp("^\d+$")
}));
});
on(dom.byId('queryForm'), 'reset', function() {
// Reset the query when the form is reset
grid.set('collection', store);
});
});
</script>
</head>
<body class="slate">
<div id="grid"></div>
</body>
</html>
You need to use the column formatter function for rendering data.
check the jsfiddle over here.
Check the examples over here
I have taken this example and modified as per your needs.
require([
'dgrid/Grid',
'dojo/domReady!'
], function(Grid) {
var data = [
{ id: 1, number: 7 },
{ id: 2, number: 8 },
{ id: 3, number: 9 }
];
function testFormatter(item){
//console.log(item,typeof(item));
var newItem;
if ( item == 7 )
newItem = 'Dog'
else if ( item == 8 )
newItem = 'Cat'
else if ( item == 9 )
newItem = 'Bird'
return newItem;
}
var columnsFormatter = [
{
label: "Number",
field: "number",
formatter: testFormatter
}
];
var grid = new Grid({
columns: columnsFormatter
}, "gridcontainer");;
grid.renderArray(data);
});
In my JavaScript file I have the following store variable:
Ext.onReady(function() {
var store2 = Ext.create('Ext.data.Store', {
storeId : 'employeeStore',
fields : [ 'firstname', 'lastname', 'age' ],
data : [ {
firstname : "Michael",
lastname : "Scott",
age : "7",
}, {
firstname : "Caroline",
lastname : "Schrute",
age : "2",
}, {
firstname : "Jim",
lastname : "Halpert",
age : "3"
}, {
firstname : "Kevin",
lastname : "Malone",
age : "4",
}, {
firstname : "Angela",
lastname : "Martin",
age : "5",
} ]
});
and a couple lines after in my panel i have a couple of form fields:
Ext.create('Ext.form.Panel', {
title : 'Person Info',
labelWidth : 75,
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 900,
renderTo : Ext.getBody(),
layout : 'column',
// arrange fieldsets side by side
items : [
{
// ***** Person Info*****
// Fieldset in Column 1 - collapsible via toggle button
xtype : 'fieldset',
columnWidth : 0.5,
title : 'Person Details',
collapsible : true,
defaultType : 'textfield',
defaults : {
anchor : '100%'
},
layout : 'anchor',
items : [
{
fieldLabel : 'First Name:',
name : 'PersonFirstName'
},
{
fieldLabel : 'Last Name:',
name : 'PersonLastname'
}
(etc...)
In this panel I also have a button that is suppose the store the values into a grid when clicked
{
text : 'Add Person',
xtype : 'button',
// margin: '0 0 0 100',
formBind : true,
// only enabled once the form is valid
disabled : true,
handler : function() {
// write code to add all fields to the grid
var form = this.up('form').getForm();
var vals = form.getValues();
store2.add(vals);
}
},
{
xtype : 'grid',
title : 'Family Details',
store : Ext.data.StoreManager.lookup('employeeStore'),
columns : [ {
text : 'First Name',
dataIndex : 'firstname',
type : 'string'
}, {
text : 'Last Name',
dataIndex : 'lastname',
type : 'string'
}, {
text : 'Age',
dataIndex : 'age',
type : 'string',
}, ],
width : 400,
forceFit : true,
renderTo : Ext.getBody()
} ]
When I press the button I'm not able to see the values in the grid. It's only returning an empty row.
You might have to add the proxy config to your store and check once.
For more info check this example from sencha here
And also check whether your store is loaded or not.
It's hard to tell where exactly the problem. I would start as following:
Remove from the grid all the columns and stay with only one. (lastname for example)
This step will check if the problem is occurred because mapping data to the state.
When you are clicking the button , use dummy data first in order to see that appending to the store is working.
var objectCollection = new Array();
var objectItem = new Object();
objectItem.lastname = "TestName";
objectCollection.push(objectItem);
store2.loadData(objectCollection);
In addition , I see that you defined values in store , but do not use 'autoLoad' property.
It should populated as true ('autoLoad:true').
Form field names should match with the grid columns data index . in our case form field name of person first name is "name : 'PersonFirstName'" so data index of the grid column Firs name should be "PersonFirstName" or vice versa.
I am using Dojo Dgrid however i am trying to add a checkbox column however i am not sure of the approach.
Most of the tutorials i have been looking at follow a different code structure and i am unable to create the check box column. I would like to create a checkbox column to select rows
Code (Here is also a Fiddle of my code)
require([
.......................
"dojo/domReady!"
], function(parser, declare, Grid, ColumnSet, Selection, selector,Keyboard, DijitRegistry){
parser.parse();
var data = [
{ first: "Tom", last: "Evans" },
{ first: "Sherry", last: "Young"},
{ first: "Bob", last: "William"}
];
var columns = [
[[
{editor({name: "CheckBox", field: "bool"}, "checkbox")},
{ field: "first", label: "First" },
{ field: "last", label: "Last" }]]
];
var CustomGrid = declare([Grid, ColumnSet, Selection, Keyboard, DijitRegistry]);
var grid = new CustomGrid ({
columnSets: columns ,
"class":"grid"
}, "grid");
grid.renderArray(data);
});
If you want to have a column with checkboxes for the purpose of selecting rows, you should set your sights on the selector column plugin rather than editor. selector is specifically designed to render checkboxes (or radio buttons) in each cell that ties in to the Selection mixin when checked.
See the documentation in the wiki, and the selector test page.
you can also test this solution
first you must add this Modules in require([]) section
"dgrid/extensions/ColumnResizer",
"esri/request", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dgrid/selector",
then define this array to hold your columns
var columnsPol = [];
then add check box type column to array and any other type column to array
columnsPol.push(
selector({ label: selector({}), selectorType: "checkbox" })
);
columnsPol.push({
label: "",
field: {any name},
formatter: {a function for formatting value of cell},
width: "auto",
});
.
.
.
then define your Grid and set properties
var gridPol = new (declare([Grid, ColumnResizer, Selection]))({
store: {your data},
columns: columnsPol,
minRowsPerPage: 40,
maxRowsPerPage: 40,
keepScrollPosition: true,
selectionMode: 'none',
allowSelectAll: true,
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, {Id for grid});
gridPol.refresh();
and then you can get selected and deselected rows
gridPol.on("dgrid-select", function (event) {
var selectedRows = event.rows;
});
and deselect
gridPol.on.on("dgrid-deselect",function (event){
var deselectedRows = event.rows;
});
I am working with Cakephp 2.4, Select2 3.4 and Jquery 1.10.
In my app, I have a table with 3 columns - product code, product description and product price.
I have Select2 set up so that the user can select either via product code or via product description. What I want to achieve is:
if the users selects via product code, set the product description and price and if he selects via description, set product code and price.
My data gets returned as follows:
[{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"}, {"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"}, {"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}]
I am able to set the value of the second select2 box using plain jQuery:
$(".productCode").on('change', function (product){
$(".description").select2("data", {id: '1', text: 'Test'});
});
What do I have to use to set the .description select2 value to the "description" value returned?
You forget initialize the select elements. Do it like this:
<!DOCTYPE html>
<html>
<head>
<title>jquery select2 test</title>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<link href="select2/select2.css" rel="stylesheet"/>
<script src="select2/select2.js"></script>
</head>
<body>
<input type="hidden" class="productCode" />
<select class="description" >
</select>
<script type="text/javascript">
$(document).ready(function() {
var $productCode = $(".productCode"),
$description = $(".description"),
product = [{"id":1,"text":"10001","description":"Test Product Name","unitPrice":"1.25"},{"id":2,"text":"10002","description":"product 2","unitPrice":"5.00"},{"id":3,"text":"10003","description":"Product 3","unitPrice":"2.74"}];
//should initilize two select first
$productCode.select2({
'placeholder' : 'input to search',
"width" : '200px',
"query": function(query){
var data = {results: product};
query.callback(data);
}
});
$description.select2({
'width' : '200px'
});
$productCode.on('change', function (product){
$description.select2("data", {id: '1', text: 'Test'});
});
});
</script>
</body>
</html>
If you use hidden inputs to back your Select2 controls, like this:
<input type="hidden" class="product" id="productCode" data-text="text" data-placeholder="code" />
<input type="hidden" class="product" id="description" data-text="description" data-placeholder="description" />
<input type="hidden" class="product" id="unitPrice" data-text="unitPrice" data-placeholder="unit price" />
And you have data like this:
var PRODUCTS = [
{ id: 1, text: '10001', description: 'Product 1', unitPrice: '1.25' },
{ id: 2, text: '10002', description: 'Product 2', unitPrice: '5.00' },
{ id: 3, text: '10003', description: 'Product 3', unitPrice: '2.74' }
];
You can populate your Select2 controls using the "data" option, like this:
$('.product').each(function() {
var $this = $(this);
$this.select2({
allowClear: true,
data: { results: PRODUCTS, text: $this.attr('data-text') }
});
});
And you can use the Select2 "val" function to get and set the values, like this:
$('.product').change(function() {
var selecteId = $(this).select2('val');
$('.product').select2('val', selecteId);
});
jsfiddle demo