atatanasov / gijgo

Gijgo - Free Javascript Controls

Gijgo - Free Javascript Controls

Gijgo is a set of free for commercial use javascript controls distributed under MIT License. All widgets are high performance, built on top of the jQuery JavaScript Library with built-in support for Bootstrap 4 and Material Design. They are designed to saves you time and scales with your development process.

Widgets

1. Grid
2. Tree
3. Dialog
4. Editor
5. Checkbox
6. Draggable
7. Droppable
8. Dropdown
9. Datepicker
10. Timepicker
11. DateTimePicker
12. Slider

Top Examples

1. jQuery Grid
2. jQuery Dialog
3. Bootstrap Editable Table
4. Bootstrap Treeview
5. Angular Treeview
6. Bootstrap Datepicker
7. Bootstrap 4 Datepicker
8. Bootstrap 5 Datepicker
9. Bootstrap 4 Timepicker
10. Bootstrap 5 Timepicker
11. Bootstrap 4 DateTimePicker
12. Bootstrap 4 Checkbox
13. Bootstrap 4 Table
14. Bootstrap 4 Slider

How To Contribute

1. Open Node.js command prompt and navigate to the folder where you want to download the code
2. Run "git clone https://github.com/atatanasov/gijgo.git" to download the code
3. Run "npm install"
4. Run "npm install -g grunt-cli"
5. Run "grunt". Grunt is going to rebuild the project and all examples if you change something in the code
6. Open second Node.js command prompt and navigate to the folder with the code
7. Run "node app.js" in order to start the website with examples on http://localhost:4000/
8. Open the code with your favourite IDE and review your changes on http://localhost:4000/

gijgo's Issues

Grid Local DataSource Sort Algorithm

The grid is a really nice component - thanks!

Feature request:
It would be nice to be able to provide a custom function for sorting - a single default one would be good, and being able to provide it on a per-column basis would be even better.

Likely uses:

1. Ability to specify a case-insensitve sort
2. Ability to specify a sort that deals with alternative collation sequences.
3. Ability to sort based on an attribute other than the collation of the content

Thanks!

Pagination Refresh Error While using responsive

First I say thanks to your grid. I really like this. My problem is if i use the responsive grid option, me expand a row and click the refresh button in pagination. The last row was disappeared. I tried so many times. If i continue the process means the whole record is removed from the grid.

Header filter still visible when column set to hidden

Hi,

When using headerFilter: true and setting a column to hidden
columns: [ { field: 'id', hidden: true} ]

The column data and column header are both hidden but the column filter is still visible and taking up space in the table.

Any solution for this?

Thanks,
Toby

the gijgo site http://gijgo.com is not accessable.

It seems the the gijgo site http://gijgo.com is not accessable now.

Formatting the button in gijgo grid

var tblPackage = $("#tblPackage").grid({ dataKey: "ID", url: '/Admin/GetPlan', uiLibrary: "bootstrap", columns: [ { field: "PlanId", sortable: true, hidden: true }, { field: "PlanName", title: "Plan Name", sortable: true }, { field: "PlanDescription", title: "Description", sortable: true }, { field: "StartTimeStamp", title: "Start Time", sortable: true }, { field: "EndTimeStamp", title: "End Time", sortable: true }, { field: "Status", title: "Status", sortable: true }, { field: "Version", title: "Version", sortable: true }, { title: "", field: "Submit", width: 34, type: "icon", icon: "glyphicon-upload", tooltip: "Submit", events: { "click": Submit } }, { title: "", field: "Edit", width: 34, type: "icon", icon: "glyphicon-pencil", tooltip: "Edit", events: { "click": Edit } }, { title: "", field: "Clone", width: 34, type: "icon", icon: "glyphicon-file", tooltip: "Clone", events: { "click": Clone } }, { title: "", field: "Delete", width: 34, type: "icon", icon: "glyphicon-trash", tooltip: "Delete", events: { "click": Remove } }, { title: "", field: "View", width: 34, type: "icon", icon: "glyphicon-book", tooltip: "View", events: { "click": View } } ], pager: { enable: true, limit: 10, sizes: [5,10, 20,50,100] } });

