PDA

View Full Version : [CLOSED] How to insert "Div" tag and some html content inside Items collection of Tabpanel?



alscg
May 13, 2013, 1:00 PM
Hi ,

How to insert "Div" tag and some html content inside Items collection of Tab panel? Please suggest how to do this.
I have requirement like below.



<ext:TabPanel ID="tabRolesPermissions" Cls="role-tabpanel" Margin="10" Width="" runat="server" ActiveTabIndex="0">
<Items>
<ext:Panel ID="pnlExistingRoles" runat="server" TabIndex="0" Title="Existing Roles">
<Items>
</Items>
</ext:Panel>
<div id="Pagination" class="pagination">
<input type="hidden" value="20" name="items_per_page" id="items_per_page" class="numeric" />
<input type="hidden" value="4" name="num_display_entries" id="num_display_entries" class="numeric" />
<input type="hidden" value="1" name="num_edge_entries" id="num_edge_entries" class="numeric" />
<input type="hidden" value="Previous" name="prev_text" id="prev_text" />
<input type="hidden" value="Next" name="next_text" id="next_text" />
<input type="hidden" value="First" name="first_text" id="first_text" />
<input type="hidden" value="Last" name="last_text" id="last_text" />
</div>
</Items>
<Listeners>
<TabChange Fn="tabChanged" />
</Listeners>
</ext:TabPanel>


I trying put DIV #Pagination inside items collections.

Daniil
May 13, 2013, 3:21 PM
Hi @alscg,

An Items collection can contain only Ext.Net.AbstractComponent inheritors.

You could wrap the div in

<ext:Panel>
<Content>

</Content>
</ext:Panel>

But that Panel will be treated as a common tab.

I guess you need to dock the pagination things to the top or bottom of the TabPanel. If so, you can use a TabPanel's DockedItems collection.

alscg
May 14, 2013, 8:24 AM
Hi @alscg,

An Items collection can contain only Ext.Net.AbstractComponent inheritors.

You could wrap the div in

<ext:Panel>
<Content>

</Content>
</ext:Panel>

But that Panel will be treated as a common tab.

I guess you need to dock the pagination things to the top or bottom of the TabPanel. If so, you can use a TabPanel's DockedItems collection.

Thanks..Danill. It's working fine. This can be closed.

alscg
May 30, 2013, 11:27 AM
Thanks..Danill. It's working fine. This can be closed.

Hi,

Can you please provide same sample in Razor syntax? Now I am converting my page to razor syntax.

Daniil
May 30, 2013, 11:57 AM
Please follow:
http://forums.ext.net/showthread.php?20217#post87302

alscg
May 30, 2013, 1:06 PM
Please follow:
http://forums.ext.net/showthread.php?20217#post87302

Thank you ...It is working. I was trying with out "@text".

alscg
May 31, 2013, 10:38 AM
Thank you ...It is working. I was trying with out "@text".

Hi,

After conversion when I run the application, I am getting java script exception. I am attaching error screen shot.

6300

Below is the page


@model object[]
@using System.Text;
@using System.Web.UI.HtmlControls;
@using Empower.Presentation;
@using Empower.DTO.Administration;

@{
ViewBag.Title = "RolesAndPermissions";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}


<script type="text/javascript">


var ExportToExcel = function () {
var rolesToBeExported = [];
var selectedRoles = App.grdExistingRoles.getSelectionModel().getSelect ion();

if (selectedRoles.length == 0) {
selectedRoles = App.grdExistingRoles.getStore().data.items;
}

Ext.each(selectedRoles, function (item) {
rolesToBeExported.push(item.data);
});

Ext.net.DirectMethod.request({
url: '@(Url.Action("ExportToExcel", "Administration"))',
cleanRequest: true,
isUpload: true,
params: {
data: rolesToBeExported,
functionalityCompId: '@(Session["RoleFuncID"])'
}
});
};

/* START: Methods for grid paging */

var onComboBoxSelect = function (combo) {
var store = combo.up("gridpanel").getStore();
store.pageSize = parseInt(combo.getValue(), 10);
store.load();
};

