Common Re-usable UI Components
The below UI components which we need to use in our projects.
Please download and include app.js & jqgrid.js files in your assets folder.
Single select
To use the select2 control you need to download always latest version of minified css(select2.min.css) and minified js(select2.min.js) files.
Reference CDN link to download select2 latest version library files
Normal:
HTML Snippet code:
<select class="form-control" data-singleselect>
<option>Select</option>
<option>Web</option>
<option>Device</option>
<option>Both</option>
</select>
JS Snippet code:
$('[data-singleselect]').select2()
Demo:
Customized:
In this case for eg: Product
HTML Snippet code:
<select class="form-control" data-singleselect-custom>
<option></option>
</select>
JS Snippet code:
$('[data-singleselect-custom]').select2({
tags: "true",
placeholder: "Select Product",
templateResult: addFormatToProduct,
templateSelection: addFormatToProduct,
data: productData,
matcher: matchCustom,
allowClear: true
})
Sample Product data to show below:
productData = [
{
id: 0,
name: '[7002590] Active Fresh Gel 80g',
mrp: 50,
stock: 65,
stdPack: 50
}, {
id: 1,
name: '[7001768] Anti Dandruff Shampoo 400ml',
mrp: 140,
stock: 21,
stdPack: 24
}
]
Product format template string code:
function addFormatToProduct(item) {
if (item.loading) {
return item.name
}
if (!item.loading) { return; }
var $item = $(
'<span>'<b style="text-transform: uppercase;">' + item.name + '</b><br/>' +
'<small>MRP: ' + item.mrp + '</small><small>Available: ' + item.stock +
'</small><small>Std Pack: ' + item.stdPack +
'</small></span>'
);
item = null;
return $item;
};
Match custom function code:
function matchCustom(params, data) {
if ($.trim(params.term) === ") {
return data;
}
if (typeof data.name === 'undefined') {
return null;
}
if (data.name.indexOf(params.term) > -1) {
var modifiedData = $.extend({}, data, true);
modifiedData.text += '(matched)';
return modifiedData;
}
return null;
}
Demo:
Multiselect
To use the multiselect control you need to download always latest version of minified css(bootstrap-multiselect.min.css) and minified js(bootstrap-multiselect.min.js) files.
Reference CDN link to download select2 latest version library files
Normal:
HTML Snippet code:
<select class="form-control" multiple="multiple" data-multiselect>
<option>[700003] AFREEN ENTERPRISE</option>
<option>[700028] BALAK SALES AGENCY</option>
<option>[700033] BHAVANA DISTRIBUTORS</option>
</select>
JS Snippet code:
$('[data-multiselect]').multiselect({
includeSelectAllOption: true,
buttonWidth: 220,
enableCaseInsensitiveFiltering: true,
enableFiltering: true
});
Demo:
Tabular Dropdown:
HTML Snippet code:
<div class="c-multiselect-custom__tabular-dropdown">
<div class="custom__dropdown custom-format-tabular -sticky-search-input">
<select class="customdropdown__tabular" name="multiselect[]" multiple="multiple" data-multiselect-tabular>
<option value="1">
<div class="-w-100 customdropdown__tabular--row d-flex">
<div class="-w-20 customdropdown__tabular--col -white-space">18000001</div>
<div class="-w-50 customdropdown__tabular--col -white-space">Nourishing Skin Cream 50ml (AE)</div>
<div class="-w-20 customdropdown__tabular--col -white-space">ZFRT</div>
<div class="-w-10 customdropdown__tabular--col -white-space">EA</div>
</div>
</option>
<option value="2">
<div class="-w-100 customdropdown__tabular--row d-flex">
<div class="-w-20 customdropdown__tabular--col -white-space">18000002</div>
<div class="-w-50 customdropdown__tabular--col -white-space">Nourishing Skin Cream 50ml (AE)(ALG)</div>
<div class="-w-20 customdropdown__tabular--col -white-space">ZFRT</div>
<div class="-w-10 customdropdown__tabular--col -white-space">EA</div>
</div>
</option>
<option value="2">
<div class="-w-100 customdropdown__tabular--row d-flex">
<div class="-w-20 customdropdown__tabular--col -white-space">18000003</div>
<div class="-w-50 customdropdown__tabular--col -white-space">Nourishing Skin Cream 50ml (EN)</div>
<div class="-w-20 customdropdown__tabular--col -white-space">ZFRT</div>
<div class="-w-10 customdropdown__tabular--col -white-space">EA</div>
</div>
</option>
<option value="2">
<div class="-w-100 customdropdown__tabular--row d-flex">
<div class="-w-20 customdropdown__tabular--col -white-space">18000004</div>
<div class="-w-50 customdropdown__tabular--col -white-space">Nourishing Skin Cream 50ml (EN)(SING)</div>
<div class="-w-20 customdropdown__tabular--col -white-space">ZFRT</div>
<div class="-w-10 customdropdown__tabular--col -white-space">EA</div>
</div>
</option>
</select>
</div>
</div>
JS Snippet code:
function CreateMultiselectTabularDropdown() {
$('[data-multiselect-tabular]').multiselect({
includeSelectAllOption: true,
'enableHTML': true,
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
onDropdownShown: function(event) {
$('.custom-format-tabular .customtabluar-format-head').css('opacity', '1')
},
onDropdownHidden: function(event) {
$('.custom-format-tabular .customtabluar-format-head').css('opacity', '0')
},
});
}
Usage: CreateMultiselectTabularDropdown()
Dropdown Header: this needs to be add in your page/component js file:
$('.custom-format-tabular .multiselect.dropdown-toggle').before('<div class="customtabluar-format-head d-flex" style="width: 100%"><div class="-w-15px"><strong> </strong></div><div class="-w-20 m-header-size"><strong>Material Code</strong></div><div class="-w-50 m-header-size"><strong>Material Name</strong></div><div class="-w-20 m-header-size"><strong>Material Type</strong></div><div class="-w-10 m-header-size"><strong>UOM</strong></div></div>');
CSS Snippet code:
The Multiselect Tabular Dropdown styles available here multiselect-tabular-dropdown.css file.
Note: Please copy and paste the above multiselect tabular dropdown styles in your main css file and modify the styles(colors, font-sizes, padding, width, etc.) based on your requirement.
Demo:
Auto Complete
To use the auto complete control you need to download always latest version of minified css(jquery-ui.min.css) and minified js(jquery-ui.min.js) files.
Reference CDN link to download. Please download always jquery-ui Stable version.
Note: If Juqery UI libraries are already included. Please donnot download and include them again
HTML Snippet code:
<select class="form-control" data-singleselect>
<option>Select</option>
<option>Web</option>
<option>Device</option>
<option>Both</option>
</select>
JS Snippet code:
$('[data-singleselect]').select2()
Demo:
Datepicker
To use the datepicker control you need to download always latest version of minified css(bootstrap-datepicker.min.css) and minified js(bootstrap-datepicker.min.js) files.
Reference CDN link to download bootstrap-datepicker latest version library files
Normal:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker>
JS Snippet code:
$('[data-datepicker]').datepicker({
todayHighlight: true,
autoclose: true
});
Demo:
Set Today’s Date:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker-today>
JS Snippet code:
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('[data-datepicker-today]').datepicker({
todayHighlight: true,
autoclose: true
});
$('[data-datepicker-today]').datepicker('setDate', today);
Demo:
Only Month:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker-month>
JS Snippet code:
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('[data-datepicker-month]').datepicker({
format: 'M',
viewMode: 'months',
minViewMode: 'months',
todayHighlight: true,
autoclose: true
});
$('[data-datepicker-month]').datepicker('setDate', today);
Demo:
Only Year:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker-year>
JS Snippet code:
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('[data-datepicker-year]').datepicker({
format: 'yyyy',
viewMode: 'years',
minViewMode: 'years',
todayHighlight: true,
autoclose: true
});
$('[data-datepicker-year]').datepicker('setDate', today);
Demo:
Only Month & Year:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker-monthyear>
JS Snippet code:
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('[data-datepicker-monthyear]').datepicker({
format: 'M/yyyy',
viewMode: 'months',
minViewMode: 'months',
todayHighlight: true,
autoclose: true
});
$('[data-datepicker-monthyear]').datepicker('setDate', today);
Demo:
Start Date & End Date Validation:
HTML Snippet code:
<input type="text" class="form-control" data-datepicker-startdate>
<input type="text" class="form-control" data-datepicker-enddate>
JS Snippet code:
var start = new Date();
var end = new Date(new Date().setYear(start.getFullYear() + 1));
$('[data-datepicker-startdate]').datepicker({
endDate: end,
autoclose: true
}).on('changeDate', function() {
$('[data-datepicker-enddate]').datepicker('setStartDate', new Date($(this).val()));
});
$('[data-datepicker-enddate]').datepicker({
startDate: start,
endDate: end,
autoclose: true
}).on('changeDate', function() {
$('[data-datepicker-startdate]').datepicker('setEndDate', new Date($(this).val()));
});
Demo:
Datetimepicker
To use the datetimepicker control you need to download always latest version of minified css(bootstrap-datetimepicker.min.css) and minified js(bootstrap-datetimepicker.min.js) files.
Reference CDN link to download datetimepicker library files
Note: Please make sure momentjs is mandatory to include in your project along with bootstrap-datetimepicker libraries, the datetimepicker is dependent on momentjs.
You can download momentjs library file here CDN link
HTML Snippet code:
<input type="text" class="form-control" data-datetimepicker>
JS Snippet code:
$('[data-datetimepicker]').datetimepicker ({
format: 'DD-MM-YYYY hh:mm A',
icons: {
time: 'fas fa-clock',
date: 'fas fa-calendar',
up: 'fas fa-chevron-up',
down: 'fas fa-chevron-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-check',
clear: 'fas fa-trash',
close: 'fas fa-times'
}
});
Demo:
Timepicker:
HTML Snippet code:
<input type="text" class="form-control" data-timepicker>
JS Snippet code:
$('[data-timepicker]').datetimepicker({
format: 'hh:mm:ss A',
icons: {
time: 'fas fa-clock',
date: 'fas fa-calendar',
up: 'fas fa-chevron-up',
down: 'fas fa-chevron-down',
previous: 'fas fa-chevron-left',
next: 'fas fa-chevron-right',
today: 'fas fa-check',
clear: 'fas fa-trash',
close: 'fas fa-times'
}
});
Demo:
Normal:
24 hrs format
JqGrid Initialization
To use the jqGrid component you need to download latest library files always.
JgGrid: ui.jqgrid.min.css, jquery.jqGrid.min.js, grid.locale-en.min.js libraries.
Reference CDN link to download jqGrid libraries files.
Jquery-ui: jquery-ui.min.css, jquery-ui.min.js libraries.
Reference CDN link to download. Please download always jquery-ui Stable version.
Usage: Please download the jqgrid.js file and include it in assets folder and also include in _layout.cshml file.
JqGrid Virtual Scroll:
HTML Snippet code:
<table id="jqgrid" class="table table-bordered"></table>
<div id="pager"></div>
JS Snippet code:
Static Usage: CreateJQGrid("", "local", "GET", data, colmodels)
Dynamic Usage: CreateJQGrid("GetDistributors", "json", "GET", data, colmodels)
Invoke the above function in your script file and pass necessary parameters in it. Please refer sample code in list-virtual-scroll-sample.js file.
Demo:
JqGrid Inline Edit:
HTML Snippet code:
<table id="jqgrid-inline-edit" class="table table-bordered"></table>
<div id="pager-inline-edit"></div>
JS Snippet code:
Static Usage: CreateJQGridInlineEdit("", "local", "GET", data, colmodels)
Invoke the above function in your script file and pass necessary parameters in it. Please refer sample code in list-virtual-scroll-sample.js file.
Demo:
JqGrid Pagination:
HTML Snippet code:
<table id="jqgrid-pagination" class="table table-bordered"></table>
<div id="pager-pagination"></div>
JS Snippet code:
Static Usage: CreateJQGridPagination("", "local", "GET", data, colmodels)
Dynamic Usage: CreateJQGridPagination("GetDistributors", "json", "GET", data, colmodels)
Invoke the above function in your script file and pass necessary parameters in it. Please refer sample code in list-pagination-sample.js file.
Demo:
Ajax GET & POST Methods
To use the Ajax GET and POST methods, please refer the code in jqgrid.js file.
GET:
Invoke CallAjaxGET(URL, params, async) function in your script file and pass necessary parameters in it.
POST:
Invoke CallAjaxPOST(URL, params, async) function in your script file and pass necessary parameters in it.
Drag & Drop Files
Single File:
To use the Dropify control, we need to include version of minified css(dropify.min.css) and minified js(dropify.min.js) files.
Download dropidy.min.css file here and to download dropidy.min.js file here. The downloaded files include in your assets folder.
Note: Refer Dropify official blog for more features/options of Dropify
HTML Snippet code:
<input type="file" class="dropify" data-file-single>
JS Snippet code:
$('[data-file-single]').dropify();
Demo:
Multiple Files:
To use the Dropzone control, we need to include version of minified css(dropzone.min.css) and minified js(dropzone.min.js) files.
Reference CDN link to download dropzone.js latest version library files
Note: Refer Dropzone official blog for more features of dropzone
HTML Snippet code:
<div class="dropzone-control" data-file-multple>
<form action="/upload" >
<div class="dz-message needsclick">
Drag & Drop files here or click to upload.
</div>
</form>
<div id="images-preview-template" style="display: none;" data-dropzone-preview>
<div class="dz-preview dz-file-preview">
<div class="dz-image"><img data-dz-thumbnail=""></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size=""></span></div>
<div class="dz-filename"><span data-dz-name=""></span></div>
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress=""></span>
</div>
<div class="dz-error-message">
<span data-dz-errormessage=""></span>
</div>
</div>
</div>
</div>
JS Snippet code:
Js code available here and add the piece of code in your script file.
Demo:
Form Controls
Input
text, tel, number, file, email, password, etc...
HTML Snippet code:
<input type="text" class="form-control">
<input type="tel" class="form-control">
<input type="number" class="form-control">
<input type="file" class="form-control">
<input type="email" class="form-control">
<input type="password" class="form-control">
<select class="form-control">
<option>Select</option>
<option>Web</option>
<option>Device</option>
<option>Both</option>
</select>
<input type="radio">
Demo:
Buttons
save/submit, cancel/reject, add, search, print, approve, etc...
HTML Snippet code:
<button class="btn btn-info c-btn -save">Save</button>
<button class="btn btn-danger c-btn -cancel">Cancel</button>
<button class="btn btn-primary c-btn -icon -add">
<i class="fas fa-plus"></i> Add
</button>
<button class="btn btn-secondary c-btn -icon -search">
<i class="fas fa-search"></i> Search
</button>
<button class="btn btn-dark c-btn -print">
<i class="fas fa-print"></i> Print
</button>
<button class="btn btn-success c-btn -approve"></button>
Demo: