I am a newbie to jqgrid, the challenge what I have now is label value.
My Jqgrid header structure look like the following :
StoreName | StoreTag | 12SaleTotal | 01SaleTarget | alert
what I wanna do is that I need to get a month from a table from a database then put it on the label. For example, the current month is January, so SaleTotal will be set to previous month which is 12, and SaleTarget will be the current month which is 01.
Could you tell me how to achieve this ?
Is any formatter that I can use to customize the label?
Here is the code
function confirm() {
//get month from controller
var settings = {
url: '${contextPath}/resource-transfer/transfer/getMonth.do',
success: function (data) {
debugger;
var a = data[0].value;
var current = a.slice(-2);
var previousMonth = parseInt(current) - 1;
var workerAqRevAdjust = previousMonth + "SaleResult";
var storeWorkerTargetAdjust = current + "SalePersonTarget";
var storeTargetAdjust = current + "SaleStoreTarget";
//$("#confirmTable").jqGrid("setLabel", "SaleResult", workerAqRevAdjust);
$("#confirmTable").jqGrid("setLabel", "SalePersonTarget", storeWorkerTargetAdjust);
$("#confirmTable").jqGrid("setLabel", "SaleStoreTarget", storeTargetAdjust);
//clear jqgrid data
$("#confirmTable").jqGrid("clearGridData");
$('#confirmTable').jqGrid('setGridParam', {
url: '${contextPath}/resource-transfer/transfer/confirm.do',
datatype: 'json'
}).trigger('reloadGrid');
$('#confirmModal').modal('show')
}
};
$.formAjax(settings);
}
thank you
You can use setLabel method for example to change the column header dynamically. For example,
$("#gridId").jqGrid("setLabel", "SaleTotal", "12 Sale Total");
will set the string "12 Sale Total" as the column header of the column "SaleTotal". By the way, you can use any HTML fragment as the value of label. For example, "<b>12</b> Sale Total" instead of "12 Sale Total".
Related
How I can choose conditionally parameter from multiple dependent combo boxes with subqueries and send it to a report?
I have a BIRT report which use a stored procedure which expect parameter #category_id
The input should come from one of three combo boxes:
Combo with categories level 1
Combo with categories level 2
Combo with categories level 3
When you select something in combo 1 combo 2 is populated executing subquery which depends on value from combo 1.
When you select something in combo 2 combo 3 is populated executing subquery which depends on value from combo 2.
If combo 3 has a selected value this is sent for parameter #category_id
If combo 3 has not a selected value and combo 2 has selected value this is sent for parameter #category_id
If combo 2 and 3 are not selected combo 1 is sent for parameter #category_id
Any idea how to do it?
this is ruff code hope it will helps you :
$("#combobox1").change(function(){
var selval1=$(this).val();
var dataString="combo1data="+selval1;// get data from ajax related to this value from ajax
$.ajax({
url: "somepage",
type: "POST",
data: dataString,
success: function(cbdata2){
fillcombo2(cbdata2);
}
});
)};
$("#combobox2").change(function(){
var selval2=$(this).val();
var dataString="combo2data="+selval2;// get data from ajax related to this value from ajax
$.ajax({
url: "somepage",
type: "POST",
data: dataString,
success: function(cbdata3){
fillcombo3(cbdata3);
}
});
)};
$("#submitbutton).click(function(){
var val3=$("#combobox3 option:selected").val();
if(val3=="")
{
var val2=$("#combobox2 option:selected").val();
if(val2=="")
{
var val1=$("#combobox2 option:selected").val();
if(val2=="")
{
var val1=$("#combobox1 option:selected").val();
}
else
{
//use val1
}
}
else
{
//use val2
}
}
else
{
//use val3
}
});
You are going to want to use cascading parameters.
Set the default value to % (wild card)
Use a like Statement in your SQL Query, if 2 and 3 remain % then it searches for everything. If they are populated is searches for the specific value.
I have a jqgrid and on footer there are total values displaying. I want to convert the color of negative values to red. How can I do that?
If you use false as the last parameter of footerData the data will be not formatted by jqGrid. So you can use HTML fragments like <span style="color:red">...</span> to change the color of displayed data. Alternatively you can use jQuery CSS Framework classes like ui-state-error to hightlight the text (see the answer).
If you need still format the summary value you can use $.fmatter.util.NumberFormat (see the answer or this one) or use formatter method like in the demo
which uses
footerrow: true,
loadComplete: function () {
var $self = $(this),
sum = $self.jqGrid("getCol", "amount", false, "sum"),
i,
iCol = $("#" + $.jgrid.jqID(this.id) + "_" + "amount")[0].cellIndex, // get index of "amount" column
sumFormatted = this.formatter("", sum, iCol);
$self.jqGrid(
"footerData",
"set",
{
invdate: "Total:",
amount: sum < 0 ? "<span style='color:red'>" + sumFormatted + "</span>": sum
},
false
);
}
In my asp.net MVC 3 application am using Jqgrid as my grid. It contains a checkbox and i managed the event as below
$("#list").find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var _row = $(this).parent().parent();
}
});
i got the row using $(this).parent().parent() i want to get the id of the _row . How can i get the id? Is there any method please share
This should do the trick:
$('#list').find('input[type=checkbox]').live('change', function () {
if ($(this).is(':checked')) {
var row = $(this).parent().parent();
var rowId = row.attr('id');
}
});
If you are using default value of idPrefix option of jqGrid (which is empty string) otherwise the id will prepend with value of this option.
On select row you can get the id of selected row. In fact when you check a checkbox you also select a row so:
onSelectRow: function(id){
yourId = $("#yourGrid").jqGrid('getGridParam', 'selrow');
alert("The id of checked row is: "+yourId);
}
I am using ember-data and there is an inbuilt date type object. I am hooking this up to the date picker(built on Twitter bootstrap components). The issue is that I created a date attribute in the input tag to store the date object. The date object is getting store as a long string. This has to somehow get parsed into a date object and then get stored into the App.store. Where do I do this conversion. This is what I have done so far.
App.DatePicker = Ember.View.extend({
classNames: ['ember-text-field','input-small'],
tagName: "input",
attributeBindings: ['data','value','format','readonly','type','size'],
size:"16",
type: "text",
format:'mm/dd/yyyy',
value:function(){
var date = this.get('data');
if(date)
return date.format(this.get('format'));
else
return "";
}.property('data'),
data:null,
didInsertElement:function(){
this.$().datepicker({
format:this.get(this.get('format'))
}).on('changeDate', function(ev){
console.log(ev.date);
console.log(ev.target);
ev.target.setAttribute('data',ev.date);
});
}
});
I am using it in the view template like this
{{view App.DatePicker dataBinding="staff.emp_edate" format="mm/dd/yyyy"}}
When the date attribute is set when the date is changed, the date attribute is getting changed which is binded to the staff.emp_edate. Unfortunately the staff.emp_edata is not getting changed.
Any pointers will be of great help.
Try the following:
Fiddle: http://jsfiddle.net/ppanagi/9rCBL/
App.DatePicker = Ember.View.extend({
// ... leave the rest as is
didInsertElement: function(){
var self = this;
var onChangeDate = function(ev) {
self.set('data', ev.date);
};
var format = this.get('format');
this.$().datepicker({ format: format })
.on('changeDate', onChangeDate);
}
});
I want the name of the column on right click of a column header in jqGrid. Any code would be appreciated.
You can bind contextmenu event to all column headers. Every header is <th> element and so its DOM support cellIndex property. The cellIndex property gives you the index of column header. If you would use the same index in colModel you will get the definition of the column. The name property gives you the column name.
The corresponding code could be about the following:
var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column", $grid[0].grid.hDiv).bind('contextmenu', function(e) {
var $th = $(e.currentTarget).closest("th");
if ($th.length > 0) {
alert("the header of the column '" + cm[$th[0].cellIndex].name +
"' was clicked");
e.preventDefault(); // don't display standard context menu
}
});
The demo uses the code. Just use the right mouse click on the column header and you will see the results:
All jqGrid cells have an aria-described-by property which is composed of gridId_columnname. You can use this to get your column name.
For grid cells..
var cellName = $(e.target).closest('td').attr('aria-described-by');
var gridId = 'list1';
var columnName = cellName.substr(gridId.length - 1);
For column headers, besides Oleg's answer, you can do this..
var header = $(e.target).closest('th')
var gridId = 'list1';
var columnName = header.attr('id').substr(gridId.length - 1);