Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
146048 | Jul 17,2019 06:22 PM UTC | Jul 24,2019 06:40 AM UTC | ASP.NET MVC - EJ 2 | 5 |
![]() |
Tags: Grid |
Tab:
@Html.EJS().Tab("ej2Tab").Created("created").Selected("selected").Items(new List<TabTabItem>{
new TabTabItem { Header = new TabHeader { Text = "Datos Generales" }, Content = "#Grid1" },
new TabTabItem { Header = new TabHeader { Text = "Secciones" }, Content = "#Grid2" },
new TabTabItem { Header = new TabHeader { Text = "Medicamentos" }, Content = "#Grid3" },
new TabTabItem { Header = new TabHeader { Text = "Notas" }, Content = "#Grid4" }
}).Render()
First Grid:
<div id="Grid1" style="display: none">
@(Html.EJS().Grid("DatosGeneralesGrid").DataBound("dataBound")
. . . . . .
)
</div>
<script type="text/javascript">
var flag = false;
// other than the first tab Grid
function selected(args) { // tab selected event
var grid = args.selectedContent.querySelector(".e-grid");
if (!ej.base.isNullOrUndefined(grid)) {
grid.ej2_instances[0].toolbarModule.toolbar.refreshOverflow(); // refresh the Grid toolbar
}
}
// For the first tab Grid
function dataBound(args) { // First Grid dataBound event
if (flag) {
flag = false;
this.toolbarModule.toolbar.refreshOverflow();
}
}
function created(args) { // tab created event
if (this.selectedItem == 0) {
flag = true;
}
}
</script> |
@Html.EJS().Tab("ej2Tab").Selected("selected").ContentTemplate(@<div>
<div class="e-tab-header"> @*tab header elements*@
<div>Grid1</div>
<div>Grid2</div>
</div>
<div class="e-content"> @*tab content elements*@
<div>
@Html.EJS().Grid("Gridone").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging(true).Columns(col =>
{
col.Field("OrderID").HeaderText("OrderID").Add();
col.Field("EmployeeID").HeaderText("EmployeeId").Add();
}).Render()
</div>
<div>
<div id="secondGrid" class="sync-grid"></div>
</div>
</div>
</div>).Render()
<script type="text/javascript">
function selected(args) { // tab selected event
if (args.selectedIndex == 1) {
var data = @Html.Raw(Json.Encode(ViewBag.datasource));
var sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
var listObj = new ej.dropdowns.DropDownList({
dataSource: sportsData,
placeholder: "Select games"
});
var listObj1 = new ej.dropdowns.DropDownList({
dataSource: sportsData,
placeholder: "Select games"
});
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
dataBound: function () {
listObj1.appendTo('#ddE');
listObj.appendTo('#ddElement');
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel", { template: "<input id='ddElement'/>" }, { template: "<input id='ddE'/>"}],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120 },
{ field: 'Freight', headerText: 'Freight', format: 'C2', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 }
]
});
grid.appendTo(args.selectedContent.querySelector('.sync-grid'));
}
}
</script> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.