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.
Related
I am using bootstrap-table and data is loading from URL. In the table I have setup checkboxes for ID column. My problem is that the all checkboxes are checked when the page is load. I found this question here, but its not help me to fix my issue.
This is my JS:
var $_bsTable = $('#table')
$_bsTable.bootstrapTable({
toggle: "table",
url: "./includes/view_suppliers.inc.php",
columns: [{
field: 'sid',
checkbox: true,
printIgnore: true,
//width: 64
},
{
field: 'image',
title: 'Image',
sortable: false,
align: 'center'
},
{
field: 'name',
title: 'Supplier Name',
sortable: true
},
{
field: 'address',
title: 'Address',
sortable: true
}
],
icons: {
columns: 'fa-th-list text-orange-d1',
detailOpen: 'fa-plus text-blue',
detailClose: 'fa-minus text-blue',
export: 'fa-download text-blue',
print: 'fa-print text-purple-d1',
fullscreen: 'fa fa-expand',
search: 'fa-search text-blue'
},
toolbar: "#table-toolbar",
theadClasses: "bgc-white text-grey text-uppercase text-80",
//clickToSelect: true,
checkboxHeader: true,
search: true,
searchAlign: "left",
//showSearchButton: true,
sortable: true,
//detailView: true,
//detailFormatter: "detailFormatter",
pagination: true,
sidePagination: 'client',
// serverSort: false,
paginationLoop: false,
showExport: true,
showPrint: true,
showColumns: true,
showFullscreen: true,
mobileResponsive: true,
//checkOnInit: true,
})
Hope somebody may help me out.
Are you maybe giving a value to checkboxes in your HTML?
From official documentation:
If a value is given the Checkbox is automatically checked. Its also possible to check/uncheck the checkbox by use an formatter (return true to check, return false to uncheck).
Here you can see an example: https://examples.bootstrap-table.com/#column-options/checkbox.html
enter image description here
I got a jqgrid, and I am trying to add a row by click the "+" botton, which is marked red. But the template is blank.
Below is scripts in JavaScripts.
$("#table_list_1").jqGrid({
url: "usermanage/getMainTableJson",
datatype:"json",
mytype:"GET",
height: 250,
autowidth:true,
colNames:['id','username','realname','email','createtime','updatetime'],
colModel:[
{name:'id',index:'id', width:'10%',align:'center'},
{name:'username',index:'username', width:'15%',align:'center'},
{name:'realname',index:'realname', width:'20%', align:"center"},
{name:'email',index:'email', width:'25%', align:"center"},
{name:'createdate',index:'createdate', width:'15%', align:"center", sortable:false},
{name:'updatedate',index:'updatedate', width:'15%',align:"center", sortable:false}
],
rownumbers:false,
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:10,
rowList:[10,20,40],
pager:$('#pager_list_1'),
add:true,
edit:true,
addtext:'Add',
edittext:'Edit'
});
$("#table_list_1").jqGrid('navGrid', '#pager_list_1',
{edit: true, add: true, del: true, search: true},
{height: 200, reloadAfterSubmit: true}
);
You should add editable: true property to the column, which you want to allow to edit. You can use cmTemplate property to specify default values for any property. Thus you can use for example the option
cmTemplate: { editable: true }
and to add editable: false to the column id. As the result all properties with exception id will be seen in the Add/Edit dialog.
I have 5 columns that display different Levels from Level0 to Level4. I hav a requirement to show all these level columns into 1 main columns named Levels, i.e. 1 column name level having 5 sub columns named lv0, lv1... lv4?
I tried solution provided in How to display multiple values in same column in jqgrid
but it is merging the values and hence mismatch of values with the header.
Is there a way to merge columns into 1 columns and not just the values?
below is the colModel and ColNames for the jqgrid:
'detailViewcolNames': [
"Sub Project(s)",
"LV0",
"LV1",
"LV2",
"LV3",
"LV4",
"Status",
"%Comp",
"%Weight",
"Wins",
"Attention",
"Escalation",
"Comments",
"Next Steps"
],
'detailGridcolModel': [{
name: 'name',
width: '15%',
index: 'name',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = "<span class='gridTitle'>" + cellvalue + "</span>";
return cellHtml;
},
unformat: function(cellvalue, options, rowObject) {
return cellvalue;
},
}, {
name: "Status",
index: 'Status',
width: '5%',
title: false,
resizable: false,
sortable: false,
jsonmap: "from[Subtask].to.Status",
formatter: function(cellvalue, options, rowObject) {
return pathProjectModel.getStatusMapImage(cellvalue, options, rowObject);
}
}, {
name: 'LV0',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV1',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV2',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV3',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'LV4',
width: '5%',
title: false,
resizable: false,
sortable: false,
}, {
name: 'attribute[Percent Complete]',
index: 'attribute[Percent Complete]',
width: '10%',
title: false,
resizable: false,
sortable: false,
jsonmap: "attribute[Percent Complete]",
}, {
name: 'Weight',
index: 'Weight',
width: '10%',
title: false,
resizable: false,
hidden: true,
sortable: false,
jsonmap: "Weight",
}, {
name: "Win",
index: "Win",
width: '15%',
title: false,
resizable: false,
sortable: false,
jsonmap: "Win",
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
}
}, {
name: "Attention",
index: "Attention",
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Attention"
}, {
name: 'Escalation',
index: 'Escalation',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Escalation"
}, {
name: 'Comments',
index: 'Comments',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Comments"
}, {
name: 'Next Steps',
index: 'Next Steps',
width: '15%',
title: false,
resizable: false,
sortable: false,
formatter: function(cellvalue, options, rowObject) {
var cellHtml = pathProjectModel.multiValuesFormatter(cellvalue, options, rowObject);
return cellHtml;
},
jsonmap: "Next Steps"
}, ]
below is the Sample data. Here id property contains rowid
responseObj = {
id: "2432.XXXXXXXXXXXXXX",
"name": "project Name",
"Status": "On Track",
"LV0": "100",
"LV1": "90.0",
"LV2": "0.0",
"LV3": "12.0",
"LV4": "",
"attribute[Percent Complete]": "0.0",
"Weight": "30.0",
"Win": [
["fasdfgasdf"]
],
"Attention": [
["sdfasdga"]
],
"Escalation": [
["fedgsdshsdfh"]
],
"Comments": [
["dgdfhdfhdfuiopjnjkn"]
],
"Next Steps": [
["vbmcbvndfgec"]
]
}
If you really need to use old jqGrid 4.6.0 and to use datatype: "local" then you should change the format of input data. It's the way, which I would recommend you. Alternatively you could try to use datatype: "jsonstring" and provide the input data via datastr parameter instead of data. You will have to change jsonmap defined as function to read the input data. In any way you have to fix the values of name properties, which you use.
The name property of jqGrid will be used to generate id attributes of some internal elements. HTML5 don't allow to use spaces in id (see here the statement: "The value must not contain any space characters"). Additionally the name will be used in different CSS selectors and you can have problems in case of usage names, which contains [ or ] (see [Percent Complete]).
You should not use formatter to build the value of "virtual" property from other existing properties. Instead of that you should use jsonmap or "pre-process" the input data to set new property. If you do use custom formatter, then it's strictly recommended to specify unformat callback too.
The practical example is following. Let us you have input data with numeric the properties price and tax any you want to display the corresponding columns and total_price additionally, which build as the sum of price and tax. The recommended way: you should fill total_price once or to use jsonmap defined as function to calculate the sum of price and tax. After that you can use predefined formatter: "currency" to display the value. I think that you should generate one additional column from lv0, lv1... lv4 in exact the same way.
Additionally, I want to remark that the usage of old jqGrid 4.6 now is dangerous, because it's not supported since 2014. To be exact, there are not exist "jqGrid" product at all. There are exist two main forks of the old jqGrid: "free jqGrid", which I develop, and which current version is 4.14.0 and commercial "Guriddo jqGrid JS", which current version is 5.2.1. I strictly recommend you to migrate to one from the currently developed and supported products. I remind you about the problem described in the answer. The version of jqGrid, existing at the time, displayed wrong grid in the new version of Chrome. Google publish new version every 1.5-2 months. It could be that jqGrid 4.6 (and your existing web application) will display wrong grids in the next version of Chrome/Firefox or any other web browser. The only solution of the problem will be migration to another version of jqGrid, with the fixed code. If you continue to use jqGrid 4.6 then you will have to implement the fix yourself. If you would use the current version of "free jqGrid" or "Guriddo jqGrid JS" then the fix will implement developers of the corresponding product and you will need just to download the new version from GitHub.
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
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.