Ext.onReady(function () {
var grid = App.grdExistingRoles;
Ext.EventManager.onWindowResize(function () {
grid.setSize(undefined, undefined);
});
});

Ext.data.PagingStore.override({
applyPaging: function () {
var start = (this.currentPage - 1) * this.pageSize,
limit = this.pageSize;
var allData = this.data,
data = new Ext.util.MixedCollection({
getKey: Ext.data.Store.recordIdFn,
maintainIndices: true
});

data.pageSize = this.pageSize;

if (start >= allData.getCount()) {
start = this.start = 0;
}

data.addAll(allData.getRange(start, start + limit - 1));
this.allData = allData;
this.data = data;
}
});

var store;
var onComboBoxSelect = function (combo) {
store = App.grdExistingRoles.getStore();
store.pageSize = parseInt(combo.getValue(), 10);
$("#Pagination").html('<input type="hidden" value="' + store.pageSize + '" name="items_per_page" id="items_per_page" class="numeric" /><input type="hidden" value="4" name="num_display_entries" id="num_display_entries" class="numeric" /><input type="hidden" value="1" name="num_edge_entries" id="num_edge_entries" class="numeric" /><input type="hidden" value="Previous" name="prev_text" id="prev_text" /><input type="hidden" value="Next" name="next_text" id="next_text" /><input type="hidden" value="First" name="first_text" id="first_text" /><input type="hidden" value="Last" name="last_text" id="last_text" />');

customPagenation();
store.load();
};

var customPagenation = function () {
store = App.grdExistingRoles.getStore();
$("#items_per_page").val(store.pageSize);
var optInit = getOptionsFromForm();
$("#Pagination").pagination(store.totalCount, optInit);
};

function getOptionsFromForm() {
var opt = { callback: pageselectCallback };
$("input:hidden").each(function () {
opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
});
var htmlspecialchars = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }
$.each(htmlspecialchars, function (k, v) {
opt.prev_text = opt.prev_text.replace(k, v);
opt.next_text = opt.next_text.replace(k, v);
})
return opt;
};

function pageselectCallback(page_index, jq) {
var max_elem = Math.min((page_index + 1) * store.pageSize, store.totalCount);
return false;
}

var pagenationClick = function (e) {
var currentPage = store.currentPage;
if (e.id == "First") {
currentPage = 1;
} else if (e.id == "Last") {
currentPage = (store.totalCount / store.pageSize);
currentPage = Math.ceil(currentPage);
} else if (e.id == "Previous") {
currentPage = currentPage - 1;
} else if (e.id == "Next") {
currentPage = store.currentPage + 1;
} else {
var currentPage = e.id;
}
store.currentPage = currentPage;
store.load();
e.preventDefault();
};

/* END: Methods for grid paging */

@* Start :- Edit Columns implementation*@

