0% found this document useful (0 votes)
8 views

Code With Check Box in Every Line HTML

The document is a SharePoint user control that includes various ASP.NET directives and JavaScript functions for managing UI elements and interactions. It incorporates styles for layout and functionality, including custom dropdowns and modal dialogs. The script handles events such as checkbox changes and updates to hidden fields, enhancing user experience within a SharePoint environment.

Uploaded by

girraj gupta
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views

Code With Check Box in Every Line HTML

The document is a SharePoint user control that includes various ASP.NET directives and JavaScript functions for managing UI elements and interactions. It incorporates styles for layout and functionality, including custom dropdowns and modal dialogs. The script handles events such as checkbox changes and updates to hidden fields, enhancing user experience within a SharePoint environment.

Uploaded by

girraj gupta
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 13

<%@ Assembly Name="$SharePoint.Project.

AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI"
Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"
Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true"
CodeBehind="NTD_SC_RoadmapExpSMLwiseproductMappingUserControl.ascx.cs"
Inherits="NTD.VWP.NTD_SC_RoadmapExpSMLwiseproductMapping.NTD_SC_RoadmapExpSMLwisepr
oductMappingUserControl" %>

<link rel="stylesheet" href="../SiteAssets/Style/progressbar.css">


<script src="../SiteAssets/Scripts/LatestScript/html2canvas.min.js"></script>
<script src="../Scripts/LatestScript/jquery-3.7.1.js"></script>
<script src="../SiteAssets/Scripts/LatestScript/jquery-ui.js"></script>
<script src="../SiteAssets/Scripts/LatestScript/jquery-confirm.min.js"></script>
<link rel="stylesheet" href="../SiteAssets/Style/LatestCSS/jquery-ui.css">
<link rel="stylesheet" href="../SiteAssets/Style/LatestCSS/jquery-confirm.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.3.30/
jquery.sumoselect.min.js" type="text/javascript"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.3.30/
sumoselect.css" type="text/css" />

<style type="text/css">
.gridview-header {
background-color: #8dbefd !important;
font-size: 18px;
}

.ms-usereditor {
width: 100% !important;
}

.SumoSelect {
display: inline-block;
position: absolute !important;
outline: none;
}

.Flr {
float: right;
}

.previous {
background-color: #3c7bde !important;
color: white !important;
}

.next {
background-color: #3c7bde !important;
color: white !important;
}

.disp {
width: 17px;
height: 17px;
margin: 2px !important;
display: block !important;
}

.disnone {
display: none !important;
}

.prewhite {
white-space: pre-line;
}

label {
font-weight: bold;
}

.txtareamult {
width: 100%;
border: 1px solid #ced4da !important;
}

.custom-file-label {
margin-left: 15px;
}

.col-md-4, .col-md-5, .col-md-7 {


float: left !important
}

.form-group {
margin-bottom: 0px !important;
}

.txtalign {
text-align: right;
}

.third-table {
width: 60% !important
}

.fileInputcss {
width: 100% !important
}
.hiddencol {
display: none;
}

.table-striped tbody tr:nth-child(1) {


background-color: #e5f2ff;
}

.ImgClass {
width: 16px;
height: 16px;
margin: 2px !important;
}

ul.level1.static {
margin-bottom: 0px !important
}

.ColPublished {
color: green
}

.ColDraft {
color: orange
}

.ColPending {
color: gray
}

.level1.tab1.selected.static {
padding: 5px 10px 5px 10px;
border: none !important;
font-weight: bold;
color: white !important;
text-align: center !important;
BACKGROUND-COLOR: #4994d6;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border-radius: 4px 4px 0 0 !important
}

a.level1.tab1.selected.static {
height: 35px !important;
}

.tab-content {
float: left;
BACKGROUND-COLOR: WHITE;
PADDING: 13PX;
BORDER-RADIUS: 5PX;
MARGIN-TOP: 0PX;
}

.tab1 {
width: 17em;
padding: 5px 10px 5px 10px;
BACKGROUND-COLOR: #fff;
text-align: center;
display: inline;
margin-right: 2px !important;
line-height: 1.42857143 !important;
border: 0px solid #E0E0E0 !important;
border-radius: 4px 4px 0 0 !important;
border-bottom-style: none !important;
}

.td {
padding: 0.5%;
}

.ValidationMsg {
color: red;
}

.fileInputcss {
width: 100% !important
}

.custom-card {
background-color: transparent !important;
border: none !important;
margin-bottom: 22px;
}

