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.
|
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> |
