My row looks like this:
{
...
language: {
id: 1,
name: "English"
}
}
jqGrid colModel contains the following:
{
name: "language",
index: "language",
width: 100,
stype: "select",
searchoptions: {
value: ":All;English:English;Norwegian:Norwegian"
},
formatter: function (value, options, row) {
return value.name;
},
}
I want to make a toolbar filter.
jqGrid prints out rows fine, but I cannot search based on this column. It never matches any language. I suspect that internally jqGrid filters based on original value and not on formatted one. Which ends up being something like comparing "English" with "[object Object]" :)
For some reason searchrules { custom: true, custom_func: somefunction } never gets triggered.
Is there a way to specify a property of a cell object to check against or have my own custom filtering function?
Related
I'm trying to use the link formatter with json data where the url is stored in a sub object of my data. The <a> created by tabulator has an href attribute set on undefined. It should have the provided url.
It looks like the urlField from the formatterParams is not parsed with nestedSeperator even the default one .. Is it a bug ?
The data example:
let data = [
{
"id": 2,
"name": "PostgreSQL 14.x",
"constructeur_id": 22,
"domaine_id": 90,
"show": "https://www.w3.org/Provider/Style/dummy.html",
"domaine": {
"id": 90,
"name": "SGBD",
"show": "https://www.w3.org/Provider/Style/dummy.html"
},
"constructeur": {
"id": 22,
"name": "POSTGRESQL",
"show": "https://www.w3.org/Provider/Style/dummy.html"
}
}
]
tabulator params :
table = new Tabulator("#table", {
data:data,
// Set column definitions
columns: [
{
title: "Domaine",
field: "name",
formatter: "link",
formatterParams: {
labelField: "domaine.name",
urlField: "domaine.show", // DO NOT WORK AND I DON'T KNOW WHY, MAY BE urlField DO NOT PARSED THE VALUE WITH THE SEPARATOR (HERE THE DEFAULT ONE .)
},
},
{
title: "Constructeur",
field: "name",
formatter: "link",
formatterParams: {
labelField: "constructeur.name",
url: function (cell) {
return cell.getData().constructeur.show;
}
},
},
{
title: "Nom du modèle",
field: "name",
formatter: "link",
formatterParams: {
labelField: "name",
urlField: "show",
},
}
],
});
More details, and fiddle provided below.
I give you a fiddle to explain more in details the different case, which works and which don't.
Fiddle
We have 3 different cases (one for each column) to deal with url here :
DOMAINE : we try to use 'urlField' property of formatterParams using "domaine.show" as value. It should look for show property of the domaine sub object. But it doesn't work... We have undefined instead
CONSTRUCTEUR : We use url property of formatterParams and provide a function that fetch manually the url (here on constructeur.show). It works
NAME : We use urlField property of formatterParams and provide a value that point to a direct property of the data object (not through a sub object). It works
To show that it really does not parse the ulrField value i add a second data object, but this time with a 'domaine.show' value (not a sub object domaine with a 'show' property) and this time it works.
To those who have the same problems as me, the two solutions i had found are :
Move the property use in urlField to the main object, not a sub one.
Use the url property and provide manually through a function the value (ex : function (cell) { return cell.getData().constructeur.show;})
What I'm trying to do is store some data in a specific column that is calculated by using the data from another column.
I currently have a function that returns the number of available licenses for the given Id in JSON
function getAvailableLicenses(id) {
var url = "/Host/Organization/AvailableLicenses/" + id;
$.get(url, function (data) {
return data.AvailableLicenses;
});
}
How do I go about storing this number in a column named "AvailableLicenses"?
Here is my current Grid:
$("#OrganizationGrid").kendoGrid({
dataSource: viewModel.get("orgDataSource"),
filterable: {
extra: false
},
sortable: true,
pageable: true,
columns: [
{ field: "Id", hidden: true },
{ field: "Name", template: "<a href='/Host/Organization/Detail/#:Id#'>#:Name#</a>" },
{ field: "LicenseNumber", title: "Number of Licenses" },
{ field: null, title: "Available Licenses", template: "#= getAvailableLicenses(Id) #" },
{ field: "LicenseExpiration", title: "License Expiration", format: "{0:MM/dd/yyyy}" },
{ field: "State" },
{ field: "Active" }
],
editable: false
});
As you can see, I tried to create a null column with a template that calls the function for the given Id.
By using Fiddler I can see that the function is indeed being called for all of the rows, but the AvailableLicenses column just displays Undefined for every row.
Is there something I'm missing here to get this to work?
I think the better way to do this is on dataSource parse() function
First: you column configuration must change like this:
{ field: "AvalableLicenses", title: "Available Licenses" },
You alaways can use you template .
And second, inside your dataSource() you can add:
schema: {
parse: function(response) {
for (var i = 0; i < response.length; i++) {
response[i].AvalableLicenses= null;
response[i].AvalableLicenses = getAvailableLicenses(response[i].Id)
}
return response;
}
}
EDIT:
If you prefer using you way, I dont see any problem in your configuration, probably your $.get is returning undefined, or something you don't expect.
For conviniance I did an example working.
http://jsfiddle.net/jwocf897/
Hope this help
I'm trying to loop through a nested json array to display values in a grid cell (using extjs 6.0).
Here is the column in the view:
{
header: 'Participants',
dataIndex: 'participants'
},
The model:
Ext.define('App.model.Event', {
extend: 'Ext.data.Model',
fields: [
{ name: 'eventTypeName', type: 'auto', mapping: 'eventType.eventType' },
// this only grabs the first object in the list....how to grab all?
{ name: 'participants', type: 'auto', mapping: 'participants[0].participantName' },
]
});
And the json:
{
"_embedded" : {
"events" : [ {
"participants" : [ {
"participantId" : 1,
"participantName" : "name1"
}, {
"participantId" : 2,
"participantName" : "name2"
}, {
"participantId" : 3,
"participantName" : "name3"
} ],
}
}
}
The rows in the grid are the events, and each event row will have multiple participants that I want to display in a cell. How can all of the participant names be displayed in a single cell?
I've tried something similar to this post using the hasMany method, to no avail: https://www.sencha.com/forum/showthread.php?205509-Displaying-a-hasMany-model-relationship-in-a-Grid&p=822648&viewfull=1#post822648
If you want to display special content in a cell, then you'll need to implement a renderer. In the renderer function, you would iterate over your participants for the current row, building and returning an HTML string based on what you want that cell to look like.
Edit:
Okay I think it's because when I assign sumColumnModel to colModel sumColumnModel is empty because sumColumnModel is only non-empty within the success function. So is there any way I can get that variable out of the success function and use it in colModel?
I am using a function to get my data and I am getting the data out just fine. I get this JSON from data.d:
"{"Page":1,
"TotalPages":5.0,
"TotalRecords":122,
"ColumnModel": [
{"name":"Description","sorttype":"string","align":"center"},
{"name":"Matrix","sorttype":"string","align":"center"},
{"name":"AvailableReports","sorttype":"string","align":"center","hidden":true},
{"name":"Classification","sorttype":"string","align":"center","hidden":true}
],
"Submissions":[
{"DateSubmitted":"4/23/2014","DateSampled":null,"Matrix":"Sometype","Status":"Completed","SubmissionId":"001","Description":"description","Company":null,"Classification":null,"AvailableReports":7},
{"DateSubmitted":"4/23/2014","DateSampled":null,"Matrix":"sometype","Status":"Completed","SubmissionId":"002","Description":"description","Company":null,"Classification":null,"AvailableReports":6}
]}"
I am currently using this jsonreader:
jsonReader: {
repeatitems: false,
root: function(obj) { return obj.Submissions; },
page: function(obj) { return obj.Page; },
total: function(obj) { return obj.TotalPages; },
records:function(obj) { return obj.TotalRecords; },
}
I tired putting in just 'Submissions' for the value of root in jsonreader but that didnt do the trick.
My column model is being edited in the success part of my ajax function call to correctly display certain columns that is done like this.
myData.ColumnModel.splice(0, 0,
{ name: "DateSubmitted", label: "Date Submitted", sorttype: "date", align: "center"});
myData.ColumnModel.push(
{ name: "Status", sorttype: "string", align: "center" },
{ name: "SubmissionId", label:"Submission Id", sorttype: "string", align: "center" });
sumColumnModel = myData.ColumnModel;
then I pass sumColumn as the Column model for the grid.
colModel: sumColumnModel,
Any idea why the grid isn't being populated?
So I wound up just initializing the colModel and then adding/subtracting things from it based on a couple drop down menus. It would be nice to know if I could actually get the col model out of the datatype:function but at this point I've just worked around it.
I have a jqgrid with grouping, however the data coming back from the server is already grouped, I simply want to apply the jqgrid grouping look to the data. I've included a jsfiddle since a picture speaks 1000 words. THE DATA IS INCLUDED IN THE FIDDLE...
Link to fiddle : http://jsfiddle.net/Rab815/p8Zsk/
$('table').jqGrid({
data: data,
datatype: "local",
rowNum:100,
gridview: true,
deepempty: true,
hoverrows: false,
headertitles: true,
height:'600px',
viewrecords:true,
hoverrows: true,
sortable: true,
altRows: true,
colModel: [
{ label: "Group Name", name:'groupName', field:"groupName", sortable:false},
{ label: 'Name', field: 'name', name:'name' },
{
label: 'Date Modified', field: 'lastGenerated', name:'lastGenerated'
}
],
grouping:true,
groupingView:
{
groupField: ['groupName'],
groupColumnShow: [true],
groupCollapse: true,
},
shrinkToFit: false
});
However I need it displayed in this order
Now, if you put the data in an editor so each block appears on one line, the data is already coming back grouped from the DB in the order I want it to appear. but the grid is sorting the groupName data field in 'asc' order and far as I can tell it can't be turned off.
The Grouping Column would eventually be set to groupColumnShow: [false]
ANSWER from Olegs FIDDLE...
Included a
groupOrder
in the data coming from the server rather than doing the mapping.
Altered ColModel for GroupName as follows
{
label: "Group Name", field: "groupName",
sorttype: function (cellValue, obj) {
return obj.groupOrder;
//return groupOrder[obj.groupId];
}
Now everything appears in the correct order. This solution allows the sort, which defaults to "asc" in jqgrid to order the grouped data by a different value other than the grouped data itself.
Thanks! This had me stumped for quite a while!
The problem exist because you use datatype: "local" with the data loaded from the server.
To solve your problem you can define sorttype property as function in the column "groupName" by which you sort. The function should return the value which can be used instead of the column value. For example you can extend the items of the data with new field groupOrder for example and use
sorttype: function (cellValue, obj) {
return groupOrder[obj.groupId];
}
The field should be filled on the server.
Alternatively you can fill the map between groupId in your current data model and the index to the group order. For example the code
var groupOrder = {}, i, l = data.length, groupId, groupIndex = 1;
for (i = 0; i < l; i++) {
groupId = data[i].groupId;
if (groupOrder[groupId] === undefined) {
groupOrder[groupId] = groupIndex++;
}
}
fills groupOrder in the same order in which you have the groups (you can use data[i].groupName instead of data[i].groupId in the same way). Having such groupOrder you can use
sorttype: function (cellValue, obj) {
return groupOrder[obj.groupId];
}
The demo http://jsfiddle.net/p8Zsk/38/ use the approach and it displays the groups in correct order.