Develop Reference

Populate a column in Kendo Grid based on separate Datasource

I have a kendo grid like what I've posted below. I'm populating the grid based on the data in the url I provided for it. However, there is one column on the grid, the flag column, which I would like to be a separate datasource to populate that column, based on the id. The datasource for that column would look something like:
[{id:1234, flag: 'N'}, {id:5678, flag:'Y'}]
Is there a way where I can populate just 1 column in the grid based on a completely different datasource from the rest of the grid? The flag would need to be placed on the row of its corresponding id. If so, how can I implement this? Any help would be appreciated.
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: url
},
pageSize: 30
},
height: 400,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
field: "id",
title: "ID",
width: 240
}, {
field: "FirstName",
title: "First Name"
}, {
field: "LastName",
title: "LastName"
}, {
field: "flag",
title: "Flag",
width: 150
}]
});

Consider using a foreign key column.
http://demos.telerik.com/kendo-ui/grid/foreignkeycolumn

jqGrid ignores first keystroke after showing alert/confirm dialog

i have a requirement to show a confirmation message before editing a cell. User can either choose to use a auto-calculated value or can enter new value in the Col 2. If user chose to use the auto-calculated value, next cell (Col 3) should be put in edit mode.
I am using code shown below, so when user tabs thru Col 1 to Col 2, it displays a confirmation dialog box. When user clicks Cancel on the dialog box, the focus remains in Col 2 and if user clicks on Ok focus is set to Col 3.
The problem here is that, after closing the dialog box, when i try to type in the textbox, the first keystroke is ignored and nothing happens. However subsequent keystrokes work fine.
Strange thing is that, if i click directly in Col 2, everything works fine (first keystroke is not ignored). Issue happens only when i navigate from Col 1 to Col 2 by pressing tab.
Please help me fix this issue.
$(gridId).jqGrid({
colNames: ["Id", "Name", "Col 1", "Col 2", "Col 3"],
colModel: [
{ name: "Id", index: "Id", hidden: true, key: true, formatter: 'text' },
{ name: "Name", index: "Name", width: '165px', align: 'left', resizable: false, editable: false, classes: 'non-editable', formatter: 'text' },
{ name: "Col1", index: "Col1", width: '60px' },
{ name: "Col2", index: "Col2", width: '60px' },
{ name: "Col3", index: "Col3", width: '60px' }
],
hidegrid: false,
rowNum: 50,
rowList: [10, 20, 50, 100],
scroll: true,
loadonce: true,
sortorder: "asc",
height: 370,
datatype: 'json',
viewrecords: true,
mtype: 'GET',
ignoreCase: true,
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata"
},
url: gridUrl,
editurl: '#',
cellEdit: true,
cellsubmit: 'clientArray',
footerrow: true,
multiselect: false,
//autowidth: true,
cmTemplate: {
//Default col model properties, if not using default, override in the colmodel
resizable: false,
edittype: "text", //for checkbox, override in the colmodel
align: "right",
editable: true,
formatter: 'number', //for text, override in the colmodel
formatoptions: { decimalSeparator: ".", thousandsSeparator: "", decimalPlaces: 1, defaultValue: '', align: "right" },
editrules: { number: true} //Setting numeric validation for all columns as all the editable columns are numbers
},
beforeEditCell: function (rowid, cellname, value, iRow, iCol) {
var grid = $(this);
if (prevCellName != cellname && cellname == "Col2") {
var autoCalculated = 123;
var response = confirm("The Col 2 auto-calculated value is " + autoCalculated + ". Would you like to use this value?");
if (response == true) {
setTimeout(function () {
grid.jqGrid('setCell', rowid, "Col2", autoCalculated);
}, 10);
setTimeout(function () {
grid.jqGrid('editCell', iRow, iCol + 1, true);
}, 20);
}
}
prevCellName = cellname;
}
});

jQGrid - "jpg1" instead of proper id number

I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:
$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{
label: 'Kod',
name: 'Kod',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Firma',
name: 'Firma',
width: 120,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true,
sorttype: 'string'
},
{
label: 'Adres',
name: 'Adres',
width: 80,
editoptions: {size: 40},
editable: true
},
{
label: 'Miasto',
name: 'Miasto',
width: 80,
editoptions:
{
size: 40,
sopt:['cn']
},
editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
$("#jqGrid").jqGrid('editGridRow', rowid,
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
});
}
});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
zIndex:100,
recreateForm: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
width: 900,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
zIndex:100
},
// options for the View Dialog
{
width: '100%'
});
I'm attaching a screenshot that shows a problem:
Photo
The data I use is a file parsed into JSON array via Papaparse.js plugin.
EDIT:
I've added the test data if somebody would like to test the code.
var myData = [];
myData.push(
{
Kod: 1.1,
Firma: 'Hutchinson',
Adres: '5th Avenue',
Miasto: 'Wroclaw'
},
{
Kod: 2.1,
Firma: 'BMW',
Adres: '6th Avenue',
Miasto: 'Warsaw'
});
I will be grateful for any help.

If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).
Alternatively you can change the block "options for the Add Dialog" to the following
// options for the Add Dialog
{
width: 900,
zIndex:100,
closeAfterAdd: true,
recreateForm: true,
reloadAfterSubmit: true,
onclickSubmit: function (options, postdata, frmoper) {
// save Kod in some other parameter
return {myKod: postdata.Kod};
},
afterSubmit: function (jqXHR,postdata, frmoper) {
// restore the correct value
postdata.Kod = postdata.myKod;
// inform jqGrid that it was not an error
return [true];
}
},
You still don't would be able to change the id of the row in the way.
By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).
The demo shows an example of the above code fixes using free jqGrid 4.8.

Formatted HTML data in Kendo grid column

Hi I have a Kendo Grid created in jquery with following code:
Kendo Grid:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text" },
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
The problem:
First column Note Text will be having values which will be containing HTML formatted data.
For a better idea below is an example:
Right Now the data is displayed as :
First Name : Nitin <br/> Second Name : Rawat
But I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Also , Note Text column will be edited through inline editing so during editing mode also I want the data to be displayed as :
First Name : Nitin
Second Name : Rawat
Any help will be highly appreciated.

Set the encoded attribute of the column to false to disable automatic HTML encoding.
From the doc page:
If set to true the column value will be HTML-encoded before it is
displayed. If set to false the column value will be displayed as is.
By default the column value is HTML-encoded.
Changed code:
$('#divFolderNotes').kendoGrid({
dataSource: data
batch: true,
columns: [
{ field: "Text", title: "Note Text", encoded: false }, #<------ Edit Here
{ field: "CreatedByDisplayName", width: '190px', title: "Created By" },
{ field: "CreatedDateTime", width: '190px', title: "Created Datetime" },
],
scrollable: true,
sortable: true,
reorderable: true,
resizable: true,
height: 250,
selectable: "row",
autoSync: true,
editable: true,// "inline",
navigatable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
})
EDIT: Since the line break should be preserved when editing, maybe you should just replace the <br /> tags with a line break character. That way it will show as an actual line break in form fields. Here is an example: jQuery javascript regex Replace <br> with \n
It might be better to do this when the user submits the data initially, but, if that isn't an option you can replace it in JS when displaying the data.

You can try kendo template.
for these Please Try Following links
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template
http://docs.telerik.com/kendo-ui/api/web/grid
hope this will help.

Passing dynamic params to delete url method in JQGrid