.bgcolorchange {
background-color: #E9ECEF !important;
}

.custom-card .card-header {
width: 280px;
color: black;
border-top: 2px solid #2e7ce0;
font-size: 16px;
padding-bottom: 10px !important;
font-weight: bold;
text-align: left;
background-color: white !important;
border-bottom: 0px;
border-top-left-radius: 6px !important;
border-top-right-radius: 6px !important;
margin-bottom: 0px !important;
background-color: #fffffe !important;
border-bottom: 0px !important;
}

.custom-card .collapse {
background-color: white;
border-top: 0px;
border-radius: 0px 6px 6px;
margin-top: 0px !important;
}

.custom-card .card-body {
border-top: 0px;
margin-top: 0px;
padding: 0px 15px !important;
}

.custom-card .card-link {
color: #212120;
}

.tab-container {
padding: 20px;
background-color: #eef1e9;
margin-top: 0px;
}

.GridviewDiv {
font-size: 100%;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial,
Helevetica, sans-serif;
color: #303933;
}

.headerstyle {
color: #FFFFFF;
border-right-color: #abb079;
border-bottom-color: #abb079;
background-color: #8a8684;
padding: 0.5em 0.5em 0.5em 0.5em;
text-align: center;
}

.gridHeadStyleNew {
text-align: center;
padding: 5px;
background-color: #f3c500 !important;
color: white;
font-weight: bold;
font-size: 14pt;
margin-top: 0px !important;
}

.ImgClass2 {
width: 17px;
height: 17px;
margin: 2px !important;
}

.ms-usereditor table tbody tr td div {


overflow-wrap: normal !important;
overflow-x: hidden;
height: 50px !important;
border-radius: 4px !important;
max-width: 100% !important;
border-color: #ced4da !important;
font-size: 12px !important;
}

.menuMargin {
margin-top: 20px !important;
}
</style>
<script type="text/javascript">
var startdtfiscalYr = "";
var minDate = "";

function PopUpWindows(pageUrl, Title) {


var options =
{
url: pageUrl,
title: Title,
allowMaximize: false,
width: 1250,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog',
options);
}