var showEditColumnsPopup = function () {
var data = "";
var columns = App.grdExistingRoles.columns;
Ext.each(columns, function (node) {
if (node.text != undefined && node.text != "*") {
data += node.text + ",";
}
});

$("#myModal").reveal();
$("#myModal").addClass("medium");
$("#myModal").css("padding-top", "0px");
$(".reveal-modal-load").empty();
Ext.net.directRequest({
url: '@( Url.Action("ShowEditPopup", "Administration"))',
extraParams: { containerId: Ext.get(Ext.query(".reveal-modal-load")[0]).id, functionalityCompId: '@(Session["RoleFuncID"]), data: data }
});
};

@*Overriding insertColumn method of grid panel to resolve issue - columns could not reordered when gridpanel's EnableLocking(true) property has set*@

Ext.grid.Panel.override({
insertColumn: function (index, newCol, doLayout) {
var headerCt = this.normalGrid ? this.normalGrid.headerCt : this.headerCt;

if (index < 0) {
index = 0;
}

if (newCol.locked && this.lockedGrid) {
headerCt = this.lockedGrid.headerCt;
}

headerCt.insert(index, newCol);

if (doLayout !== false) {
this.updateLayout();
this.fireEvent('reconfigure', this);
this.getView().refresh();
}
}
});

@*Show, reorder and lock gridpanel columns as per database values *@
var reorderColumns = function (store, records) {
var grid = App.grdExistingRoles,
columns = grid.getView().getGridColumns(),
columnToInsert;

for (var i = 0; i < columns.length; i++) {
if (columns[i].text != "*")
grid.removeColumn(i, false);
}

records.sort(function (a, b) {
return a.data.Order < b.data.Order ? -1 : 1;
});

Ext.suspendLayouts();

Ext.each(records, function (colConfig) {
columnToInsert = Ext.Array.findBy(columns, function (col) {
return col.text.toString().toUpperCase() === colConfig.data.ColumnName.toString().toUpperCase() ;
});

columnToInsert.setVisible(colConfig.data.Display);

if (colConfig.data.Locked)
grid.lock(columnToInsert);
else
grid.unlock(columnToInsert);

grid.insertColumn(colConfig.data.Order, columnToInsert, false);
});

@*Manual refreshing because of false passed to the insertColumn call*@
grid.updateLayout();
grid.fireEvent('reconfigure', grid);
grid.getView().refresh();

Ext.resumeLayouts(true);
};

@*End:- Edit Columns implementation*@
</script>
<div>
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLoc ationType.None))
<div class="ten columns main-content">

@(Html.X().Hidden().ID("hdnID"))

<div class="page-title clearfix">@(Resource.Administration.RolesAndPermissions.Page Title)</div>
<div id="ErrorMessageDiv" style="color: red; text-align: center"></div>

@(Html.X().Store().ID("storeForEditColumns")
.Model(Html.X().Model()
.Fields(
new ModelField("ColumnName", ModelFieldType.String),
new ModelField("Display", ModelFieldType.Boolean),
new ModelField("Locked", ModelFieldType.Boolean),
new ModelField("Order", ModelFieldType.Int)
)
)
.DataSource(Model[1])
.Listeners(ls => ls.Load.Fn = "reorderColumns")
)