I am using a JQGrid witha json service to list all the database users membership information, so the url of the grid points to my json service and method. Everything is working fine so far, I can add and edit the users and amend data and it saves fine. However the delete of a DB user is another story as the Membership.DeleteUser takes the username as its parameter. The JQGrid only seems to pass editable params back when in add or edit mode. But when you're trying to delete it doesn't seem to allow any params to be returned which I find very odd. I have only just started using JQGrids so I could just be being thick :-). Please can anyone tell me how to accomplish this? I have the username as a column in the JQGrid itself. I have tried various things to date:
url: 'misc/myservice.svc/AddEditDeleteGridRow?UserName=' + $('#MyGridTbl').getCell('selrow', 'UserName')
in the delete section of the navGrid. I have also tried setting the URL in the select row event too but I found it required a reload to insert it into the grid and when this happens the selected row is lost and so defeats the object. I just need to be able to access/get the username inside the json service in order to pass it to Membership.DeleteUser. I have been searching the internet and can't seem to find anything.
Here is the JQGrid I am using. There json service basically just has the GetData which returns JQGridJSONData (json object dataset) and AddEditDeleteGridRow methods in it, both are public. All the column data is being sent to the json service for the add and edit but nothing is being sent for the delete operation.
Just to clarify I need the UserName on the server side in the json service.
$('#MyGrid').jqGrid({
url: 'Misc/MyjsonService.svc/GetData',
editurl: 'Misc/MyjsonService.svc/AddEditDeleteGridRow',
datatype: 'json',
colNames: ['UserId', 'UserName', 'Email Address', 'Password Last Changed', 'Locked'],
colModel: [
{ name: 'UserId', index: 'UserId', hidden:true, editable: true, editrules:{edithidden: true}},
{ name: 'UserName', index: 'UserName', editable: true, width: 200, sortable: false, editrules: { required: true} },
{ name: 'Email Address', index: 'Email', editable: true, width: 500, sortable: false, editrules: { email: true, required: true} },
{ name: 'Password Last Changed', index: 'LastPasswordChangedDate', editable: false, width: 200, sortable: false, align: 'center' },
{ name: 'Locked', index: 'IsLockedOut', sortable: false, editable: true, edittype: "checkbox", formatter: 'checkbox', align: 'center' }
],
rowNum: 20,
hidegrid: false,
rowList: [20, 40, 60],
pager: $('#MyGridPager'),
sortname: 'UserName',
viewrecords: true,
multiselect: false,
sortorder: 'asc',
height: '400',
caption: 'Database Users',
shrinkToFit: false,
onPaging: function(pgButton) {
this.DBUserId = null;
},
onSelectRow: function(Id) {
if (Id && Id !== this.DBUserId) {
this.DBUserSelect(Id);
}
},
loadComplete: function() {
if (this.DBUserId)
this.DBUserSelect(this.DBUserId, true);
},
gridComplete: function() {
var grid = $('#MyGrid');
var body = $('#AvailableDBUsersArea');
if ((grid) && (body)) {
grid.setGridWidth(body.width() - 10);
//keep the grid at 100% width of it's parent container
body.bind('resize', function() {
var grid = $('#MyGrid');
var body = $('#AvailableDBUsersArea');
if ((grid) && (body)) {
grid.setGridWidth(body.width() - 2);
}
});
}
}
}).navGrid('#MyGridPager',
{ add: true, edit: true, del: true, refresh: false, search: false }, //general options
{
//Options for the Edit Dialog
editCaption: 'Edit User',
height: 250,
width: 520,
modal: true,
closeAfterEdit: true,
beforeShowForm: function(frm) { $('#UserName').attr('readonly', 'readonly'); },
beforeShowForm: function(frm) { $('#UserId').removeAttr('readonly'); },
beforeShowForm: function(frm) { $('#UserId').attr('readonly', 'readonly'); }
},
{
//Options for the Add Dialog
addCaption: 'Add User',
height: 250,
width: 520,
modal: true,
closeAfterAdd: true,
beforeShowForm: function(frm) { $('#UserName').removeAttr('readonly'); },
beforeShowForm: function(frm) { $('#UserId').removeAttr('readonly'); },
beforeShowForm: function(frm) { $('#UserId').attr('readonly', 'readonly'); }
},
{
//Delete options
width: 350,
caption: 'Delete User',
msg: 'Are you sure you want to delete this User?\nThis action is irreversable.'
},
{} //Search options
);

There are some ways to add additional parameters to the Delete URL. It would be helpful to have the definition of the jqGrid, especially colModel.
If you have a hidden column for example use can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
parameters. Then the hidden column would be not seen in the edit dialog, but the value of the column will be send.
Another way can you choose if you need modify URL befor sending Delete request. You can define parameter of navGrid (see prmDel paremeter on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#how_to_use) which can be like following
{ onclickSubmit: function(rp_ge, postdata) {
rp_ge.url = 'misc/myservice.svc/AddEditDeleteGridRow?UserName=' +
$('#MyGridTbl').getCell (postdata, 'UserName');
}
}