Hello everyone,
I was playing around with grids, I read about the column filtering and I also saw the demo.
When I copy the same thing on my local in .html file grid is being rendered, also additional space for filter input as well but inputs are not visible, nor they are present under the inspect element.
When I place the same code on paramquery demo page, it works as expected.
What am I doing wrong ?
My code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://paramquery.com/pro2/Content/css7.2.0/pqgrid.min.css" type="text/css" rel="stylesheet">
<link href="https://paramquery.com/pro2/Content/css7.2.0/pqgrid.ui.min.css" type="text/css" rel="stylesheet">
<link href="https://paramquery.com/pro2/Content/css7.2.0/themes/office/pqgrid.css" type="text/css" rel="stylesheet">
<script src="https://paramquery.com/pro2/Content/js7.2.0/pqgrid.min.js"></script>
<script src="https://paramquery.com/pro2/Content/js/localize/pq-localize-en.js"></script>
<link rel="Stylesheet" href="https://paramquery.com/pqselect/trial/pqselect.min.css" />
<script src="https://paramquery.com/pqselect/trial/pqselect.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" type="text/css"
rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div id="grid" style="width: 500px; height: 300px;"></div>
<script>
$(function() {
var data = [
{ "ProductID": "17", "ProductName": "Alice Mutton", "QuantityPerUnit": "20 - 1 kg tins", "Discontinued": "YES" },
{ "ProductID": "3", "ProductName": "Aniseed Syrup", "QuantityPerUnit": "12 - 550 ml bottles", "Discontinued": "NO" },
{ "ProductID": "40", "ProductName": "Boston Crab Meat", "QuantityPerUnit": "24 - 4 oz tins", "Discontinued": "NO" },
{ "ProductID": "60", "ProductName": "Camembert Pierrot", "QuantityPerUnit": "15 - 300 g rounds", "Discontinued": "NO", "disabled": true },
{ "ProductID": "18", "ProductName": "Carnarvon Tigers", "QuantityPerUnit": "16 kg pkg.", "Discontinued": "NO" },
{ "ProductID": "1", "ProductName": "Chai", "QuantityPerUnit": "10 boxes x 20 bags", "Discontinued": "NO" },
{ "ProductID": "2", "ProductName": "Chang", "QuantityPerUnit": "24 - 12 oz bottles" },
{ "ProductID": "39", "ProductName": "Chartreuse verte", "QuantityPerUnit": "750 cc per bottle", "Discontinued": "NO" },
{ "ProductID": "4", "ProductName": "Chef Anton's Cajun Seasoning", "QuantityPerUnit": "48 - 6 oz jars", "Discontinued": "NO" },
{ "ProductID": "5", "ProductName": "Chef Anton's Gumbo Mix", "QuantityPerUnit": "36 boxes", "Discontinued": "YES" },
{ "ProductID": "48", "ProductName": "Chocolade", "QuantityPerUnit": "10 pkgs.", "Discontinued": "NO" },
{ "ProductID": "38", "ProductName": "Cte de Blaye", "QuantityPerUnit": "12 - 75 cl bottles", "Discontinued": "NO" },
{ "ProductID": "58", "ProductName": "Escargots de Bourgogne", "QuantityPerUnit": "24 pieces", "Discontinued": "NO" },
{ "ProductID": "52", "ProductName": "Filo Mix", "QuantityPerUnit": "16 - 2 kg boxes", "Discontinued": "NO" },
{ "ProductID": "71", "ProductName": "Flotemysost", "QuantityPerUnit": "10 - 500 g pkgs.", "Discontinued": "NO" },
{ "ProductID": "33", "ProductName": "Geitost", "QuantityPerUnit": "500 g", "Discontinued": "NO" },
{ "ProductID": "15", "ProductName": "Genen Shouyu", "QuantityPerUnit": "24 - 250 ml bottles", "Discontinued": "NO" },
{ "ProductID": "56", "ProductName": "Gnocchi di nonna Alice", "QuantityPerUnit": "24 - 250 g pkgs.", "Discontinued": "NO" },
{ "ProductID": "31", "ProductName": "Gorgonzola Telino", "QuantityPerUnit": "12 - 100 g pkgs", "Discontinued": "NO" },
{ "ProductID": "6", "ProductName": "Grandma's Boysenberry Spread", "QuantityPerUnit": "12 - 8 oz jars" }
];
var obj = {
scrollModel: { autoFit: true },
numberCell: { show: false },
title: "Testing Demo on local",
filterModel: { header: true, on: true },
height: 'flex',
pageModel: { type: "local", rPP: 10 },
colModel: [
{ title: "ID", width: 100, dataType: "integer", dataIndx: "ProductID" },
{ title: "Product Name", width: 220, dataType: "string", dataIndx: "ProductName",
filter: { condition: 'begin', type: 'textbox', listeners: ['keyup'] }
},
{ title: "Quantity Per Unit", width: 180, dataIndx: "QuantityPerUnit" }
],
dataModel: {
data: data
}
};
$("#grid").pqGrid(obj);
});
</script>
</body>
</html>
I have also attached the image of result of above mentioned code.
Thanks for reading till the end,
have a nice day.
