CardGrid: A Hybrid Grid Plugin for jQuery

07 Apr 2016 C#Java ScriptTypeScript Digital Portfolio

Links

Download CardGrid

In modern web applications, effectively managing and displaying data is crucial. CardGrid is a powerful jQuery plugin that combines the strengths of both Card View and Table View, providing a flexible, dynamic, and customizable data grid solution.

This plugin is designed to seamlessly integrate with Bootstrap 3 and TypeScript, enabling developers to easily populate grids using JSON data. Additionally, it supports custom templates for Card layouts, making it simple to create visually appealing data presentations.

Key Features of CardGrid

Hybrid Grid with Card & Table Views
Users can effortlessly switch between Card View and Table View, adapting the data presentation to their needs without hassle.
JSON Data Integration
Load and display JSON data dynamically, eliminating the need for complex manual data handling.
Customizable Card Templates
Define your own card layouts using HTML and CSS, giving full control over how the data is displayed.
Responsive and Bootstrap 3 Compatible
The grid is fully responsive and optimized for Bootstrap 3, ensuring that it looks great across all device sizes.
TypeScript Support
With built-in TypeScript support, CardGrid offers a type-safe and maintainable development experience.

Technologies Used

jQuery for core functionality
Bootstrap 3 for responsive styling
TypeScript for scalable development

Installation and Usage

To get started with CardGrid, follow these steps:

Download and Include Dependencies
Clone or download the plugin from the GitHub repository. Include jQuery, Bootstrap 3 CSS, and the CardGrid plugin script in your project:
Create a div with name card-grid

1
2
3
4
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
           <div class="card-grid">
           </div>
 </div>

Add CSS Files

1
2
3
4
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />   
<script src="~/Scripts/modernizr-2.6.2.js"></script>  
<link href="~/Content/cardgrid.css" rel="stylesheet" type="text/css" />

Add JavaScript Libraries

1
2
3
4
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.bootpag.min.js"></script>
<script src="~/Scripts/App/CardGrid.js"></script>

Add Script in Page

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
var cardGrid = null;
$(document).ready(function () {       
   cardGrid = $('.card-grid').cardGrid({
       url: '@Url.Action("GetData")',
       type: 'GET',
       pagination: true,
       itemsPerRow: 4,
       recordsPerPage: [12, 24, 48],
       sortCols: [
           { text: 'Id', value: 'Id' },
           { text: 'Name', value: 'Name' },
           { text: 'Gender', value: 'Gender' },
           { text: 'Date Of Birth', value: 'BirthDate' },
           { text: 'Contact No', value: 'ContactNo' },
           { text: 'Email', value: 'Email' },
           { text: 'Job Title', value: 'JobTitle' },
           { text: 'Date of Hiring', value: 'HireDate' },
       ],
       currentView: 'card',
       multiSelect: false,
       cols: [
           { id: 'Id', title: 'Id', hidden: true },
           { id: 'Name', title: 'Name' },
           { id: 'Gender', title: 'Gender', width: 6},
           {
               id: 'BirthDate', title: 'Date of Birthday', template: function (data) {
                   return (new Date(parseInt(data.BirthDate.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')))).toDateString();
               }
           },
           { id: 'ContactNo', title: 'Contact No'},
           { id: 'Email', title: 'Email',  },
           { id: 'JobTitle', title: 'Job Title' },
           {
               id: 'HireDate', title: 'Date of Hire', template: function (data) {
                   return (new Date(parseInt(data.HireDate.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')))).toDateString();
               }}
       ],
       template: function (data) {
           var _div_Row1 = $('<div/>');
           var _div_Row2 = $('<div/>');
           var _div_Row3 = $('<div/>');
           var _img = $('<img />', { src: 'https://unsplash.it/150/100?image=' + data.Id, style: 'width:150px;height:100px' });
           var _name = $('<h3/>', { html: data.Name,style:'background: antiquewhite;'});
           _div_Row1.append(_img);
           _div_Row2.append(_name);
           
           _div_Row3.append($('<h5/>', { html: data.Gender }))
               .append($('<h5/>', { html: (new Date(parseInt(data.BirthDate.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')))).toDateString() }))
               .append($('<h5/>', { html: data.ContactNo }))
               .append($('<h5/>', { html: data.Email }))
               .append($('<h5/>', { html: data.JobTitle }))
               .append($('<h5/>', { html: (new Date(parseInt(data.HireDate.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')))).toDateString() }));

           return $('<div />', { style: 'text-align:center' }).append(_div_Row1).append(_div_Row2).append(_div_Row3);
       },
       buttons: [
           {
               id: 'btnAdd', text: '', enable: true, hidden: false, className: 'btn-success fa fa-plus', onClick: function () {
                   var modal = $('#myModal').modal();
                  // Write Code to Submit Your Code
               }
           },
           {
               id: 'btnEdit', text: '', className: 'fa fa-pencil', onClick: function () {
                   var gridData = cardGrid.getSelectedData();
                   if (gridData.length == 0) {
                       alert('Please select an Item to Edit!');
                       return;
                   }
                   if (gridData.length > 1) {
                       alert('Please Select single Item to Edit');
                       return;
                   }
                   var modal = $('#myModal').modal();
                   // Write Code to Submit Your Code
               }
           },
           {
               id: 'btndelete', text: '', className: 'btn-danger fa fa-trash', onClick: function () {
                   var selectedIds = cardGrid.getSelectedIds();
                   if (selectedIds.length === 0) {
                       alert('Please select atleast one Item to Delete!');
                       return;
                   }
                   // Write Code to Submit Your Code

               }
           },
           {
               text: 'Print', onClick: function () {
                   window.print();
               }, buttons: [
                   {
                       text: '', hidden: true, onClick: function () {
                           alert('Edit- Excel 1')
                       }
                   },
                   {
                       text: 'Excel', onClick: function () {
                           alert("excel");
                       }
                   },
               ]
           }
       ]
   });
});

Why Choose CardGrid?

CardGrid stands out because it perfectly combines the best aspects of card-based and tabular data presentation. It simplifies working with JSON data, provides full responsiveness aligned with Bootstrap 3, and allows developers to customize their card layouts for unique and engaging user interfaces. Moreover, its TypeScript integration supports robust and maintainable code, making it ideal for dashboards, e-commerce platforms, and any data-driven web application.

Elevate your web application with CardGrid—download it today and experience the perfect blend of flexibility and ease for your data grids.

// gallery

CardGrid View.png

CardGrid Table View.png