CustomDataGrid: A JavaScript repository from VladimirDimov

#Data Table With Ajax Serversde Processing For.NET MVC

##Description A simple data table. Uses Bootstrap styles. Supports paging, filtering, sorting and multiselect with server side processing. This project is still under development!

##Installation From the package manager console in Visual Studio type Install-Package DataTableServerSide. On the client side reference the dataTablesServerSide.js from the assets/datatableServerside folder. Also add the bootstrap-tables.css (http://bootstrap-table.wenzhixin.net.cn/).

##Quick Start ###Server:

Put [DataTable] attribute on the Action
Return IOrderedQueryable<>

    [DataTable]
    public ActionResult Index()
    {
    	IOrderedQueryable<Employee> employees =
			this.employeesService.
			GetAll()
			OrderedBy(x => x.Id);
    	
    	return View(employees);
    }

    public class Employee
    {
        public int Id { get; set; }
        
        public string FirstName { get; set; }
        
        public string LastName { get; set; }
        
        public string Position { get; set; }
        
        public string Occupation { get; set; }
        
        public DateTime StartDate { get; set; }
        
        public decimal Salary { get; set; }
    }

###Client: #####HTML Set all column headers in the <thead>. Any column that expects result from the database should have data-name attribute value as the corresponding property name from the data class.

<table id="table">
    <thead>
        <tr>
            <th data-name="FirstName">First Name</th>
            <th data-name="LastName">Last Name</th>
            <th data-name="Position">Position</th>
            <th data-name="Occupation">Occupation</th>
            <th data-name="StartDate">Start Date</th>
            <th data-name="Salary">Salary</th>
            <th data-name="Actions">Actions</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

#####JS

var myTable = dataTable.init('#table', {
    ajax: {
        url: 'http://localhost:65219/home/indexDB'
    },
});

##Features ###Selectable ######example:

var myTable = dataTable.init('#table', {

	...

    features: {
		// The property name that identifies the object
        identifier: 'Id',
        selectable: {
			// By default this option is set to true. Use it to disable the selectable option
			enable: true,
			// Enable/disable rows multiselect. By default it is set to false
			multi: true,
			// a custom class may be added to the selected rows
            cssClasses: 'success'
        }
    }
});

The selected rows identifiers can be got by:

myTable.getSelected();

The result is an array of the identifiers of the selected rows.

###Sort Just put an attribute "sortable" in the column <th> element. ######example:

<table id="table">
    <thead>
        <tr>
            <th data-name="FirstName" sortable>First Name</th>
            <th data-name="LastName" sortable>Last Name</th>
			...
            <th data-name="StartDate" sortable>Start Date</th>
            <th data-name="Salary" sortable>Salary</th>
            ...
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

###Filters The filters can be created by placing input elements anywhere in the table. The inputs require an attribute filter="..." with any of the available options (see the list of available filter options) and attribute data-columnNames containing the names of the columns over which the filtering will be performed separated by a single space. All filters can be applied together in any combinations.

#####example // This will perform a case insensitive filtering. // As a result all the elements with a property FirstName containing the // porvided string will be returned.

// This will perform a case insensitive filtering. 
// As a result all the elements with properties FirstName or LastName equal to the
// porvided string will be returned.
<input type="text" data-columnNames="FirstName LastName" filter="=" class="form-control">

#####List of available filter options

"ci" - contains (case insensitive);
"=" - exact match(case insensitive);
">" - greater than;
">=" - greater than or equal;
"<" - less than;
"<=" - less than or equal;
"si" - starts with (case insensitive);
"ei" - ends with (case insensitive);

###Custom Column Rendering

#####example: Add 'columns' property in the 'settings' object. For each column that you want to make a custom rendering add a property with the column name and inside create a property with a value equal to a function that accepts a single argument equal to the cell value. Return the rendered value;

var myTable = dataTable.init('#table', {
	...
    columns: {
        Salary: {
            render: function (content) {
                return content + ' $';
            }
        },

        Actions: {
            render: function () {
                return '<button class="btn-edit">Edit</button>' +
                    '<button class="btn-save">Save</button>';
            }
        },

        StartDate: {
            render: function (content) {
                var formattedDate = formatDate(content);

                return formattedDate;
            }
        },
		
		FullName: {
            render: function (content, rowData) {	
                return rowData.FirstName + ' ' + rowData.LastName;
            }
        },
    },
	...
});

###Templates You may add custom templates in the table body. Add a row with attribute dt-template="templateName". Inside the <td> elements may be any nested elements. The elements which hold the table data must have a tag data-name="propertyName". The property name can be the name of any property of the database object. The first template which will be rendered will be the template with a name "main". If there is not such template the values will be rendered directly into the <td> elements.

You can switch the templates through buttons with attribute dt-btn-template="targetTemplateName". Clicking the button will switch the row to template with the provided name. You can add some animation to the template switching by adding an attribute dt-delay="timeInMilliseconds" in the button element.

#####Example:

<tbody>
    <tr dt-template="edit">
        <td>
            <input type="text" data-name="FirstName" value="" class="td-inner form-control" />
        </td>
        <td>
            <input type="text" data-name="LastName" value="" class="td-inner form-control" />
        </td>
        <td>
            <input type="text" no-custom-Render data-name="Salary" value="" class="td-inner form-control" />
        </td>
        <td>
            <button dt-btn-update="info" dt-delay="250" class="btn btn-primary">Update</button>
            <button dt-btn-template="main" dt-delay="250" class="btn btn-default">Cancel</button>
        </td>
    </tr>
    <tr dt-template="main">
        <td>
            <div data-name="Id"></div>
        </td>
        <td>
            <div data-name="FirstName"></div>
        </td>
        <td>
            <div data-name="Salary"></div>
        </td>
        <td>
            <button dt-btn-template="edit" dt-delay="250" class="btn btn-warning">Edit</button>
            <button dt-btn-template="info" dt-delay="250" class="btn btn-info">Info</button>
        </td>
    </tr>

    <tr dt-template="info">
        <td colspan="4">
            <div class="jumbotron">
                <h1><span data-name="FirstName"></span> <span data-name="LastName"></span></h1>
                <p>Salary: <span data-name="Salary" /></p>
                <p><a dt-btn-template="main" class="btn btn-primary btn-lg" href="#" role="button">Return</a></p>
            </div>
        </td>
    </tr>
</tbody>

VladimirDimov/CustomDataGrid