@(Html.X().TabPanel().ID("tabRolesPermissions").Cls("role-tabpanel")
.Items(
Html.X().Panel().ID("pnlExistingRoles").Title("Existing Roles")
.Items(
(
Html.X().GridPanel()
.ID("grdExistingRoles")
.Header(false)
.Cls("x-grid-custom")
.Border(false)
.Store(Html.X().Store().ID("storeRoles")
.RemotePaging(true)
.PageSize(10)
.Listeners(ls => ls.Load.Fn = "customPagenation")
.Model(Html.X().Model().ID("modelRoles")
.Fields(
new ModelField("Role_Id", ModelFieldType.Int),
new ModelField("Role_Name", ModelFieldType.String),
new ModelField("Role_Desc", ModelFieldType.String),
new ModelField("Updated_TS", ModelFieldType.String),
new ModelField("Created_TS", ModelFieldType.String),
new ModelField("Status_Ind", ModelFieldType.Boolean)
)
)
.DataSource(Model[0])
)
.ColumnModel(
Html.X().Column().ID("colRoleID").Text("").Hidden(true).DataIndex("Role_Id"),
Html.X().Column().ID("colRoleName").Text(Resource.Administration.RolesAndPermissions .PermissionNameText).Width(210).Cls("custom-header").DataIndex("Role_Name"),
Html.X().Column().ID("colRoleDesc").Text(Resource.Administration.RolesAndPermissions .RoleDescText).Width(300).Cls("custom-header").DataIndex("Role_Desc"),
Html.X().DateColumn().ID("colUpdatedDate").Text(Resource.Administration.RolesAndPermissions .UpdatedDateText).Width(160).Cls("custom-header").DataIndex("Updated_TS").Format("MM/dd/Y"),
Html.X().DateColumn().ID("colCreatedDate").Text(Resource.Administration.RolesAndPermissions .CreatedDateText).Width(160).Cls("custom-header").DataIndex("Created_TS").Format("MM/dd/Y"),
Html.X().Column().ID("colIsActive").Text(Resource.Administration.RolesAndPermissions .StatusText).Width(142).Cls("custom-header").DataIndex("Status_Ind")

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi).ID("chkSelect")
.SelectedRecordID("Role_Id")
.CheckOnly(true)
)
.BottomBar(
Html.X().PagingToolbar()
.PaddingSpec("15 10 25 10")
.BorderSpec("1 0 0 0")
.ID("PageBar")
.DisplayInfo(false)
.HideRefresh(true)
)
.TopBar(
Html.X().Toolbar().ID("TopBar")
.Items(
Html.X().Button().ID("btnClone").Text(Resource.Administration.RolesAndPermissions .BtnClone).Cls("btn clone"),
Html.X().Button().ID("btnDelete").Text(Resource.Administration.RolesAndPermissions .BtnDelete).Cls("btn delete"),
Html.X().Button().ID("btnExport").Text(Resource.Administration.RolesAndPermissions .BtnExport).Cls("btn export"),
Html.X().Button().ID("btnEditColumns").Text(Resource.Administration.RolesAndPermissions .BtnEditColumns).Cls("btn edit"),
Html.X().Panel().ID("pnlSearch").Cls("pnl-search")
.Items(
Html.X().TextField()
.ID("txtSearch")
.EnableKeyEvents(true)
.EmptyText("Search...")
.Cls("ac_input")
)
).MarginSpec("0 0 0 -2px")
)

), //END: "Existing roles" grid
Html.X().Panel().ID("paginationContainer").Cls("paging-container")
.Content(
@<text>
<div class="custom-pagination">
<div id="pageing-info">
@( Html.X().Panel()
.Layout(LayoutType.HBox)
.Border(false)
.Cls("pageing-info")
.Items(
Html.X().Label(Resource.Talent.Goal.TxtDisplay).Ma rginSpec("2 0 0 0 "),
Html.X().ToolbarSpacer(4),
Html.X().ComboBox()
.Width(42)
.ID("CmbPageRecord")
.Items("10", "20", "30", "40", "50")
.SelectedItems("20")
.TriggerCls("custom-pagesize-trigger")
.Listeners(ls => ls.Select.Fn = "onComboBoxSelect"),
Html.X().ToolbarSpacer(4),
Html.X().Label(Resource.Talent.Goal.TxtRecords).Ma rginSpec("2 0 0 0 ")
)
)
</div>
<div id="Pagination" class="pagination">
<input type="hidden" value="20" name="items_per_page" id="items_per_page" class="numeric" />
<input type="hidden" value="4" name="num_display_entries" id="num_display_entries" class="numeric" />
<input type="hidden" value="1" name="num_edge_entries" id="num_edge_entries" class="numeric" />
<input type="hidden" value="Previous" name="prev_text" id="prev_text" />
<input type="hidden" value="Next" name="next_text" id="next_text" />
<input type="hidden" value="First" name="first_text" id="first_text" />
<input type="hidden" value="Last" name="last_text" id="last_text" />
</div>
</div>
</text>
)

)
)
)
</div>
</div>

Daniil
May 31, 2013, 12:10 PM
A JavaScript error happens here:

