EJ2 Data Grid Checkbox Selection - javascript

I have an EJ2 data grid code in Javascrpt. I have checkboxes to select 1 to many rows. Upon selecting a row(s), how do I get the "Id" of those rows? Below is my grid definition.
var grid = new ej.grids.Grid({
dataSource: #Html.Raw(JsonConvert.SerializeObject((Model), new JavaScriptDateTimeConverter())),
allowExcelExport: true,
allowTextWrap: true,
allowPdfExport: true,
toolbar: ['ExcelExport', 'PdfExport', 'CsvExport'],
//editSettings: { allowDeleting: true },
allowSelection: true,
allowFiltering: true,
allowSorting: true,
allowNumberFormatting: true,
enableVirtualization: true,
filterSettings: { type: 'Excel' },
selectionSettings: { persistSelection: true },
enableHover: true,
enableHeaderFocus: true,
height: 600,
rowHeight: 38,
allowPaging: true,
columns: [
{ type: 'checkbox', width: 10 },
{ field: "Id", visible: false, isPrimaryKey: true},
{ field: "RegistarName", headerText: "Registrar", width: 50,},
{ field: "VoterStatus", headerText: "Voter Status", width: 50,},
{ field: "strTrainedDate", headerText: "Trained", width: 50,},
{ field: "strOathDate", headerText: "Oath", width: 50,},
{ field: "Term", headerText: "Term", width: 50,},
{ field: "OrganizationTypeName", headerText: "Organization Type", width: 50,},
{ field: "RegistrarOrganizationName", headerText: "Organization", width: 50,},
{
headerText: "",
template: "#editTemplate",
textAlign: "center",
width: 15
},
{
headerText: "",
template: "#deleteTemplate",
textAlign: "center",
width: 15
},
],
});

Related

I want to add a column "id" to my mui data grid table which counts from 0 to number of rows in reactjs

In the datagrid table component which renders data from api having multiple columns. Its required to show a column ID which has data from 0 to number of rows. Currently , my Object_id in this cell data is been shown.
This is my component:
import React from "react";
import { DataGrid } from "#mui/x-data-grid";
const MainTable = ({ news }) => {
const columns = [
{
field: "id",
headerName: "ID",
width: 70,
valueGetter: (params) => `${params.row._id}`,
},
{ field: "title", headerName: "Title name", width: 200 },
{ field: "source", headerName: "Source", width: 130 },
{ field: "topic", headerName: "Topic", width: 80 },
{ field: "insight", headerName: "Insight", width: 130 },
{ field: "region", headerName: "Region", width: 200 },
{ field: "country", headerName: "Country", width: 200 },
{ field: "pestle", headerName: "Pestle", width: 130 },
{
field: "intensity",
headerName: "Intensity",
type: "number",
width: 90,
},
{
field: "relevance",
headerName: "Relevance",
type: "number",
width: 90,
},
{
field: "likelihood",
headerName: "Likelihood",
type: "number",
width: 90,
},
{
field: "end_year",
headerName: "End Year",
type: "number",
width: 90,
},
{
field: "start_year",
headerName: "Start Year",
type: "number",
width: 90,
},
{
field: "added",
headerName: "Added",
type: "date",
width: 150,
},
{
field: "published",
headerName: "Published",
type: "date",
width: 150,
},
{
field: "url",
headerName: "URL",
renderCell: (params) => {
return <a href={`${params.row.url}`}>View</a>;
},
cellClassName: "text-gray-500 hover:underline",
width: 130,
},
];
console.log(news);
return (
<div style={{ height: 650, width: "100%" }}>
<DataGrid
rows={news}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
getRowId={(row) => row._id}
/>
</div>
);
};
export default MainTable;
Below is the screenshot which shows what is happening right now:
And below is the screenshot which should look like this:

see the solution below:
import React from "react";
import { DataGrid } from "#mui/x-data-grid";
const MainTable = ({ news }) => {
const columns = [
{
field: "id",
headerName: "ID",
width: 70
},
{ field: "title", headerName: "Title name", width: 200 },
{ field: "source", headerName: "Source", width: 130 },
{ field: "topic", headerName: "Topic", width: 80 },
{ field: "insight", headerName: "Insight", width: 130 },
{ field: "region", headerName: "Region", width: 200 },
{ field: "country", headerName: "Country", width: 200 },
{ field: "pestle", headerName: "Pestle", width: 130 },
{
field: "intensity",
headerName: "Intensity",
type: "number",
width: 90,
},
{
field: "relevance",
headerName: "Relevance",
type: "number",
width: 90,
},
{
field: "likelihood",
headerName: "Likelihood",
type: "number",
width: 90,
},
{
field: "end_year",
headerName: "End Year",
type: "number",
width: 90,
},
{
field: "start_year",
headerName: "Start Year",
type: "number",
width: 90,
},
{
field: "added",
headerName: "Added",
type: "date",
width: 150,
},
{
field: "published",
headerName: "Published",
type: "date",
width: 150,
},
{
field: "url",
headerName: "URL",
renderCell: (params) => {
return <a href={`${params.row.url}`}>View</a>;
},
cellClassName: "text-gray-500 hover:underline",
width: 130,
},
];
console.log(news);
return (
<div style={{ height: 650, width: "100%" }}>
<DataGrid
rows={news.map((item,index)=>{return {id:index+1,...item}})}
columns={columns}
pageSize={10}
rowsPerPageOptions={[10]}
getRowId={(row) => row._id}
/>
</div>
);
};
export default MainTable;

Disable Column in edit mode only Syncfusion GRID

I try to disable column only in edit mode with EJ2 Grid Syncfusion
Columns Code
columns: [
{ type: 'checkbox', field: 'CheckBox', width: 50 },
{ field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 120, type: 'number' },
{
field: 'modulID', headerText: 'Nama Modul', width: 80, validationRules: { required: true }, allowEditing :false ,
foreignKeyField: 'id', foreignKeyValue: 'modulName', dataSource: modulComplete
},
{
field: 'departmentID', headerText: 'Department', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'departmentName', dataSource: department
},
{
field: 'pegawaiApprover1ID', headerText: 'Pegawai Approver 1', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'nama', dataSource: pegawai
},
{
field: 'pegawaiApprover2ID', headerText: 'Pegawai Approver 2', width: 80, validationRules: { required: false },
foreignKeyField: 'id', foreignKeyValue: 'nama', dataSource: pegawai
},
{ field: 'officePerusahaanID', visible: false, headerText: 'officeid', textAlign: 'Right', width: 120, type: 'number' },
{ field: 'isApprovedByApprover', width: 40, headerText: 'isApprovedByApprover', type: 'checkbox' },
{ field: 'isApprovedByGA', width: 40, headerText: 'isApprovedByGA', type: 'checkbox' },
{ field: 'isApprovedByCheckin', width: 40, headerText: 'isApprovedByCheckin', type: 'checkbox' },
],
But it will disable the column from add action too
Any info how to disable column on edit mode only?
Thanks.

We have analysed your query and you can achieve your requirement by enabling the isIdentity column property of the grid. Please find the code snippet below,
columns: [
{ type: 'checkbox', field: 'CheckBox', width: 50 },
{ field: 'id', isPrimaryKey: true, visible: false, headerText: 'id', textAlign: 'Right', width: 120, type: 'number' },
{
field: 'modulID', headerText: 'Nama Modul', width: 80, validationRules: { required: true }, allowEditing :false , isIdentity: true,
foreignKeyField: 'id', foreignKeyValue: 'modulName', dataSource: modulComplete
},
],
Please get back to us if you need further assistance.
Regards,
Hariharan

kendo grid encoded property does not work and show html content in cell

