I am using Grails with extJS in my project. I have a date column in my display page. It gets displayed as 2010-09-29T04:00:00Z.
After i used the below to render the date, I got the date displayed as NaN/NaN/NaN
{header: "Date", width: 90, renderer : ('m/d/Y'), sortable:true, dataIndex: 'date'}
Am I missing something here?
Thanks!
Try adding the following function to your code:
function RENDER_date(value){return value ? value.dateFormat('m/d/Y') : '';}
Then set the renderer property:
renderer: RENDER_date
Thanks Ergo/Chau. It seems that some work only for Firefox and not for IE7. The code mentioned in my query works with Firefox and I get the right output. However, with IE7 it doesn't. Had to make the below change for it to work in IE7.
{name: 'dte', dateFormat:'c', type:'date'},
and in ColumnModel:
{header: "Date", width: 90, dataIndex: 'dte',
renderer : Ext.util.Format.dateRenderer('m-d-Y')
},
Add to format: 'm/d/Y' to your grid and store config.
Related
I'm using UI-Grid 3.0 unstable on an angular page that is loading data via Restangular. So far most of it seems to be ok. I am using the selection module along with it and I'm having difficulty with pages that are loading the {enableFiltering: true} gridOptions in that most of the pages are not showing the input box on the grid.
I invoke the ui-grid on the html page using:
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection></div>
and my gridOptions in my controller looks like this.
$scope.gridOptions = {
enableFiltering: true,
data: 'data',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'date', displayName: 'Date', cellFilter: 'date:\'MM-dd-yyyy\''}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
I honestly can't figure out why its not appearing on the page.
I don't understand 100% the problem, but I could go around it by overriding some css. The height in css were 100% and I changed them to auto.
.ui-grid-header-cell{
height:auto;
}
.ui-grid-cell-contents {
height: auto;
}
I hope this would be helpful.
This an awful hack, but I always use the filters, so I just tracked the container that was the wrong height. I had lost hours to this trying to find the cause and using all the suggested fixes.
The container turned out to have the class "ui-grid-header-canvas", so I just set the height to 54px after the grid had sized itself.(after I set the data)
$(".ui-grid-header-canvas").css("height","54px")
Sorry, but it works and I have a deadline..
I've tried to localize chart on russian. All messages were translated ok, but PBarLoadingText shows wrong symbols.Here is my code:
var renderMyChart = new FusionCharts(fileRenderChartType, "myChartDataId" + i, "100%", "100%", "0", "1");
renderMyChart.setXMLData($(this).html());
renderMyChart.setTransparent(true);
where fileRenderChartType="..../flash/MSColumn3D.swf?ChartNoDataText=График пустой по причине отсутствия данный для него&PBarLoadingText=Загрузка...";
Problem is in PBarLoadingText only. Firebug shows parameters correctly. I tried to use configure method instead of it, but I got the same result.
How to solve this problem?
The correct property is LoadingText not PBarLoadingText, i have tested it and it works.
may some one from FusionCharts update the document soon, so that it helps all.
Happy coding!
LoadingText seems For JavaScript charts only.
http://docs.fusioncharts.com/charts/contents/advanced/ChartMessages.html
wasted my day while searching how to get selected options values in JQuery UI widget by Michael Aufreiter. Here's the link to his demo site and github: http://quasipartikel.at/multiselect/
As a result I just need value fields of selected options without POST/GET sendings to PHP script.
I tried many methods and resultless.
Need your help and ideas
*Found many topics about jquery ui multiselect but useless because of Aufreiter :s *
That should work. Tested with Chrome console
$("#countries").val();
I went to the site you've got listed above, and was able to run this in my chrome console:
$('.ui-multiselect .selected li').each(function(idx,el){ console.log(el.title); });
It seems like the values you want are stored in the title attributes of the list items within the div.selected element.
Edit:
Doh! Well of course you want the values. Sorry mate. Completely missed that. The real goods are stored in the jQuery data() objects. In this case, the key you want is 'optionLink'. It maintains a reference to an option element. Each list item in the '.selected' div used the jQuery.data() method to add the underlying option to it.
So, you need to get the selected list items, iterate through, grab the 'optionLink' from the data jQuery data store, and then get the value.
The following code works on the example page:
$('.ui-multiselect .selected li').each(function(idx,el){
console.log(el);
var link = $(el).data('optionLink');
// link now points to a jQuery wrapped <option> tag
// I do a test on link first. not sure why, but one of them was undefined.
// however, I got all four values. So I'm not sure what the first <li>
// is. I'm thinking it's the header...
if(link){
// here's your value. add it to an array, or whatever you need to do.
console.log(link.val());
}
});
This is the first I've seen of the multiselect. It's slick. But I sympathize with your frustration trying to get something out. A 'getSelectedOptions()' method would be nice.
Cheers
Try accessing the selected values on the close event.
e.g.
$("#dropdown").multiselect({
header: false,
selectedList : 1,
height: "auto",
}).multiselectfilter().bind("multiselectclose", function(event, ui) {
var value = $("#dropdown").val();
});
Hope that helps.
Best solution
$('#select').multiselect({
selectAllValue: 'multiselect-all',
enableCaseInsensitiveFiltering: true,
enableFiltering: true,
height: "auto",
close: function() {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function(index, item) {
values.push($(item).val());
});
$("input[id*=SelectedValues]").val(values.join(","));
}
});
You can try this:
$('#ListBoxId').multiselect({
isOpen: true,
keepOpen: true,
filter: true
});
I have an MVC project, and am working on a page using JQGrid. I have a flyout menu with lots of checkboxes (one for each column of the grid), and I am trying to attach a script to hide/show a column on click.
I've read lots of solutions, and tried using the hide/show methods from the wiki.
$("ShippingListGrid").hideCol("Open");
"Open" is the name of the column in the colModel
{ name: 'Open', index: 'Open', width: 120, align: 'left', editable: true,sortable: true,hidden: false,Key: false, edittype: 'text', editoptions: { size: 20, maxlength: 30}},
This doesn't seem to work though, when I call the function my grid does not change. I've tried reloading my grid and using the column id instead of the name, and the columns still don't change. I've got the latest download. Does anyone know why the function might not be working?
Check your selector, if your grid is a table ID, you will need the # symbol. Maybe try: $("#ShippingListGrid").hideCol("Open");
I hope you have a good morning.
I'd like to use jqGrid in my Asp.Net app. So far, I've been producing an html table and converting it to a grid, but I'd like to try a better approach: loading the data via an AJAX call as it's supposed with the grid. I found out how to fetch data, but I'd like to have the "Edit" and "Delete" columns in addition to the data columns. How do I achieve it?
I'd rather not craft the html for the buttons in my controller. The ideal solution would be to send just the data, and have jqGrid add the required columns based on some client-side templates and the id values. I can't do it manually since I can't add columns to the existing grid. So, what do I do?
Update. I don't need just to achieve edit/delete functionality. What I need is to add a column with HTML based on some template and the "id" value, like [More details]
Sending pure data back from the server is the correct way if you use jqGrid.
To implement Row editing like you want look at the jqGrid Demo and choose on the left part "Row Editing" and then "Custom Edit". I personally prefer to use so named "inline editing" (choose on the same demo "Input types" under "Row Editing"). You implement switching in editing mode by double-click instead of selecting the row (see jqGrid - edit only certain rows for an editable column as an example). To delete the rows you can use additionally "Delete" button from the "form editing". To use it you should add Navigator with respect of navGrid method and choose with the corresponding parameters the buttons in the toolbar which you need. To see this on the demo choose "Live Data Manipulation" and then "Navigator".
UPDATED: In the jqGrid Demo, see "Row Editing" and then "Custom Edit" you can see how you can use setRowData inside of gridComplete or loadComplete handle to set ANY HTML code fragment. Why do you don't like the method? You can also use predefined showlink formatter to display a link or use custom formatter and custom unformatter to display any HTML contain in a jqGrid cell.
You probably figured it out by now, but for whatever is worth here is my answer using a custom formatter. The Action column is rendered using a custom formatter that shows a button that calls a simple javascript function.
$(document).ready(function () {
$("#all-errors-list").jqGrid({
url: '/Error/AllErrors/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Error','Actions'],
colModel: [
{ name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
{ name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
{ name: 'ActionId', width:400, formatter: actionFormatter}
],
pager: '#all-errors-pager',
rowNum: 10,
rowList: [10, 20, 50],
sortname: 'Id',
sortorder: 'asc',
viewrecords: true,
imgpath: '<%=Html.ImagePath()%>',
caption: 'Open Errors',
height: "100%",
width: "100%",
gridComplete: function () { $("button").button(); }
})
function actionFormatter(cellvalue, options, rowObject) {
return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
}
I hope that helps.