<%@ 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>