How to show Qr Code in Kendo Grid? - javascript

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

Related

VSTS extensions - Hyperlinks in Grid Source

Made my own VSTS extension that returns a Grid with a list of bugs read using a wiql.
I want the (UI Control) Grid to include the bug title and hyperlink to the bug url so that it is possible to click on the title to jump to the bug. I could not find any possibility to do that, but I do not believe that it is not possible.
This is how I'm building my source to the grid:
var sourceArray = workItems.map(function (w) {
return [
w.id,
w.fields["System.Title"],
w.fields["System.State"],
w.fields["GrundfosScrum.gfSeverity"],
w.fields["GrundfosScrum.gfLikelihood"],
w.fields["System.AssignedTo"]];
});
And later:
var options = {
width: "100%",
height: "500px",
source: sourceArray,
columns: [
{ text: "ID", index: 0, width: 100, headerCss: "mystyle" },
{ text: "Title", index: 1, width: 200, headerCss: "mystyle" },
{ text: "State", index: 2, width: 100, headerCss: "mystyle" },
{ text: "Severity", index: 3, width: 200, headerCss: "mystyle" },
{ text: "Likelihood", index: 4, width: 200, headerCss: "mystyle" },
{ text: "Assigned To", index: 5, width: 300, headerCss: "mystyle" },
]
};
I tried to replace w.fields["System.Title"] with w.fields["System.Title"].link(w.url), the result was html hyperlink in the table instead of a hyperlink inside the grid.
Any ideas?
This is not supported by add link in the grid. But you can call Open row details method to to achieve the feature you want. Get the URL information and open a new window when the openRowDetail method is triggered.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Open Row Sample</title>
<script src="sdk/scripts/VSS.SDK.js"></script>
</head>
<body>
<script type="text/javascript">
VSS.init({
explicitNotifyLoaded: true,
usePlatformScripts: true,
usePlatformStyles: true
});
</script>
<h1>Open Row Sample</h1>
<div id="grid-container"></div>
<script type="text/javascript">
VSS.require(["VSS/Controls", "VSS/Controls/Grids"],
function (Controls, Grids) {
var dataSource = [];
dataSource.push({key: "VisualStudio", value: "https://www.visualstudio.com/"});
dataSource.push({key: "Bing", value: "https://www.bing.com/"});
var grid = Controls.create(Grids.Grid, $("#grid-container"), {
height: "1000px",
columns: [
{ text: "Property key", index: "key", width: 150 },
{ text: "Property value", index: "value", width: 600 }
],
source: dataSource,
openRowDetail: (index) => {
var info = grid.getRowData(index);
window.open(info.value);
}
});
VSS.notifyLoadSucceeded();
});
</script>
</body>
</html>
For anyone else is struggling with this like I was (as the documentation is pretty poor for the more granular stuff), I did it as follows.
Firstly, in the column definition in the later versions you just add a hrefIndex to the field you wish to bind e.g.
{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl' },
This works for the most part, but there doesn't appear to be (or at least, in the version I'm using) a binding for the target. So instead, I'd override the _drawCell function call as follows:
{ text: "Path", index: "path", width: 600, hrefIndex:'branchUrl', getCellContents : renderHref }
Where renderHref is:
var renderHref = function(rowInfo, dataIndex, expandedState, level, column, indentIndex, columnOrder){
var indent;
var cell = document.createElement('div');
cell.className = 'grid-cell';
var width = column.width || 20;
cell.style.width = isNaN(width) ? width : width + "px";
var jCell = $(cell);
var hrefText = this.getColumnValue(dataIndex,column.hrefIndex,-1);
var text = this.getColumnText(dataIndex,column,columnOrder);
jCell.append($("<a/>").attr("href", hrefText).attr('target','_blank').text(text));
return jCell;
};
Note that in my override I haven't bothered with the same logic as the original _drawCell for the indents etc., as I didn't need it.
This ensures that the hyperlink is rendered within the div container as a grid cell within the grid, and also allows you to set the target.

How to make column hidden in jsGrid?

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();

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.

