Why does BootstrapTable work just once? - javascript

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".
function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}
When running that code, I get in my console 1 Print, 3 Print and son on, but the table just doesn't do anything.
This is the first table, including the event which as I said before, works everytime:
function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}
Any idea what it could be?

This approach of bootstrapping the table again should be avoided. Handle this in the following way.
On document ready
$(document.ready(function() {
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
$('div#tableProds').bootstrapTable({
data: [],
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
}
On selection of item
function getProductos(iSeldCat) {
$('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}
I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

Related

Kendo Grid - pass over edited values in button click

Im relatively new to javascript/jquery so forgive me if this sounds like a silly question.
I have a Kendo UI grid which is bound to a url from a controller method. This all works fine, but I want the user to be able to change the value on some of the fields. I have enabled the 'editable' flag on the table itself to allow these values to be changed, but when the button is clicked, it passes over the original value instead of the updated ones. Am i missing something simple?
<div id="productlist-grid"></div>
<script>
$(function() {
$("#productlist-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "#Html.Raw(dataUrl)", type: "POST", dataType: "json", data: additionalData }
},
schema: { data: "Data", total: "Total", errors: "Errors" },
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(gridPageSizes)]
},
editable: true,
scrollable: false,
columns:
[
{ field: "ProductPictureUrl", title: "Picture", template: '<img src="#=ProductPictureUrl#" />', width: 100, editable: false },
{ field: "ProductName", title: "Product Name", editable: false },
{ field: "ProductSku", title: "Sku", editable: false},
{ field: "Quantity", title: "Quantity", type: "number"},
{ field: 'SplitPack', title: 'Split Pack', template: kendo.template($("#template").html())},
{ field: "AddToCart", title: "", template: 'Add To Cart', editable: false}
]
});
});
</script>
Many Thanks in advance!!

KendoUI Grid footer extras from returned JSON

I have the following JSON being returned from my PHP script to populate my Kendo grid:
data: [{id:1, sku:-, theName:Two tier wedding veil, basePrice:77.00, dimensions:-, weight:-,…},…]
querytime: "0.0000"
rowcount: 4
Which works great. As you can see I have added an extra parameter called "querytime".
How do I access that on the JS side of things so I can append that to the footer of the grid?
I have tried:
console.log($('#productGrid').data("kendoGrid").dataSource);
To try and find where my extra parameter is located but to no avail.
How can I access my customer parameter?
var columns = [
{
field: 'dateRaw',
title: 'Date added',
width: '90px',
template: '<span class="data" data-menu-id="1" data-item-id="#=id#" data-item-type="products"><abbr title="At #=time#">#=dateFormatted#</abbr></span>'
},
{
field: 'sku',
title: 'SKU',
width: '120px'
},
{
field: 'theName',
title: 'Name'
},
{
field: 'dimensions',
title: 'Dimensions',
//width: '120px'
},
{
field: 'weight',
title: 'Weight',
width: '80px'
},
{
field: 'basePrice',
title: 'Price',
width: '60px',
format: '{0:n}'
}]
$('#productGrid').kendoGrid({
rowTemplate: '',
dataSource: {
transport: {
read: {
type: 'POST',
dataType: 'json',
url: 'Ajax',
data: {
call: 'Product->productGrid'
}
}
},
schema: {
data: 'data',
querytime: 'querytime',
total: 'rowcount',
model: {
id: 'id',
fields: {
dateRaw: {
type: 'date'
},
id: {
type: 'number'
},
sku: {
type: 'string'
},
basePrice: {
type: 'number'
}
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
error: function(e) {
modalError(e.errorThrown + "<br/>" + e.status + "<br/>" + e.xhr.responseText)
}
},
height: 700,
autoBind: false,
filterable: true,
sortable: true,
pageable: true,
columns: columns
})
you are pretty close:
querytime is available inside the options object of your dataSource:
$('#productGrid').data('kendoGrid').dataSource.options.querytime

First Load Kendo UI Grid

I have a problem with Kendo UI Grid. When I load the data (from an async request that return a json data format), the grid does not render rightly the footer of the grid. When I click to order or page the grid, it render fine. My question is: How to correct this bug?
Look the images.
First load:
After the sort by code, the footer looks ok.
If someone knows how can I correct this bug and share it, I really appreciate.
Thank you.
Client side code (Kendo Version: v2012.3.1114)
<script>
var grid;
$(document).ready(function () {
var serviceUrl = "#Url.Action("GetAsyncData", "Home")";
grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
dataType: "json",
url: serviceUrl,
cache: false
}
},
schema: {
data: "data",
total: "count",
model: {
id: "Id"
}
}
},
height: 400,
toolbar: [{ text: "New", className: "add-button" }],
groupable: true,
sortable: true,
pageable: false,
selectable: true,
resizable: true,
columns: [
{
field: "Code",
title: "Cód.",
width: "150px",
filterable: true,
groupable: false,
sortable: true,
resizable: true
},
{
field: "Name",
title: "Nome",
filterable: true,
groupable: false,
sortable: true,
resizable: true
}, {
field: "Contact",
title: "Contato",
encoded: false,
filterable: true,
groupable: true,
sortable: true,
resizable: true
},
{ command: { name: "Editar", text: "", className: "edit-button custom-button edit" }, title: "", width: "50px", filterable: false, sortable: false, groupable: false, resizable: false },
{ command: { name: "Detalhes", text: "", className: "detail-button custom-button detail" }, title: "", width: "50px", filterable: false, sortable: false, groupable: false, resizable: false },
{ command: { name: "Excluir", text: "", className: "delete-button custom-button delete" }, title: "", width: "50px", filterable: false, sortable: false, groupable: false, resizable: false }
]
}).data("kendoGrid");
$("#grid").delegate(".add-button", "click", function (e) {
window.location = '#Url.Action("Create")';
});
});
</script>
<div id="grid"></div>
What version of Kendo are you using? I am not able to replicate the behavior using Q3 version

