atatanasov / gijgo Goto Github PK
View Code? Open in Web Editor NEWGijgo - Free Javascript Controls
Home Page: http://gijgo.com
License: MIT License
Gijgo - Free Javascript Controls
Home Page: http://gijgo.com
License: MIT License
How to disable a single row on grid?
It seems the the gijgo site http://gijgo.com is not accessable now.
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,
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.
When you deselect row the 'select all' checkbox is still checked.
I have problem with
I should not select the row. it should be disabled for row selection when we use checkbox type selection method. How to implement this.
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.
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
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
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.
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.
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.
How to add dropdown list in a specified cell and also how to get value for selected item in dropdown.
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>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,
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
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
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.
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.
The loading overlay is not position correctly on reload of the gird.
How can we add a inline search in responsive grid and use different controls to filter/search data
Features request -
You can see a screen for reference here -
Can we achieve above defined functionality in responsive grid -
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.
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
How to merge columns or rows
If you reach the minimum height of dialog and continue with the shrink of the dialog you demage the south border resizer.
browser: Chrome
Last column stays in the details section on browser maximize.
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"},
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?
Hi this is Anand,
please guide me to the link where I can find filter option in your grid.
Cancel button cannot work on http://gijgo.com/Grid/Demos
The propagation of initialized, dataBound, pagechanging and rowDataBound events needs to be prevented.
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.
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.
Is there a way to show an image per user?
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>
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:
Thanks!
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
Sorting doesn't work with local datasource.
Works well only for remote datasources.
Inline editing stops working when you click very fast on cells
I am facing this issue @ gijgo.js
Exception : Uncaught ReferenceError: jQuery is not defined at gijgo.js:1080
Please reply soon.
Its very argent
Steps to reproduce ->
For your reference here you get the imp files & Screens -
Note - No change to GridModel.cs, Player.cs, SortHelper.cs files.
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] }
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.