How to make column hidden in jsGrid? - javascript

I am using jsGrid in my project and now I am stuck here to hide a column that is being used in code but should not be displayed in page.
The grid I am using is : jsGrid
I have tried to take input control hidden but, still it doesn't work.
The following code is defines the columns of grid where I have taken hidden field for AccountID. but, it doesn't work.
Code:
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", type: "hidden", width: 0}
]

Since v1.3 jsGrid fields have an option visible
http://js-grid.com/docs/#fields
If you need to hide (or show) a field at runtime, it can be done like the following:
$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);

Try this below code.
create a css class like below
.hide
{
display:none;
}
And assign the css property to the field like below
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", css: "hide", width: 0}
]
Hope this will help you.

fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]

fields: [{
name: "<FIELD NAME>",
visible: false
}
]

hidden very simple, make it like this example :
{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}
where css class hide from bootsrap

In my case we started our application to show a column in JSGrid and went all the way to production. Later there was a need to hide that column but I used that column to do custom sorting. So this is how I did
My styles
.idStyle:
{
color: red;
}
Created new style
.hiddenStyle:
{
display: none;
}
Below are my jsGrid Fields
var jsGridField =
[
{ name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
{ name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]

No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>
When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience .
For solving this we can use hide and show the css element on modifying the CSS class
For Hiding :
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();
For Showing :
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

Related

How to use custom sass in Ext JS 7

I have been trying to change the button colour in a form I have created on Ext JS v7.0.0.40
Login.js location is app\modern\src\view\main\Login.js
extend: "Ext.form.Panel",
xtype: "form-login",
title: "Login Form",
bodyPadding: 20,
width: 320,
autoSize: true,
items: [
{
xtype: "textfield",
allowBlank: false,
required: true,
label: "User ID",
name: "user",
placeholder: "user id"
},
{
xtype: "passwordfield",
allowBlank: false,
required: true,
label: "Password",
name: "pass",
placeholder: "password"
},
{
xtype: "checkbox",
boxLabel: "Remember me",
name: "remember"
}
],
buttons: [
{
text: "Login",
handler: "onLogin"
}
]
});
Login.sass location is app\modern\sass\var\view\main\Login.sass
.form-login {
.button {
background-color: #ff3737;
}
}
For some reason I cannot get the color of the button to be changed, I'm sure this has a pretty simple fix.
Thanks in advance!
Welcome to Stack Overflow:
You did not set the cls (custom class for the element) for the form.
And the button styling for the background-color is done in a subelement:
scss file:
.form-login {
.x-button .x-inner-el {
background-color: #ff3737;
}
}
https://fiddle.sencha.com/#view/editor&fiddle/325q
Further information:
To find out yourself, you can inspect the button and see that,
the button cls is x-button
adding the background color to the x-button will not help
going further down inside the x-button is the x-button-el and adding the background color there will acutally change the color.
The scss file should go parallel to the form-login file, but you do not have to do that.
If you plan to use this type of color
more often: Use a cls and create a custom component with that style
always: Take a look at the documentation to change the button background color in your theme

Binding datasource to Kendo Grid where some field may not be present in JSON

I have a Kendo Grid and the data is bound with results from a webApi. Below is a snapshot of the code. This is used to render the Kendo Grid. Now in the JSON result there could be cases where the field 'nominalVoltage' will not be there. In other words some results may return the field, some may not. In case the field is not returned the code fails. I will get error like field is undefined.
Can this be handled anyway while loading Kendo grid controls?
$scope.columns = [{
field: 'businessCode',
title: 'Business Code',
width: '120px',
}, {
field: 'nominalVoltage',
title: 'Nominal Voltage',
width: '120px'
}];
var options = {
dataSource: {
data: data
},
width: '100%',
resizable: true,
sortable: true,
scrollable: true,
reorderable: true,
dataBinding: function (e) {
var pageSizes = e.sender.dataSource.pageSize() || 20;
},
pageable: {
pageSize: pageSize,
pageSizes: [5, 10, 20, 50, 100, 200],
refresh: true
},
columns: $scope.columns
};
You could apply a conditional template attribute on the grid column which requires validation:
field: 'nominalVoltage',
title: 'Nominal Voltage',
width: '120px',
template: "#if(nominalVoltage) {#:nominalVoltage#} else{'Oops nothing found'}#"
Or the template as a function,
template: validateNominalVoltage
function validateNominalVoltage(dataItem) {
return dataItem.nominalVoltage ? dataItem.nominalVoltage : 'Oops nothing found';
}
Usually this method is used to modify how data is being displayed i.e. bolding content, using an external HTML template but in your case this will work fine for checking if the nominalVoltage attribute contains a value before displaying.
You can set a schema for your data.
schema: {
model: {
businessCode: { type: "string" },
nominalVoltage: { type: "number" },
}
}
You can define template like below
//field: 'nominalVoltage', // do not include it
template: function(data) {
return data.nominalVoltage ? data.nominalVoltage : "";
},
title: 'Nominal Voltage',
width: '120px'

How to show Qr Code in Kendo Grid?

