We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
@*custom column chooser element*@
<input id="cutomChooser" />
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
//.ShowColumnChooser()
.AllowPaging() /*Paging Enabled*/
.ClientSideEvents(eve => eve.DataBound("DataBound"))
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add();
}))
|
|
<script>
$(function(){
customData = [{value:"OrderID", text:"Audi4"}, {value:"CustomerID",text:"Audi5"},{value:"EmployeeID",text:"Audi6"}]
})
function DataBound(args) {
$('.e-gridtoolbar').append($('#cutomChooser'))
$('#cutomChooser').ejDropDownList({
width: "20%",
showCheckbox: true,
dataSource: customData,
change: "drpValueChange",
checkAll: true,
multiSelectMode: ej.MultiSelectMode.Delimiter
})
$("#cutomChooser_wrapper").addClass('gird-cutomChooser')
}
|
|
<style>
.gird-cutomChooser{
float:right;
margin-top:3px;
}
</style> |
|
function drpValueChange(args) {
// column chooser operation
var gridObj = $("#FlatGrid").ejGrid("instance");
if (args.isChecked)
gridObj.showColumns(args.value)
else {
if (gridObj._visibleColumns.length == 1) {
args.cancel = true;
$('#cutomChooser').ejDropDownList("model.selectedItems", [args.itemId])
alert("atlease one column need to show grid");
}
else
gridObj.hideColumns(args.value)
}
}
|
|
<button id="spltbutton">Column Chooser</button>
<ul id="Ul41">
<li style="display:inline-flex;"> <input id ="ch0" type="checkbox" value="OrderID" /><span>Audi4</span></li>
<li style="display:inline-flex;"><input id ="ch1"type="checkbox" value="CustomerID" /><span>Audi5</span></li>
<li style="display:inline-flex;"><input id ="ch2"type="checkbox" value="EmployeeID" /><span>Audi6</span></li>
</ul>
|
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
//.ShowColumnChooser()
.ClientSideEvents(eve => eve.DataBound("DataBound"))
. . .
}))
function DataBound(args) {
$('.e-gridtoolbar').append($('#spltbutton'))
$('.e-gridtoolbar').append($('#Ul41'))
$("#spltbutton").ejSplitButton({
size: "large",
buttonMode: ej.ButtonMode.Dropdown,
targetID: "Ul41",
});
var count = $("input[type='checkbox']").length;
for (var i = 0; i < count; i++) {
$("#ch"+i).ejCheckBox({
checked: true,
change: "ValueChange"
});
}
$(".e-split").addClass('gird-cutomChooser')
}
|
|
function ValueChange(args) {
var gridObj = $("#FlatGrid").ejGrid("instance");
if (args.isChecked)
gridObj.showColumns(args.model.value)
else {
if (gridObj._visibleColumns.length == 1) {
args.cancel = true;
$("#" + this._id).ejCheckBox("model.checked", true)
alert("atlease one column need to show grid");
}
else
gridObj.hideColumns(args.model.value)
}
}
|
|
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
//.ShowColumnChooser()
.AllowGrouping()
. . .
}))
[Group columns]
var gridObj = $("#FlatGrid").ejGrid("instance");
gridObj.groupColumn("OrderID")
|
|
<button id='hidebtn'>hideStackedHeaderColumns</button>
<button id='showbtn'>showStackedHeaderColumns</button>
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
//.ShowColumnChooser()
.ShowStackedHeader()
.StackedHeaderRows(row =>
{
row.StackedHeaderColumns(column =>
{
column.HeaderText("OrderDetails").Column(col =>
{
col.Add("OrderID");
col.Add("CustomerID");
}).Add();
column.HeaderText("Ship Details").Column(col =>
{
col.Add("EmployeeID");
}).Add();
}).Add();
})
}))
|
|
<script>
$(function(){
customData = [{ value: "OrderID", text: "Audi4" }, { value: "CustomerID", text: "Audi5" }, { value: "EmployeeID", text: "Audi6" }]
$("#hidebtn").ejButton({
click: function(args){
var obj = $("#FlatGrid").ejGrid("instance");
var applyToHideColumns = obj.model.stackedHeaderRows[0].stackedHeaderColumns[0].column;
hideStackedHeaderColumns(applyToHideColumns)
}
})
$("#showbtn").ejButton({
click: function(args){
var obj = $("#FlatGrid").ejGrid("instance");
var applyToShowColumns = obj.model.stackedHeaderRows[0].stackedHeaderColumns[0].column;
showStackedHeaderColumns(applyToShowColumns)
}
})
})
|
|
function hideStackedHeaderColumns(hideColumn) {
var obj = $("#FlatGrid").ejGrid("instance");
for (var i = 0 ; i < hideColumn.length; i++) {
obj.hideColumns(hideColumn[i])
}
}
|
|
function showStackedHeaderColumns(showColumn) {
var obj = $("#FlatGrid").ejGrid("instance");
for (var i = 0 ; i < showColumn.length; i++) {
obj.showColumns(showColumn[i])
}
}
|