Has anyone know on how to format the button like base on the status, either 'Complete' or 'Pending', then will disable / hide the button? I would appreciate if anyone can help on this.

Updating value on Pop up of grid

I have problem with

1. Opening Pop up on grid cell and updating value back to cell.

Checkbox selection method should disable other selection methods

I have a scenario similar to the following:

    grid = $("#grid").grid({
        primaryKey: "Id",
        uiLibrary: "bootstrap",
        notFoundText: "No records found",
        selectionMethod: 'checkbox',
        selectionType: 'multiple',
        columns: [
            { field: "Name", title: "Name"},
            { field: "Description", title: "Description" },
            { title: "", icon:'fa fa-edit'  field: "Edit", width: 34, tooltip: "Edit", events:{click:clickEventHandler} },
        ],
        pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
    });

The selectionMethod is set to checkbox and that part is working fine but when I click on any field the row is still getting selected or unselected and eventually the checkbox changes. I think when the mode is set to checkbox only checkbox should be able to select/unselect the row. That way any click event inside the row will not be able to change the selection.

Nested Grid Render Fails if Row in Expanded State

After the initial setup for a nested grid ( remote data, columns, expand collapse events as per the demo ), the grid shows a nested grid.

var grid;

grid = $('#dataGrid').grid({
    columns: [
                { field: 'A' },
                {field: 'B' }
            ],
    detailTemplate: '<div><table/></div>'
});
grid.on('detailExpand', function (e, $detailWrapper, record) {
    $detailWrapper.find('table').grid({
        dataSource: record.Children,
        columns: [
                { field: "C" },
                { field: "D" }
            ],
        pager: { limit: 5 }
    });
});
grid.on('detailCollapse', function (e, $detailWrapper, record) {
    $detailWrapper.find('table').grid('destroy', true, true);
});

Next it is updated on regular internals by fetching the new data (ajax) and then render using - grid.render(response)

Code:
function GetUpdates() {

    $.ajax({
        type: "GET",
        cache: false,
        url: "http://localhost:8080/home/getdata",
        contentType: 'application/json; charset=utf-8',
        async: true,
        success: function (resp) {
            grid.render(resp);
        },
        error: function (err) {
            alert('Call to web api failed.');
        }
    });
}

It works fine and grid shows new data if none of the rows are ever expanded.

It fails to render and displays "No records found" if one of the rows is in expanded state.
It also fails if one row was expanded before but is again in collapsed state i.e. all rows back to collapse state.

Thanks.

Row disable when we use checkbox selection

I should not select the row. it should be disabled for row selection when we use checkbox type selection method. How to implement this.

ShowHiddenColumnsAsDetails don't work

Hey,

I copy this example : https://github.com/atatanasov/gijgo/blob/master/examples/grid/Grid.ResponsiveDesign.showHiddenColumnsAsDetails.sample.html

for the hidden columns but it doesn't work. Moreover, only one rows is displayed when I put the option 'showHiddenColumnsAsDetails: true'.

Here's my code :