extraParams: { containerId: Ext.get(Ext.query(".reveal-modal-load")[0]).id, functionalityCompId: '@(Session["RoleFuncID"]), data: data } due to an unterminated string literal. There is no closing single quote.

alscg
May 31, 2013, 12:16 PM
Hi,

After conversion when I run the application, I am getting java script exception. I am attaching error screen shot.

6300

Below is the page


@model object[]
@using System.Text;
@using System.Web.UI.HtmlControls;
@using Empower.Presentation;
@using Empower.DTO.Administration;

@{
ViewBag.Title = "RolesAndPermissions";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
}


<script type="text/javascript">


var ExportToExcel = function () {
var rolesToBeExported = [];
var selectedRoles = App.grdExistingRoles.getSelectionModel().getSelect ion();

if (selectedRoles.length == 0) {
selectedRoles = App.grdExistingRoles.getStore().data.items;
}

Ext.each(selectedRoles, function (item) {
rolesToBeExported.push(item.data);
});

Ext.net.DirectMethod.request({
url: '@(Url.Action("ExportToExcel", "Administration"))',
cleanRequest: true,
isUpload: true,
params: {
data: rolesToBeExported,
functionalityCompId: '@(Session["RoleFuncID"])'
}
});
};

/* START: Methods for grid paging */

var onComboBoxSelect = function (combo) {
var store = combo.up("gridpanel").getStore();
store.pageSize = parseInt(combo.getValue(), 10);
store.load();
};

Ext.onReady(function () {
var grid = App.grdExistingRoles;
Ext.EventManager.onWindowResize(function () {
grid.setSize(undefined, undefined);
});
});

Ext.data.PagingStore.override({
applyPaging: function () {
var start = (this.currentPage - 1) * this.pageSize,
limit = this.pageSize;
var allData = this.data,
data = new Ext.util.MixedCollection({
getKey: Ext.data.Store.recordIdFn,
maintainIndices: true
});

data.pageSize = this.pageSize;

if (start >= allData.getCount()) {
start = this.start = 0;
}

data.addAll(allData.getRange(start, start + limit - 1));
this.allData = allData;
this.data = data;
}
});

var store;
var onComboBoxSelect = function (combo) {
store = App.grdExistingRoles.getStore();
store.pageSize = parseInt(combo.getValue(), 10);
$("#Pagination").html('<input type="hidden" value="' + store.pageSize + '" name="items_per_page" id="items_per_page" class="numeric" /><input type="hidden" value="4" name="num_display_entries" id="num_display_entries" class="numeric" /><input type="hidden" value="1" name="num_edge_entries" id="num_edge_entries" class="numeric" /><input type="hidden" value="Previous" name="prev_text" id="prev_text" /><input type="hidden" value="Next" name="next_text" id="next_text" /><input type="hidden" value="First" name="first_text" id="first_text" /><input type="hidden" value="Last" name="last_text" id="last_text" />');

customPagenation();
store.load();
};

var customPagenation = function () {
store = App.grdExistingRoles.getStore();
$("#items_per_page").val(store.pageSize);
var optInit = getOptionsFromForm();
$("#Pagination").pagination(store.totalCount, optInit);
};

function getOptionsFromForm() {
var opt = { callback: pageselectCallback };
$("input:hidden").each(function () {
opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
});
var htmlspecialchars = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }
$.each(htmlspecialchars, function (k, v) {
opt.prev_text = opt.prev_text.replace(k, v);
opt.next_text = opt.next_text.replace(k, v);
})
return opt;
};

function pageselectCallback(page_index, jq) {
var max_elem = Math.min((page_index + 1) * store.pageSize, store.totalCount);
return false;
}

var pagenationClick = function (e) {
var currentPage = store.currentPage;
if (e.id == "First") {
currentPage = 1;
} else if (e.id == "Last") {
currentPage = (store.totalCount / store.pageSize);
currentPage = Math.ceil(currentPage);
} else if (e.id == "Previous") {
currentPage = currentPage - 1;
} else if (e.id == "Next") {
currentPage = store.currentPage + 1;
} else {
var currentPage = e.id;
}
store.currentPage = currentPage;
store.load();
e.preventDefault();
};

/* END: Methods for grid paging */

@* Start :- Edit Columns implementation*@