How to rearrange KendoGrid Tab Order?

I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?
My Mark-UP:
<div id="employeeGoalsGrid"></div>
My Javascript:
var goalsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
type: 'POST',
contentType: 'application/json'
},
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json'
//dataType: "jsonp"
},
parameterMap: function (options, type) {
debugger;
$.extend(options, { ID: options.id });
return JSON.stringify(options);
}
},
batch: false,
schema: {
model: {
id: 'ID',
fields: {
id: { editable: false, nullable: false },
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false, nullable: true },
TeamName: { editable: false, nullable: true },
PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
}
}
},
sortable: true,
filterable: true,
columnMenu: true
});
$('#employeeGoalsGrid').kendoGrid({
dataSource: goalsDataSource,
navigatable: true,
sortable: true,
resizable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "FirstName", title: "First Name", width: 200},
{ field: "LastName", title: "Last Name", width: 200 },
{ field: "Title", title: "Title", width: 200 },
{ field: "TeamName", title: "Team", width: 200 },
{ field: "PointsGoal", title: "Goal", width: 200 }],
editable: true,
filterable: true,
});
Any suggestions would be greatly appreciated.
To skip cell you need to use tabindex="99999"
I created a jsfiddle for testing purposes: http://jsfiddle.net/danieltulp/kfG7y/
I think you need to look at using attributes: { tabindex: "999999" } in
{ field: "UnitsInStock", title: "Units In Stock", width: 110, attributes: { tabindex: "999999" } }
but this doesn't seem to work. Anyone a better idea?
Perhaps this just isn't possible?
Can you try changing the editable property on the grid options from true to "inline" and let me know if that fixes the issue? I've created a similar scenario in this JSBin and the tab order works fine (Chrome on OSX) when I edit a row.

ExtJS Ext.Msg causes the grid headers disappear on IE6 and IE7 when using the RTL support for ExtJS 3.0