$(document).ready(function () {
var data, grid, dialog;

 function Delete(e) {
     if (confirm('Are you sure?')) {
         grid.removeRow(e.data.id);
     }
 }


data = [
    { 'ID': 1, 'Nom': 'Hristoezfezfez', 'Prénom': ' Ménage', 'Téléphone': '0606060606', 'Portable': '0000000000', 'Email': '[email protected]', 'Fonction': 'Femme de ménage' },
    { 'ID': 2, 'Nom': 'Hrizadzdazsto', 'Prénom': ' Directeur', 'Téléphone': '0707070707', 'Portable': '0101010101', 'Email': '[email protected]', 'Fonction': 'Directeur' },
    { 'ID': 3, 'Nom': 'Hristo', 'Prénom': ' Hot line', 'Téléphone': '0808080808', 'Portable': '0202020202', 'Email': '[email protected]', 'Fonction': 'Hot line' },
    { 'ID': 4, 'Nom': 'Hristo', 'Prénom': ' Direction', 'Téléphone': '0909090909', 'Portable': '0303030303', 'Email': '[email protected]', 'Fonction': 'Direction' },
    { 'ID': 5, 'Nom': 'Hristo', 'Prénom': ' Secrétariat', 'Téléphone': '0101010101', 'Portable': '0404040404', 'Email': '[email protected]', 'Fonction': 'Secrétariat' },
    { 'ID': 5, 'Nom': 'Hristo', 'Prénom': ' Secrétariat', 'Téléphone': '0101010101', 'Portable': '0404040404', 'Email': '[email protected]', 'Fonction': 'Secrétariat' }
];

grid = $('#grid').grid({
    dataSource: data,
    detailTemplate: '<div class="row"></div>',
    responsive: true,
    //showHiddenColumnsAsDetails: true,
    uiLibrary: 'bootstrap',
    columns: [
        { field: 'ID', width: 32 },
        { field: 'Nom' },
        { field: 'Prénom', title: 'Prénom', priority: 1 },
        { field: 'Téléphone', title: 'Téléphone', priority: 2 },
        { field: 'Portable', title: 'Portable', priority: 3 },
        { field: 'Email', title: 'Email', priority: 4 },
        { field: 'Fonction', title: 'Fonction carte de visite' },
         { title: '', width: 60, align: 'center', tmpl: 'Delete', events: { 'click': Delete } }
    ]
});

grid.on('detailExpand', function (e, $detailWrapper, record) {
$detailWrapper.empty().append('  Place Of Birth: ' + record.Nom);
});
grid.on('detailCollapse', function (e, $detailWrapper, record) {
$detailWrapper.empty();
alert('detailCollapse is fired.');
});
$('#btnAdd').on('click', function () {
grid.addRow({ 'ID': grid.count() + 1, 'Nom': 'Le test', 'Prénom': 'Test City, Test Country' });
});
});

Any idea?

Thanks,

Select all doesn't work as expected

When you deselect row the 'select all' checkbox is still checked.

Table Footer overlaps columns/controls layout

After search, the paging number won't back to page 1

Hi, I would like to ask, let say before I started to search any string, I went to page 2, but after I search with some random string, the result will show in page 1, but why the gigjo grid won't back to page 1 automatically instead of staying at page 2?

Disabling checkbox in grid

I am trying to disable a check box in a grid when the corresponding status of record is yes. Record status is one of the column in the grid. I didn't find any option to disable a checkbox based on a value in grid Row. Could you please me to provide a solution for this.

Thanks

Sorting doesn't work with local datasource

Sorting doesn't work with local datasource.
Works well only for remote datasources.

Combo-box as inline grid editor is not focused when entering edit mode

The default behavior for inline text editors in the grid is that they receive focus when entering edit mode. But when a combo-box appears as inline editor, one has to click it again to give it focus.
Perhaps this is because of the elem.focus() call in the setCaretAtEnd() function, which only works for <input> elements and not for <select> elements.
I would suggest to call the focus() method on any inline editor element when entering edit mode.

Image not supported

Is there a way to show an image per user?

Grid: loading overlay

The loading overlay is not position correctly on reload of the gird.

Request: Dialog touch support

Greetings again,
I wonder if it's possible to add touch support to draggable (+resizing). I played around with the event listener but i had no luck.
ref: https://developer.mozilla.org/en-US/docs/Web/Events/touchstart

Would be nice!

Best wishes
brindosch

Paging on subgrids doesn't work

The propagation of initialized, dataBound, pagechanging and rowDataBound events needs to be prevented.

Pagination and sorting doesn't work

Atanas,

Thanks for your answer on my first issue, now it works well.

But, I tried to have the sorting and the pagination options. I followed your example on Gijgo, but it doesn't work.

Here's my code :

