return value from dialog view with SlickGrid
yefim rozenkrants
Any help appreciated:
I created a view in dialog box with SlickGrid table in it.
How I can get selected rows (checked in check box) in to parent view.
My code :
View for dialog box:
DIALOG view:
@model IEnumerable<SgBsMVC4.Models.EatHabTransfer>
@using Newtonsoft.Json
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="~/SlickGrid/SlickGridCss/slick.grid.css" type="text/css" />
<link rel="stylesheet" href="~/SlickGrid/SlickGridCss/slick.pager.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="~/SlickGrid/slick-default-theme.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="~/SlickGrid/SlickGridCss/smoothness/jquery-ui-1.11.3.custom.css" type="text/css" />
<link rel="stylesheet" href="~/SlickGrid/SlickGridCss/slick.columnpicker.css" type="text/css" />
<link rel="stylesheet" href="~/SlickGrid/SlickGridCss/examples.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<style>
.slick-headerrow-column {
background: #87b6c9;
text-overflow: clip;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slick-headerrow-column input {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
#myGrid input[type=checkbox] { display:none; } /* to hide the checkbox itself */
#myGrid input[type=checkbox] + label:before {
cursor: pointer;
font-family: FontAwesome;
color: rgb(143, 14, 106);
font-weight: bold;
display: inline-block;
content: "\f00c";
font-size: 13px;
}
#myGrid input[type=checkbox] + label:before { opacity: 0.2; } /* unchecked icon */
#myGrid input[type=checkbox]:checked + label:before { opacity: 1; } /* checked icon */
</style>
</head>
<body>
<div>
<div id="myGrid" style="width:350px;height:500px;"></div>
</div>
<script src="~/SlickGrid/lib/jquery-1.11.2.min.js"></script>
<script src="~/SlickGrid/lib/jquery-ui-1.11.3.min.js"></script>
<script src="~/SlickGrid/lib/jquery.event.drag-2.3.0.js"></script>
<script src="~/SlickGrid/SlickGridScripts/slick.core.js"></script>
<script src="~/SlickGrid/SlickGridScripts/slick.editors.js"></script>
<script src="~/SlickGrid/SlickGridScripts/slick.formatters.js"></script>
<script src="~/SlickGrid/SlickGridScripts/Plugins/slick.checkboxselectcolumn.js"></script>
<script src="~/SlickGrid/SlickGridScripts/Plugins/slick.rowselectionmodel.js"></script>
<script src="~/SlickGrid/SlickGridScripts/slick.grid.js"></script>
<script src="~/SlickGrid/SlickGridScripts/slick.columnpicker.js"></script>
<script>
var md = @Html.Raw(JsonConvert.SerializeObject(this.Model));
var mdd = md;
//===========================================================================================
var grid;
var selectedRows = [];
var chosenItems = [];
var data = [];
var options = {
enableColumnReorder: false,
multiColumnSort: true,
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: false,
frozenColumn: 1
};
var colms = [
{id: 0, name:"Name", field:"Name",width:200 },
{id: 1, name:"NDB_No", field:"NDB_No", width:40},
{id: 2, name:"GrpTypeFlag", field:"GrpTypeFlag", width:40 },
{id: 3, name:"FdGrp_CD", field:"FdGrp_CD", width:40 }
];
var columns = [];
$(function () {
for (var i = 0; i < md.length; i++) {
var d = (data[i] = {});
d["id"] = i;
d[0]= md[i].Name;
d[1]= md[i].NDB_No;
d[2]= md[i].IdFdGrpFlg;
d[3]= md[i].FdGrp_CD;
}
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
for (var i = 0; i < colms.length; i++) {
columns.push({
id: i,
name: colms[i].name,
field: i,
sortable: true,
width:colms[i].width
});
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;
data.sort(function (dataRow1, dataRow2) {
for (var i = 0, l = cols.length; i < l; i++) {
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) {
return result;
}
}
return 0;
});
grid.invalidate();
grid.render();
});
grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
});
</script>
</body>
</html>
function calls dialog box:
function dialogUP() {
document.getElementById("dialog-form").innerHTML = '';
$("#dialog-form").dialog({
autoOpen: true,
position: { my: "right+350 bottom-100" },
width: 490,
height: 570,
resizable: false,
title: foodSourceName + ': ' + grpName,
modal: false,
open: function () {
var url = '@Url.Action("TestDialog", "TestAtida")';
url += '/?grpCD_name=' + grpCD + '=' + foodSourceType;
$(this).load(url);
},
buttons: {
'Cancel': function () {
partialFree = 0;
$(this).empty();
$(this).dialog('close');
$input.focus().select();
}
}
});
};