Batch Card - Shield UI

by Shankar

HTML

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Mixer Data</title>

    <!-- Bootstrap Core CSS -->
    <!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="css/bootstrap-editable.css" rel="stylesheet">
    <link href="css/normalize.css" rel="stylesheet">
    <!-- <link href="css/jquery-ui.css" rel="stylesheet"> -->


    <link rel="stylesheet" type="text/css" href="css/shield/all.min.css" />

    <!-- Custom Fonts -->
<!--     <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-select.css">
 -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- <link href="css/reset.css" rel="stylesheet"> -->

    <!-- Custom CSS -->
    <style>
    body {
        padding-top: 70px;
        margin: 20px; /* Header gap at top */
        /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
    }


    .panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: #ffffff;
    }
    .panel-heading a.collapsed:after {
    content:"\e080";
    }

     /*.sui-button-cell
    {
        text-align: center;
    }

    .sui-checkbox
    {
        font-size: 17px !important;
        padding-bottom: 4px !important;
    }

    .deleteButton img
    {
        margin-right: 3px;
        vertical-align: bottom;
    }

    .bigicon
    {
        color: #5CB85C;
        font-size: 20px;
    }*/

    </style>

    <!-- HTML5 Shim and...

CSS

/*

//gridata.js
    var gridData =
    [
        {
            "id": 0,
            "guid": "8d1e53cb-464e-47c8-8742-068b3646b388",
            "isActive": true,
            "balance": "$1,941.51",
            "picture": "http://placehold.it/32x32",
            "age": 66,
            "eyeColor": "blue",
            "name": "Miller Gomez",
            "gender": "male",
            "rating": 7,
            "quantity": 332,
            "company": "QUILM",
            "month": "11 February 2014",
            "email": "[email protected]",
            "transport": "motorbike",
            "preference": true,
            "phone": "+1 (894) 565-3336",
            "address": "916 Eldert Lane, Cawood, Tennessee, 7282",
            "about": "Laboris tempor laborum esse culpa nostrud. Ex ad ex officia voluptate sunt duis ipsum culpa id. Mollit et labore laboris proident anim nisi do sint proident pariatur.\r\n",
            "registered": "2014-04-18T11:45:15 -03:00",
            "latitude": 5.80634,
            "longitude": -133.154022,
            "tags": [
                "velit",
                "Lorem",
                "non",
                "elit",
                "voluptate",
                "laborum",
                "ipsum"
            ],
            "friends": [
                {
                    "id": 0,
                    "name": "Warren Hayes"
                },
                {
                    "id": 1,
                    "name": "Cynthia Valdez"
                },
                {
                    "id": 2,
                    "name": "Tonia Downs"
                }
            ],
            "greeting": "Hello, Miller Gomez! You have 6 unread messages.",
            "favoriteFruit": "banana"
        },
        {
            "id": 1,
            "guid": "1ca20df6-6ebe-44d2-b3bd-ef6d47c56404",
            "isActive": true,
            "balance": "$2,989.69",
            "picture": "http://placehold.it/32x32",
            "age": 47,
           ...

JavaScript

/*


Refer links and Pocket for js files and images


*/



// Datagrid.js

 $(document).ready(function () {
        $("#grid").shieldGrid({
            dataSource: {
                data: gridData,
                schema: {
                    fields: {
                        id: { path: "id", type: Number },
                        age: { path: "age", type: Number },
                        name: { path: "name", type: String },
                        company: { path: "company", type: String },
                        month: { path: "month", type: Date },
                        isActive: { path: "isActive", type: Boolean },
                        email: { path: "email", type: String },
                        transport: { path: "transport", type: String }
                    }
                }
            },
            // sorting: {
            //     multiple: true
            // },
            rowHover: false,
            columns: [
                { field: "name", title: "Chemical Name", width: "120px" },
                { field: "transport", title: "Tank", width: "120px", editor: myTankList },
                { field: "company", title: "Quantity (lbs)" },
                { field: "company", title: "Solvent Rate"  , width: "120px"},
                { field: "month", title: "Mixer Date & time", format: "{0:MM/dd/yyyy}" },
                // { field: "isActive", title: "Active" },
                // { field: "email", title: "Email Address", width: "250px" },
                { field: "transport", title: "Custom Editor", width: "120px", editor: myCustomEditor },
                // {
                //     width: "104px",
                //     title: "Delete Column",
                //     buttons: [
                //         { cls: "deleteButton", commandName: "delete", caption: "<img src='http://www.prepbootstrap.com/Content/images/template/BootstrapEditableGrid/delete.png' /><span>Delete</span>" }
                //     ]
                // }
          ...