function PopUpWindow() {
debugger;
var Pager_ID = $("[id$='hdnPagerID']").val();
var OpType = $("[id$='hdnOPtype']").val();

var pageUrl = "/sites/NTD/Pages/ReviewOnePagerCompressed.aspx?PagerID=" +


Pager_ID + "&redirectFrom=review&Type=" + OpType;
var Title = "Review Idea";

var options =
{
url: pageUrl,
title: Title,
allowMaximize: false,
width: 1250,
height: 700
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog',
options);
}
function PopUpWindowsWithReload3(pageUrl) {
var dialogOptions = SP.UI.$create_DialogOptions();
dialogOptions.url = pageUrl;
dialogOptions.width = 1400;
dialogOptions.height = 650;

dialogOptions.dialogReturnValueCallback = Function.createDelegate(null,
CloseCallback3);
SP.UI.ModalDialog.showModalDialog(dialogOptions);

}
function CloseCallback3(strReturnValue, target) {
if (strReturnValue == SP.UI.DialogResult.OK) {

}
if (strReturnValue == SP.UI.DialogResult.cancel) {

}
}
function changeControlID() {

$('#tblrptPDE tbody tr').each(function (index, tr) {

var ctlID = "";


if ($(tr).find("td").eq(0).text().includes("PDE FY"))
ctlID = "PDE";

$(this).children('td').filter(function () {
$(this).find("input:text").each(function () {
if ($(this).attr('id')) {
this.id = this.id + ctlID + $
(tr).find("td").eq(0).text().slice(-9);

if ($("[id*='chebxtmlleadEE']").is(':checked')
|| $("[id*='chebxtmlleadChassis']").is(':checked')
|| $("[id*='chebxtmlleadBT']").is(':checked')
|| $("[id*='chebxtmetcleadEE']").is(':checked')
|| $("[id*='chebxtmetcleadChassis']").is(':checked')
|| $("[id*='chebxtmetcleadBT']").is(':checked')
) {
if (this.id.includes("tbPDETKHPDE") ||
this.id.includes("tbPDEFSSPDE")
|| this.id.includes("tbPDEMatPDE") ||
this.id.includes("tbPDEConvPDE")) {
$(this).on("keypress keyup blur", function (event)
{
$(this).attr('style', 'background-color:#E9ECEF
!important');
event.preventDefault();

});
}
}
}
});
});

});

}
function alertWithReloadPage(titleText, msg, typeColor) {
$.confirm({
title: titleText,
content: msg,
type: typeColor,
draggable: true,
typeAnimated: true,
buttons: {
OK:
{
action: function () {
ModalDialogClose();
}
},
}
});
}
function ClosePopupReloadPg(titleText, msg, typeColor) {
$.confirm({
title: titleText,
content: msg,
type: typeColor,
draggable: true,
typeAnimated: true,
buttons: {
OK:
{
action: function () {
ModalDialogClose();
}
},
}
});
}
function ModalDialogClose() {
SP.SOD.execute('sp.ui.dialog.js',
'SP.UI.ModalDialog.commonModalDialogClose', CloseDlg);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
window.location.reload(true);
}
$(document).ready(function () {
sumoSelect();
initializeSumoSelect();
});

var prm = Sys.WebForms.PageRequestManager.getInstance();


if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {

ischecboxClick();
sumoSelect();
initializeSumoSelect();

}
});
}
function sumoSelect() {
$('#<%= ddlproduct.ClientID %>').SumoSelect({
selectAll: true, // Adds "Select All" option
placeholder: 'Select Options', // Placeholder text
csvDispCount: 3, // Number of items to display before the "+ count
selected" text
captionFormat: '{0} Selected', // Custom format for the caption
search: true, // Enables search functionality inside the dropdown
okCancelInMulti: true // Adds "OK" and "Cancel" buttons in the dropdown
});
}
function initializeSumoSelect() {
// Initialize SumoSelect
$('#<%= ddlproduct.ClientID %>').SumoSelect({
// Optional configuration options
selectAll: true
});

// Function to update hidden field with selected values


$('#<%= ddlproduct.ClientID %>').on('sumo:closing', function () {
var selectedValues = $(this).val(); // Get selected values
$('#<%= hdnSelectedValues.ClientID
%>').val(selectedValues.join(',')); // Store in hidden field

});
}

function ischecboxClick() {
$('.checkbox-item').on('change', function () {
var $this = $(this);
//var $checkbox = $(this);
var isChecked = $this.prop('checked'); // Use .prop() to check the
'checked' property
var techConceptText = $.trim($this.closest('.tooltip-
container').find('.draggable').data('tech-concept'));
var pagerIdValue = $.trim($this.closest('.tooltip-
container').find('.draggable').data('pager-id'));
var termType = $.trim($this.closest('.tooltip-
container').find('.draggable').data('term')); // Get the term type (short-term,
mid-term, long-term)

if (isChecked) {
// Add item to the container
var $draggable = $this.closest('.row').find('.draggable');
$draggable.draggable("disable").css('opacity', '0.5'); //
Disable draggable and indicate visually

var newItem = $
('<li>').text(techConceptText).addClass('dropped-item');
$('<input>').attr({
type: 'hidden',
value: pagerIdValue
}).appendTo(newItem); // Store pagerIdValue as a hidden input

var removeBtn = $('<span style="float:


right;">').text('×').addClass('remove-btn');
removeBtn.appendTo(newItem);
newItem.appendTo("#listContainer");

updateHiddenField();
toggleSubmitButton();
} else {
// Remove item from the container
var $draggable = $this.closest('.row').find('.draggable');
$draggable.draggable("enable").css('opacity', '1'); // Enable
draggable and reset opacity

$("#listContainer .dropped-item").each(function () {
var $listItem = $(this);
var storedPagerId =
$.trim($listItem.find('input[type="hidden"]').val());
if (storedPagerId === pagerIdValue) {
$listItem.remove(); // Remove item from the list
updateHiddenField();
toggleSubmitButton();
}
});
}

});

</script>

<div class="container-fluid ContentBoxStyle">


<input type="checkbox" class="checkbox-item" />
<asp:UpdatePanel ID="RoadMapStructureDetails" runat="server"
UpdateMode="Conditional">
<ContentTemplate>
<div class="row ContentHead">
<div class="col-md-4 col-sm-4 col-lg-4 "></div>
<div class="col-md-4 col-sm-4 col-lg-4 ">
<asp:Label ID="Label1" Font-Bold="true"
runat="server">Experience Roadmap SML wise Product</asp:Label>
</div>
</div>
<div>
<asp:HiddenField ID="hdnSelectedValues" runat="server" />
<div class="row" style="margin-top: 20px; margin-bottom: 12px;">

<div class="col-md-1p5 col-sm-1p5 col-lg-1p5">


<asp:Label ID="lblTechnoloy" Font-Bold="true"
runat="server" Text="Experiance" />
</div>
<div class="col-md-3 col-sm-3 col-lg-2">
<asp:DropDownList ID="ddlFilterExperience"
AutoPostBack="true" runat="server"
CssClass="required form-control form-control-sm"
OnSelectedIndexChanged="ddlFilterExperience_SelectedIndexChanged">
</asp:DropDownList>
</div>
<%-- <div class="col-sm-1">
<asp:Button ID="btnSearch" Class="btn btn-success btn-sm
ChkCheck req" runat="server" Text="Search" OnClick="btnSearch_Click" />
</div>--%>
<div class="col-md-6 float-left">
<div class="col-md-5 pull-right">
<asp:Label ID="Label21" Font-Bold="true" runat="server"
Text="Product" />

</div>
<div class="col-md-7 pull-right">
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:ListBox ID="ddlproduct" runat="server"
CssClass="required form-control form-control-sm SumoSelect"
SelectionMode="Multiple"></asp:ListBox>
</div>
</div>
</div>

<asp:GridView ID="GridView1" Style="width: 100%; border: 1px solid


lightgrey" runat="server" AutoGenerateColumns="False" CssClass="table-sm table
table-striped export-table">
<HeaderStyle CssClass="gridview-header"
HorizontalAlign="Center" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckAll" runat="server"
AutoPostBack="true" OnCheckedChanged="CheckAll_CheckedChanged" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="ItemCheckBox" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="AggregateName"
HeaderText="Experiance Name" />
<asp:BoundField DataField="LevelName"
HeaderText="Product" />
<asp:BoundField DataField="Level 1" HeaderText="S" />
<asp:BoundField DataField="Level 2" HeaderText="M" />
<asp:BoundField DataField="Level 3" HeaderText="L" />

</Columns>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>

<script>
function toExcel2() {
var cache = {};
this.tmpl = function tmpl(str, data) {
var fn = !/\W/.test(str) ? cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str.replace(/<br\s*\/?>/ig, "\r\n")
.split("{{").join("\t")
.replace(/((^|}})[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)}}/g, "',$1,'")
.split("\t").join("');")
.split("}}").join("p.push('")
.split("\r\n\<br>").join("\\<br><br><br>'") + "');}return
p.join('');");
return data ? fn(data) : fn;
};

var tableToExcel = (function () {


var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-
html40"><head><!--[if gte mso
9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{{=worksheet}
}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></
x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></
head><body>{{for(var i=0; i<tables.length;i++){ }}<table cellspacing="3"
rules="rows" border="1" style="color:Black;border-color:Black;border-
width:1px;border-style:solid;width:100%;border-collapse:collapse;font-
size:10pt;text-align:center;">{{=tables[i]}}</table>{{ } }}</body></html>',
base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};

return function (tableList, name) {


if (!tableList.length > 0 && !tableList[0].nodeType) table =
document.getElementById(table);
var tables = [];
for (var i = 0; i < tableList.length; i++) {
// Clone the table to remove styles from the original
var clonedTable = tableList[i].cloneNode(true);

// Replace textareas with labels


var textareas = clonedTable.querySelectorAll('textarea');
for (var j = 0; j < textareas.length; j++) {
var label = document.createElement('label');
label.textContent = textareas[j].value;
textareas[j].parentNode.replaceChild(label, textareas[j]);
}

// Replace dropdowns with labels


var selects = clonedTable.querySelectorAll('select');
for (var k = 0; k < selects.length; k++) {
var label = document.createElement('label');
// Set label content to "0" if the selected value is
"Select"
label.textContent = selects[k].value === 'Select' ? '0' :
selects[k].options[selects[k].selectedIndex].text;
selects[k].parentNode.replaceChild(label, selects[k]);
}

// Replace textboxes with labels


var textboxes =
clonedTable.querySelectorAll('input[type="text"]');
for (var l = 0; l < textboxes.length; l++) {
var label = document.createElement('label');
label.textContent = textboxes[l].value;
textboxes[l].parentNode.replaceChild(label, textboxes[l]);
}

tables.push(clonedTable.innerHTML);
}
var ctx = {
worksheet: name || 'Worksheet',
tables: tables
};

var link = document.createElement("a");


link.download = "Roadmap_Exp_SMLwise_product.xls";
link.href = uri + base64(tmpl(template, ctx));
link.click();

};
})();

tableToExcel(document.getElementsByTagName("table"),
"Roadmap_Exp_SMLwise_product");
}
</script>

You might also like