A unique pop-up called from different buttons - ExtJS

My aim is simple, for some needs, I have to test the "pop-up function" in ExtJS via the widget.window.
I've created a button in HTML and a pop-u in a JS file, when I click it, everything works fine, the pop-up is well displayed.
The HTML button is coded this way :
<input type="button" id="popup-map" value="Pop Up"/>
And the JS refers to the button this way :
Ext.application({
name: 'popup',
launch: function() {
var popup,
button = Ext.get('popup-map');
button.on('click', function(){
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
header: {
titlePosition: 2,
titleAlign: 'center'
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 2
},
items: [
{
region: 'center',
xtype: 'tabpanel',
items: [
mappanel,
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau'
}
]
}
]
});
}
button.dom.disabled = true;
if (popup.isVisible()) {
popup.hide(this, function() {
button.dom.disabled = false;
});
} else {
popup.show(this, function() {
button.dom.disabled = false;
});
}
});
Problem, if I have two buttons that contains the id "popup-map", only the first one declared is working. I guess it's pretty normal the way I've coded it.
How can I call the popup contains in the JS file by clicking several buttons in HTML ?
Thanks :-)
Use a CSS class instead of a duplicated id. Duplicated ids are bad, you know that... Then use Ext.query instead of Ext.get. Your code should look something like this:
Ext.onReady(function() {
var popup;
function handler(button) {
if (!popup) {
// ...
}
// you've got button and popup, do your things
}
// adds the handler to every button with class 'popup-map' on the page
Ext.query('button.popup-map', function(button) {
button.on('click', handler);
});
});
I'm using Ext.onReady to wait for the DOM to be ready before searching for buttons on the page. That also gives us a closure for our local variables popup and handler.
Thanks to #rixo, here's the code working.
I've created a empty css class called customizer.
Ext.onReady(function() {
var popup, popup_visible;
function popup_constructor() {
//alert(this.getAttribute('pwet'));
if (!popup) {
popup = Ext.create('widget.window', {
title: 'Pop-Up',
id: 'popup',
header: {
titlePosition: 2,
titleAlign: 'center',
height: 30
},
border: false,
closable: true,
closeAction: 'hide',
width: 800,
minWidth: 400,
maxWidth: 1200,
height: 500,
minHeight: 550,
maxHeight: 800,
tools: [{type: 'help'}],
layout: {
type: 'border',
padding: 10
},
items: [
{
region: 'center',
xtype: 'tabpanel',
plain: true,
items: [
{
title: 'Carte',
html: 'On mettra la carte ici',
border: false,
},
{
title: 'Description',
html: 'Attributs de l\'objet sous forme de tableau',
border: false,
}
]
}
]
});
}
popup_visible = true;
if (popup.isVisible())
{
popup.hide(this, function() {
popup_visible = false;
});
}
else
{
popup.show(this, function() {
popup_visible = false;
});
}
}
var popup_show = Ext.query('.customizer');
Ext.each(popup_show, function (item) {
item = Ext.get(item);
item.on('click', popup_constructor);
}, this);
});

Add margins between items in the Ext.Panel

I have a Panel with two buttons that is used inside another panel. Right now it renders the buttons correctly but I'd like to add a margin between them. How to configure layout properly to get this ?
return Ext.create('Ext.panel.Panel', {
width: 220,
height: 35,
border: false,
collapsible: false,
renderTo: renderTo,
items : [
{
xtype: 'button',
scale: 'medium',
text: this.exportButtonText,
handler: function() {
var form = this.form.getForm();
if (form.isValid()) {
var values = form.getValues();
form.reset();
this.plugin.printSettings = values;
this.progressBar.show();
this.plugin.doPrint();
}
},
scope: this
},
{
xtype: 'button',
scale: 'medium',
text: this.cancelButtonText,
handler: function() {
me.close();
},
scope: this
}
]
});
Or add this to left button definition:
{
margin: '0 5px 0 0'
}
Add this in between them:
{
xtype: 'tbspacer',
flex: 1
}

Categories