I have added the encoded:false property to my kendo grid column but still show the content as HTML, i need plain text.
I haven´t errors in console, there is another grid with the same structure and works fine.
This is my grid structure and its datasource.
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'GetShoppingRequest',
dataType: 'json',
type: 'GET',
contentType: 'application/json'
},
parameterMap: test
},
batch: true,
pageSize: 20,
schema: {
model: {
Id: "Id",
fields: {
Id: { editable: false },
UserName: { editable: false },
Sigla: { editable: false },
TypeProvider: { editable: false },
CreationDate: { editable: false },
DateApprovedLeader: { editable: false },
DateReceptionProduct: { editable: false },
FlowStatus: { editable: false },
IdLeader: { editable: false },
Leader: { editable: false },
UserId: {},
Initials: { editable: false },
IdArea: { editable: false },
Area: { editable: false },
IdProject: { editable: false },
Project: { editable: false },
IdCurrency: { editable: false },
Currency: { editable: false },
Value: { editable: false },
FinishObservations: { editable: false}
}
}
}
});
var gridShoppingConsult = $("#gridShoppingConsult").kendoGrid({
dataSource: dataSource,
pageable: true,
filterable: true,
selectable: true,
sortable: true,
resizable: true,
height: 550,
reorderable: true,
width: 1000,
columns: [
{ field: "Id", title: "<center>ID</center>", attributes: { style: "text-align: center" }, width: 60, filterable: false, template: '#=Id#' },
{ field: "UserName", title: "<center>Creado por</center>", attributes: { style: "text-align: center" }, width: 150, filterable: { multi: true, search: true } },
{ field: "Sigla", title: "<center>Sigla</center>", attributes: { style: "text-align: center" }, width: 80, filterable: false },
{ field: "TypeProvider", title: "<center>Tipo Proveedor</center>", attributes: { style: "text-align: center" }, width: 130, filterable: false },
{ field: "DateApprovedLeader", title: "<center>Fecha <br>Preaprobación Lider</br></center>", attributes: { style: "text-align: center" }, width: 185, filterable: { multi: true, search: true } },
{ field: "DateReceptionProduct", title: "<center>Fecha <br>Recepción Producto</br></center>", attributes: { style: "text-align: center" }, width: 185, filterable: { multi: true, search: true } },
{ field: "FlowStatus", title: "<center>Estado</center>", attributes: { style: "text-align: center" }, width: 100, filterable: { multi: true, search: true } },
{ field: "Leader", title: "<center>Lider</center>", attributes: { style: "text-align: center" }, width: 100, filterable: { multi: true, search: true } },
{ field: "Initials", title: "<center>Iniciales</center>", attributes: { style: "text-align: center" }, width: 100, filterable: { multi: true, search: true } },
{ field: "Area", title: "<center>Area</center>", attributes: { style: "text-align: center" }, width: 100, filterable: { multi: true, search: true } },
{ field: "Project", title: "<center>Codigo Proyecto</center>", attributes: { style: "text-align: center" }, width: 100, filterable: { multi: true, search: true } },
{ field: "Currency", title: "<center>Moneda</center>", attributes: { style: "text-align: center" }, width: 140, filterable: { multi: true, search: true } },
{ field: "Value", title: "<center>Valor Compra</center>", attributes: { style: "text-align: center" }, width: 180, filterable: false },
{
field: "FinishObservations", title: "<center>Observaciones</center>",encoded: false, attributes: { style: "text-align: center" }, width: 250, filterable: { multi: true, search: true }
},
],
columnReorder: function (e) {
if (e.oldIndex > 10) {
var that = this;
setTimeout(function () {
that.reorderColumn(e.oldIndex, e.column);
});
}
},
editable: true
});

jsgrid field "required" inside dialog doesn't work

