Develop Reference

EJ2 Data Grid Checkbox Selection

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
},
],
});

jqgrid retrieves JSON data from rest service but does not display it

The grid displays and retrieves the data from the rest service but does not show up. I'm pretty sure I'm just missing something stupid but I've checked the documentation and a few other answers on here and nothing has fixed it. I can see in the debugger the data is coming across (which is where I pulled the sample from) and there are no JavaScript errors on the page. I also checked the data and it's valid JSON. What am I missing/doing wrong?
Code:
<table id="custSearch">
<tr><td></td></tr>
</table>
<div id="custSearchPager"></div>
$("#custSearch").jqGrid({
url : '/rebate/rest/customer/getCustomers',
datatype : 'json',
mtype : 'GET',
colNames : ['customerID', 'Company', 'First Name', 'Last Name','Address', 'City', 'State', 'Zip Code', 'Phone', 'Fax', 'EMail'],
colModel : [
{ name:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'Company', index:'company', width:150, sortable:true},
{ name: 'First Name', index: 'firstName', length: 50, search: false},
{ name: 'Last Name', index: 'lastName', width: 80},
{ name: 'Address', index: 'address', width: 100, search: false},
{ name: 'City', index: 'city', width: 40, search: false},
{ name: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name: 'Zip', index: 'zip', width: 80},
{ name: 'Phone', index: 'phone', width: 80},
{ name: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'EMail', index: 'email', width: 80}
],
rowNum: 20,
rowList:[10,20,30],
pager : '#custSearchPager',
sortname : 'company',
sortorder : 'desc',
viewrecords: true,
gridview: true,
caption : 'Customers',
height: '300',
jsonReader: {cell:"", id:"customerID"}
});
jQuery("#custSearch").jqGrid('navGrid','#custSearchPager',{edit:false,add:false,del:false,search:true});
Data:
{"page":"1","total":"30","records":"20","rows":[
{"customerID":144,"firstName":"Keefe","lastName":"Abbott","company":"Vulputate LLC","address":"P.O. Box 688, 4718 Urna Street","country":"USA","city":"Detroit","state":"MI","zip":"61733","phone":"(411) 256-3885","fax":"(712) 531-0718","email":"Etiam#Integereu.org"},
{"customerID":91,"firstName":"Jerome","lastName":"Allison","company":"Vulputate Inc.","address":"Ap #519-7407 Orci Road","country":"USA","city":"Kansas City","state":"MO","zip":"22551","phone":"(245) 214-4028","fax":"(202) 531-5933","email":"sed.dolor.Fusce#risusDonec.ca"},
{"customerID":293,"firstName":"Hyacinth","lastName":"Fuentes","company":"Vulputate Corporation","address":"Ap #899-7402 Donec Road","country":"USA","city":"Jackson","state":"MS","zip":"27829","phone":"(342) 945-6263","fax":"(260) 216-3339","email":"felis.Donec.tempor#sitamet.org"},
{"customerID":235,"firstName":"Charde","lastName":"England","company":"Vulputate Associates","address":"2803 Odio Street","country":"USA","city":"Racine","state":"WI","zip":"17971","phone":"(421) 324-5019","fax":"(559) 946-7839","email":"pretium#eu.org"}
. . .
]}

The names in colModel can't contain spaces. I think you have mixed the name and the label property in colModel to display headers of the table.
The wrong in your code is that the name property does not match the data from the response and second your name property contain space, which is not allowed. To work this your colModel should be:
colModel : [
{ name:'customerID', label:'customerID', index:'customerID', width:10, sortable:false, editable: false, hidden: true},
{ name:'company', label:'Company', index:'company', width:150, sortable:true},
{ name: 'firstName', label: 'First Name', index: 'firstName', length: 50, search: false},
{ name:'lastName', label: 'Last Name', index: 'lastName', width: 80},
{ name: 'address', label: 'Address', index: 'address', width: 100, search: false},
{ name: 'city', label: 'City', index: 'city', width: 40, search: false},
{ name:'state', label: 'State', index: 'state', width: 80, search: false, edittype: 'select', editoptions: { dataUrl:'/rebate/rest/state/getLookups'} },
{ name:'zip', label: 'Zip', index: 'zip', width: 80},
{ name:'phone', label: 'Phone', index: 'phone', width: 80},
{ name: 'fax', label: 'Fax', index: 'fax', width: 80, search: false},
{ name: 'email', label: 'EMail', index: 'email', width: 80}
],

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!

Ext JS 3 Auto Width Column Grid

Excuse me,
How can I set the autowidth in the grid column on Ext JS 3?
This is my code, so far:
<script type="text/javascript">
Ext.onReady(function () {
var mystore = new Ext.data.Store({proxy: new Ext.data.HttpProxy({url: 'info-extjs.php'}),
reader: new Ext.data.JsonReader({
root: 'guests',
fields: [{name: 'ip_address'},
{name: 'country'},
{name: 'region'},
{name: 'comp_name'},
{name: 'page'},
{name: 'timestamp'}]
})
});
//create the grid
var grid = new Ext.grid.GridPanel({
store: mystore,
title: 'Guest List of our blog',
columns: [{
id: 'ip_address',
header: 'IP Address',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'ip_address'
},
{
id: 'country',
header: 'Country',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'country'
},
{
header: 'region',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'region'
},
{
header: 'comp_name',
autoSizeColumn: true,
minWidth: 120,
sortable: true,
dataIndex: 'comp_name'
},
{
header: 'page',
sortable: true,
dataIndex: 'page',
autoSizeColumn: true,
minWidth: 150
},
{
header: 'timestamp',
sortable: true,
dataIndex: 'timestamp',
autoSizeColumn: true,
minWidth: 150
}],
renderTo: 'guest-list-grid',
autoHeight: true
});
mystore.load();
});
</script>
I try to use:
autoSizeColumn: true,
minWidth: 150
But, unfortunately, it is not working. This is the picture:
Please help. Ext Js Version:
ext-3.4.0

try adding forceFit: true to grids's viewconfig
...
renderTo: 'guest-list-grid',
viewConfig: {
forceFit: true
},

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.