Note: Image is in the database named as "profileImage" I want to make image object that is dynamic as like other objects, whenever I add this code
{
label: "Image",
name: "profileImage",
}
it simply display the image endpoint like 3704545668418.PNG
and the url for profileImage is https://cloudclinicdevapi.azurewebsites.net/Profile/3704545668418.PNG
Now please tell me how can I add image column in this table
this.state = {
columns: [
{
label: "National ID",
name: "nationalID",
sortable: true,
filter: true,
options: {
customBodyRender: (val) => (
<NavLink className="NavLink" to={`/EditPatient?Patient=${val}`}>
{val}
</NavLink>
),
},
},
{
label: "Patient Name",
name: "name",
filter: true,
},
{
//want to add Image here
},
{
label: "Phone Number",
name: "phone",
sortable: true,
filter: true,
},
{
label: "Address",
name: "address",
sortable: true,
filter: true,
},
{
label: "ID",
hide: true,
name: "nationalID",
button: {
show: true,
value: "Make an Appointments",
operation: (val) => this.needAppointment(val),
},
},
],
rowSelection: "single",
rowData: [],
}`
Looks like you are using mui-datatables. If so, you should be able to just use another custom renderer:
{
// add Image
label: "Image",
name: "profileImage",
sortable: false,
filter: false,
options: {
customBodyRender: (val) => (
<img src={`https://cloudclinicdevapi.azurewebsites.net/Profile/${val}`} />
),
},
},
Related
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
I am very new to NVC working on an existing solution. We are using a dxDataGrid, and I am trying to add a column with custom buttons. I am using the following documentation as reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/buttons/
and
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/jQuery/Light/
The existing implementation of the grid is as follows:
$(function () {
$("#branchDataGrid")
.dxDataGrid({
dataSource: {
store: dxMvcStore({
key: "ID",
})
},
showBorders: true,
noDataText: "No Branch Selected",
editing: {
mode: "batch",
allowAdding: false,
allowUpdating: true,
allowDeleting: true
},
paging: { enabled: true, pageSize: 10 },
showRowLines: true,
sorting: { mode: "none" },
columns: [
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
],
onInitialized: e => {
self.companiesNodeDataGrid = e.component as DevExpress.ui.dxDataGrid;
},
onRowExpanding: e => {
// Only show one detail view at a time.
self.companiesNodeDataGrid.collapseAll(-1);
},
onRowInserting: e => {
// self.saveCompanyResult(e, true);
},
onRowUpdating: e => {
// self.saveCompanyResult(e, false);
}
}).dxDataGrid("instance");
});
I am trying to add my column with the buttons as shown in the documentation. Here is a snippet:
columns: [
{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
},
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
]
The problem is that I am getting a compiler error in the line where it says "type: "buttons". Please see the below screenshot for reference:
I have done some searching but cannot seem to find any posts with similar issues. If anyone might have some advice for me where to look for a solution, or point out what I am doing wrong, I would be very grateful.
I have managed to continue using a different approach of adding custom markup to a column, as shown in the below link:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/jQuery/Light/
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron
(i posted this on the extjs forum too but recon SO is probably busier)
HI
I'm passing down the following json to a direct store:
{
"type": "rpc",
"tid": 2,
"action": "DirectReportDesigner",
"method": "GetReports",
"result": {
"total": 1,
"data": [{
"id": 1,
"FullTypeName": null,
"title": "test",
"useGroupedColConfig": false,
"groupTextTemplate": "{'ProviderName': ' Contract Number -- {gvalue}','ProviderName': ' Provider Name -- {gvalue}'}",
"groupHeaders": null,
"groupFields": "['CostElement2', 'CostElement3', 'CostElement4']",
"groupedHeaders": false,
"jsonUrl": "report/BudgetManagerBudgetData.rails",
"menuType": "rptmid",
"actualType": "rptmid",
"ignoreCols": "1",
"getRowClass": "settings.utils.highlightRowWhenCellEmptyClass",
"deleted": false,
"fitToScreen": false,
"isCopyOf": 0
}]
}
}
here is what the js code looks like:
Ext.extend(Ideal.ReportDesigner.ReportGrid, Ideal.UI.BaseGrid, {
pageSize: 25,
afterRender: function() {
this.getStore().load({
params: {
start: 0,
limit: 25
}
});
Ideal.ReportDesigner.ReportGrid.superclass.afterRender.apply(this, arguments);
},
header: false,
view: new Ext.grid.GridView({
autoFill: true
}),
cm: new Ideal.UI.ColumnModel([{
header: 'Report Name',
id: 'nameCol',
sortable: true,
dataIndex: 'title'
}, {
header: 'Json URL',
sortable: true,
dataIndex: 'jsonUrl'
}, {
header: 'Group Text Template',
sortable: true,
dataIndex: 'groupTextTemplate'
}, {
header: 'Group Headers',
sortable: true,
dataIndex: 'groupHeaders'
}, {
header: 'Group Fields',
id: 'groupFieldsCol',
sortable: true,
dataIndex: 'groupFields'
}, {
header: 'Grouped Headers',
sortable: true,
dataIndex: 'groupedHeaders'
}, {
header: 'Fit to Screen',
sortable: true,
dataIndex: 'fitToScreen'
}, {
header: 'Ignore Cols',
sortable: true,
dataIndex: 'ignoreCols'
}, {
header: 'Get Row Class',
sortable: true,
dataIndex: 'getRowClass'
}
]),
initComponent: function() {
var ds = new Ext.data.DirectStore({
directFn: DirectReportDesigner.GetReports,
paramsAsHash: false,
paramOrder: 'start|limit|sort|dir',
root: 'data',
idProperty: 'id',
totalProperty: 'total',
sortInfo: {
field: 'title',
direction: 'ASC'
},
fields: [{
name: 'id'
}, {
name: 'title'
}, {
name: 'useGroupedColConfig'
}, {
name: 'groupTextTemplate'
}, {
name: 'groupHeaders'
}, {
name: 'groupFields'
}, {
name: 'groupedHeaders'
}, {
name: 'jsonUrl'
}, {
name: 'menuType'
}, {
name: 'actualType'
}, {
name: 'fitToScreen'
}, {
name: 'ignoreCols'
}, {
name: 'getRowClass'
}, {
name: 'isCopyOf'
}
],
remoteSort: true
});
var pager = new Ext.PagingToolbar({
store: ds,
displayInfo: true,
pageSize: this.pageSize
});
var config = {
store: ds,
bbar: pager
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Ideal.ReportDesigner.ReportGrid.superclass.initComponent.apply(this, arguments);
}
});
the grid renders ok, the server code to get the json fires ok, but the store never loads the data. i know it's being passed back as i can see it in firebug and that's how i pasted it above.
can anyone see anything obvious here?
cheers
w://
I've always defined store's fields as an array of strings, not as objects.
fields: ['id','title','useGroupedColConfig', ...]
i managed to sort this - it was the name of the c# variable that was getting serialized that was throwing it - why i have no idea!!!