Im using my react project for ant design 4 table, anyone know how to adding background color for ant design table row and col,
Thanks
like this
stazkblitz here
code part here
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
title: 'Book',
dataIndex: 'book',
key: 'book',
},
{
title: 'Pen',
dataIndex: 'pen',
key: 'pen',
},
{
title: 'Tools',
key: 'tools',
dataIndex: 'tools',
},
{
title: 'Total',
key: 'total',
dataIndex: 'total',
},
];
const data = [
{
key: '1',
name: 'John Brown',
book: <Form.Item name="book1" rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
pen: <Form.Item name="oen1" rules={[{required: true, message: "is required"}]}><Input style={{width: 150}}/></Form.Item>,
tools: <Form.Item name="tools1" rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
total:'00000'
},
];
const onFinish = values => {
console.log(values);
};
ReactDOM.render(
<div>
<Form name="control-hooks" onFinish={onFinish}>
<Table columns={columns} dataSource={data} />
<div>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</div>
</Form>
</div>, document.getElementById('container'));
For column, you can use just prop className in every item of columns.
For instance:
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
className: 'bg-red',
render: text => <a>{text}</a>,
},
{
title: 'Book',
dataIndex: 'book',
key: 'book',
},
{
title: 'Pen',
dataIndex: 'pen',
key: 'pen',
},
{
title: 'Tools',
key: 'tools',
dataIndex: 'tools',
},
{
title: 'Total',
className: 'bg-green',
key: 'total',
dataIndex: 'total',
},
];
For row, you can use rowClassName in your Table component, just like this:
<Table rowClassName="bg-red"/>
Related
Is it possible to search all columns without listing them individually? My problem is new columns will be added on a regular basis and I don't want to have to come back and add the column header each time. For example in the code below instead of listing "Name", "Phone", "Email", ... etc. is there some code I could use to basically say if the column exists to include it in the filter?
Thanks in advance!
$(document).ready(function () {
$("#FieldFilter1").keyup(function () {
var value = $("#FieldFilter1").val();
grid = $("#UnclaimedLeadsGrid").data("kendoGrid");
if (value) {
grid.dataSource.filter({
logic: "or",
filters: [
{ field: "Name", operator: "contains", value: value },
{ field: "Phone", operator: "contains", value: value },
{ field: "Email", operator: "contains", value: value },
{ field: "Address", operator: "contains", value: value },
{ field: "City", operator: "contains", value: value },
{ field: "State", operator: "contains", value: value },
{ field: "ZipCode", operator: "contains", value: value },
{ field: "Subject", operator: "contains", value: value },
{ field: "Message", operator: "contains", value: value },
{ field: "FirstName", operator: "contains", value: value },
{ field: "LastName", operator: "contains", value: value }
]
});
} else {
grid.dataSource.filter({});
}
});
});
This sounds like a job for the Search Panel.
You add the Search Panel as a toolbar option to the grid:
toolbar: ["search"]
The search box will appear in the top right of the grid. The search will run a "contains" filter on all of the columns in your grid.
Here is the example from the demo page linked above:
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
toolbar: ["search"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>
I am trying to make a dropdown filter for angular ui-grid. I originally found the how-to article here, and upon not being able to work it, i went back to the source to try to work it. I am still having no success. the column filter just looks like a regular filter, without any dropdown. Can someone help me fix it up?
Column def:
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
This is how it looks (if I click the input, its just accepts text)
Is there something else im missing?
-----UPDATE WITH MY WHOLE SETUP-----------
//options for the main grid
$scope.gridOptions = {
enableFiltering: true,
multiSelect: false,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid
//handler for clicking rows and getting row object
gridApi.selection.on.rowSelectionChanged($scope, function(row){
thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
console.log(thisRow[0].uniqueId)
});
},
data: 'myData'
, rowTemplate: rowTemplate()
, columnDefs: [
{
field: 'alert'
, displayName: 'ALERTS'
, width: '70'
, headerCellClass: $scope.highlightFilteredHeader
,sort: {
direction: uiGridConstants.DESC,
priority: 1
}
},
{
field: 'firstName'
, displayName: 'FIRST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'lastName'
, displayName: 'LAST NAME'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'dob'
, displayName: 'DOB'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'careCoordinatorName'
, displayName: 'Care Coordinator Name'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'userStatus'
, displayName: 'STATUS'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'homeNum'
, displayName: 'PATIENT HOME #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'cellNum'
, displayName: 'PATIENT CELL #'
, width: '130'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'mi'
, displayName: 'MI'
, width: '60'
, headerCellClass: $scope.highlightFilteredHeader
},
{
field: 'sex'
, displayName: 'SEX'
, width: '120'
, type: uiGridConstants.filter.SELECT
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] }
}
]
};
Row template (if relevant):
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
Grid HTML
<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div>
------UPDATE 2-----------
After changing coldef to
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
This is how my column now looks (with another column to the left for comparison)
------UPDATE 3-----------
When I inspected the area, I could see the code for the select. So no we know its there, its just not showing
-----UPDATE 4----------
Materializecss was making it invisible. it was there the whole time
select {
display: inline !important;
height: 15px !important;
}
solved the problem
Ah, I believe your problem is that the type option for the coldef is in the wrong location. I've expanded the code a bit for readability; you can easily get lost in the objects if they are too compressed.
What you have:
{
field: 'sex',
displayName: 'SEX',
width: '120',
type: uiGridConstants.filter.SELECT,
filter: {
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
What it should be:
{
field: 'sex',
displayName: 'SEX',
width: '120',
//type: uiGridConstants.filter.SELECT,
filter: {
type: uiGridConstants.filter.SELECT, // <- move this to here
selectOptions: [
{ value: 'male', label: 'male' },
{ value: 'female', label: 'female' }
]
}
}
I have problem here.With kendo grid i'm loading data from some action in controller.But in the last column i have link which should fire another action in same controller.When i delete this piece of code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
last column is working perfect,bit when is present this piece of code, last column is not working>please here some help, i;m new to mvc.Below is the code:
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "Status",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "jobNumber",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "Customer",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "Id"
},
#*{
field: "ShortDesc",
title: "ShortDesc"
},*#
{
field: "DateCompletition",
title: "DateCompletition"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: 'Edit'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true
});
});
</script>
It seems you want to add a command to the grid, The way to add a command as described here is as follows
var grid = $("#jobs-grid").kendoGrid({
dataSource: {
pageSize: 20,
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
},
pageable: true,
height: 550,
columns: [
{ field: "JobNumber", title: "JobNumber", width: "140px" },
{ field: "CustomerId", title: "Customer", width: "140px" },
{ field: "Id", title:"Id" },
{ field: "DateCompletition", title:"DateCompletition" },
{ command: { text: "Edit",
click: function(e){
// here you can add your code
}},
title: " ",
width: "180px" }]
}).data("kendoGrid");
You might have a look on the documentation of the kendo grid here
Hope this will help you
I have a problem with gijco grid in this case.
I have 2 grids in a same View (ASP.NET MVC).
If I have a pager in the first grid and not in second, the second grid doesn't load tha data... if I uncomment the pager on second grid (with the same condition) the data are loaded properly (see code).
Source
$(document).ready(function () {
datasourceiniziale = #Html.Raw(Json.Encode(Model.PSA));
dsIstruttori = #Html.Raw(Json.Encode(Model.Istruttori));
$("#hdatasource").val(JSON.stringify(#Html.Raw(Json.Encode(Model.PSA))));
grid = $("#gridPSA").grid({
pager: { enable: true, limit: 10, sizes: [10, 20, 50, 100] },
dataSource: datasourceiniziale,
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>idPSAAzienda:</b>{idPSAAzienda}<br /><b>idToken:</b>{idToken}<br /><b>Compilatore;</b>{Compilatore}<br /><ul><li><b>CompilatoreContatti:</b>{CompilatoreContatti}</li></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "Id", sortable: false, hidden: true },
{ field: "idPSAAzienda", sortable: false, hidden: true },
{ field: "idToken", sortable: false, hidden: true },
{ field: "Compilatore", sortable: false, hidden: true },
{ field: "CompilatoreContatti", sortable: false, hidden: true },
{ field: "RagioneSociale", sortable: false, title: "Ragione Sociale" },
{ field: "Comune", sortable: false, title: "Comune" }
//,
//{ width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Modifica", events: { "click": Edit } },
//{ width: 34, type: "icon", icon: "glyphicon-remove", tooltip: "Elimina", events: { "click": Delete } }
]
});
gridIstruttori = $("#gridIstruttori").grid({
dataSource: dsIstruttori,
//pager: { enable: false, limit: 10, sizes: [10, 20, 50, 100] },
selectionMethod: 'checkbox',
selectionType: 'multiple',
detailTemplate: '<div class="panel-footer"><div class="alert alert-warning small"><span class="glyphicon glyphicon-info-sign"></span><br /><b>IdUtente:</b>{IdUtente}<br /><b>UserName:</b>{UserName}<br /></div></div>',
dataKey: "Id",
uiLibrary: "bootstrap",
columns:
[
{ field: "IdUtente", sortable: false, hidden: true },
{ field: "Cognome", sortable: false},
{ field: "Nome", sortable: false },
{ field: "UserName", sortable: false, title: "Username", hidden: true }
]
});
});
Where is the error?
Exist a workaround for this situation?
Thanks.
This is a bug in version 0.6.
This is an example with workaround for this issue.
<table id="grid1"></table>
<table id="grid2"></table>
<script>
var data1 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
var data2 = [
{ 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' },
{ 'ID': 2, 'Name': 'Ronaldo Luis Nazario de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' },
{ 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }
];
$('#grid1').grid({
dataSource: data1,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
gj.grid.methods.getRecordsForRendering = function ($grid) {
return $grid.data('records');
};
$('#grid2').grid({
dataSource: data2,
uiLibrary: 'bootstrap',
columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ]
});
</script>
This is already fixed in version 1.0 and above I would recommend you to upgrade to new version from http://gijgo.com
Here is my code below. I need to link the onclick to my Action in my controller for the toolbar button.
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: { url: '#Url.Action("GetCars", "Home")' }
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: [ { name: "create", text: "Add a new car" }],
height: 550,
sortable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 150 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
});
</script>
The way i always did it in Razor was:
.ToolBar(toolbar => toolbar.Custom().Text("Add new car").Action("Create", "Home"))
I found the answer to my problem.
toolbar: [{ name:"create", template: "<input type='submit' value='Add
new' onclick=\"location.href='#Url.Action("Create", "Home")'\" />" }],