var showEditColumnsPopup = function () {
var data = "";
var columns = App.grdExistingRoles.columns;
Ext.each(columns, function (node) {
if (node.text != undefined && node.text != "*") {
data += node.text + ",";
}
});

$("#myModal").reveal();
$("#myModal").addClass("medium");
$("#myModal").css("padding-top", "0px");
$(".reveal-modal-load").empty();
Ext.net.directRequest({
url: '@( Url.Action("ShowEditPopup", "Administration"))',
extraParams: { containerId: Ext.get(Ext.query(".reveal-modal-load")[0]).id, functionalityCompId: '@(Session["RoleFuncID"]), data: data }
});
};

@*Overriding insertColumn method of grid panel to resolve issue - columns could not reordered when gridpanel's EnableLocking(true) property has set*@

Ext.grid.Panel.override({
insertColumn: function (index, newCol, doLayout) {
var headerCt = this.normalGrid ? this.normalGrid.headerCt : this.headerCt;

if (index < 0) {
index = 0;
}

if (newCol.locked && this.lockedGrid) {
headerCt = this.lockedGrid.headerCt;
}

headerCt.insert(index, newCol);

if (doLayout !== false) {
this.updateLayout();
this.fireEvent('reconfigure', this);
this.getView().refresh();
}
}
});

@*Show, reorder and lock gridpanel columns as per database values *@
var reorderColumns = function (store, records) {
var grid = App.grdExistingRoles,
columns = grid.getView().getGridColumns(),
columnToInsert;

for (var i = 0; i < columns.length; i++) {
if (columns[i].text != "*")
grid.removeColumn(i, false);
}

records.sort(function (a, b) {
return a.data.Order < b.data.Order ? -1 : 1;
});

Ext.suspendLayouts();

Ext.each(records, function (colConfig) {
columnToInsert = Ext.Array.findBy(columns, function (col) {
return col.text.toString().toUpperCase() === colConfig.data.ColumnName.toString().toUpperCase() ;
});

columnToInsert.setVisible(colConfig.data.Display);

if (colConfig.data.Locked)
grid.lock(columnToInsert);
else
grid.unlock(columnToInsert);

grid.insertColumn(colConfig.data.Order, columnToInsert, false);
});

@*Manual refreshing because of false passed to the insertColumn call*@
grid.updateLayout();
grid.fireEvent('reconfigure', grid);
grid.getView().refresh();

Ext.resumeLayouts(true);
};

@*End:- Edit Columns implementation*@
</script>
<div>
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLoc ationType.None))
<div class="ten columns main-content">

@(Html.X().Hidden().ID("hdnID"))

<div class="page-title clearfix">@(Resource.Administration.RolesAndPermissions.Page Title)</div>
<div id="ErrorMessageDiv" style="color: red; text-align: center"></div>

@(Html.X().Store().ID("storeForEditColumns")
.Model(Html.X().Model()
.Fields(
new ModelField("ColumnName", ModelFieldType.String),
new ModelField("Display", ModelFieldType.Boolean),
new ModelField("Locked", ModelFieldType.Boolean),
new ModelField("Order", ModelFieldType.Int)
)
)
.DataSource(Model[1])
.Listeners(ls => ls.Load.Fn = "reorderColumns")
)

