<%@ Page Title="" Language="C#" MasterPageFile="~/admin.master" AutoEventWireup="true" CodeFile="manageusers.aspx.cs" Inherits="manageusers" %> <asp:Content ID="Content1" ContentPlaceHolderID="cntAdmin" Runat="Server"> <link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" /> <link href="css/customcss/manageusers.css" rel="stylesheet" /> <link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="ViewModel/UserViewModel.js" type="text/javascript"></script> <script src="Scripts/jquery-2.0.3.min.js"></script> <script src="Scripts/knockout-3.0.0.js"></script> <script src="Scripts/knockout.validation.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.js" type="text/javascript"></script> <script src="js/grid.locale-en.js" type="text/javascript"></script> <link rel="stylesheet" href="https://c...content-available-to-author-only...y.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://c...content-available-to-author-only...y.com/ui/1.12.1/jquery-ui.min.js"></script> <script language="javascript" type="text/javascript"> $(document).ready( function() { BindGrid(); }); </script> <form runat="server" id="formID" method="post"> <asp:HiddenField ID="hdnRoles" runat="server" /> <div class="right_col manage-users-right-col" role="main"> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="createuser"> <div class="col-md-6 col-sm-6 col-xs-12 fst-col"> <div class="x_panel edit_manage_user fst-panel"> <div class="title_left create_user_title"> <h3>Create User</h3> </div> <div class="x_content"> <div class="user-create-frm-div"> <form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left manageuser_leftform"> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="first-name">Location <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-6"> <select data-bind="options: $root.Locations, optionsText: 'Location_Name',optionsValue:'Location_ID',value: LocId"></select> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="first-name">Designation <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-6"> <select data-bind="options: $root.Designations, optionsText: 'DesgName',optionsValue:'DesgID',value: Counter_NO"></select> </div> </div> <div class="form-group"> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">User ID <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-6"> <input type="text" data-bind="value:User_ID" /> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">Password <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-6"> <input type="password" data-bind="value:UserPWD" /> </div> </div> <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">Discontinued <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-6"> <label class="check-cnt"> <input type="checkbox" data-bind="checked:Discontinued" /> <span class="checkmark"></span> </label> </div> </div> <div class="form-group"> <div class="col-md-12 col-sm-12 col-xs-12"> <button type="button" data-bind="click:$root.InsertUpdate,text:ButtonText" class="btn btn-add"></button> <button type="button" data-bind="click:$root.Cancel,visible:IsVisible" class="btn btn-del">Cancel</button> </div> </div> </form> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 scn-col"> <div class=""> <div class="x_panel edit_manage_user scn-panel"> <!-- <div class="x_title"> <h2>Manage Users </h2> <ul class="nav navbar-right panel_toolbox"> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Settings 1</a> </li> <li><a href="#">Settings 2</a> </li> </ul> </li> <li><a class="close-link"><i class="fa fa-close"></i></a> </li> </ul> <div class="clearfix"></div> </div>--> <div class="x_content"> <div> <table id="jQGridDemo"> </table> <div id="jQGridDemoPager"> </div> </div> </div> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="changepass"> <div class=""> <div class="x_panel edit_manage_user fst-panel"> <div class="title_left"> <h3>Change Password</h3> </div> <div class="x_content"> <table cellpadding="0" cellspacing="0" border="0" id="frmCityCpas" class="table-condensed manageuser_leftform"> <tr> <td class="headings">Old Password:</td> <td> <input type="Password" name="txtOldPassword" class="form-control validate required alphanumeric" data-index="1" id="txtOldPassword" runat="server" /> </td> </tr> <tr> <td class="headings">New Password:</td> <td> <input type="Password" name="txtNewPassword" class="form-control validate required alphanumeric" data-index="1" id="txtNewPassword" runat="server" /> </td> </tr> <tr> <td class="headings">Confirm Password:</td> <td> <input type="Password" name="txtCnfrmPassword" class="form-control validate required alphanumeric" data-index="1" id="txtConfirmPassword" runat="server" /> </td> </tr> <tr> <td colspan="100%"> <table cellspacing="0" cellpadding="0"> <tr> <td></td> <td> <asp:Button ID="btnAddCpas" Text="Change Password" class="btn btn-add btn-small change-pass-btn" runat="server" onclick="btnAdd_Click" /> </td> </tr> </table> </td> </tr> </table> </div> </div> </div> </div> <div role="tabpanel" class="tab-pane" id="roles"> <div class=""> <div class="col-md-6 col-sm-6 col-xs-12 fst-col"> <div class="x_panel edit_manage_user fst-panel"> <div class="title_left"> <h3>Roles</h3> </div> <div class="x_content"> <table cellpadding="0" cellspacing="0" border="0" id="frmCityRole" class="table-condensed manageuser_leftform" > <tr><td class="headings">Title:</td><td> <input type="text" name="txtTitleRole" maxlength="50" class="form-control validate required alphanumeric" data-index="1" id="txtTitleRole" /></td></tr> <tr><td class="headings">IsActive:</td><td align="left" style="text-align:left"><label class="check-cnt"> <input type="checkbox" id="chkIsActiveRole" checked="checked" data-index="2" name="chkIsActiveRole" /><span class="checkmark"></span> </label></td></tr> <tr> <td colspan="100%;" > <table cellspacing="0" cellpadding="0" class="btn-tbl-roles"> <tr> <td> <div id="btnAddRole" class="btn btn-add btn-small" >Add Role</div> <div id="btnUpdateRole" class="btn btn-add btn-small" style="display:none;" >Update Role</div> <div id="btnResetRole" class="btn btn-del btn-small" style="display:none;" >Cancel</div></td> </tr> </table> </td> </tr> </table> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 scn-col"> <div class="x_panel edit_manage_user scn-panel"> <div class="x_content manage-roles-second-section"> <div class="youhave"> <table id="jQGridDemoRole"> </table> <div id="jQGridDemoPagerRole"> </div> </div> </div> </div> </div> </div> <!-- /page content --> <script language="javascript" type="text/javascript"> var m_RoleId = 0; function ResetControlsRole() { m_RoleId = 0; var txtTitle = $("#txtTitleRole"); var btnAdd = $("#btnAddRole"); var btnUpdate = $("#btnUpdateRole"); txtTitle.focus(); $("#chkIsActiveRole").prop("checked", "checked"); txtTitle.val(""); txtTitle.focus(); btnAdd.css({ "display": "inline-block" }); btnAdd.html("Add Role"); btnUpdate.css({ "display": "none" }); btnUpdate.html("Update Role"); $("#btnResetRole").css({ "display": "none" }); $("#hdnId").val("0"); } function TakeMeTop() { $("html, body").animate({ scrollTop: 0 }, 500); } function RefreshGrid() { $('#jQGridDemo').trigger('reloadGrid'); } function InsertUpdateRole() { var Id = m_RoleId; var Title = $("#txtTitleRole").val(); if ($.trim(Title) == "") { $("#txtTitleRole").focus(); return; } var IsActive = false; if ($('#chkIsActiveRole').is(":checked")) { IsActive = true; } $.ajax({ type: "POST", data: '{"RoleId":"' + Id + '", "Title": "' + Title + '","IsActive": "' + IsActive + '"}', url: "manageroles.aspx/Insert", contentType: "application/json", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); if (obj.Status == -1) { alert("Insertion Failed.Role with duplicate name already exists."); return; } if (Id == "0") { ResetControlsRole(); jQuery("#jQGridDemoRole").jqGrid('addRowData', obj.Role.RoleId, obj.Role, "last"); alert("Role is added successfully."); } else { ResetControlsRole(); var myGrid = $("#jQGridDemoRole"); var selRowId = myGrid.jqGrid('getGridParam', 'selrow'); myGrid.jqGrid('setRowData', selRowId, obj.Role); alert("Role is Updated successfully."); } }, error: function (xhr, ajaxOptions, thrownError) { var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); } $(document).ready( function () { BindGridRole(); BindGridPage(); ValidateRolesPage(); function ValidateRolesPage() { var arrRole = []; arrRole = $("#<%=hdnRoles.ClientID%>").val().split(','); for (var i = 0; i < arrRole.length; i++) { if (arrRole[i] == "1") { $("#btnAddPage").show(); $("#btnAddPage").click( function () { InsertUpdatePage(); } ); } else if (arrRole[i] == "3") { $("#btnUpdatePage").click( function () { var SelectedRow = jQuery('#jQGridDemoPage').jqGrid('getGridParam', 'selrow'); if ($.trim(SelectedRow) == "") { alert("No Page is selected to Edit"); return; } InsertUpdatePage(); } ); } } } $("#btnAddRole").click( function () { m_RoleId = 0; InsertUpdateRole(); } ); $("#btnResetPage").click( function () { ResetControlsPage(); } ); $("#btnUpdateRole").click( function () { var SelectedRow = jQuery('#jQGridDemoRole').jqGrid('getGridParam', 'selrow'); if ($.trim(SelectedRow) == "") { alert("No Role is selected to Edit"); return; } InsertUpdateRole(); } ); $('#txtTitleRole').focus(); $('#txtTitleRole').keypress(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { InsertUpdateRole(); } }); $("#btnResetRole").click( function () { ResetControlsRole(); } ); } ); </script> <script type="text/javascript"> function BindGridRole() { jQuery("#jQGridDemoRole").GridUnload(); jQuery("#jQGridDemoRole").jqGrid({ url: 'handlers/ManageRoles.ashx', ajaxGridOptions: { contentType: "application/json" }, datatype: "json", colNames: ['Role Id', 'Role', 'IsActive','Action'], colModel: [ { name: 'RoleId', key: true, index: 'RoleId', width: 100, stype: 'text', sorttype: 'int', hidden: true }, { name: 'Title', index: 'Title', width: 200, stype: 'text', sortable: true, editable: true, editrules: { required: true } }, { name: 'IsActive', index: 'IsActive', width: 150, editable: true, edittype: "checkbox", editoptions: { value: "true:false" }, formatter: "checkbox", formatoptions: { disabled: true } }, { name: 'act', index: 'act', width: 75, sortable: false }, ], rowNum: 10, mtype: 'GET', loadonce: true, rowList: [10, 20, 30], pager: '#jQGridDemoPagerRole', sortname: 'RoleId', viewrecords: true, height: "100%", width: "400px", sortorder: 'asc', caption: "", editurl: 'handlers/ManageRoles.ashx', gridComplete: function () { var ids = jQuery("#jQGridDemoRole").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; // be = "<div id='btndelcr' class='btn btn-small' ><i class='fa fa-trash m-right-xs' onclick=\"deleteAHead('" + cl + "');\"></i> </div>"; //be = "<input style='height:22px;width:20px;' type='button' value='Edit' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\" />"; se = "<div id='btneditcrRole' class='btn btn-small' ><i class='fa fa-pencil m-right-xs' onclick=\"jQuery('#jQGridDemoRole').onSelectRow('" + cl + "');\"></i> </div>"; //var ce = <div id='btnReprint' class='btn btn-small' ><i class='fa fa-edit m-right-xs'></i> Reprint</div> //se = "<input style='height:22px;width:20px;' type='button' value='Delete' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />"; jQuery("#jQGridDemoRole").jqGrid('setRowData', ids[i], { act: se }); } }, ignoreCase: true, toolbar: [true, "top"], }); var $grid = $("#jQGridDemoRole"); // fill top toolbar $('#t_' + $.jgrid.jqID($grid[0].id)) .append($("<div><label for=\"globalSearchText\">Global search for: </label><input id=\"globalSearchTextRole\" type=\"text\"></input> <button id=\"globalSearchRole\" type=\"button\">Search</button></div>")); $("#globalSearchTextRole").keypress(function (e) { var key = e.charCode || e.keyCode || 0; if (key === $.ui.keyCode.ENTER) { // 13 $("#globalSearchRole").click(); } }); $("#globalSearchRole").button({ icons: { primary: "ui-icon-search" }, text: false }).click(function () { var postData = $grid.jqGrid("getGridParam", "postData"), colModel = $grid.jqGrid("getGridParam", "colModel"), rules = [], searchText = $("#globalSearchTextRole").val(), l = colModel.length, i, cm; for (i = 0; i < l; i++) { cm = colModel[i]; if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) { rules.push({ field: cm.name, op: "cn", data: searchText }); } } postData.filters = JSON.stringify({ groupOp: "OR", rules: rules }); $grid.jqGrid("setGridParam", { search: true }); $grid.trigger("reloadGrid", [{ page: 1, current: true }]); return false; }); $("#globalSearchRole").button({ icons: { primary: "ui-icon-search" }, // This applies the jQuery UI search icon text: false // This hides the text and only shows the icon }); $("#jQGridDemoRole").jqGrid('setGridParam', { onSelectRow: function (rowid, iRow, iCol, e) { m_RoleId = 0; //validateForm("detach"); var txtTitle = $("#txtTitleRole"); m_RoleId = $('#jQGridDemoRole').jqGrid('getCell', rowid, 'RoleId'); if ($('#jQGridDemoRole').jqGrid('getCell', rowid, 'IsActive') == "true") { $('#chkIsActiveRole').prop('checked', true); } else { $('#chkIsActiveRole').prop('checked', false); } txtTitle.val($('#jQGridDemoRole').jqGrid('getCell', rowid, 'Title')); txtTitle.focus(); $("#btnAddRole").css({ "display": "none" }); $("#btnUpdateRole").css({ "display": "inline-block" }); $("#btnResetRole").css({ "display": "inline-block" }); TakeMeTop(); } }); var DataGrid = jQuery('#jQGridDemoRole'); DataGrid.jqGrid('setGridWidth', '500'); $('#jQGridDemoRole').jqGrid('navGrid', '#jQGridDemoPagerRole', { refresh: false, edit: false, add: false, del: false, search: false, searchtext: "Search", addtext: "Add", }, {//SEARCH closeOnEscape: true } ); } </script> </div> <div role="tabpanel" class="tab-pane" id="pages"> <input type="hidden" id="hdnId" value="0"/> <div class=""> <div class="col-md-6 col-sm-6 col-xs-12 fst-col"> <div class="x_panel edit_manage_user fst-panel"> <div class="title_left"> <h3>Membership Pages</h3> </div> <div class="x_content"> <div class="manageuser_leftform page-form"> <div class="form-group"> <label class="headings col-md-3 col-sm-3 col-xs-3" for="first-name">Title <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-9"> <input type="text" name="txtTitlePage" maxlength="50" class="form-control validate required alphanumeric" data-index="1" id="txtTitlePage" /> </div> </div> <div class="form-group"> <label class="headings col-md-3 col-sm-3 col-xs-3" for="last-name">Roles <span class="required">*</span> </label> <div class="col-md-9 col-sm-9 col-xs-9"> <asp:DropDownList ID="ddlRolesPage" runat="server" data-placeholder="" multiple class="chosen-select page-select"> </asp:DropDownList> </div> </div> <div class="form-group"> <label class="headings col-md-3 col-sm-3 col-xs-3" for="last-name">Is Active </label> <div class="col-md-9 col-sm-9 col-xs-9"> <label class="check-cnt"><input type="checkbox" data-index="2" id="chkIsActivePage" checked=checked name="chkIsActivePage" /> <span class="checkmark"></span> </label> </div> </div> <%-- <div class="ln_solid"></div>--%> <div class="form-group"> <table > <tr> <td> <div id="btnAddPage" class="btn btn-add btn-small" style="display:none;" ><i class="fa fa-external-link"></i> Add</div></td> <td><div id="btnUpdatePage" class="btn btn-add btn-small" style="display:none;" ><i class="fa fa-edit m-right-xs"></i> Update Page</div></td> <td><div id="btnResetPage" class="btn btn-del btn-small" style="display:none;" ><i class="fa fa-trash m-right-xs"></i> Cancel</div></td> </tr> </table> </div> </div> </div> </div> </div> <div class="col-md-6 col-sm-6 col-xs-12 scn-col"> <div class="x_panel edit_manage_user scn-panel"> <!-- <div class="x_title"> <h2>Manage Membership Pages</h2> <div class="clearfix"></div> </div> --> <div class="x_content"> <div class="youhave"> <table id="jQGridDemoPage"> </table> <div id="jQGridDemoPagerPage"> </div> </div> </div> </div> </div> </div> <!-- /page content --> <script type="text/javascript"> function BindGridPage() { jQuery("#jQGridDemoPage").GridUnload(); jQuery("#jQGridDemoPage").jqGrid({ url: 'handlers/ManageMembershipPages.ashx', ajaxGridOptions: { contentType: "application/json" }, datatype: "json", colNames: ['Id', 'Title', 'IsActive', 'Roles','Action'], colModel: [ { name: 'MembershipPageId', key: true, index: 'MembershipPageId', width: 100, stype: 'text', sorttype: 'int', hidden: true }, { name: 'Title', index: 'Title', width: 200, stype: 'text', sortable: true, editable: true, editrules: { required: true } }, { name: 'IsActive', index: 'IsActive', width: 150, editable: true, edittype: "checkbox", editoptions: { value: "true:false" }, formatter: "checkbox", formatoptions: { disabled: true } }, { name: 'Roles', index: 'Roles', width: 200, stype: 'text', sortable: true, editable: true, hidden: true, editrules: { required: true } }, { name: 'act', index: 'act', width: 75, sortable: false }, ], rowNum: 10, mtype: 'GET', loadonce: true, rowList: [10, 20, 30], pager: '#jQGridDemoPagerPage', sortname: 'Bank_ID', viewrecords: true, height: "100%", width: "400px", sortorder: 'asc', caption: "", editurl: 'handlers/ManageMembershipPages.ashx', gridComplete: function () { var ids = jQuery("#jQGridDemoPage").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var cl = ids[i]; // be = "<div id='btndelcr' class='btn btn-small' ><i class='fa fa-trash m-right-xs' onclick=\"deleteAHead('" + cl + "');\"></i> </div>"; //be = "<input style='height:22px;width:20px;' type='button' value='Edit' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\" />"; se = "<div id='btneditcrPage' class='btn btn-small' ><i class='fa fa-pencil m-right-xs' onclick=\"jQuery('#jQGridDemoPage').onSelectRow('" + cl + "');\"></i> </div>"; //var ce = <div id='btnReprint' class='btn btn-small' ><i class='fa fa-edit m-right-xs'></i> Reprint</div> //se = "<input style='height:22px;width:20px;' type='button' value='Delete' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />"; jQuery("#jQGridDemoPage").jqGrid('setRowData', ids[i], { act: se }); } }, ignoreCase: true, toolbar: [true, "top"], }); var $grid = $("#jQGridDemoPage"); // fill top toolbar $('#t_' + $.jgrid.jqID($grid[0].id)) .append($("<div><label for=\"globalSearchTextPage\">Global search for: </label><input id=\"globalSearchTextPage\" type=\"text\"></input> <button id=\"globalSearchPage\" type=\"button\">Search</button></div>")); $("#globalSearchTextPage").keypress(function (e) { var key = e.charCode || e.keyCode || 0; if (key === $.ui.keyCode.ENTER) { // 13 $("#globalSearchPage").click(); } }); $("#globalSearchPage").button({ icons: { primary: "ui-icon-search" }, text: false }).click(function () { var postData = $grid.jqGrid("getGridParam", "postData"), colModel = $grid.jqGrid("getGridParam", "colModel"), rules = [], searchText = $("#globalSearchTextPage").val(), l = colModel.length, i, cm; for (i = 0; i < l; i++) { cm = colModel[i]; if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) { rules.push({ field: cm.name, op: "cn", data: searchText }); } } postData.filters = JSON.stringify({ groupOp: "OR", rules: rules }); $grid.jqGrid("setGridParam", { search: true }); $grid.trigger("reloadGrid", [{ page: 1, current: true }]); return false; }); $("#jQGridDemoPage").jqGrid('setGridParam', { onSelectRow: function (rowid, iRow, iCol, e) { // validateForm("detach"); var txtTitle = $("#txtTitlePage"); var arrRole = []; arrRole = $("#<%=hdnRoles.ClientID%>").val().split(','); $("#btnUpdatePage").css({ "display": "none" }); $("#btnResetPage").css({ "display": "none" }); $("#btnAddPage").css({ "display": "none" }); for (var i = 0; i < arrRole.length; i++) { if (arrRole[i] == 1) { $("#btnAddPage").css({ "display": "block" }); } if (arrRole[i] == 3) { $("#hdnId").val($('#jQGridDemoPage').jqGrid('getCell', rowid, 'MembershipPageId')); var strRoles = $('#jQGridDemoPage').jqGrid('getCell', rowid, 'Roles'); var parts = strRoles.split(','); $("#<%=ddlRolesPage.ClientID %> > option").attr("selected", false); for (var i = 0; i < parts.length; i++) { $('#<%=ddlRolesPage.ClientID %> option[value=' + parts[i] + ']').prop('selected', 'selected'); } $("#<%=ddlRolesPage.ClientID %>").trigger("chosen:updated"); if ($('#jQGridDemoPage').jqGrid('getCell', rowid, 'IsActive') == "true") { $('#chkIsActivePage').prop('checked', true); } else { $('#chkIsActivePage').prop('checked', false); } txtTitle.val($('#jQGridDemoPage').jqGrid('getCell', rowid, 'Title')); txtTitle.focus(); $("#btnAddPage").css({ "display": "none" }); $("#btnUpdatePage").css({ "display": "block" }); $("#btnResetPage").css({ "display": "block" }); } } TakeMeTop(); } }); var DataGrid = jQuery('#jQGridDemoPage'); DataGrid.jqGrid('setGridWidth', '500'); $('#jQGridDemoPage').jqGrid('navGrid', '#jQGridDemoPagerPage', { refresh: false, edit: false, add: false, del: false, search: false, searchtext: "Search", addtext: "Add", }, {//SEARCH closeOnEscape: true } ); } </script> <script language="javascript"> doChosen(); function doChosen() { var config = { '.chosen-select': {}, '.chosen-select-deselect': { allow_single_deselect: true }, '.chosen-select-no-single': { disable_search_threshold: 10 }, '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, '.chosen-select-width': { width: "95%" } } for (var selector in config) { $(selector).chosen(config[selector]); } } function ApplyRoles(Roles) { $("#<%=hdnRoles.ClientID%>").val(Roles); } function ResetControlsPage() { var txtTitle = $("#txtTitlePage"); var btnAdd = $("#btnAddPage"); var btnUpdate = $("#btnUpdatePage"); $("#<%=ddlRolesPage.ClientID %> > option").attr("selected", false); $("#<%=ddlRolesPage.ClientID %>").trigger("chosen:updated"); txtTitle.focus(); txtTitle.val(""); txtTitle.focus(); var arrRole = []; arrRole = $("#<%=hdnRoles.ClientID%>").val().split(','); btnAdd.css({ "display": "none" }); for (var i = 0; i < arrRole.length; i++) { if (arrRole[i] == "1") { $("#btnAddPage").css({ "display": "block" }); } } $("#btnUpdatePage").css({ "display": "none" }); $("#btnResetPage").css({ "display": "none" }); $("#chkIsActivePage").prop("checked", "checked"); $("#hdnId").val("0"); } function TakeMeTop() { $("html, body").animate({ scrollTop: 0 }, 500); } function RefreshGrid() { $('#jQGridDemoPage').trigger('reloadGrid'); } function InsertUpdatePage() { var btnAdd = $("#btnAddPage"); var btnUpdate = $("#btnUpdatePage"); var Id = $("#hdnId").val(); var Title = $("#txtTitlePage").val(); if ($.trim(Title) == "") { $("#txtTitlePage").focus(); //alert("Please enter Title"); return; } // $.uiLock(''); if (Id == "0") { btnAdd.unbind('click'); } else { btnUpdate.unbind('click'); } var IsActive = false; if ($('#chkIsActivePage').is(":checked")) { IsActive = true; } var arrRoles = $('#<%=ddlRolesPage.ClientID %>').val(); $.ajax({ type: "POST", data: '{"id":"' + Id + '", "title": "' + Title + '","isActive": "' + IsActive + '","arrRoles":"' + arrRoles + '"}', url: "managepages.aspx/Insert", contentType: "application/json", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); if (obj.Status == 0) { ResetControlsPage(); if (Id == "0") { btnAdd.bind('click', function () { InsertUpdatePage(); }); } else { btnUpdate.bind('click', function () { InsertUpdatePage(); }); } alert("Insertion Failed.MembershipPage with duplicate name already exists."); return; } if (obj.Status == -11) { alert("You don't have permission to perform this action..Consult Admin Department."); return; } if (Id == "0") { btnAdd.bind('click', function () { InsertUpdatePage(); }); jQuery("#jQGridDemoPage").jqGrid('addRowData', obj.MembershipPage.MembershipPageId, obj.MembershipPage, "last"); ResetControlsPage(); alert("MembershipPage added successfully."); } else { btnUpdate.bind('click', function () { InsertUpdatePage(); }); var myGrid = $("#jQGridDemoPage"); var selRowId = myGrid.jqGrid('getGridParam', 'selrow'); myGrid.jqGrid('setRowData', selRowId, obj.MembershipPage); alert("MembershipPage Updated successfully."); ResetControlsPage(); } }, error: function (xhr, ajaxOptions, thrownError) { var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); } $(document).ready( function () { $('#txtTitlePage').focus(); $('#txtTitlePage').keypress(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { InsertUpdatePage(); } }); } ); </script> <script type="text/javascript"> var config = { '.chosen-select': {}, '.chosen-select-deselect': { allow_single_deselect: true }, '.chosen-select-no-single': { disable_search_threshold: 10 }, '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, '.chosen-select-width': { width: "95%" } } for (var selector in config) { $(selector).chosen(config[selector]); } </script> </div> <div role="tabpanel" class="tab-pane" id="applyroles"> <div class=""> <div class="row manage-apply-roles-row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="x_panel edit_manage_user fst-panel"> <div class="title_left"> <h3>Apply Roles</h3> </div> <div class="x_content"> <div class="manageuser_leftform"> <div class="form-group"> <label class="headings col-md-3 col-sm-3 col-xs-4">Choose Designation</label> <div class="col-md-9 col-sm-9 col-xs-8"> <select id="ddlDesignation" style="height:25px;width:200px"></select> </div> </div> <div class="form-group"> <label class="headings">Roles:</label> <div class="controls"> <div id="dvDesRoles" style="max-height:500px;overflow-y:scroll;width:300px"> </div> </div> </div> <div class="form-group"> <table> <tr> <td><div id="btnAddApp" class="btn btn-add btn-small" style="height:30px" >Assign Roles</div> </td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> <!-- /page content --> </div> <script language="javascript"> function ShowHide(val) { $("#tr" + val).slideToggle(50); var img = $("#imgShowHide" + val); var url = $(img).attr("src"); if (url == "images/icoplus.gif") { $(img).attr("src", "images/icominus.gif"); } else { $(img).attr("src", "images/icoplus.gif"); } } function TakeMeTop() { $("html, body").animate({ scrollTop: 0 }, 500); } function RefreshGrid() { $('#jQGridDemo').trigger('reloadGrid'); } $(document).ready( function () { $("#btnAddApp").click( function () { var btnAdd = $("#btnAddApp"); btnAdd.html("<img src='images/loader.gif' alt='loading...'/>") var Pid = []; var Rid = []; var Did = $("#ddlDesignation").val(); $("input[name='Roles']:checked").each( function (x) { var pageId = $(this).attr("pid"); var roleId = $(this).val(); Pid[x] = pageId; Rid[x] = roleId; } ); $.ajax({ type: "POST", data: '{"Pid":"' + Pid + '", "Rid": "' + Rid + '","Did": "' + Did + '"}', url: "manageapplyroles.aspx/Insert", contentType: "application/json", dataType: "json", success: function (msg) { btnAdd.html('Assign Roles'); var obj = jQuery.parseJSON(msg.d); if (obj.Status == "1") { alert("Roles Assigned Successfully"); } else { alert("Operation Failed"); } }, error: function (xhr, ajaxOptions, thrownError) { btnAdd.html('Assign Roles'); var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); } ); $("#ddlDesignation").change( function () { $("#dvDesRoles").html(""); // $.uiLock(''); $.ajax({ type: "POST", data: '{"designationId":"' + $(this).val() + '"}', url: "manageapplyroles.aspx/GetRolesByDesignation", contentType: "application/json", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); $("#dvDesRoles").html(obj.Data); }, error: function (xhr, ajaxOptions, thrownError) { var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); } ); $.ajax({ type: "POST", data: '{}', url: "manageapplyroles.aspx/GetDesignations", contentType: "application/json", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); $("#ddlDesignation").html(obj.DesignationOptions); }, error: function (xhr, ajaxOptions, thrownError) { var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); $.ajax({ type: "POST", data: '{}', url: "manageapplyroles.aspx/GetLocations", contentType: "application/json", dataType: "json", success: function (msg) { var obj = jQuery.parseJSON(msg.d); $("#ddlDesignation").html(obj.DesignationOptions); }, error: function (xhr, ajaxOptions, thrownError) { var obj = jQuery.parseJSON(xhr.responseText); alert(obj.Message); }, complete: function () { $.uiUnlock(); } }); $("#btnAddApp").click( function () { InsertUpdate(); } ); } ); </script> </div> </div> </form> </asp:Content>
Standard input is empty
<%@ Page Title="" Language="C#" MasterPageFile="~/admin.master" AutoEventWireup="true" CodeFile="manageusers.aspx.cs" Inherits="manageusers" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cntAdmin" Runat="Server">
<link href="js/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="css/customcss/manageusers.css" rel="stylesheet" />
<link href="js/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="ViewModel/UserViewModel.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.0.3.min.js"></script>
<script src="Scripts/knockout-3.0.0.js"></script>
<script src="Scripts/knockout.validation.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/grid.locale-en.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://c...content-available-to-author-only...y.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://c...content-available-to-author-only...y.com/ui/1.12.1/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(
function() {
BindGrid();
});
</script>
<form runat="server" id="formID" method="post">
<asp:HiddenField ID="hdnRoles" runat="server" />
<div class="right_col manage-users-right-col" role="main">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="createuser">
<div class="col-md-6 col-sm-6 col-xs-12 fst-col">
<div class="x_panel edit_manage_user fst-panel">
<div class="title_left create_user_title">
<h3>Create User</h3>
</div>
<div class="x_content">
<div class="user-create-frm-div">
<form id="demo-form2" data-parsley-validate class="form-horizontal form-label-left manageuser_leftform">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="first-name">Location <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-6">
<select data-bind="options: $root.Locations, optionsText: 'Location_Name',optionsValue:'Location_ID',value: LocId"></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="first-name">Designation <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-6">
<select data-bind="options: $root.Designations, optionsText: 'DesgName',optionsValue:'DesgID',value: Counter_NO"></select>
</div>
</div>
<div class="form-group">
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">User ID <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-6">
<input type="text" data-bind="value:User_ID" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">Password <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-6">
<input type="password" data-bind="value:UserPWD" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-6 headings" for="last-name">Discontinued <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-6">
<label class="check-cnt"> <input type="checkbox" data-bind="checked:Discontinued" /> <span class="checkmark"></span>
</label>
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12 col-xs-12">
<button type="button" data-bind="click:$root.InsertUpdate,text:ButtonText" class="btn btn-add"></button>
<button type="button" data-bind="click:$root.Cancel,visible:IsVisible" class="btn btn-del">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 scn-col">
<div class="">
<div class="x_panel edit_manage_user scn-panel">
<!-- <div class="x_title">
<h2>Manage Users </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Settings 1</a>
</li>
<li><a href="#">Settings 2</a>
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>-->
<div class="x_content">
<div>
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="changepass">
<div class="">
<div class="x_panel edit_manage_user fst-panel">
<div class="title_left">
<h3>Change Password</h3>
</div>
<div class="x_content">
<table cellpadding="0" cellspacing="0" border="0" id="frmCityCpas" class="table-condensed manageuser_leftform">
<tr>
<td class="headings">Old Password:</td>
<td>
<input type="Password" name="txtOldPassword" class="form-control validate required alphanumeric" data-index="1" id="txtOldPassword" runat="server" />
</td>
</tr>
<tr>
<td class="headings">New Password:</td>
<td>
<input type="Password" name="txtNewPassword" class="form-control validate required alphanumeric" data-index="1" id="txtNewPassword" runat="server" />
</td>
</tr>
<tr>
<td class="headings">Confirm Password:</td>
<td>
<input type="Password" name="txtCnfrmPassword" class="form-control validate required alphanumeric" data-index="1" id="txtConfirmPassword" runat="server" />
</td>
</tr>
<tr>
<td colspan="100%">
<table cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td>
<asp:Button ID="btnAddCpas" Text="Change Password" class="btn btn-add btn-small change-pass-btn" runat="server" onclick="btnAdd_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="roles">
<div class="">
<div class="col-md-6 col-sm-6 col-xs-12 fst-col">
<div class="x_panel edit_manage_user fst-panel">
<div class="title_left">
<h3>Roles</h3>
</div>
<div class="x_content">
<table cellpadding="0" cellspacing="0" border="0" id="frmCityRole" class="table-condensed manageuser_leftform" >
<tr><td class="headings">Title:</td><td> <input type="text" name="txtTitleRole" maxlength="50" class="form-control validate required alphanumeric" data-index="1" id="txtTitleRole" /></td></tr>
<tr><td class="headings">IsActive:</td><td align="left" style="text-align:left"><label class="check-cnt"> <input type="checkbox" id="chkIsActiveRole" checked="checked" data-index="2" name="chkIsActiveRole" /><span class="checkmark"></span>
</label></td></tr>
<tr>
<td colspan="100%;" >
<table cellspacing="0" cellpadding="0" class="btn-tbl-roles">
<tr>
<td> <div id="btnAddRole" class="btn btn-add btn-small" >Add Role</div>
<div id="btnUpdateRole" class="btn btn-add btn-small" style="display:none;" >Update Role</div>
<div id="btnResetRole" class="btn btn-del btn-small" style="display:none;" >Cancel</div></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 scn-col">
<div class="x_panel edit_manage_user scn-panel">
<div class="x_content manage-roles-second-section">
<div class="youhave">
<table id="jQGridDemoRole">
</table>
<div id="jQGridDemoPagerRole">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<script language="javascript" type="text/javascript">
var m_RoleId = 0;
function ResetControlsRole() {
m_RoleId = 0;
var txtTitle = $("#txtTitleRole");
var btnAdd = $("#btnAddRole");
var btnUpdate = $("#btnUpdateRole");
txtTitle.focus();
$("#chkIsActiveRole").prop("checked", "checked");
txtTitle.val("");
txtTitle.focus();
btnAdd.css({ "display": "inline-block" });
btnAdd.html("Add Role");
btnUpdate.css({ "display": "none" });
btnUpdate.html("Update Role");
$("#btnResetRole").css({ "display": "none" });
$("#hdnId").val("0");
}
function TakeMeTop() {
$("html, body").animate({ scrollTop: 0 }, 500);
}
function RefreshGrid() {
$('#jQGridDemo').trigger('reloadGrid');
}
function InsertUpdateRole() {
var Id = m_RoleId;
var Title = $("#txtTitleRole").val();
if ($.trim(Title) == "") {
$("#txtTitleRole").focus();
return;
}
var IsActive = false;
if ($('#chkIsActiveRole').is(":checked")) {
IsActive = true;
}
$.ajax({
type: "POST",
data: '{"RoleId":"' + Id + '", "Title": "' + Title + '","IsActive": "' + IsActive + '"}',
url: "manageroles.aspx/Insert",
contentType: "application/json",
dataType: "json",
success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
if (obj.Status == -1) {
alert("Insertion Failed.Role with duplicate name already exists.");
return;
}
if (Id == "0") {
ResetControlsRole();
jQuery("#jQGridDemoRole").jqGrid('addRowData', obj.Role.RoleId, obj.Role, "last");
alert("Role is added successfully.");
}
else {
ResetControlsRole();
var myGrid = $("#jQGridDemoRole");
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
myGrid.jqGrid('setRowData', selRowId, obj.Role);
alert("Role is Updated successfully.");
}
},
error: function (xhr, ajaxOptions, thrownError) {
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
}
$(document).ready(
function () {
BindGridRole();
BindGridPage();
ValidateRolesPage();
function ValidateRolesPage() {
var arrRole = [];
arrRole = $("#<%=hdnRoles.ClientID%>").val().split(',');
for (var i = 0; i < arrRole.length; i++) {
if (arrRole[i] == "1") {
$("#btnAddPage").show();
$("#btnAddPage").click(
function () {
InsertUpdatePage();
}
);
}
else if (arrRole[i] == "3") {
$("#btnUpdatePage").click(
function () {
var SelectedRow = jQuery('#jQGridDemoPage').jqGrid('getGridParam', 'selrow');
if ($.trim(SelectedRow) == "") {
alert("No Page is selected to Edit");
return;
}
InsertUpdatePage();
}
);
}
}
}
$("#btnAddRole").click(
function () {
m_RoleId = 0;
InsertUpdateRole();
}
);
$("#btnResetPage").click(
function () {
ResetControlsPage();
}
);
$("#btnUpdateRole").click(
function () {
var SelectedRow = jQuery('#jQGridDemoRole').jqGrid('getGridParam', 'selrow');
if ($.trim(SelectedRow) == "") {
alert("No Role is selected to Edit");
return;
}
InsertUpdateRole();
}
);
$('#txtTitleRole').focus();
$('#txtTitleRole').keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
InsertUpdateRole();
}
});
$("#btnResetRole").click(
function () {
ResetControlsRole();
}
);
}
);
</script>
<script type="text/javascript">
function BindGridRole() {
jQuery("#jQGridDemoRole").GridUnload();
jQuery("#jQGridDemoRole").jqGrid({
url: 'handlers/ManageRoles.ashx',
ajaxGridOptions: { contentType: "application/json" },
datatype: "json",
colNames: ['Role Id', 'Role', 'IsActive','Action'],
colModel: [
{ name: 'RoleId', key: true, index: 'RoleId', width: 100, stype: 'text', sorttype: 'int', hidden: true },
{ name: 'Title', index: 'Title', width: 200, stype: 'text', sortable: true, editable: true, editrules: { required: true } },
{ name: 'IsActive', index: 'IsActive', width: 150, editable: true, edittype: "checkbox", editoptions: { value: "true:false" }, formatter: "checkbox", formatoptions: { disabled: true } },
{ name: 'act', index: 'act', width: 75, sortable: false },
],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPagerRole',
sortname: 'RoleId',
viewrecords: true,
height: "100%",
width: "400px",
sortorder: 'asc',
caption: "",
editurl: 'handlers/ManageRoles.ashx',
gridComplete: function () {
var ids = jQuery("#jQGridDemoRole").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
// be = "<div id='btndelcr' class='btn btn-small' ><i class='fa fa-trash m-right-xs' onclick=\"deleteAHead('" + cl + "');\"></i> </div>";
//be = "<input style='height:22px;width:20px;' type='button' value='Edit' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\" />";
se = "<div id='btneditcrRole' class='btn btn-small' ><i class='fa fa-pencil m-right-xs' onclick=\"jQuery('#jQGridDemoRole').onSelectRow('" + cl + "');\"></i> </div>";
//var ce = <div id='btnReprint' class='btn btn-small' ><i class='fa fa-edit m-right-xs'></i> Reprint</div>
//se = "<input style='height:22px;width:20px;' type='button' value='Delete' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />";
jQuery("#jQGridDemoRole").jqGrid('setRowData', ids[i], { act: se });
}
},
ignoreCase: true,
toolbar: [true, "top"],
});
var $grid = $("#jQGridDemoRole");
// fill top toolbar
$('#t_' + $.jgrid.jqID($grid[0].id))
.append($("<div><label for=\"globalSearchText\">Global search for: </label><input id=\"globalSearchTextRole\" type=\"text\"></input> <button id=\"globalSearchRole\" type=\"button\">Search</button></div>"));
$("#globalSearchTextRole").keypress(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key === $.ui.keyCode.ENTER) { // 13
$("#globalSearchRole").click();
}
});
$("#globalSearchRole").button({
icons: { primary: "ui-icon-search" },
text: false
}).click(function () {
var postData = $grid.jqGrid("getGridParam", "postData"),
colModel = $grid.jqGrid("getGridParam", "colModel"),
rules = [],
searchText = $("#globalSearchTextRole").val(),
l = colModel.length,
i,
cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
postData.filters = JSON.stringify({
groupOp: "OR",
rules: rules
});
$grid.jqGrid("setGridParam", { search: true });
$grid.trigger("reloadGrid", [{ page: 1, current: true }]);
return false;
});
$("#globalSearchRole").button({
icons: { primary: "ui-icon-search" }, // This applies the jQuery UI search icon
text: false // This hides the text and only shows the icon
});
$("#jQGridDemoRole").jqGrid('setGridParam',
{
onSelectRow: function (rowid, iRow, iCol, e) {
m_RoleId = 0;
//validateForm("detach");
var txtTitle = $("#txtTitleRole");
m_RoleId = $('#jQGridDemoRole').jqGrid('getCell', rowid, 'RoleId');
if ($('#jQGridDemoRole').jqGrid('getCell', rowid, 'IsActive') == "true") {
$('#chkIsActiveRole').prop('checked', true);
}
else {
$('#chkIsActiveRole').prop('checked', false);
}
txtTitle.val($('#jQGridDemoRole').jqGrid('getCell', rowid, 'Title'));
txtTitle.focus();
$("#btnAddRole").css({ "display": "none" });
$("#btnUpdateRole").css({ "display": "inline-block" });
$("#btnResetRole").css({ "display": "inline-block" });
TakeMeTop();
}
});
var DataGrid = jQuery('#jQGridDemoRole');
DataGrid.jqGrid('setGridWidth', '500');
$('#jQGridDemoRole').jqGrid('navGrid', '#jQGridDemoPagerRole',
{
refresh: false,
edit: false,
add: false,
del: false,
search: false,
searchtext: "Search",
addtext: "Add",
},
{//SEARCH
closeOnEscape: true
}
);
}
</script>
</div>
<div role="tabpanel" class="tab-pane" id="pages">
<input type="hidden" id="hdnId" value="0"/>
<div class="">
<div class="col-md-6 col-sm-6 col-xs-12 fst-col">
<div class="x_panel edit_manage_user fst-panel">
<div class="title_left">
<h3>Membership Pages</h3>
</div>
<div class="x_content">
<div class="manageuser_leftform page-form">
<div class="form-group">
<label class="headings col-md-3 col-sm-3 col-xs-3" for="first-name">Title <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<input type="text" name="txtTitlePage" maxlength="50" class="form-control validate required alphanumeric" data-index="1" id="txtTitlePage" />
</div>
</div>
<div class="form-group">
<label class="headings col-md-3 col-sm-3 col-xs-3" for="last-name">Roles <span class="required">*</span>
</label>
<div class="col-md-9 col-sm-9 col-xs-9">
<asp:DropDownList ID="ddlRolesPage" runat="server" data-placeholder="" multiple class="chosen-select page-select">
</asp:DropDownList>
</div>
</div>
<div class="form-group">
<label class="headings col-md-3 col-sm-3 col-xs-3" for="last-name">Is Active </label>
<div class="col-md-9 col-sm-9 col-xs-9">
<label class="check-cnt"><input type="checkbox" data-index="2" id="chkIsActivePage" checked=checked name="chkIsActivePage" /> <span class="checkmark"></span>
</label>
</div>
</div>
<%-- <div class="ln_solid"></div>--%>
<div class="form-group">
<table >
<tr>
<td> <div id="btnAddPage" class="btn btn-add btn-small" style="display:none;" ><i class="fa fa-external-link"></i> Add</div></td>
<td><div id="btnUpdatePage" class="btn btn-add btn-small" style="display:none;" ><i class="fa fa-edit m-right-xs"></i> Update Page</div></td>
<td><div id="btnResetPage" class="btn btn-del btn-small" style="display:none;" ><i class="fa fa-trash m-right-xs"></i> Cancel</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 scn-col">
<div class="x_panel edit_manage_user scn-panel">
<!-- <div class="x_title">
<h2>Manage Membership Pages</h2>
<div class="clearfix"></div>
</div> -->
<div class="x_content">
<div class="youhave">
<table id="jQGridDemoPage">
</table>
<div id="jQGridDemoPagerPage">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<script type="text/javascript">
function BindGridPage() {
jQuery("#jQGridDemoPage").GridUnload();
jQuery("#jQGridDemoPage").jqGrid({
url: 'handlers/ManageMembershipPages.ashx',
ajaxGridOptions: { contentType: "application/json" },
datatype: "json",
colNames: ['Id', 'Title', 'IsActive', 'Roles','Action'],
colModel: [
{ name: 'MembershipPageId', key: true, index: 'MembershipPageId', width: 100, stype: 'text', sorttype: 'int', hidden: true },
{ name: 'Title', index: 'Title', width: 200, stype: 'text', sortable: true, editable: true, editrules: { required: true } },
{ name: 'IsActive', index: 'IsActive', width: 150, editable: true, edittype: "checkbox", editoptions: { value: "true:false" }, formatter: "checkbox", formatoptions: { disabled: true } },
{ name: 'Roles', index: 'Roles', width: 200, stype: 'text', sortable: true, editable: true, hidden: true, editrules: { required: true } },
{ name: 'act', index: 'act', width: 75, sortable: false },
],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#jQGridDemoPagerPage',
sortname: 'Bank_ID',
viewrecords: true,
height: "100%",
width: "400px",
sortorder: 'asc',
caption: "",
editurl: 'handlers/ManageMembershipPages.ashx',
gridComplete: function () {
var ids = jQuery("#jQGridDemoPage").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
// be = "<div id='btndelcr' class='btn btn-small' ><i class='fa fa-trash m-right-xs' onclick=\"deleteAHead('" + cl + "');\"></i> </div>";
//be = "<input style='height:22px;width:20px;' type='button' value='Edit' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\" />";
se = "<div id='btneditcrPage' class='btn btn-small' ><i class='fa fa-pencil m-right-xs' onclick=\"jQuery('#jQGridDemoPage').onSelectRow('" + cl + "');\"></i> </div>";
//var ce = <div id='btnReprint' class='btn btn-small' ><i class='fa fa-edit m-right-xs'></i> Reprint</div>
//se = "<input style='height:22px;width:20px;' type='button' value='Delete' onclick=\"jQuery('#rowed2').restoreRow('" + cl + "');\" />";
jQuery("#jQGridDemoPage").jqGrid('setRowData', ids[i], { act: se });
}
},
ignoreCase: true,
toolbar: [true, "top"],
});
var $grid = $("#jQGridDemoPage");
// fill top toolbar
$('#t_' + $.jgrid.jqID($grid[0].id))
.append($("<div><label for=\"globalSearchTextPage\">Global search for: </label><input id=\"globalSearchTextPage\" type=\"text\"></input> <button id=\"globalSearchPage\" type=\"button\">Search</button></div>"));
$("#globalSearchTextPage").keypress(function (e) {
var key = e.charCode || e.keyCode || 0;
if (key === $.ui.keyCode.ENTER) { // 13
$("#globalSearchPage").click();
}
});
$("#globalSearchPage").button({
icons: { primary: "ui-icon-search" },
text: false
}).click(function () {
var postData = $grid.jqGrid("getGridParam", "postData"),
colModel = $grid.jqGrid("getGridParam", "colModel"),
rules = [],
searchText = $("#globalSearchTextPage").val(),
l = colModel.length,
i,
cm;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
postData.filters = JSON.stringify({
groupOp: "OR",
rules: rules
});
$grid.jqGrid("setGridParam", { search: true });
$grid.trigger("reloadGrid", [{ page: 1, current: true }]);
return false;
});
$("#jQGridDemoPage").jqGrid('setGridParam',
{
onSelectRow: function (rowid, iRow, iCol, e) {
// validateForm("detach");
var txtTitle = $("#txtTitlePage");
var arrRole = [];
arrRole = $("#<%=hdnRoles.ClientID%>").val().split(',');
$("#btnUpdatePage").css({ "display": "none" });
$("#btnResetPage").css({ "display": "none" });
$("#btnAddPage").css({ "display": "none" });
for (var i = 0; i < arrRole.length; i++) {
if (arrRole[i] == 1) {
$("#btnAddPage").css({ "display": "block" });
}
if (arrRole[i] == 3) {
$("#hdnId").val($('#jQGridDemoPage').jqGrid('getCell', rowid, 'MembershipPageId'));
var strRoles = $('#jQGridDemoPage').jqGrid('getCell', rowid, 'Roles');
var parts = strRoles.split(',');
$("#<%=ddlRolesPage.ClientID %> > option").attr("selected", false);
for (var i = 0; i < parts.length; i++) {
$('#<%=ddlRolesPage.ClientID %> option[value=' + parts[i] + ']').prop('selected', 'selected');
}
$("#<%=ddlRolesPage.ClientID %>").trigger("chosen:updated");
if ($('#jQGridDemoPage').jqGrid('getCell', rowid, 'IsActive') == "true") {
$('#chkIsActivePage').prop('checked', true);
}
else {
$('#chkIsActivePage').prop('checked', false);
}
txtTitle.val($('#jQGridDemoPage').jqGrid('getCell', rowid, 'Title'));
txtTitle.focus();
$("#btnAddPage").css({ "display": "none" });
$("#btnUpdatePage").css({ "display": "block" });
$("#btnResetPage").css({ "display": "block" });
}
}
TakeMeTop();
}
});
var DataGrid = jQuery('#jQGridDemoPage');
DataGrid.jqGrid('setGridWidth', '500');
$('#jQGridDemoPage').jqGrid('navGrid', '#jQGridDemoPagerPage',
{
refresh: false,
edit: false,
add: false,
del: false,
search: false,
searchtext: "Search",
addtext: "Add",
},
{//SEARCH
closeOnEscape: true
}
);
}
</script>
<script language="javascript">
doChosen();
function doChosen() {
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
function ApplyRoles(Roles) {
$("#<%=hdnRoles.ClientID%>").val(Roles);
}
function ResetControlsPage() {
var txtTitle = $("#txtTitlePage");
var btnAdd = $("#btnAddPage");
var btnUpdate = $("#btnUpdatePage");
$("#<%=ddlRolesPage.ClientID %> > option").attr("selected", false);
$("#<%=ddlRolesPage.ClientID %>").trigger("chosen:updated");
txtTitle.focus();
txtTitle.val("");
txtTitle.focus();
var arrRole = [];
arrRole = $("#<%=hdnRoles.ClientID%>").val().split(',');
btnAdd.css({ "display": "none" });
for (var i = 0; i < arrRole.length; i++) {
if (arrRole[i] == "1") {
$("#btnAddPage").css({ "display": "block" });
}
}
$("#btnUpdatePage").css({ "display": "none" });
$("#btnResetPage").css({ "display": "none" });
$("#chkIsActivePage").prop("checked", "checked");
$("#hdnId").val("0");
}
function TakeMeTop() {
$("html, body").animate({ scrollTop: 0 }, 500);
}
function RefreshGrid() {
$('#jQGridDemoPage').trigger('reloadGrid');
}
function InsertUpdatePage() {
var btnAdd = $("#btnAddPage");
var btnUpdate = $("#btnUpdatePage");
var Id = $("#hdnId").val();
var Title = $("#txtTitlePage").val();
if ($.trim(Title) == "") {
$("#txtTitlePage").focus();
//alert("Please enter Title");
return;
}
// $.uiLock('');
if (Id == "0") {
btnAdd.unbind('click');
}
else {
btnUpdate.unbind('click');
}
var IsActive = false;
if ($('#chkIsActivePage').is(":checked")) {
IsActive = true;
}
var arrRoles = $('#<%=ddlRolesPage.ClientID %>').val();
$.ajax({
type: "POST",
data: '{"id":"' + Id + '", "title": "' + Title + '","isActive": "' + IsActive + '","arrRoles":"' + arrRoles + '"}',
url: "managepages.aspx/Insert",
contentType: "application/json",
dataType: "json",
success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
if (obj.Status == 0) {
ResetControlsPage();
if (Id == "0") {
btnAdd.bind('click', function () { InsertUpdatePage(); });
}
else {
btnUpdate.bind('click', function () { InsertUpdatePage(); });
}
alert("Insertion Failed.MembershipPage with duplicate name already exists.");
return;
}
if (obj.Status == -11) {
alert("You don't have permission to perform this action..Consult Admin Department.");
return;
}
if (Id == "0") {
btnAdd.bind('click', function () { InsertUpdatePage(); });
jQuery("#jQGridDemoPage").jqGrid('addRowData', obj.MembershipPage.MembershipPageId, obj.MembershipPage, "last");
ResetControlsPage();
alert("MembershipPage added successfully.");
}
else {
btnUpdate.bind('click', function () { InsertUpdatePage(); });
var myGrid = $("#jQGridDemoPage");
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
myGrid.jqGrid('setRowData', selRowId, obj.MembershipPage);
alert("MembershipPage Updated successfully.");
ResetControlsPage();
}
},
error: function (xhr, ajaxOptions, thrownError) {
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
}
$(document).ready(
function () {
$('#txtTitlePage').focus();
$('#txtTitlePage').keypress(function (event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
InsertUpdatePage();
}
});
}
);
</script>
<script type="text/javascript">
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</div>
<div role="tabpanel" class="tab-pane" id="applyroles">
<div class="">
<div class="row manage-apply-roles-row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel edit_manage_user fst-panel">
<div class="title_left">
<h3>Apply Roles</h3>
</div>
<div class="x_content">
<div class="manageuser_leftform">
<div class="form-group">
<label class="headings col-md-3 col-sm-3 col-xs-4">Choose Designation</label>
<div class="col-md-9 col-sm-9 col-xs-8">
<select id="ddlDesignation" style="height:25px;width:200px"></select>
</div>
</div>
<div class="form-group">
<label class="headings">Roles:</label>
<div class="controls">
<div id="dvDesRoles" style="max-height:500px;overflow-y:scroll;width:300px">
</div>
</div>
</div>
<div class="form-group">
<table>
<tr>
<td><div id="btnAddApp" class="btn btn-add btn-small" style="height:30px" >Assign Roles</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
</div>
<script language="javascript">
function ShowHide(val) {
$("#tr" + val).slideToggle(50);
var img = $("#imgShowHide" + val);
var url = $(img).attr("src");
if (url == "images/icoplus.gif") {
$(img).attr("src", "images/icominus.gif");
}
else {
$(img).attr("src", "images/icoplus.gif");
}
}
function TakeMeTop() {
$("html, body").animate({ scrollTop: 0 }, 500);
}
function RefreshGrid() {
$('#jQGridDemo').trigger('reloadGrid');
}
$(document).ready(
function () {
$("#btnAddApp").click(
function () {
var btnAdd = $("#btnAddApp");
btnAdd.html("<img src='images/loader.gif' alt='loading...'/>")
var Pid = [];
var Rid = [];
var Did = $("#ddlDesignation").val();
$("input[name='Roles']:checked").each(
function (x) {
var pageId = $(this).attr("pid");
var roleId = $(this).val();
Pid[x] = pageId;
Rid[x] = roleId;
}
);
$.ajax({
type: "POST",
data: '{"Pid":"' + Pid + '", "Rid": "' + Rid + '","Did": "' + Did + '"}',
url: "manageapplyroles.aspx/Insert",
contentType: "application/json",
dataType: "json",
success: function (msg) {
btnAdd.html('Assign Roles');
var obj = jQuery.parseJSON(msg.d);
if (obj.Status == "1") {
alert("Roles Assigned Successfully");
}
else {
alert("Operation Failed");
}
},
error: function (xhr, ajaxOptions, thrownError) {
btnAdd.html('Assign Roles');
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
}
);
$("#ddlDesignation").change(
function () {
$("#dvDesRoles").html("");
// $.uiLock('');
$.ajax({
type: "POST",
data: '{"designationId":"' + $(this).val() + '"}',
url: "manageapplyroles.aspx/GetRolesByDesignation",
contentType: "application/json",
dataType: "json",
success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
$("#dvDesRoles").html(obj.Data);
},
error: function (xhr, ajaxOptions, thrownError) {
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
}
);
$.ajax({
type: "POST",
data: '{}',
url: "manageapplyroles.aspx/GetDesignations",
contentType: "application/json",
dataType: "json",
success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
$("#ddlDesignation").html(obj.DesignationOptions);
},
error: function (xhr, ajaxOptions, thrownError) {
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
$.ajax({
type: "POST",
data: '{}',
url: "manageapplyroles.aspx/GetLocations",
contentType: "application/json",
dataType: "json",
success: function (msg) {
var obj = jQuery.parseJSON(msg.d);
$("#ddlDesignation").html(obj.DesignationOptions);
},
error: function (xhr, ajaxOptions, thrownError) {
var obj = jQuery.parseJSON(xhr.responseText);
alert(obj.Message);
},
complete: function () {
$.uiUnlock();
}
});
$("#btnAddApp").click(
function () {
InsertUpdate();
}
);
}
);
</script>
</div>
</div>
</form>
</asp:Content>