$(document).ready(function () {
var data, grid, dialog;

 function Delete(e) {
     if (confirm('Are you sure?')) {
         grid.removeRow(e.data.NOM);
     }
 }

dialog = $('#dialog').dialog({
    title: 'Add/Edit Record',
    autoOpen: false,
    resizable: false,
    modal: true
});

function Save() {
dialog.close();
}
function Edit(e) {
$('#dialog').dialog('open');
}

grid = $('#grid').grid({
    dataSource: 'server_side_interlocuteur.php',
    //dataSource: data,
   detailTemplate: '<div class="row"></div>',
    responsive: true,
    showHiddenColumnsAsDetails: true,
    uiLibrary: 'bootstrap',
    columns: [
       // { field: 'I_CODE' },
        { field: 'I_NOM', title: 'Nom', priority: 1, sortable: true },
        { field: 'I_PRENOM', title: 'Prénom', priority: 2, sortable: true },
        { field: 'I_TEL1', title: 'Téléphone', priority: 6 },
        { field: 'I_TEL3', title: 'Portable', priority: 5 },
        { field: 'I_EMAIL', title: 'Email', priority: 3 },
        { field: 'I_ADRESSE4', title: 'Fonction carte de visite', priority: 4   },
        { width: 50, tmpl: '<a href="#">edit</a>', align: 'center', events: { 'click': Edit } }
    ],

    pager: { limit: 2 }
});

/* Changement de pages */ 
grid.on('pageChanging', function (e, newPage) {
 });

 $('#btnSave').on('click', Save);
 $('#btnCancel').on('click', dialog.cancel);

$('#btnAdd').on('click', function () {
    dialog.open();
   //  grid.addRow({ 'ID': grid.count() + 1, 'Nom': 'Le test', 'Prénom': 'Test City, Test Country' });
 });

});

And my server_side_interlocuteur.php :

exec("set names utf8"); $contactId = 'contact'; ``` $_INTERLOCUTEURS_CHAMPS = "I.I_CODE as I_CODE, I.I_CODECONTACT as I_CODECONTACT, I.I_NOM as I_NOM, I.I_PRENOM as I_PRENOM, I.I_TEL1 as I_TEL1, I.I_TEL3 as I_TEL3, I.I_EMAIL as I_EMAIL, I.I_ADRESSE4 as I_ADRESSE4"; // $sOrder = ' order by I.I_NOM, I.I_PRENOM'; $sQuery = "select ".$_INTERLOCUTEURS_CHAMPS." from INTERLOCUTEURFICHE I where I_CODECONTACT = '".StringTools::CleanInjectionFirebird(strtoupper(utf8_decode(trim($contactId))))."' and I.I_INACTIF = 'F' order by I.I_NOM, I.I_PRENOM"; $sth = $dbh->prepare($sQuery); $sth->execute(); $arr = array(); while ($row = $sth->fetch(PDO::FETCH_ASSOC)) { $arr[] = $row; } $sth = $dbh->prepare($sQuery); $sth->execute(); $nb = $sth->fetchAll(); $count = count($nb); $arr = str_replace(" ", "", (json_encode(utf8_encode_recursive($arr)))); $sOutput = ""; $sOutput .= $arr; echo($sOutput); function utf8_encode_recursive ($array) { $result = array(); foreach ($array as $key => $value) { if (is_array($value)) { $result[$key] = utf8_encode_recursive($value); } else if (is_string($value)) { $result[$key] = utf8_encode($value); } else { $result[$key] = $value; } } return $result; } ``` ?>

As you can see, i set the Total and i Add it to my Json. It's exactly the same format in your exampe, and it doesn't work for me.

Do you have any idea?

Best regards, and thanks again for your first answer.

Ju,

reload doesn't work in combination with nested grids

example: http://gijgo.com/Temp/1b6e2f9e-e593-414a-954c-707807459131.html

Where is filter option

Hi this is Anand,
please guide me to the link where I can find filter option in your grid.

Hidden details icon in mobile view and details is empty in case of composite properties in field