ok here is my code:
I a using RTL support for ExtJS 3.0 from
RTL support for ExtJS 3.0
var store = new Ext.data.JsonStore({
root: 'results',
baseParams: {
actionName: 'SearchDynamicArchive',
xmlFileName: 'Demo.xml'
},
totalProperty: 'totalCount',
idProperty: 'id',
remoteSort: false,
fields: ['fileName', 'cbDocType', 'cbDocSubject', 'txtDocDate', 'txtDocName', 'cbInitiativeDepartment', 'cbDepartmentInitiates', 'cbBuyerDepartment', 'cbEconomist', 'txtDemandNumber', 'txtCallNumber', 'txtSupplier', 'uploadDate', 'userName'],
url: 'DynamicActionsHandler.ashx',
autoLoad: {
params: {
limit: 30,
start: 0,
actionName: 'SearchDynamicArchive',
siteID: 'e60b36f9-2e62-4425-b015-5de58325aaa8',
panelId: 'bzqSearchPanel',
xmlFileName: 'Demo.xml'
}
}
});
var grid = new Ext.grid.GridPanel({
title: '',
store: store,
trackMouseOver: true,
disableSelection: true,
loadMask: false,
columns: [{
id: 'srf2',
header: '<b>שם צרופה</b>',
dataIndex: 'fileName',
width: 'auto',
sortable: true
}, {
id: 'cbDocType',
header: '<b>סוג מסמך</b>',
dataIndex: 'cbDocType',
width: 'auto',
sortable: true
}, {
id: 'cbDocSubject',
header: '<b>נושא מסמך</b>',
dataIndex: 'cbDocSubject',
width: 'auto',
sortable: true
}, {
id: 'txtFromDocDate',
header: '<b>תאריך מסמך</b>',
dataIndex: 'txtDocDate',
width: 'auto',
sortable: true
}, {
id: 'txtDocName',
header: '<b>שם מסמך</b>',
dataIndex: 'txtDocName',
width: 'auto',
sortable: true
}, {
id: 'cbInitiativeDepartment',
header: '<b>חטיבה יוזמת</b>',
dataIndex: 'cbInitiativeDepartment',
width: 'auto',
sortable: true
}, {
id: 'cbDepartmentInitiates',
header: '<b>אגף יוזם</b>',
dataIndex: 'cbDepartmentInitiates',
width: 'auto',
sortable: true
}, {
id: 'cbBuyerDepartment',
header: '<b>ממ"ח רכש</b>',
dataIndex: 'cbBuyerDepartment',
width: 'auto',
sortable: true
}, {
id: 'cbEconomist',
header: '<b>כלכלן</b>',
dataIndex: 'cbEconomist',
width: 'auto',
sortable: true
}, {
id: 'txtDemandNumber',
header: '<b>מספר דרישה</b>',
dataIndex: 'txtDemandNumber',
width: 'auto',
sortable: true
}, {
id: 'txtCallNumber',
header: '<b>מספר התקשרות</b>',
dataIndex: 'txtCallNumber',
width: 'auto',
sortable: true
}, {
id: 'txtSupplier',
header: '<b>ספק</b>',
dataIndex: 'txtSupplier',
width: 'auto',
sortable: true
}, {
id: 'txtFromDocUploadDate',
header: '<b>תאריך העלאה</b>',
dataIndex: 'uploadDate',
width: 'auto',
sortable: true
}, {
id: 'userName',
header: '<b>שם משתמש</b>',
dataIndex: 'userName',
width: 'auto',
sortable: true
}],
stripeRows: true,
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true
},
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
,
bbar: [new Ext.PagingToolbar({
id: 'paging-bar',
pageSize: 30,
store: store,
displayInfo: true,
displayMsg: localize.displayPages,
emptyMsg: localize.noDocsToDisplay,
listeners: {
beforechange: onBeforePageChange
}
})],
listeners: {
rowcontextmenu: onRowcontextmenu,
rowdblclick: function (g, ri, e) {
downloadFile(store.getAt(ri).id);
},
render: function (grid) {
grid.getEl().on("contextmenu", Ext.emptyFn, null, {
preventDefault: true
});
}
},
contextMenu: new Ext.menu.Menu({
items: [{
pressed: false,
enableToggle: false,
text: localize.updateRecord,
id: 'update_attachment'
}, {
pressed: false,
enableToggle: false,
text: localize.deleteRecord,
id: 'delete_attachment'
}, {
pressed: false,
enableToggle: false,
text: localize.downloadRecord,
id: 'download_attachment'
}],
listeners: {
itemclick: onItemclick
}
}),
autoExpandColumn: 'userName',
id: 'searchResultPanel',
enableColumnResize: true
});
Ext.onReady(function () {
var dynamic_grid = new Ext.Container({
layout: 'fit',
items: grid,
renderTo: 'dynamic_grid'
})
onPageResize();
window.onresize = onPageResize;
});
now when I pop up an Ext.Msg alert it comes with a masking layer that makes the grid header disappear.
Where should I look for a remedy here??
Any help will be appropriated...
Are you sure that you want to use Ext.MessageBox? If you refer to the API, this component differs from the regular javascript alert() in that it does not halt execution of code because it is asynchronous.
If you are intending to stop all execution of code until the user presses "OK" on the alert box, you should just stick to plain-old alert();

Categories