Related
How could I disable the pagination navigation buttons during an API request in AG Grid? I am using Vue.js if it matters.
E.g. here I would like to disable the controls while the API request is in progress. How could I do that?
var checkboxSelection = function (params) {
// we put checkbox on the name if we are not doing grouping
return params.columnApi.getRowGroupColumns().length === 0;
};
var headerCheckboxSelection = function (params) {
// we put checkbox on the name if we are not doing grouping
return params.columnApi.getRowGroupColumns().length === 0;
};
const columnDefs = [
{
field: 'athlete',
minWidth: 170,
checkboxSelection: checkboxSelection,
headerCheckboxSelection: headerCheckboxSelection,
},
{ field: 'age' },
{ field: 'country' },
{ field: 'year' },
{ field: 'date' },
{ field: 'sport' },
{ field: 'gold' },
{ field: 'silver' },
{ field: 'bronze' },
{ field: 'total' },
];
var autoGroupColumnDef = {
headerName: 'Group',
minWidth: 170,
field: 'athlete',
valueGetter: (params) => {
if (params.node.group) {
return params.node.key;
} else {
return params.data[params.colDef.field];
}
},
headerCheckboxSelection: true,
// headerCheckboxSelectionFilteredOnly: true,
cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
checkbox: true,
},
};
const gridOptions = {
defaultColDef: {
editable: true,
enableRowGroup: true,
enablePivot: true,
enableValue: true,
sortable: true,
resizable: true,
filter: true,
flex: 1,
minWidth: 100,
},
suppressRowClickSelection: true,
groupSelectsChildren: true,
// debug: true,
rowSelection: 'multiple',
rowGroupPanelShow: 'always',
pivotPanelShow: 'always',
enableRangeSelection: true,
columnDefs: columnDefs,
paginationAutoPageSize: true,
pagination: true,
autoGroupColumnDef: autoGroupColumnDef,
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function () {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((response) => response.json())
.then((data) => gridOptions.api.setRowData(data));
});
I found the example above in the documentation.
I'm using bxslider and I want to make only one slide appear when on tablet and mobile (768px and down), but when above 768px then I'd like 6+ slides to appear. Can anyone help me out with this please?
<script>
$(function(){
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
});
});
if ( $(window).width() < 768) {
var myslider = $('.bxslider').bxSlider({
...
maxSlides : 1,
});
}
else {
var myslider = $('.bxslider').bxSlider({
...
maxSlides : 4,
});
}
</script>
If anyone could help that would be amazing.
You can try to remove the first bxSlider() instance, you call it only inside of the conditions:
<script>
$(document).ready(function(){
$(function(){
if( $(window).width() < 768) {
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
maxSlides: 1
});
} else {
$('.bxslider').bxSlider({
captions: true,
speed: 900,
pause: 7000,
startSlide: 0,
infiniteLoop: true,
auto: true,
video: true,
touchEnabled: false,
pager: false,
maxSlides: 4
});
}
});
});
</script>
I'm using vue-awesome-swiper and it shows several pictures per slide. What could be probable cause?
Here is my pug:
.worklist_block-background
swiper.gallery-top(:options='swiperOptionTop', ref='swiperTop')
swiper-slide(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.bigImage')
.worklist_block-small
swiper.gallery-thumbs(:options='swiperOptionThumbs', ref='swiperThumbs')
swiper-slide.swiper__thumb-position(v-for='(item, idx) in swiperItems' :key='idx' :class='slide-'+(idx+1))
img(:src='item.smallImage')
.swiper-button-next(slot='button-next')
.swiper-button-prev(slot='button-prev')
and my data()
data: () => ({
swiperOptionTop: {
setWrapperSize: true,
},
swiperOptionThumbs: {
spaceBetween: 10,
centeredSlides: true,
slidesPerView: "auto",
touchRatio: 0.2,
slideToClickedSlide: true,
observeParents: true,
centeredSlides: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
},
I have jqgrid, which sends row's data to another view (MVC4) when row is selected. But when I edit row's info (I'm using inline edit) this view doesn't changed. And I can't find event that is taking place after inline edit. This is js, what should I change to change my view after row editing
$(function () {
$("#GridTable").jqGrid({
url: "/Goods/GoodsList",
editurl: "/Goods/Edit",
datatype: 'json',
mtype: 'Get',
colNames: ['GoodId', 'Имя', 'Цена'],
colModel: [
{ key: true, hidden: true, name: 'GoodId', index: 'GoodId', editable: true },
{
key: false, name: 'GoodName', index: 'GoodName', editable: true, sortable: true,
editrules: {
required: true, custom: true, custom_func: notATag
}
},
{
key: false, name: 'Price', index: 'Price', editable: true, sortable: true, formatter: numFormat,
unformat: numUnformat,
//sorttype: 'float',
editrules: { required: true, custom: true, custom_func: figureValid}
}, ],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 25, 50, 100],
height: '100%',
viewrecords: true,
caption: 'Список товаров',
sortable: true,
emptyrecords: 'No records to display',
cellsubmit : 'remote',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
//to get good's full view when row is selected
onSelectRow:
function () {
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
//to change good's full view after row deleting
loadComplete: function(data){
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
},
autowidth: true,
multiselect: false
}).navGrid('#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{
// edit options
zIndex: 100,
url: '/Goods/Edit',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
{
// add options
zIndex: 100,
url: "/Goods/Create",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{
// delete options
zIndex: 100,
url: "/Goods/Delete",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this task?",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
});
$('#GridTable').inlineNav('#pager', {
edit: true,
add: false,
del: false,
cancel: true,
editParams: {
keys: true,
afterSubmit: function (response) {
if (response.responseText) {
alert(response.responseText);
}
var myGrid = $('#GridTable'),
selRowId = myGrid.jqGrid('getGridParam', 'selrow'),
celValue = myGrid.jqGrid('getCell', selRowId, 'GoodId');
$.ajax({
url: "/Goods/DetailInfo",
type: "GET",
data: { id: celValue }
})
.done(function (partialViewResult) {
$("#goodDetInfo").html(partialViewResult);
});
}
},
});
});
The properties and callback function of editParams parameter of inlineNav can be found here. What you need is probably aftersavefunc or successfunc instead of afterSubmit, which exist only in form editing method (see here). The parameters of aftersavefunc or successfunc callbacks are described here (as parameters of saveRow), but the parameters depend on the version of jqGrid, which you use and from the fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). I develop free jqGrid fork and I would recommend you to use the current (4.13.3) version of free jqGrid.
The problem im facing is I can't populate a Jqgrid from database, it just show me the data in Json format.
View (ListarDistritos)
#model IEnumerable<Entidades.Base.ENDistrito>
<script src="#Url.Content("~/Scripts/Base/modGrid.js")"></script>
<script src="#Url.Content("~/Content/JqueryGrid/jquery-1.9.0.min.js")"></script>
<link href="#Url.Content("~/Content/JqueryGrid/jquery-ui-1.9.2.custom.css")" rel="stylesheet" />
<script src="#Url.Content("~/Content/JqueryGrid/jquery.jqGrid.js")"></script>
<link href="#Url.Content("~/Content/JqueryGrid/ui.jqgrid.css")" rel="stylesheet" />
<script src="#Url.Content("~/Content/JqueryGrid/grid.locale-en.js")"></script>
<link href="#Url.Content("~/Content/estilo.css")" rel="stylesheet" />
<h2>#ViewBag.Message</h2>
<table id="grid">
</table>
<div id="pager"></div>
ModGrid.JS
var lastsel;
$(document).ready(function() {
$("#grid").jqGrid({
url: '/MantDistritos/ListarDistritos',
datatype: "json",
mtype: 'GET',
colNames: ['Id', 'Descripcion'],
colModel: [
{
name: 'IdDistrito', index: 'IdDistrito', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
},
{
name: 'DescripcionDistrito', index: 'DescripcionDistrito', sortable: false, align: 'left', width: '200',
editable: true, edittype: 'text'
}
],
jsonReader: {
repeatitems: false,
id: "0"
},
pager: jQuery('#pager'),
sortname: 'DescripcionDistrito',
rowNum: 10,
rowList: [10, 20, 25],
sortorder: "",
height: 125,
viewrecords: true,
rownumbers: true,
caption: 'Distritos',
width: 750,
editurl: "/Home/PerformCRUDAction",
onCellSelect: function (rowid, iCol, aData) {
if (rowid && rowid !== lastsel) {
if (lastsel)
jQuery('#grid').jqGrid('restoreRow', lastsel);
jQuery('#grid').jqGrid('editRow', rowid, true);
lastsel = rowid;
}
}
})
jQuery("#grid").jqGrid('navGrid', '#pager', { edit: false, add: true, del: true, search: false, refresh: true },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterEdit: true, left: 400, top: 300 },
{ closeOnEscape: true, reloadAfterSubmit: true, closeAfterAdd: true, left: 450, top: 300, width: 520 },
{ closeOnEscape: true, reloadAfterSubmit: true, left: 450, top: 300 });
});
controller(MantDistritos)
public class MantDistritosController : Controller
{
public JsonResult ListarDistritos()
{
ViewBag.Message = Resources.Language.Title_Page_MTD_L;
var distrito = new LNClientes().DistritoListar();
return Json(distrito,JsonRequestBehavior.AllowGet);
}
}
When i execute the application it shows me this
[{"IdDistrito":1,"DescripcionDistrito":"MAGDALENA DEL MAR"},{"IdDistrito":2,"DescripcionDistrito":"JESUS MARIA"},{"IdDistrito":3,"DescripcionDistrito":"PUEBLO LIBRE"},{"IdDistrito":4,"DescripcionDistrito":"LIMA 36"},{"IdDistrito":5,"DescripcionDistrito":"BARRANCO"},{"IdDistrito":6,"DescripcionDistrito":"MIRAFLORES"},{"IdDistrito":7,"DescripcionDistrito":"SAN ISIDRO"},{"IdDistrito":8,"DescripcionDistrito":"SAN JUAN DE LURIGANCHO"},{"IdDistrito":9,"DescripcionDistrito":"SAN JUAN DE MIRAFLORES"},{"IdDistrito":10,"DescripcionDistrito":"LOS OLIVOS"},{"IdDistrito":11,"DescripcionDistrito":"COMAS"},{"IdDistrito":12,"DescripcionDistrito":"SURCO"}]
But it didn't show me any data inside the Jquery grid.
If i use ActionResult instead of JsonResult it shows me the Jquery grid but with no data.
Any clue to solve my issue would be appreciate
Thanks.
your json data seems to be fine. i find no error. Seems there is an error in your jsonReader. ID is the name of the Column. it should be of the form
jsonReader : {
root:"data", // Here your posted json data
page: "currpage", // shows current page
total: "totalpages", // total pages
records: "totalrecords" // total records
},
this url may help you to understand better. JsonReader wiki
And if you dont want to be bother about pages and total you can simply
jsonReader : {
root:"data",
page: function(obj) { return 1; }, // page as 1
total: function(obj) { return 1; }, // total as 1
records: function(obj) { return reponse.length;},
},