I want to drag and drop in different Grid with hierarchical data.
The Drag and drop is working fine but the row is not dropping in Detail item in destination grid.
I have created the sample here. here is the sample for the same..
The following code shows how i built this, but getting some issues in the same. Please help me out what mistake i am doing in this?
function convert(array) {
var map = {};
for (var i = 0; i < array.length; i++) {
var obj = array[i];
obj.items = [];
map[obj.DemographicId] = obj;
var parent = obj.ParentId || '-';
if (!map[parent]) {
map[parent] = {
items: []
};
}
map[parent].items.push(obj);
}
return map['-'].items;
}
var arr = [{"Level":1,"DemographicId":13,"ParentId":null,"Name":"Bewitched General","Description":0.335336528},{"Level":2,"DemographicId":349,"ParentId":13,"Name":"Unacceptable Experience","Description":0.335336528},{"Level":1,"DemographicId":14,"ParentId":null,"Name":"Trained Trust","Description":29.17427794},{"Level":2,"DemographicId":329,"ParentId":14,"Name":"Concerned Rest","Description":0.335336528},{"Level":2,"DemographicId":331,"ParentId":14,"Name":"Tough Sleep","Description":2.012019168},{"Level":3,"DemographicId":346,"ParentId":331,"Name":"Icy Coffee","Description":0.335336528},{"Level":3,"DemographicId":347,"ParentId":331,"Name":"Big Fix","Description":0.335336528},{"Level":3,"DemographicId":348,"ParentId":331,"Name":"Total Worry","Description":0.335336528},{"Level":3,"DemographicId":431,"ParentId":331,"Name":"Fast Discipline","Description":0.335336528},{"Level":3,"DemographicId":586,"ParentId":331,"Name":"Intrepid Sister","Description":0.335336528},{"Level":2,"DemographicId":376,"ParentId":14,"Name":"Hasty Ordinary","Description":0.335336528},{"Level":2,"DemographicId":428,"ParentId":14,"Name":"Unnatural Native","Description":1.006009584},{"Level":3,"DemographicId":442,"ParentId":428,"Name":"Tan Celebration","Description":0.335336528},{"Level":3,"DemographicId":492,"ParentId":428,"Name":"Wise Repair","Description":0.335336528},{"Level":2,"DemographicId":443,"ParentId":14,"Name":"Frightening Historian","Description":3.018028753},{"Level":3,"DemographicId":328,"ParentId":443,"Name":"Improbable Stage","Description":0.335336528},{"Level":3,"DemographicId":517,"ParentId":443,"Name":"Heavenly Debt","Description":0.335336528},{"Level":3,"DemographicId":526,"ParentId":443,"Name":"That Art","Description":2.012019168},{"Level":4,"DemographicId":524,"ParentId":526,"Name":"Vivacious Competition","Description":0.670673056},{"Level":5,"DemographicId":445,"ParentId":524,"Name":"Dependable Potato","Description":0.335336528},{"Level":4,"DemographicId":525,"ParentId":526,"Name":"Watchful Tough","Description":1.006009584},{"Level":5,"DemographicId":432,"ParentId":525,"Name":"Lovable Sing","Description":0.670673056},{"Level":6,"DemographicId":435,"ParentId":432,"Name":"Vengeful Cigarette","Description":0.335336528},{"Level":2,"DemographicId":522,"ParentId":14,"Name":"Insistent Offer","Description":0.335336528},{"Level":2,"DemographicId":590,"ParentId":14,"Name":"Oddball Airline","Description":0.335336528},{"Level":2,"DemographicId":591,"ParentId":14,"Name":"Back Outcome","Description":20.79086474},{"Level":3,"DemographicId":330,"ParentId":591,"Name":"Mushy Active","Description":0.335336528},{"Level":3,"DemographicId":427,"ParentId":591,"Name":"Immaterial Safety","Description":1.341346112},{"Level":4,"DemographicId":437,"ParentId":427,"Name":"Same Restaurant","Description":0.335336528},{"Level":4,"DemographicId":438,"ParentId":427,"Name":"Imaginary Brother","Description":0.335336528},{"Level":4,"DemographicId":613,"ParentId":427,"Name":"Bubbly Hole","Description":0.335336528},{"Level":3,"DemographicId":433,"ParentId":591,"Name":"Several Weird","Description":2.682692225},{"Level":4,"DemographicId":426,"ParentId":433,"Name":"Deadly Potato","Description":0.335336528},{"Level":4,"DemographicId":436,"ParentId":433,"Name":"Ornery Race","Description":0.335336528},{"Level":4,"DemographicId":440,"ParentId":433,"Name":"Trusting Native","Description":0.335336528},{"Level":4,"DemographicId":441,"ParentId":433,"Name":"Flowery Tower","Description":0.335336528},{"Level":4,"DemographicId":479,"ParentId":433,"Name":"Downright Fall","Description":0.335336528},{"Level":4,"DemographicId":480,"ParentId":433,"Name":"Unique Career","Description":0.335336528},{"Level":4,"DemographicId":614,"ParentId":433,"Name":"Unknown Thomas","Description":0.335336528},{"Level":3,"DemographicId":592,"ParentId":591,"Name":"Judicious Analyst","Description":0.335336528},{"Level":3,"DemographicId":593,"ParentId":591,"Name":"Hard Major","Description":0.335336528},{"Level":3,"DemographicId":595,"ParentId":591,"Name":"Naughty Temporary","Description":0.335336528},{"Level":3,"DemographicId":596,"ParentId":591,"Name":"Crisp Commission","Description":0.335336528},{"Level":3,"DemographicId":597,"ParentId":591,"Name":"Valid Funny","Description":0.335336528},{"Level":3,"DemographicId":598,"ParentId":591,"Name":"Luminous Log","Description":0.335336528},{"Level":3,"DemographicId":599,"ParentId":591,"Name":"Sour Introduction","Description":0.335336528},{"Level":3,"DemographicId":600,"ParentId":591,"Name":"Elegant Player","Description":0.335336528},{"Level":3,"DemographicId":601,"ParentId":591,"Name":"Wilted Scheme","Description":1.006009584},{"Level":4,"DemographicId":444,"ParentId":601,"Name":"That Research","Description":0.335336528},{"Level":4,"DemographicId":609,"ParentId":601,"Name":"Overcooked Message","Description":0.335336528},{"Level":3,"DemographicId":602,"ParentId":591,"Name":"Good-natured Responsibility","Description":3.688701809},{"Level":4,"DemographicId":478,"ParentId":602,"Name":"Cumbersome Battle","Description":0.335336528},{"Level":4,"DemographicId":515,"ParentId":602,"Name":"Unsightly Contest","Description":2.682692225},{"Level":5,"DemographicId":439,"ParentId":515,"Name":"Mushy Explanation","Description":0.335336528},{"Level":5,"DemographicId":508,"ParentId":515,"Name":"Obvious Pride","Description":0.670673056},{"Level":6,"DemographicId":509,"ParentId":508,"Name":"Negligible Ask","Description":0.335336528},{"Level":5,"DemographicId":514,"ParentId":515,"Name":"Concerned Classic","Description":1.341346112},{"Level":6,"DemographicId":510,"ParentId":514,"Name":"Greedy Double","Description":0.335336528},{"Level":6,"DemographicId":511,"ParentId":514,"Name":"Reflecting Poem","Description":0.335336528},{"Level":6,"DemographicId":512,"ParentId":514,"Name":"Every Finish","Description":0.335336528},{"Level":4,"DemographicId":610,"ParentId":602,"Name":"Zigzag Meet","Description":0.335336528},{"Level":3,"DemographicId":603,"ParentId":591,"Name":"Esteemed Satisfaction","Description":0.335336528},{"Level":3,"DemographicId":604,"ParentId":591,"Name":"Normal Trouble","Description":1.341346112},{"Level":4,"DemographicId":485,"ParentId":604,"Name":"Hot Fish","Description":0.335336528},{"Level":4,"DemographicId":611,"ParentId":604,"Name":"Eager Perception","Description":0.335336528},{"Level":4,"DemographicId":612,"ParentId":604,"Name":"Shocking Aside","Description":0.335336528},{"Level":3,"DemographicId":605,"ParentId":591,"Name":"Terrific King","Description":0.335336528},{"Level":3,"DemographicId":606,"ParentId":591,"Name":"Humiliating Suit","Description":0.335336528},{"Level":3,"DemographicId":607,"ParentId":591,"Name":"Serious Smile","Description":0.335336528},{"Level":3,"DemographicId":608,"ParentId":591,"Name":"Memorable Ship","Description":3.353365281},{"Level":4,"DemographicId":430,"ParentId":608,"Name":"Wan Science","Description":0.335336528},{"Level":4,"DemographicId":434,"ParentId":608,"Name":"Hard Rule","Description":0.335336528},{"Level":4,"DemographicId":473,"ParentId":608,"Name":"Marvelous Radio","Description":0.335336528},{"Level":4,"DemographicId":477,"ParentId":608,"Name":"Visible Personality","Description":0.335336528},{"Level":4,"DemographicId":481,"ParentId":608,"Name":"Scrawny Shine","Description":0.335336528},{"Level":4,"DemographicId":507,"ParentId":608,"Name":"Descriptive Pride","Description":0.335336528},{"Level":4,"DemographicId":516,"ParentId":608,"Name":"Pleased Private","Description":0.335336528},{"Level":4,"DemographicId":548,"ParentId":608,"Name":"Frizzy District","Description":0.335336528},{"Level":4,"DemographicId":615,"ParentId":608,"Name":"Juicy Organization","Description":0.335336528},{"Level":3,"DemographicId":616,"ParentId":591,"Name":"Sweaty Equal","Description":0.335336528},{"Level":3,"DemographicId":621,"ParentId":591,"Name":"Sweltering Cigarette","Description":0.335336528},{"Level":3,"DemographicId":623,"ParentId":591,"Name":"Buoyant Rule","Description":0.335336528},{"Level":3,"DemographicId":625,"ParentId":591,"Name":"Whimsical Remote","Description":0.335336528},{"Level":3,"DemographicId":633,"ParentId":591,"Name":"Notable Feed","Description":0.335336528},{"Level":3,"DemographicId":635,"ParentId":591,"Name":"Puzzled Pin","Description":1.006009584},{"Level":4,"DemographicId":594,"ParentId":635,"Name":"Plump Member","Description":0.335336528},{"Level":4,"DemographicId":636,"ParentId":635,"Name":"Colorless Service","Description":0.335336528},{"Level":2,"DemographicId":618,"ParentId":14,"Name":"Extroverted Excuse","Description":0.335336528},{"Level":2,"DemographicId":622,"ParentId":14,"Name":"Definite Sector","Description":0.335336528},{"Level":2,"DemographicId":631,"ParentId":14,"Name":"Dear Blue","Description":0.335336528},{"Level":1,"DemographicId":15,"ParentId":null,"Name":"Weird Rush","Description":3.688701809},{"Level":2,"DemographicId":461,"ParentId":15,"Name":"Vigilant Mine","Description":0.335336528},{"Level":2,"DemographicId":527,"ParentId":15,"Name":"Darling Cousin","Description":2.682692225},{"Level":3,"DemographicId":504,"ParentId":527,"Name":"Courteous Knife","Description":0.335336528},{"Level":3,"DemographicId":528,"ParentId":527,"Name":"Constant Window","Description":2.012019168},{"Level":4,"DemographicId":6,"ParentId":528,"Name":"Serene Personal","Description":0.335336528},{"Level":4,"DemographicId":518,"ParentId":528,"Name":"Cooperative Marketing","Description":0.335336528},{"Level":4,"DemographicId":530,"ParentId":528,"Name":"Likely Car","Description":0.335336528},{"Level":4,"DemographicId":531,"ParentId":528,"Name":"Worst Lip","Description":0.335336528},{"Level":4,"DemographicId":550,"ParentId":528,"Name":"Quintessential Evening","Description":0.335336528},{"Level":2,"DemographicId":529,"ParentId":15,"Name":"Knowing Debt","Description":0.335336528},{"Level":2,"DemographicId":587,"ParentId":15,"Name":"Harmless Weight","Description":0.335336528},{"Level":1,"DemographicId":16,"ParentId":null,"Name":"Tidy Mouse","Description":2.012019168},{"Level":2,"DemographicId":5,"ParentId":16,"Name":"Useless Chemistry","Description":0.335336528},{"Level":2,"DemographicId":254,"ParentId":16,"Name":"Several Expert","Description":0.335336528},{"Level":2,"DemographicId":486,"ParentId":16,"Name":"Young String","Description":0.335336528},{"Level":2,"DemographicId":519,"ParentId":16,"Name":"Ideal Army","Description":1.006009584},{"Level":3,"DemographicId":520,"ParentId":519,"Name":"Tart Text","Description":0.335336528},{"Level":3,"DemographicId":521,"ParentId":519,"Name":"Tiny Church","Description":0.335336528}]
var myData = convert(arr)
var dataSource1 = new kendo.data.DataSource({
data: myData
});
$(document).ready(function () {
var originalGrid = $("#originalGrid").kendoGrid({
dataSource: dataSource1,
sortable: false,
pageable: false,
detailInit: detailInit1,
dataBound: function () {
//this.expandRow(this.tbody.find("tr.k-master-row").last());
},
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
});
function detailInit1(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items //data is the current position item, items is its child items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit1,
columns: [
{
field: "Name",
title: "Name",
width: "80px"
},
{
field: "Description",
title: "Amount",
width: "30px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(document).ready(function () {
var dataSource2 = new kendo.data.DataSource({
data: []
});
var grid2 = $("#grid2").kendoGrid({
dataSource: dataSource2,
width: 400,
sortable: false,
pageable: false,
detailInit: detailInit11,
schema: {
model: {
id: "DemographicId"
}
},
columns: [
{
field: "Name",
title: "Name",
width: "40px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
function detailInit11(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
data: e.data.items
},
scrollable: false,
sortable: false,
pageable: false,
detailInit: detailInit11,
columns: [
{
field: "Name",
title: "Name",
width: "110px"
},
{
field: "Description",
title: "Amount",
width: "110px",
aggregates: ["sum"],
groupFooterTemplate: "Sum: #= sum # "
}
]
});
}
$(originalGrid).kendoDraggable({
filter: "tr",
hint: function (e) {
var item = $('<div class="k-grid k-widget" style="background-color: DarkOrange; color: black;"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
return item;
},
group: "gridGroup1",
});
var currentDataItem = null;
function getItemByUid(uid, currentUid, data) {
for (let index = 0; index < data.length; index++) {
const element = data[index];
if (element.uid == currentUid) {
currentDataItem = element;
return false;
} else {
if (element.items) {
getItemByUid(element.uid, currentUid, element.items);
}
}
}
}
grid2.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
dataSource2.add(currentDataItem);
},
group: "gridGroup1",
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div>
<div style="width:50%;float:left" class="dragGrid">
<div id="originalGrid"></div>
</div>
<div style="width:50%;float:right" >
<div id="grid2"></div>
</div>
</div>
</body>
</html>
You need to handle the drop target for the detail grids as well. Use the - almost - same code for kendoDropTarget to your detail grid:
gridDetail.kendoDropTarget({
drop: function (e) {
var uid = e.draggable.currentTarget.data("uid");
var dataItem = getItemByUid(uid, uid, dataSource1.data());
$(e.dropTarget).data("kendoGrid").dataSource.add(currentDataItem);
},
group: "gridGroup1",
});
Demo
Here is a fiddle that shows the problem: http://jsfiddle.net/LkqTU/32602/
If you go to the fiddle you will notice the last column is a link. If you click the checkbox on the first column you lose the link. I would like to keep the link.
I am creating the link in the DataTable like so...
{
data: 'dept',
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='Freight_ITN.aspx?scn=" + oData.dept + "' target='_blank'>" + "ITN ENTRY" + "</a>");
}
The onClick event of the checkbox is where I am losing my link (I think):
$('#mytable tbody').on('click', 'input[type="checkbox"]', function (e) {
var active = $(this).prop('checked');
var $row = $(this).closest('tr');
console.log($row);
var record = oTable.row($row).data();
record.active = active;
//console.log(record);
oTable.row($row).data(record).draw(false);
});
I noticed that DataTable has a fnDrawCallback, however it appears to be deprecated, and I'm unsure how to use it to get my link back.
You need add the rendering function to the column definitions configuration for your DataTable.
See the following example: http://jsfiddle.net/34ufp3ps/1/
columnDefs: [{
render: function(value, type, record, cellIndex) {
if (record.active) {
return value; // If selected, show the value instead of a link.
} else {
return '' + 'ITN ENTRY';
}
},
targets: 4 // Column #4 (Dept)
}]
Code
I made your class names Capitalized and added a convenience insert() method for proper OOP encapsulation of your Model object.
function Employee(id, firstName, lastName, dept, active, displayAsLink) {
var self = this;
this.id = id;
this.firstName = firstName;
this.lastName = lastName;
this.dept = dept;
this.active = active;
this.displayAsLink = displayAsLink;
}
function EmployeeModel() {
var self = this;
this.employees = [];
}
EmployeeModel.prototype.insert = function(employee) {
this.employees.push(employee);
}
var myModel = new EmployeeModel();
$(document).ready(function() {
myModel.insert(new Employee('1', 'Clara', 'Dellinger', 'IT', false, true));
myModel.insert(new Employee('2', 'John', 'Smith', 'HR', false, true));
myModel.insert(new Employee('3', 'Fred', 'Jones', 'Finance', false, false));
myModel.insert(new Employee('4', 'Mary', 'Jans', 'Finance', false, false));
myModel.insert(new Employee('5', 'Bob', 'Jones', 'IT', false, false));
myModel.insert(new Employee('6', 'Fred', 'Thebes', 'HR', false, true));
myModel.insert(new Employee('7', 'Sally', 'Jane', 'HR', false, true));
myModel.insert(new Employee('8', 'Patrick', 'Roberts', 'HR', false, true));
myModel.insert(new Employee('9', 'Lisa', 'Myers', 'Lab', false, true));
myModel.insert(new Employee('10', 'Roscoe', 'Coletrain', 'Security', false, true));
var table = $('#mytable').DataTable({
data: myModel.employees,
columns: [{
data: 'active',
render: function(data, type, row) {
if (type === 'display') {
return '<input type="checkbox" class="editor-active">';
}
return data;
},
className: "dt-body-center"
}, {
data: 'id'
}, {
data: 'firstName'
}, {
data: 'lastName'
}, {
data: 'dept'
}],
columnDefs: [{
render: function(value, type, record, cellIndex) {
if (record.active) {
return value;
} else {
return '' + 'ITN ENTRY';
}
},
targets: 4 // Column #4 (Dept)
}],
rowCallback: function(row, data) {
// Set the checked state of the checkbox in the table
$('input.editor-active', row).prop('checked', data.active);
},
aaSorting: [
[3, 'asc']
],
});
$('#mytable tbody').on('click', 'input[type="checkbox"]', function(e) {
var active = $(this).prop('checked');
var $row = $(this).closest('tr');
var employee = table.row($row).data();
employee.active = active;
//console.log(employee);
table.row($row).data(employee).draw(false);
});
$.fn.dataTable.ext.search.push(
function(oSettings, aData, iDataIndex) {
var isSelected = aData[0];
var keywords = $("#mysearch").val().toLowerCase().split(' ');
var matches = 0;
for (var k = 0; k < keywords.length; k++) {
var keyword = keywords[k];
for (var col = 0; col < aData.length; col++) {
if (aData[col].toLowerCase().indexOf(keyword) > -1) {
matches++;
break;
}
}
}
return (matches == keywords.length) || (isSelected === 'true')
}
);
$('#mysearch').keyup(function() {
table.draw();
});
});
.dataTables_filter {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css" rel="stylesheet" />
<div>
<input type="text" id="mysearch" name="mysearch" placeholder="search" />
</div>
<table class="table" id="mytable">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>First</th>
<th>Last</th>
<th>Dept</th>
</tr>
</thead>
<tbody></tbody>
</table>
I just commented:
//table.row($row).data(employee).draw(true);
It is not necesssary to draw again in order to have the updated data.
employee.active = active;//this line updates the data.
You can add these two lines to verify:
e = table.row($row).data();
console.log(e);
The rendering function to the column definitions configuration for your DataTable is also correct.
I'm using JqGrid in my ASP.NET MVC application using VS2010.My Grid does not seem to render properly on my view and does not allow me to access other controls(including entire page) on the view. See the screen blow:
Grid With Rows in it:
Grid Without Any Row:
But once I modify and submit data back to controller inline editing enter page becomes accessible.
My Script:
var last_selected_row;
$(function () {
var outerwidth = $('#studentList').width() - 10; ////Keep Grid 10 pixel smaller than its parent container
$('#studentGrid').jqGrid({
// Ajax related configurations
//url to send request to
url: "/Registration/LoadStudents",
datatype: "json",
mtype: "POST",
// Specify the column names
colNames: ["StudentID", "StudentName", "Status", "Grades", "StartDate", "EndDate", "EarnedDate", "DroppedDate"],
// Configure the columns
colModel: [
{ name: "StudentID", index: "StudentID", width: 0, align: "left", key: true },
{ name: "StudentName", index: "StudentName", editrules: { required: true, integer: false }, width: 100, title: "Name", align: "left", editable: true, stype: 'text', sortable: true },
{ name: "Status", index: "Status", width: 70, align: "left", editable: true, edittype: "checkbox", editoptions: { value: "true:false"} },
{ name: "Grades", index: "Grades", width: 80, align: "left", editable: true, edittype: "select", editoptions:
{
dataUrl: "/Registration/GetAllGrades",
buildSelect: function (data) {
//var d = $.parseJSON(data);
var jqGridAssemblyTypes = $.parseJSON(data);
var s = '<select>';
if (jqGridAssemblyTypes && jqGridAssemblyTypes.length) {
for (var i = 0, l = jqGridAssemblyTypes.length; i < l; i++) {
var ri = jqGridAssemblyTypes[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataInit: function (elem) {
var v = $(elem).val();
////Set other column value here
},
dataEvents: [{
type: 'change',
fn: function (e) {
var assemblyType = $(e.target).val();
//var rowId = getRowId($(this));
}
}]
}
},
{ name: "StartDate", editable: true, editrules: { edithidden: false }, editoptions: { dataInit: function (element) { SetFieldReadOnly(element); } }
, index: "StartDate", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EndDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EndDate", title: "Ended", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "EarnedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "EarnedDate", title: "Earned", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
},
{ name: "DroppedDate", editable: true, editrules: { edithidden: false }, editoptions:
{ dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}, index: "DroppedDate", title: "Dropped", width: 100, align: "left", formatter: 'date', formatoptions: { srcformat: 'm/d/Y', newformat: 'm/d/Y' }
}],
// Grid total width and height
//width: 300,
//height: 200,
//autowidth: true,
height: '100%',
altRows: true,
shrinkToFit: false,
//forceFit: true,
gridview: true,
//width: 600,
// Paging
toppager: false,
pager: $("#studentGridPager"),
rowNum: 5,
rowList: [5, 10, 20],
viewrecords: true,
// Default sorting
sortname: "StudentID",
sortorder: "asc",
ajaxRowOptions: { contentType: "application/json", dataType: "json" },
serializeRowData: function (data) {
return JSON.stringify({ registrationModel: data });
},
ondblClickRow: function (StudentId) { StudentDoubleClicked(StudentId); },
// Grid caption
editurl: "/Registration/EditStudents",
jsonReader: { repeatitems: false },
caption: "Students"
}).setGridWidth(outerwidth);
function bindAllGrades() {
var dataString = '';
var grades = new Array();
$.getJSON("/Registration/GetAllGrades", null, function (data) {
if (data != null) {
$.each(data, function (i, item) {
grades.push("{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"}");
dataString += "{\"Text\":\"" + item.Text + "\",\"Value\":\"" + item.Value + "\"},";
});
dataString = dataString.slice(0, -1);
}
});
var jstrin = JSON.stringify(grades);
return grades;
}
function StudentDoubleClicked(StudentId) {
var $myGrid = $("#studentGrid");
if (StudentId && StudentId != last_selected_row) {
$myGrid.jqGrid('restoreRow', last_selected_row);
$myGrid.jqGrid('saveRow', StudentId, {
successfunc: function (response) {
alert('Row is Saved !!!');
return true;
}
}, '/Registration/EditStudents',
{
extraparam: {
StudentID: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'StudentID');
return stId;
},
StudentName: getSavedMathValue(StudentId),
Status: function () {
var sel_id = $myGrid.jqGrid('getGridParam', 'selrow');
var value = $myGrid.jqGrid('getCell', sel_id, 'Status');
return value;
}
}
}, function () { alert('This is After save.') }, function () { alert('Error while saving data.') }, reload);
$myGrid.jqGrid('editRow', StudentId, true);
last_selected_row = StudentId;
}
}
function getSavedMathValue(stId) {
var mval = $('#' + stId + "_StudentName");
return mval.val();
}
function SetFieldReadOnly(Ele) {
$(Ele).attr("readonly", "readonly");
}
})
function reload(rowid, result) {
alert("This is Reload " + Result);
$("#studentGrid").trigger("reloadGrid");
}
My View:
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SISShsmMvc.Models.RegistrationModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
<%: Scripts.Render("~/bundles/autocomplete")%>
<script type="text/javascript" src="../../Scripts/Registration.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>Search Student By</legend>
<div id="studentSearch">
<span>Name:</span><br />
<%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
<span>Grade:</span><br />
<%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
</div>
</fieldset>
<div id="studentList">
<table id="studentGrid">
</table>
<div id="studentGridPager" />
</div>
</div>
</body>
</html>
My Controller:
public ActionResult Index()
{
PopulateUserContextViewBags();
List<string> grades = new List<string>();
grades.Add("Grades 11 and 12");
grades.Add("Grades 12");
grades.Add("Grades 11");
grades.Add("Grades 10");
grades.Add("All Grades");
// TODO:
Models.RegistrationModel model = new Models.RegistrationModel()
{
AvailableGrades = new SelectList(grades, "Grades 11 and 12")
};
return View(model);
}
public ActionResult LoadStudents()
{
var objmodel = Models.RegistrationRepository.GetStudents();
return Json(objmodel, JsonRequestBehavior.AllowGet);
//return Json(null, JsonRequestBehavior.AllowGet);
}
public JsonResult EditStudents(Models.RegistrationModel registrationModel)
{
// registrationModel.StudentID = id;
return Json(null, JsonRequestBehavior.AllowGet);
}
I'm using JqGrid 4.5.1. I've tested this code in IE9 and Firefox 22.0. Any help ??
I solved it by adding ui.jqgrid.css to my view:
This is how my view looks now:
" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.locale-en.js"></script>
<!-- Newly added .css solved the problem -->
<link rel="Stylesheet" type="text/css" href="../../Content/ui.jqgrid.css" />
<%: Scripts.Render("~/bundles/autocomplete")%>
<script type="text/javascript" src="../../Scripts/Registration.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>Search Student By</legend>
<div id="studentSearch">
<span>Name:</span><br />
<%= Html.TextBoxFor(m => m.StudentName, new { ID = "StudentName" })%><br />
<span>Grade:</span><br />
<%= Html.DropDownListFor(m => m.SelectedGrade, Model.AvailableGrades) %><br />
</div>
</fieldset>
<div id="studentList">
<table id="studentGrid">
</table>
<div id="studentGridPager" />
</div>
</div>
</body>
</html>
Hope this will help someone in future!