i have a kendoui grid which list claims. one of the columns is lenders which is a foreign key reference to the lenders table. what i want is to be able to display the lender name in the grid instead of its id reference.
ive setup the lenders datasource as follows
var dsLenders = new kendo.data.DataSource({
transport: {
read: {
url: "../data/lenders/",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation === "read") {
return options;
}
}
}
});
and the grid looks like this
$("#gridClaims").kendoGrid({
dataSource: claimData,
autoSync:true,
batch: true,
pageable: {
refresh: true,
pageSizes: true
},
filterable: true,
sortable: true,
selectable: "true",
editable: {
mode: "popup",
confirmation: "Are you sure you want to delete this record?",
template: $("#claimFormPopup").html()
},
navigable: true, // enables keyboard navigation in the grid
toolbar: ["create"], // adds insert buttons
columns: [
{ field:"id_clm", title:"Ref", width: "80px;" },
{ field:"status_clm", title:"Status", width: "80px;" },
{ field:"idldr_clm", title:"Lender", values: dsLenders },
{ field:"type_clm", title:"Claim Type"},
{ field:"value_clm", title:"Value", width: "80px;", format:"{0:c2}", attributes:{style:"text-align:right;"}},
{ field:"created", title:"Created", width: "80px;", format: "{0:dd/MM/yyyy}"},
{ field:"updated", title:"Updated", width: "80px;", format: "{0:dd/MM/yyyy}"},
{ field:"user", title:"User" , width: "100px;"},
{ command: [
{text: "Details", className: "claim-details"},
"destroy"
],
title: " ",
width: "160px"
}
]
});
however its still displaying the id in the lenders column. Ive tried creating a local datasource and that works fine so i now is something to do with me using a remote datasource.
any help would be great
thanks
Short answer is that you can't. Not directly anyway. See here and here.
You can (as the response in the above linked post mentions) pre-load the data into a var, which can then be used as data for the column definition.
I use something like this:-
function getLookupData(type, callback) {
return $.ajax({
dataType: 'json',
url: '/lookup/' + type,
success: function (data) {
callback(data);
}
});
}
Which I then use like this:-
var countryLookupData;
getLookupData('country', function (data) { countryLookupData = data; });
I use it in a JQuery deferred to ensure that all my lookups are loaded before I bind to the grid:-
$.when(
getLookupData('country', function (data) { countryLookupData = data; }),
getLookupData('state', function (data) { stateLookupData = data; }),
getLookupData('company', function (data) { companyLookupData = data; })
)
.then(function () {
bindGrid();
}).fail(function () {
alert('Error loading lookup data');
});
You can then use countryLookupData for your values.
You could also use a custom grid editor, however you'll probably find that you still need to load the data into a var (as opposed to using a datasource with a DropDownList) and ensure that the data is loaded before the grid, because you'll most likely need to have a lookup for a column template so that you're newly selected value is displayed in the grid.
I couldn't quite get ForeignKey working in any useful way, so I ended up using custom editors as you have much more control over them.
One more gotcha: make sure you have loaded your lookup data BEFORE you define the column. I was using a column array that was defined in a variable I was then attaching to the grid definition... even if the lookup data is loaded before you use the grid, if it's defined after the column definition it will not work.
Although this post past 2 years, I still share my solution
1) Assume the api url (http://localhost/api/term) will return:
{
"odata.metadata":"http://localhost/api/$metadata#term","value":[
{
"value":2,"text":"2016-2020"
},{
"value":1,"text":"2012-2016"
}
]
}
please note that the attribute name must be "text" and "value"
2) show term name (text) from the foreign table instead of term_id (value).
See the grid column "term_id", the dropdownlist will be created if added "values: data_term"
<script>
$.when($.getJSON("http://localhost/api/term")).then(function () {
bind_grid(arguments[0].value);
});
function bind_grid(data_term) {
$("#grid").kendoGrid({
dataSource: ds_proposer,
filterable: true,
sortable: true,
pageable: true,
selectable: "row",
columns: [
{ field: "user_type", title: "User type" },
{ field: "user_name", title: "User name" },
{ field: "term_id", title: "Term", values: data_term }
],
editable: {
mode: "popup",
}
});
}
</script>
For those stumbling across this now, this functionality is supported:
https://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumnbinding
Related
I am having trouble making a select required in ExtJS.
I tried with allowBlank: false, even afterredner methods but nothing works, I can submit the form with no value in that select.
The code to generate the field is as follows:
OldType: function () {
return {
xtype: 'xEasyGridCombo',
allowBlank: false,
required: true,
valueField: 'fe_code',
displayField: 'fe_name',
dropPanelConfig: {
width: 480,
height: 200
},
searchFieldList: ['fe_code', 'fe_name'],
gridConfig: {
table: 'type_store',
idColumn: 'fe_id',
hasBottomBar: true,
rowLimit: 40,
tools: [],
conditions: [],
forceColumns: ['fe_code', 'fe_name'],
forceSelectFieldsQuery: ' DISTINCT fe_code, CONCAT(fe_name, \'[\', fe_code, \']\') fe_name ',
xColumns: [],
storeBaseParams: {}
},
listeners: {
afterrender: function () {
let oGrid,
sDivision = this.findParentByType('panel').find('KeyNr1', 'Divsion')[0].getValue();
// making sure the grid is rendered
this.getGridList();
oGrid = this.gridList.findByType('uxgrid')[0];
oGrid.store.baseParams.filter = Ext.util.JSON.encode([{
"field": "fe_tip",
"value": (sDivision === '02') ? 'F-GAZ' : 'F-ELEC'
}]);
//store from server try
oGrid.store.reload();
}
}
};
},
What am I doing wrong ? I can't even make it have a default value.
Thanks in advance and happy Holidays !
In the modern toolkit, the formpanel has a beforesubmit event. you can check if the value is selected or not. If you return a false from this event the form will not be submitted.
in the classic toolkit the event is beforeaction.
I have been trying to figure out what is going on but haven't yet.
Please see the code below.It is a inconsistent behavior, so I am having hard time to catch what triggers it. This grid is inside a popup, I noticed when i refresh the page and try it, it works fine on first attempt. Then i save/cancel popup and keep repeating it fails at some point and starts accumulate null rows.
I tried to check the value of the grid using
$('#gridFldListItems').data("kendoGrid").dataSource.data()
It shows there is no data but as soon as click "Add new Record" it shows 2.
It does not necessarily fail on second attempt, but it never fails on first. I suspect that everytime I open the popup it is not necessarily empty(after first few tries) and it carries some data from previous attempts. I might be wrong.
When I click add new record, it adds a line with null value and gives me an option to input on the second row.
I also When I put itemname and click update, it does not trigger the "create" event and looks like this:
At this point the grid broken. Here is the code for the grid
var grid = $("#gridFldListItems").kendoGrid({
editable: {
"confirmation": "Are you sure you want to delete this item?",
"mode": "inline",
"createAt": "bottom"
},
selectable: true,
autoBind: false,
toolbar: ["create" ],
columns: [
{ field: 'Item' },
{
command: ['edit', 'destroy',
{ iconClass: "k-icon k-i-arrow-up", click: $.proxy(this, 'selectedFieldDef_onClkMoveUp'), name: 'Up' },
{ iconClass: "k-icon k-i-arrow-down", click: $.proxy(this, 'selectedFieldDef_onClkMoveDown'), name: 'Down' }], title: ' '
}
],
dataSource: this.selectedFieldDef_dsItems,
}).data("kendoGrid");
selectedFieldDef_dsItems: new kendo.data.DataSource({
transport: {
read: function (e) {
var field = editViewModel.get("selectedFieldDef");
var mapItems = $.map(field.Items, function (item, idx) {
return {
Item: item
};
});
//on success
e.success(mapItems);
},
create: function (e) {
// on success
e.success(e.data);
},
update: function (e) {
// on success
e.success();
},
destroy: function (e) {
var vm = editViewModel;
// locate item in original datasource and remove it
var field = vm.get("selectedFieldDef");
if (field.DefaultValue && !vm.selectedFieldDef_dsItemsFindItem(vm.selectedFieldDef_dsItems.data(), field.DefaultValue)) {
field.DefaultValue = null;
vm.set("selectedFieldDef", field);
$("#inpFldRegex").kendoDropDownList().data("kendoDropDownList").trigger("change");
}
// on success
e.success();
}
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
schema: {
model: {
id: "Item",
fields: {
Item: { editable: true, nullable: true }
}
}
}
})
Any help would be much appreciated.
UPDATE:
It works fine when I refresh the page
I'm not able to find a description which tag belongs to which position - allways searching for comments from oleg ;-).
I've a table with actionbuttons (edit/del) in the row. Adding ist done over inlinenav add:true:
jQuery(document).ready(function()
{
currentCompanyCode = '<s:property value="currentCompanyCode" />';
jQuery("#grid").jqGrid({
url: "serverAction" ,
pager: true,
pgbuttons:false, pginput:false, pgtext:false,
datatype: "json",
mtype: "POST",
ajaxGridOptions: {async: false},
aftersavefunc: function() {reloadGrid("grid")},
postData: { currentCompanyCode : function () {return jQuery("#availCompanyCodes").val();}},
pager: '#addBtns',
colModel:[
{name:"id", label:"key", hidden:true, key:true},
{name:"priority", label:"prio"},
....
{name: "act", label:"", align: "left", template:"actions"}
],
actionsNavOptions: {delbutton: true, editbutton: true}
}
}) .jqGrid("navGrid", '#addBtns', {refresh:true, edit:false, del:false, search:false, add:false },
{/*edit Options*/},
{/*add Options*/},
{/*del Options*/},
{/*search Options*/})
.jqGrid("inlineNav", '#addBtns', {
save:true, edit:false, add:true,
editParams: {keys: true, successfunc : function() {reloadGrid("grid")}, extraparam: {currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}},
addParams: {addRowParams:{successfunc : function() {reloadGrid("grid")}, extraparam:{ currentCompanyCode : function () {return jQuery("#availCompanyCodes").val()}}}}
})
});
This is an extract from our grid-definition. Took some time to figure out, how I can set postdata when inlinediting or addding.
Two Questions:
Is there an easier way to add postdata in inlineediting? It looks complicated ;-)
The grid will not reload when I add a new line and press the save-icon in the actions-cell. It reloads when pressing Enter or the Savebutton in the pagerbar. Where should I put the reload-statement?
I don't understand why in edit-mode the successfunc-tag belongs to the editParams block, but in add-mode it has to be in the addRowParams block. Is there anywhere a description where to put these tags?
Thanx oleg - the grid is great, but sometimes I miss a documentation....
The problem, which you describe, is related to the common design of jqGrid. jqGrid provides not only the options used during creating the grid, but it has many other methods used directly or indirectly, which options need be specified.
For example, there are exist editRow method, which its set of options and callbacks. You want to specify keys and extraparam options and the successfunc callback. Direct call of editRow (inside of onSelectRow or ondblClickRow callbacks, for example) will look like
$(this).jqGrid("editRow", {
keys: true,
extraparam: { ... },
successfunc: function() { ... }
});
The problem is that the editRow will be called not only directly, by indirectly, from addRow, from inlineNav or from the action formatter. Every from the methods provides some ways to specify the options, which will be forwarded to editRow, but the usage of such options is not comfortable and the maintain of resulting code isn't so good.
Because of that free jqGrid introduced the possibility to specify default options for the grid context. The grid parameter inlineEditing for example allow to specify default options of editRow on one place and all direct or indirect calls of editRow will uses the options. One can still overwrite the options is needed (inside of editParams option of inlineNav, for example). In the same way, one can use new jqGrid options formEditing, formViewing, formDeleting, searching, navOptions, inlineNavOptions and so on. Additionally some simple options like pager are improved in free jqGrid. One can specify pager: true and jqGrid will create the div for the pager itself, like it does for toppager: true option. One can just skip the pager parameter ('#addBtns' in your case) for navGrid, inlineNav or navButtonAdd. By the way, your original code contains syntax error: you use pager property of jqGrid twice: once as pager: true and once more as pager: '#addBtns'.
Thus you can rewrite your original code to for example the following
jQuery("#grid").jqGrid({
url: "serverAction",
datatype: "json",
mtype: "POST",
pager: true,
pgbuttons: false,
pginput: false,
pgtext: false,
postData: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
colModel:[
//{name: "id", label: "key", hidden: true, key: true},
{name: "priority", label: "prio"},
....
{name: "act", label: "", align: "left", template: "actions"}
],
navOptions: { edit: false, del: false, search: false, add: false },
inlineNavOptions: { add: true, edit: true },
actionsNavOptions: { delbutton: true, editbutton: true },
inlineEditing: {
keys: true,
extraparam: {
currentCompanyCode: function () {
return jQuery("#availCompanyCodes").val();
}
},
aftersavefunc: function () {
var $grid = jQuery(this);
setTimeout(function () {
$grid.trigger("reloadGrid");
});
}
}
}) .jqGrid("navGrid")
.jqGrid("inlineNav");
I have referred this link and also this one link Both are Oleg's solutions to the problem. I used the same solution but the drop down doesn't populate with the values except for 'All'
I placed the code in load complete and I see the values when you call the 'setSearchSelect' function but only 'All' shows up in the dropdown.
Here's the code-
setupGrid: function (grid, pager) {
$(grid).jqGrid({
datatype: 'local', // set datatype to local to not inital load data
mtype: 'GET',
url: swUrl + ptSearchDashboardUrl,
colNames: colNames,
colModel: colModel,
altRows: false,
pager: $(pager),
loadonce: true,
sortable: true,
multiselect: true,
viewrecords: true,
loadComplete: function (data) {
//setSearchSelect.call($grid, 'RequestType');
//setSearchSelect.call($grid, 'Country');
},
onSelectRow: function() {
var checkedIDs = $(this).jqGrid('getGridParam', 'selarrrow');
if (checkedIDs.length > 0)
$("#ReassignBtn").show();
else
$("#ReassignBtn").hide();
}
}).navGrid(pager, { add: false, edit: false, del: false }).trigger('reloadGrid', [{ current: true }]);
setSearchSelect.call($grid, 'RequestType');
setSearchSelect.call($grid, 'Country');
$grid.jqGrid("setColProp", "Name", {
searchoptions: {
sopt: ["cn"],
dataInit: function(elem) {
$(elem).autocomplete({
source: getUniqueNames.call($(this), "Name"),
delay: 0,
minLength: 0,
select: function(event, ui) {
var $myGrid, grid;
$(elem).val(ui.item.value);
if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
$myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
if ($myGrid.length > 0) {
grid = $myGrid[0];
if ($.isFunction(grid.triggerToolbar)) {
grid.triggerToolbar();
}
}
} else {
// to refresh the filter
$(elem).trigger("change");
}
}
});
}
}
});
$(grid).jqGrid('filterToolbar', {stringResult:true, searchOnEnter:true, defaultSearch:"cn"});
}
This is from the UI - I can only see one option value even though there are many.
<td class="ui-search-input">
<select name="RequestType" id="gs_RequestType" style="width: 100%;">
<option value="">All</option>
</select>
</td>
The code which you use getUniqueNames which uses .jqGrid("getCol", columnName) to get the data from the column. On the other side you use datatype: 'local' to create empty grid. The calls setSearchSelect.call($grid, 'RequestType');, setSearchSelect.call($grid, 'Country'); and getUniqueNames.call($(this), "Name") will be made before the grid will be filled with data. Thus you fill set empty set of select elements.
I suppose that you change later the datatype to "json" or "xml" and reload the grid. Only after your get response from the server you will ba able to fill the select values. I would suggest you to use beforeProcessing, which will be called after loading the data from the server, but before processing of the data. You can modify getUniqueNames and setSearchSelect so that it get the data from the input data directly and calls setColProp. Finally you should call destroyFilterToolbar and call filterToolbar once more to create the filter toolbar with the current data.
I've set up my kendo ui grid to read data from an MVC action that returns JSON. I'm using the free version of Kendo and not the MVC specific, due to cost.
The issue is that when the page loads and does the initial population of the grid it doesn't show the loading spinner. After grid is populated and I go to another page or sort a column it shows up.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20).
Does anyone know why you have to set the height parameter? Or any way of getting the spinner to work without setting the height.
My kendo javascript kode:
$("#grid").kendoGrid({
dataSource: new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
//kendo.ui.progress($("#loading"), true); <-- this works on initial load, but gives two spinners on every page or sort change
},
requestEnd: function () {
//kendo.ui.progress($("#loading"), false);
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
}),
height: "100%", <-- I want to avoid this as it renders the grid way to small
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});
I had this same issue. It actually is rendering the spinner / progress bar, but because the grid content area initially has no height, you can't see it. This worked for me. Give it a shot:
// This forces the grids to have just al little height before the initial data is loaded.
// Without this the loading progress bar / spinner won't be shown.
.k-grid-content {
min-height: 200px;
}
The solution var to use a variable to tell me if the dataset load was the initial one or not. It's not a perfect solution, but it's the only one I've been able to make work.
var initialLoad = true;
$("#grid").kendoGrid({
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "PaymentRefId",
title: "Id"
},
{
field: "DueDate",
title: "Due Date"
},
{
field: "Credit",
title: "Amount"
},
{
field: "InvoiceGroupId",
title: " ",
sortable: false,
template: 'See details'
}
],
});
var ds = new kendo.data.DataSource({
transport: {
read: url,
parameterMap: function (options) {
var result = {
pageSize: options.pageSize,
skip: options.skip,
take: options.take,
page: options.page,
};
if (options.sort) {
for (var i = 0; i < options.sort.length; i++) {
result["sort[" + i + "].field"] = options.sort[i].field;
result["sort[" + i + "].dir"] = options.sort[i].dir;
}
}
return result;
}
},
requestStart: function () {
if (initialLoad) <-- if it's the initial load, manually start the spinner
kendo.ui.progress($("#invoiceGroupGrid"), true);
},
requestEnd: function () {
if(initialLoad)
kendo.ui.progress($("#invoiceGroupGrid"), false);
initialLoad = false; <-- make sure the spinner doesn't fire again (that would produce two spinners instead of one)
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
schema: {
total: "total",
data: "data"
},
});
Chances are, because you are creating and setting the datasource in the grid's initialization, the grid loads so fast that you don't see a load spinner. If you look at all the web demos for kendogrid on their website, you rarely see the initial load spinner. On large remote datasources that take longer to load, you would see it.
If I set the height parameter of the grid, I get the initial spinner but the grid only shows one row (should have shown 20)
It's not that it only shows one row. It's because it failed to read it your height property value so it defaulted to as small as possible. Height takes in a numeric pixel value and does not accept percentages. It couldn't read your value, so it probably took longer to initialize the grid, which allowed you to see the load spinner. Instead, height should be set like height: 400, for example. But this is besides the point.
If you really want the user to see a load spinner on start, try loading the datasource outside of the grid initialization. Basically, load the grid first, and load the datasource after so that there is slightly more delay between the grid rendering and datasource setting.
$("#grid").kendoGrid({
//kendoGrid details... but exclude dataSource
});
var ds = new kendo.data.DataSource({
//DataSource details...
});
And then set the datasource like this:
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(ds);
grid.refresh();
However, I think this would still load pretty fast.
Another last resort if you still really want the spinner is to trick the user into thinking it's taking longer to load and manually call the load spinner like you've tried. Call kendo.ui.progress($("#loading"), true);, execute a small delay function for say 250ms and then turn the load spinner off, and then call grid.setDataSource(ds); and refresh.