Here is sample of my code:

    grid = $("#grid").grid({
        primaryKey: "Name",
        uiLibrary: "bootstrap",
        notFoundText: "No records found",
        detailTemplate: '<div class="row"></div>',
        responsive: true,
        showHiddenColumnsAsDetails: true,
        columns: [
            { field: "Name", title: "Name", minWidth: 150, priority: 1 },
            { field: "Purpose", title: "Purpose", minWidth: 50, priority: 4 },
            { field: "Description", title: "Description", priority: 5 },
            { field: "Enabled", title: "Enabled", minWidth: 30, priority: 2 },
            { field: "Time", title: "Time", tmpl: '{StartTime} to {EndTime}', minWidth: 150, priority: 3 },
        ],
        pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
    });

In case of multiple properties in a single field ("Time"), the expanded detail is empty.
Responsive works fine upto a certain width. But in mobile view, the details icon is hidden. So there is no way to expand the details section.

Dialog: Resizing corner/edges don't keep their position

Greetings and thank you for this nice piece of software!
I noticed that the corner and edges divs that are used for resizing change their position to a different one than the real dialog. So they are inside the dialog or outside (easily up to 100px and more).

Is there a good way to 'attach' them better to the corners and edges?

version 1.0.0
whole gijgo package
settings:

		uiLibrary: 'bootstrap',
		resizable: true,
		modal: false,
		minWidth: 500,
		width: 600,
		minHeight: 300,
		height: 400,
		closeOnEscape: true,
		autoOpen: false,
		title: 'A title here...',

Thank you for any hint!
brindosch

Issue in getSelections when pager is enabled

In below getSelections method, I enabled paging for limit 2 records on page. Then I go to next page and selected next record. but alert is giving as "1" instead of "3". Please check this out and provide me the solution.

<script> var grid = $('#grid').grid({ dataSource: '/Grid/GetPlayers', pager: { limit: 2 }, columns: [ { field: 'ID' }, { field: 'Name' }, { field: 'PlaceOfBirth' } ], selectionMethod: 'checkbox', selectionType: 'multiple' }); $('#btnShowSelection').on('click', function () { var selections = grid.getSelections(); $.each(selections, function() { alert(this); }); }); </script>

Cancel button cannot work on

Cancel button cannot work on http://gijgo.com/Grid/Demos

Uncaught ReferenceError: jQuery is not defined at gijgo.js:1080

I am facing this issue @ gijgo.js
Exception : Uncaught ReferenceError: jQuery is not defined at gijgo.js:1080

Please reply soon.
Its very argent

Words are truncated in the column

As you can see the email column data has been truncated, it works in Chrome, but not works in Microsoft Edge and Internet Explorer, any solution to help on this? Appreciate if any guy would help on it.

Responsive : detailTemplate : Hangs When record edited

Steps to reproduce ->

1. Resize screen to small view so that columns can move to detail template view -
   **
   
   **
2. Expend to see hidden columns in detail view/DetailTemplate -
   
3. Click on edit for same row for which detail template is visible and save to update the new values -
   
4. Try to collapse to hide detialView/DetailTemplate and you have the issue -
   

For your reference here you get the imp files & Screens -

1. Index.cshtml : Index.txt
2. HomeController : HomeController.txt

Scripts & CSS File Used -

Note - No change to GridModel.cs, Player.cs, SortHelper.cs files.

Merge Cell

How to merge columns or rows

Problem with Inline editing

Inline editing stops working when you click very fast on cells

Row disable when we use checkbox selection

How to disable a single row on grid?

Not addiing data when datasource:"grid/getsupplier"

I am fetching json data from "/Grid/GetPlayers" method in controller when clicked add it doesn't add data to the grid
dataSource is "/Grid/GetPlayers" following type of error occured
Uncaught TypeError: data.dataSource.push is not a function
at Object.addRow (gijgo.js:3831)
at n.fn.init.self.addRow (gijgo.js:4342)
at HTMLButtonElement.Save (jquery-ui-grid.html:91)
at HTMLButtonElement.dispatch (jquery-2.1.4.min.js:3)
at HTMLButtonElement.r.handle (jquery-2.1.4.min.js:3)

I have also tried one of demo model given by your in "http://gijgo.com/LiveEdit/Index/jquery-ui-grid.html?component=grid" it gives the same error

Gijgo Grid DropDown Problem