I want to set the field with name: "Name" as required and I inserted : validate: "required" according to the jsgrid documentation(http://js-grid.com/docs/#grid-fields) but it doesn't work.
When inserting validate: "required" in my below code for jsgrid field: Name jsgrid doesn't take the required limitation and inserting blocks!!
I am almost sure that the fact that I enclose my grid inside a dialog creates the problem since validate is a parameter that can be defined both in dialog and jsgrid.
This is the code with dialog, in which I successfully display my grid inside a dialog but I cannot pass validate:"required". I also uploaded and a screenshotGrid inside dialog :
$( "#DataGrid" ).dialog({minWidth: 1000, minHeight: 500});
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required," align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
I tried the jsgrid code without dialog and it works but how will it work inside the dialog?
This code without dialog works:
$("#DataGrid").jsGrid({
height: "100%",
width: "70%",
filtering: true,
editing: true,
inserting: true,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 5,
datatype: "json",
deleteConfirm: "Do you really want to delete the client?",
controller: db,
fields: [
{ name: "Id", align: "center", width: 45 },
{ name: "Name", validate:"required", align: "center", type: "text", width: 45 },
{ name: "Displayed Name(locale)", align: "center", type: "text", width: 40 },
{ name: "Data Type", align: "center", type: "select", items: db.dataType, valueField: "Id", textField: "Name", width: 40 },
{ name: "Initial Value", align: "center", type: "text", width: 40 },
{ name: "Initial State", align: "center", type: "select", items: db.initialState, valueField: "Id", textField: "Name", width: 50 },
{ name: "Worklist Order", align: "center", type: "number", width: 20 },
{ name: "DB Datatype", align: "center", type: "text", width: 25 },
{ name: "Allowed Values JSON", align: "center", type: "text", width: 20 },
{ name: "Allowed Values SQL", align: "center", type: "text", width: 20 },
{ type: "control", width: 25 }
]
});
Any ideas please? It is a complex issue.

Ok thanks to #tabalin's help I solved the problem. I had one less jsgrid archive. Now it works like a charm!

how to Hide the child columns in grid dynamically using ExtJS 4

I need to hide the specific column in grid on load of grid. i.e., child columns. Even i use hidden: true is also not working.
Ext.apply(this, {
store: App.mcmTaskStore,
columnLines: true,
columns: [
{ header: 'P', sortable: false, width: 25, dataIndex: 'Priority', renderer: priorityRenderer }, //false because it's H M L and it sorts alphabetically
{ header: 'START', sortable: true, width: 100, dataIndex: 'StartDateFormatted', hidden: true, renderer: this.mcmCustomRenderer},
{
header: 'Incoming Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'IncomingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETA', sortable: true, width: 120, dataIndex: 'IncomingFlightEta', renderer: startDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'IncomingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'IncomingFlightGate', hidden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'END', sortable: true, width: 100, dataIndex: 'EndDateFormatted', hiddden: true, renderer: this.mcmCustomRenderer},
{
text: 'Outgoing Flights',
columns: [
{ header: 'FLT', sortable: true, width: 80, dataIndex: 'OutgoingFlightNumber', renderer: this.mcmCustomRenderer },
{ header: 'ETD', sortable: true, width: 120, dataIndex: 'OutgoingFlightEtd', renderer: endDateCustomRenderer },
{ header: 'CTY', sortable: true, width: 60, dataIndex: 'OutgoingFlightStation', renderer: this.mcmCustomRenderer },
{ header: 'GT', sortable: true, width: 50, dataIndex: 'OutgoingFlightGate', hiddden: true, renderer: this.mcmCustomRenderer}
]
},
{ header: 'PAX NAME', sortable: true, width: 250, dataIndex: 'Name', renderer: this.mcmCustomRenderer },
{ header: 'COMMENTS', sortable: false, flex: 1, dataIndex: 'Notes', hiddden: true, renderer: this.mcmCustomRenderer},
{ header: 'AGENT NAME', sortable: true, width: 250, dataIndex: 'AgentName', renderer: this.mcmCustomRenderer },
{ header: 'TASK TYPE', sortable: true, width: 120, dataIndex: 'TaskType', renderer: this.mcmCustomRenderer }
],
tbar: mcmTbar
});
Please help me. Thanks in advance.

You've written 'hiddden' with 3 'd' in some places. I bet that's where it doesn't work.

Categories

Resources