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!
Related
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
},
],
});
I have two arrays named headersMap and selected_arr as follows
headersMap: [
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Name",
align: "center",
sortable: true,
value: "name",
align: "start",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]
selected_arr: ['id', 'company']
What I have tried was as follows:
let jsonObject = this.headersMap;
let selectedArray = this.selected_arr;
let filteredJsonObject = jsonObject.map(function(entry) {
return selectedArray.reduce(function(res, key) {
res[key] = entry[key];
return res;
}, {});
});
console.log(filteredJsonObject);
output:
[
{
#: undefined
company: undefined
}
]
QUESTION: what I want is to reduce the headersMap by selected_arr, the output should be as follows:
[
{
text: "#",
align: "center",
sortable: true,
value: "id",
align: "start",
width: "1%",
},
{
text: "Company",
align: "center",
sortable: true,
value: "company",
align: "start",
}
]
Use Array#filter:
const
headersMap = [
{ text: "#", align: "center", sortable: true, value: "id", align: "start", width: "1%" },
{ text: "Name", align: "center", sortable: true, value: "name", align: "start" },
{ text: "Company", align: "center", sortable: true, value: "company", align: "start" }
],
selected_arr = ['id', 'company'];
const filtered = headersMap.filter(({ value }) => selected_arr.includes(value));
console.log(filtered);
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
In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'
});
My Controller accept Id,
[HttpGet]
public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
{
//Some code here
}
You can use subGridBeforeExpand to set new value of subGridUrl: $(this).jqGrid("setGridParam", {subGridUrl: newValue});.
Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid. Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.
In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:
...
prmNames: {
subgridid: "InvoiceId",
}
...
Therefore, your subgrid url will be
/Sales/GetSalesItemsByInvoiceId?InvoiceId=
instead of
/Sales/GetSalesItemsByInvoiceId?id=
Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):
...
jsonReader: {
id: 'InvoiceId'
}
...
So your final code will be like this:
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
prmNames: {
subgridid: "InvoiceId",
},
jsonReader: {
id: 'InvoiceId'
}
});
I'm trying out Flexigrid for a new app - I'm really impressed with it but I can't find a way to set the width in code.
The main reason for this is to get the GRID (not the columns inside the grid) to align fully to the size of the window. I know, it makes a mockery of the horizontal resizer, but that's what I have to do!
FYI my set up is the following:
$(document).ready(function() {
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 800,
height: 200
}
);
});
but the following function doesn't work:
function ResizeGrid() {
$('#flex1').flexOptions({ width:1000 }).flexReload();
}
It causes the grid to refresh, but nothing more.
Despite having NO LUCK on google for about 20 minutes before posting this, Murphy's law meant that I tried another quick search just afterwards and found the answer.
Turns out that "width" should be set to 'auto' (note the quotes are vital).
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 'auto',
height: 200
}
);
I'll leave this post for anyone else who has this problem.