I have a class (Person) with 4 properties : Id, FirstName, LastName, Code.
I show a person list in a jqgrid. I'd like a link column with this format (the code has this format 2011.0001)
/Person/Detail/Code => /Person/Code/2011.0001
But I have this with the code below :
/Customer/Detail?Code=2
I tried this :
colModel: [
{ name: 'Code', index: 'Code', formatter: 'showlink', formatoptions: { baseLinkUrl: '/Customer/Detail', idName: 'Code' }},
{ name: 'LastName', index: 'LastName', align: 'left' },
{ name: 'FirstName', index: 'FirstName', align: 'left' }
],
How can I correct this ?
Thanks,
Update1, Data format
[
{"Id":1,"FirstName":"AAAA","LastName":"AA","Code":"2011.0001"},
{"Id":3,"FirstName":"BBBB","LastName":"BB","Code":"2011.0003"}
]
You can try to use the custom formatter in the form
formatter: function (cellvalue, options, rowObject) {
return '' + cellvalue + '';
}
instead of predefined formatter 'showlink':
formatter: 'showlink', formatoptions: {baseLinkUrl:'/Customer/Detail', idName:'Code'}
You can easy receive /Customer/Detail?Code=2011.0001 if you have unique data in the 'Code' column and if you would add key: true to the column definition. In the case the Id value from the JSON input will be ignored and the value from the 'Code' column will be used as the rowid. If you do need to have the href value in the form /Customer/Detail/Code/2011.0001 or instead of /Customer/Detail?Code=2011.0001 you will need use custom formatter as I described before.
Related
how can I add class_list or set attribute for every td in column when using [yajra ] (https://github.com/yajra/laravel-datatables) datatable
You do it in the javascript. I have a datatable with the css id of "claims-table". I want to add classes to the first column, which in my case is called "id". My code is below. Look at the "columns" to see that I'm adding classes and returning the column as an href.
$(function() {
$('#claims-table').DataTable({
processing: true,
serverSide: true,
searching: false,
ajax: '/claims-table',
columns: [
{data: 'id', name: 'id', render: function(data,type,row) {
data = '<a class="claim_info underline_td" claim_id="'+data+'" href="/#">Claim ID '+data+'</a>';
return data;
}},
{data: 'order_id', name: 'order_id'},
{data: 'name', name: 'name'},
{data: 'status_description',name: 'status_description'}
]
});
});
I am using ng-grid from following link:http://angular-ui.github.io/ng-grid/
My MVC Controller function return data in json format which includes
date like this
:
"RunDate":"\/Date(1439577000000)\/","RunDate":"\/Date(1441391400000)\/" etc....
My View:
<div ng-grid="gridOptions" style="min-height:420px"></div>
My Grid options in js:
$scope.gridOptions = {
data: 'myData',
enablePaging: true,
showFooter: true,
columnDefs: [{ field: "RunDate", displayName: "Run Date", width: 120, cellFilter: "date:'yyyy-MM-dd'" }],
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions
};
I want date to be display in this format:06/April/2015
Can anybody help me with this???
You need to apply custom filter on you variable while binding data. Do use cellTemplate of column level.
Code
$scope.gridOptions = {
data: 'gridData',
columnDefs: [{
field: 'RunDate',
displayName: 'Run Date',
cellTemplate： '<span> {{row.entity.RunDate | date:\'dd-MMM-yyyy\'}}</span>'，
},
....
]
});
Use Angular date filter, like this:
{{row.entity.RunDate | date:'dd-MMM-yyyy'}}
You need to change the date formatting on your gridOptions
The correct date format you need is
dd/MMM/yyyy
$scope.gridOptions = {
data: 'myData',
enablePinning: true,
columnDefs: [
{ field: 'RunDate',displayName: 'Run Date', cellFilter: 'date:\'dd/MMM/yyyy\'' },
]
};
...........
});
Check this link for an example
I have to obtain the date value from the database which is given in the format
YYYY-MM-DD and display in the jqxgrid in the same format,,,
I have used the following code:
text : ‘Start Date’, id: ‘startDatePopUp’,datafield : ‘startDate’, columntype: ‘datetimeinput’, cellsformat: ‘YYYY-MM-DD’, align : ‘center’, width : 150, cellsalign : ‘center’,
but it is being displayed in the grid as YYYY-MM-DD 00:00:00.0
how will I display the date value in the format YYYY-MM-DD in the jqxgrid??
Thanks & Regards,
ssp
In the source try adding the following attributes.
{ name: 'LastLoginDate', type: 'date', format: 'd' },
Then in the Cell definition.
{ text: 'Last Activity', datafield: 'LastLoginDate', cellsformat: 'yyyyy-MM-dd' },
Try adding the 'format' in the source like
var source={
datafield:[
{ name: 'startDate',type:'date',format:'yyyy/MM/dd' }
]
}
here's a working sample for you .....
https://jsfiddle.net/Vinod1/by6duep4/10/
and this is the specific part of the sample code.
{
text: 'Date',
datafield: 'date',
filtertype: 'date',
cellsalign: 'right',
width: '100',
cellsformat: 'yyyy/MM/dd' }
I have an HTML form (Razor) with jqGrid to select entities (please assume customers, for example).
The customers jqGrid looks like:
jQuery("#ajaxGrid").jqGrid({
url: '#Url.Action("CustomersData")',
datatype: 'json',
mtype: 'GET',
jsonReader: { repeatitems: false, id: "Id" },
colNames: ['Id', 'Name'],
colModel: [
{ name: 'Id', editable: true, sortable: false, hidden: false },
{ name: 'Name', editable: true, sortable: false, hidden: false }
],
multiselect: true,
viewrecords: true,
rowNum: 5,
width: '850',
height: '15em'
});
So, the grid allows multiple selection.
The question is: how to pass selected customer IDs (as IEnumerable) to the controller on submit (to the appropriate submit action)?
I guess it can be done by setting all selected IDs as form parameter. I don't know how to copy the data from the array:
var ids = jQuery("#ajaxGrid").getGridParam('selarrrow');
to HTML form hidden value.
If I understand you correct you can for example create string with comma-separated ids of selected rows with respect of ids.join(','). Then you can use the jQuery.val(newValue) to set the new halue to the hidden field: $("#hiddenFieldId").val(ids.join(','));.
I'm using jqGrid to display tabular data on my first ASP.NET MVC 3 and find it really useful, particularly filtering down data. For string-type I use the column-filtering with "contains" and that works wonderfully for culling out the strings. For the date data I use the date picker. Great.
Now I've got a few columns (e.g., "Contains nuts") which are essentially boolean values. I want to provide a way to filter these. Right now they are displayed as "true" and "false" and use the same string-based filtering that my string-type columns use. That's a bit clunky. I think what I'd like to do instead is have a way to choose one of three values (true/false/both) via a dropdown mechanism.
My current colModel has an entry like so for my 'boolean' field:
{ name: 'ContainsNuts',
index: 'ContainsNuts',
align: 'left',
searchoptions: { sopt: ['eq, 'ne']}
}
which only works when the user types in 'false' or 'true' - again, clunky.
For a few other columns, I wanted to use dropdowns for enumerations, e.g., I have a 'Cones' column, since there are quite a few rows and I page the results - using the auto complete text filtering is a bit hit-or-miss for the user to find all the possible values. Hope that makes sense.
So what I've tried is this - I created a controller action that looks like so:
public JsonResult AvailableCones()
{
var context = new IceCreamEntities();
var query = context.Cones.AsQueryable().Distinct();
List<string> all = query.Select(m => m.Name).ToList();
return Json(all, JsonRequestBehavior.AllowGet);
}
And I did something like this [perhaps convoluted approach] to create a dropdown selection in the filtering dialog for Cones in my document ready:
...
createSearchSelection = function (someValues) {
var outputValues = "";
if (someValues && someValues.length) {
for (var i = 0, j = someValues.length; i < j; ++i) {
var entry = someValues[i];
if (outputValues.length > 0) {
outputValues += ";";
}
outputValues += entry + ":" + entry;
}
}
return outputValues;
}
setTheSearchSelections = function (colName, url){
$('#icecreamgrid').jqGrid('setColProp', colName,
{
stype: 'select',
searchoptions: {
value: createSearchSelection(url),
sopt: ['eq']
}
});
}
gotData = function(data) {
setTheSearchSelections('ConeType', data);
}
var url = "/IceCream/AvailableConeTypes";
$.get(url, null, gotData);
The result is that I get a drop-down for the ConeType column in the search dialog and the correct rows shows up in the column. Great. That's pretty cool that it works.
What I don't know how to do, however, is to get a dropdown to show up in my column header filter just like the one that now shows up in the filter dialog. How can I augment what I have to make this happen? Secondly, how can I make what I've got work for boolean values?
First part of your question is the displaying and filtering of the boolean values. I use checkboxes to display such values. In difference on your case I have typically many such columns. To reduce the size of the JSON data I use "1" and "0" instead of "true" and "false". Next I use the following column settings
formatter: 'checkbox', align: 'center', width: 20,
edittype: 'checkbox', editoptions: { value: "1:0" },
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Yes;0:No"
So for the searching the user have to choose "Yes" or "No" in the select box. Because I have many of such columns I defined templateCeckbox object in one JavaScript file which I include on every page of the project:
my.templateCeckbox = {
formatter: 'checkbox', align: 'center', width: 20,
edittype: 'checkbox', editoptions: { value: "1:0" },
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: "1:Ja;0:Nein" }
};
Then the typical column definition is
{
name: 'IsInBasis', index: 'InBasis', template: my.templateCeckbox,
cellattr: function () { return ' title="TS-Basis"'; }
},
(see the answer for details about the column templates). I find also practical if the tooltip shown if one hover the checkbox will be the text close to the column header. So I use cellattr attribute. In case of having many columns with the checkboxes it improves the usability a little.
To be able to display many columns with chechboxes I use personally vertical column headers. I recommend you to read the old answer which could be additionally interesting because it describes how to implement quick filtering of the data with respect of external checkbox panel.
Now about the building of the selects for the 'Cones' column. If you has AvailableCones action which provide the list of possible options like array (list) of strings you should use dataUrl:'/IceCream/AvailableConeTypes' instead of value: createSearchSelection(url) as the searchoptions. You well add only the buildSelect function which I described in "UPDATED" part of the answer.
{
name: 'ConeType', width: 117, index: 'ConeType', editable: true, align: 'center',
edittype: 'select', stype: 'select',
editoptions: {
dataUrl: urlBase + '/AvailableConeTypes',
buildSelect: my.buildSelect
},
searchoptions: {
dataUrl: urlBase + '/AvailableConeTypes',
buildSelect: my.buildSelect
}
}
where
my.buildSelect = function(data) {
var response = jQuery.parseJSON(data.responseText),
s = '<select>', i, l, ri;
if (response && response.length) {
for (i=0, l=response.length; i<l; i += 1) {
ri = response[i];
s += '<option value="' + ri + '">' + ri + '</option>';
}
}
return s + '</select>';
};
This line of code shows a True,False dropdownlist for a column that has true, false values:
{
name: 'SReqdFlag', index: 'SReqdFlag', editable: true, edittype: 'select', editoptions: { value: '"":Select;true:True;false:False' }
}
Hope that helps!