Originally Posted by
alscg
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.
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().getSelection();
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 = { "&": "&", "<": "<", ">": ">", '"': """ }
$.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(ResourceLocationType.None))
<div class="ten columns main-content">
@(Html.X().Hidden().ID("hdnID"))
<div class="page-title clearfix">@(Resource.Administration.RolesAndPermissions.PageTitle)</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).MarginSpec("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).MarginSpec("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>