This is my div but it outside kendo grid
<div>
<div id="qrUrl"></div>
</div>
This is my kendo grid field
columns: [
{
field: "Id",
},
{
title: "QrCode",
width: 300,
template: function(dataItem)
{
$(#Qrurl).kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
In this situation my Qrcode generated outside grid with uniq (url+id )
but i want to this all qrcode in my kendo grid.
i tried servel time this and another code but still not reached up to mark.
template: function(dataItem)
{
$('<div></div>')
.kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
If i tried with div id at that time i got qrcodes as per requirement but outside grid here, i want to complete this thing in my grid.
Please help me.
Thank you for advance.
The template function needs to return a string of the HTML that will be used. I would have the template create an empty DIV in the grid cell with a class="QRME" and a data attribute for the id. Then in the dataBound event of the grid, loop through all the QRME divs, get the id and create the QR codes:
$("#grid").kendoGrid({
columns: [ {
field: "Id",
}, {
title: "QrCode",
width: 300,
template: function(dataItem) {
return "<div class='QRME' data-id='" + kendo.htmlEncode(dataItem.Id) + "'></div>";
}
}],
dataSource: [ { Id: "1" }, { Id: "2" }, { Id: "3" } ],
dataBound: function(e) {
$("div.QRME").each(function(idx){
$(this).kendoQRCode({
value: "www.google.com"+ $(this).data("id"),
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
});
}
});
Working DEMO
I can't use dataBound and therefore I was looking for a solution that works with template.
First I make a div instance and put the QR code there and return outerHTML.
template: function(dataItem) {
return jQuery("<div class='qrcode'></div>")
.kendoQRCode({
value: kendo.htmlEncode(dataItem["Id"]),
errorCorrection: "M",
size: 60,
border: {
color: "#000",
width: 1
}
}).html();
}
working DEMO

Bootstrap datetimepicker calendar is not visible

I am using bootstrap 3 datetimepicker. Here Bootstrap datetimepicker calendar is not visible outside the grid. It is hiding inside the grid. Please see the jsfiddle.
http://jsfiddle.net/rtzxsa3e/
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
{ rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
];
var obj = {
height:300,
title: "ParamQuery Grid with JSON Data",
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false,
render : function(){
var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
return date;
}
},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
];
$('body').on('mouseover','.input-group',function() {
$(".input-group.date").datetimepicker();
});
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
td.pq-grid-cell{
overflow:visible !important;
}
span.input-group-addon {
width: 27px;
}
<div id="grid_json" style="margin:100px;"></div>
If I click the picker, bootstrap calendar is open but it is not visible the whole calendar. I want to display the calendar outside the grid. I have given "overflow:visible" and "visibility:visible" but still it is not working. Please help me for do this.
You need to remove overflow:hidden; from parent containers also.
Add this css:
.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
overflow: visible!important;
}
Demo: http://jsfiddle.net/rtzxsa3e/2/
I am not supporting the use of !important here. You know your html code well. If you can assign more specific selector which can override the default css of grid plugin, then that will also work.

jquery grid not filled with JSon data

Hi I am not able to get the data from JSON loaded on to grid,
HEre is my code for the grid wich displays the stock prices for the stock for a user :
$(document).ready(function () {
// $("#jQGrid").html("<table id=\"list\"></table><div id=\"page\"></div>");
jQuery("#jqTable").jqGrid({
url:jqDataUrl,
datatype: "json",
mtype: "POST",
height: 250,
// Specify the column names
colNames: ["SYMBOL", "LAST", "CHANGE", "%CHANGE","HIGH/LOW"],
// Configure the columns
colModel: [
{ name: "SYMBOL", index: "SYMBOL", width: 200, align: "left" },
{ name: "LAST", index: "LAST", width: 200, align: "left" },
{ name: "CHANGE", index: "CHANGE", width: 200, align: "left" },
{ name: "%CHANGE", index: "%CHANGE", width: 200, align: "left"},
{ name: "HIGH/LOW", index: "HIGH/LOW", width: 200, align: "left"}
],
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "cell",
id: "id",
},
multiselect: false,
// paging: true,
// rowNum:10,
// rowList:[10,20,30],
pager: $("#jqTablePager"),
loadonce:true,
caption: "WatchList"
}).navGrid('#jqTablePager',{edit:false,add:true,del:true});
}
});
But when i try and run the code i am not able to get the contents on to the table (but the grid loads with no content)
And My json is of the form :
{
total: "1",
page: "1",
records: "2",
rows :
[
{id:"1", cell:["cell11", "cell12", "cell13","cell13","cell13"]},
{id:"2", cell:["cell21", "cell22", "cell23","cell13","cell13"]}
]
}
Please help me solve the problem
UPDATE:
I discovered that if you do not put repeatitems:true option into json reader, jqGrid assumes that you are using json dot notation. When you put it into jsonReader, your data is properly loaded. Here is working example: http://jsfiddle.net/a5e5F/3/
Old version:
I played a lot with your jqgrid code, and it seems that there is a bug in this version of jqGrid, which causes your jsonReader not to work. It reads data directly, ignoring root element and assuming that your data is array of json objects in format
{propertyName1:'PropertyValue1', propertyName2:'PropertyValue2', ...}
You can see what I mean on http://jsfiddle.net/a5e5F/2/
If you replace data:rows with data:data (your format of data), it does not load data. Maybe you should try to change your json data to use real json format (with properties named as columns)?
I have been trying a ton of stuff, changing column names to check for issue in #Barmar's coment, which I also thought it is the cause.

Categories