@(Html.X().TabPanel().ID("tabRolesPermissions").Cls("role-tabpanel")
.Items(
Html.X().Panel().ID("pnlExistingRoles").Title("Existing Roles")
.Items(
(
Html.X().GridPanel()
.ID("grdExistingRoles")
.Header(false)
.Cls("x-grid-custom")
.Border(false)
.Store(Html.X().Store().ID("storeRoles")
.RemotePaging(true)
.PageSize(10)
.Listeners(ls => ls.Load.Fn = "customPagenation")
.Model(Html.X().Model().ID("modelRoles")
.Fields(
new ModelField("Role_Id", ModelFieldType.Int),
new ModelField("Role_Name", ModelFieldType.String),
new ModelField("Role_Desc", ModelFieldType.String),
new ModelField("Updated_TS", ModelFieldType.String),
new ModelField("Created_TS", ModelFieldType.String),
new ModelField("Status_Ind", ModelFieldType.Boolean)
)
)
.DataSource(Model[0])
)
.ColumnModel(
Html.X().Column().ID("colRoleID").Text("").Hidden(true).DataIndex("Role_Id"),
Html.X().Column().ID("colRoleName").Text(Resource.Administration.RolesAndPermissions .PermissionNameText).Width(210).Cls("custom-header").DataIndex("Role_Name"),
Html.X().Column().ID("colRoleDesc").Text(Resource.Administration.RolesAndPermissions .RoleDescText).Width(300).Cls("custom-header").DataIndex("Role_Desc"),
Html.X().DateColumn().ID("colUpdatedDate").Text(Resource.Administration.RolesAndPermissions .UpdatedDateText).Width(160).Cls("custom-header").DataIndex("Updated_TS").Format("MM/dd/Y"),
Html.X().DateColumn().ID("colCreatedDate").Text(Resource.Administration.RolesAndPermissions .CreatedDateText).Width(160).Cls("custom-header").DataIndex("Created_TS").Format("MM/dd/Y"),
Html.X().Column().ID("colIsActive").Text(Resource.Administration.RolesAndPermissions .StatusText).Width(142).Cls("custom-header").DataIndex("Status_Ind")

)
.SelectionModel(
Html.X().CheckboxSelectionModel()
.Mode(SelectionMode.Multi).ID("chkSelect")
.SelectedRecordID("Role_Id")
.CheckOnly(true)
)
.BottomBar(
Html.X().PagingToolbar()
.PaddingSpec("15 10 25 10")
.BorderSpec("1 0 0 0")
.ID("PageBar")
.DisplayInfo(false)
.HideRefresh(true)
)
.TopBar(
Html.X().Toolbar().ID("TopBar")
.Items(
Html.X().Button().ID("btnClone").Text(Resource.Administration.RolesAndPermissions .BtnClone).Cls("btn clone"),
Html.X().Button().ID("btnDelete").Text(Resource.Administration.RolesAndPermissions .BtnDelete).Cls("btn delete"),
Html.X().Button().ID("btnExport").Text(Resource.Administration.RolesAndPermissions .BtnExport).Cls("btn export"),
Html.X().Button().ID("btnEditColumns").Text(Resource.Administration.RolesAndPermissions .BtnEditColumns).Cls("btn edit"),
Html.X().Panel().ID("pnlSearch").Cls("pnl-search")
.Items(
Html.X().TextField()
.ID("txtSearch")
.EnableKeyEvents(true)
.EmptyText("Search...")
.Cls("ac_input")
)
).MarginSpec("0 0 0 -2px")
)

), //END: "Existing roles" grid
Html.X().Panel().ID("paginationContainer").Cls("paging-container")
.Content(
@<text>
<div class="custom-pagination">
<div id="pageing-info">
@( Html.X().Panel()
.Layout(LayoutType.HBox)
.Border(false)
.Cls("pageing-info")
.Items(
Html.X().Label(Resource.Talent.Goal.TxtDisplay).Ma rginSpec("2 0 0 0 "),
Html.X().ToolbarSpacer(4),
Html.X().ComboBox()
.Width(42)
.ID("CmbPageRecord")
.Items("10", "20", "30", "40", "50")
.SelectedItems("20")
.TriggerCls("custom-pagesize-trigger")
.Listeners(ls => ls.Select.Fn = "onComboBoxSelect"),
Html.X().ToolbarSpacer(4),
Html.X().Label(Resource.Talent.Goal.TxtRecords).Ma rginSpec("2 0 0 0 ")
)
)
</div>
<div id="Pagination" class="pagination">
<input type="hidden" value="20" name="items_per_page" id="items_per_page" class="numeric" />
<input type="hidden" value="4" name="num_display_entries" id="num_display_entries" class="numeric" />
<input type="hidden" value="1" name="num_edge_entries" id="num_edge_entries" class="numeric" />
<input type="hidden" value="Previous" name="prev_text" id="prev_text" />
<input type="hidden" value="Next" name="next_text" id="next_text" />
<input type="hidden" value="First" name="first_text" id="first_text" />
<input type="hidden" value="Last" name="last_text" id="last_text" />
</div>
</div>
</text>
)

)
)
)
</div>
</div>



Hi,

I have resolved this. there was syntax error.