I have added dropdown list in grid.It is working fine for hardcoded values but,when i try to get values dynamically it is not binding in dropdown.

Here is my code,

function edit($container, currentValue) {
var ddlSupplier = "";
$.ajax({
type: "GET",
url: "/Master/AllSupplier",
datatype: "Json",
success: function (data) {
$.each(data, function (index, value) {
ddlSupplier = ddlSupplier + "" + value.Name + "";
});
$container.append('' + ddlSupplier + '');
}
});
}

Please help.

Sorting is not working

grid = $("#viewGrid1").grid({
//selectionType: "multiple",
//selectionMethod: "checkbox",
autoLoad: false, //absolutely necessary!
loadonce:true,
uiLibrary: "bootstrap",
dataSource: { url: '/RepairOrderViews/GetRepairOrderByStatus', data: { statusCode: 'E' } },
defaultColumnSettings: { headerCssClass: "bootstrapgridoverride center", sortable: true},
//Non-Worked Repair Orders
columns: [
{ field: "RepairOrderNumber", name: "RO", title: "RO", align: "right", },
{ field: "RepairOrderStatusDesc", title: "Status", type: "string"},

Renderer or template is not applied after inline editing in grid

When a renderer or a template is configured for a column in the grid, I would expect it to be applied not just when first rendering the cell, but also after editing the cell.
Currently this is not the case.
I ran into this issue when I implemented a renderer and (picklist)editor to display human readable text but work internally with numerical values.

Colspan on added on custom tfoot rows

Example:

<html>
<head>
  <meta charset="utf-8" />
  <title>Example</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="/Areas/Development/dist/modular/grid/css/grid.css" rel="stylesheet" type="text/css">
  <script src="/Areas/Development/dist/modular/grid/js/grid.js"></script>
</head>
<body>
 <table id="grid"></table>
 <script>
     var grid = $('#grid').grid({
         dataSource: '/Grid/GetPlayers',
         columns: [ { field: 'ID', width: 36 }, { field: 'Name' }, { field: 'PlaceOfBirth' } ],
         pager: { limit: 5 },
         dataBound: function (e, records, totalRecords) {
            var total = 0,
                summary = grid.find('tfoot tr[data-role="summary"]');
            $.each(records, function() { total += parseInt(this.ID); });
            if (summary.length === 0) {
              summary = $('<tr data-role="summary" />');
              grid.find('tfoot').prepend(summary);
            }
            summary.empty().append('<th>'+total+'</th><th></th><th></th>');
       }
     });
 </script>
</body>
</html>

Grid: Responsive doesn't work on window maximize

browser: Chrome
Last column stays in the details section on browser maximize.

Persistent expanded row - feature request (maybe)?

If a row is expanded and grid is refreshed, the expanded row gets collapsed and has to be expanded again. Usual scenarios are fine but if grid is refreshed using setInterval it is a problem (at least for me). I understand that it is complicated but is it possible to make it persistent maybe with a configuration option.

Dialog: Broken resize on south border when minHeight is set

If you reach the minimum height of dialog and continue with the shrink of the dialog you demage the south border resizer.

Resizable Columns in Grid Don't Work if uiLibrary Set

Run the resizable columns example from the Gijgo site:

http://gijgo.com/LiveEdit/Index/grid.ResizableColumns.resizableColumns.sample.html#

If you run it, the columns can be resized.

Now add this line of code at line 15:

uiLibrary: "bootstrap",

Run the example again. The columns can no longer be resized. This occurs with jqueryui for the uiLibrary as well.

The expected functionality is to have resizable columns regardless of the uiLibrary value.

Thanks!

D'Arcy

How to get DropDown List Working in GijGo Grid

How to add dropdown list in a specified cell and also how to get value for selected item in dropdown.

Detail Section hides row after reload

Grid is initiated with the below options and after a certain interval grid is reloaded with reload method. It works fine but with one problem. If I expand the first row and reload occurs, the detail section remains there only and hides the second row. If I try to expand/collapse the row again, a new detail section is created while the first one is still there. Strange part is when I try the same with the second row, it works fine. Here are some screenshots to help you understand the issue. I am still unable to identify the problem.

var options = {
	uiLibrary: "bootstrap",
	notFoundText: "No records found",
	dataSource: "/stats",
	columns: [
		{ field: "CampaignName", title: "Campaign" },
		{ field: "TotalCount", title: "Records Available", width: 75 },
		{ field: "AttemptedCount", title: "Calls Attempted", width: 85 },
		{ field: "TotalVoiceCount", title: "Answered (total)", width: 85 },
		{ field: "VoiceCount", title: "Answered (day)", width: 85 },
		{ field: "BusyCount", title: "Busy", width: 70 },
		{ field: "ClosedCount", title: "Closed", width: 70 }
	],
	detailTemplate: '<div class="row">' +
					'<div class="col-lg-6">' +
					'<div><b>Last Updated On:</b> {DateTime}</div>' +
					'<div><b>Wrong Numbers</b> {WrongNumberCount}</div>' +
					'<div><b>Callbacks:</b> {CallBackCount}</div>' +
					'<div><b>Total Abandoned:</b> {AbandonDetectCount}</div>' +
					'<div><b>Abandoned to IVR:</b> {AbandonToIvrCount}</div>' +
					'<div><b>Closed by Agent:</b> {AgentClosedCount}</div>' +
					'<div><b>Rejected by Agent:</b> {AgentRejectedCount}</div>' +
					'<div><b>Answering Machine:</b> {AnsweringMachineCount}</div>' +
					'<div><b>Cancelled:</b> {CancelledDetectCount}</div>' +
					'<div><b>Abandoned by Customer:</b> {CustomerAbandonDetectCount}</div>' +
					'</div>' +
					'<div class="col-lg-6">' +
					'<div><b>Customer Not Home:</b> {CustomerNotHomeCount}</div>' +
					'<div><b>Fax Machine:</b> {FaxDetectCount}</div>' +
					'<div><b>Network Answering Machine:</b> {NetworkAnsMachineCount}</div>' +
					'<div><b>No Answer:</b> {NoAnswerDetectCount}</div>' +
					'<div><b>No Dial Tone:</b> {NoDialToneDetectCount}</div>' +
					'<div><b>No Ring Back:</b> {NoRingBackDetectCount}</div>' +
					'<div><b>Personal Callbacks Scheduled:</b> {PersonalCallbackCount}</div>' +
					'<div><b>SITs detected:</b> {SitToneDetectCount}</div>' +
					'<div><b>Agent Talk Time (seconds):</b> {TalkTimeCount}</div>' +
					'<div><b>Agent Wrapup Time (seconds):</b> {WrapupTimeCount}</div>' +
					'</div>' +
					'</div>',
	pager: { enable: true, limit: 5, sizes: [5, 10, 20, 30] }
}

Internationalization Support or Custom Messages

Hi there,
Some messages can be customized using configuration options but there are still some labels or messages displayed in English.
Any plan to include support for multiple languages?

jqgrid is automatically chnaging dates as per timezone of local machine .

Hi ,

I have used jqgrid from your plugin. But there is slightly issue with datecolumn as it is automatically chnaging the dates as per timezone . Please suggets

e.stopPropagation() needs to be included for icon clicks

Show Image in grid

Hi,

I am not able to show image in this grid.

I am using

{ field: "Picture", tmpl: '' },

like this.

Please help where I am wrong.

Thanks Girish

Support for Custom Icons

Hi there,
Since the grid uses glyphicon icons by default for bootstrap, using any other icon library like font awesome is a little bit complicated. Is it possible to use a configuration option to specify different icons used in the grid.

Feature Request : Add Inline Search - with data bound to controls - Drop Down, Calendar & Etc

How can we add a inline search in responsive grid and use different controls to filter/search data

Features request -

• Can Search on column 1, Then further on Column 2(Kind of a filter on each column)
• Can use drop down control, calendar control to pick values for filtration.
• Also, if we can reorder columns by drag n drop will be awesome.

You can see a screen for reference here -

Can we achieve above defined functionality in responsive grid -