Telerik Kendo UI with SharePoint List Items - sharepoint

I am trying to create a grid with the help of Telerik Kendo UI which will show SharePoint data. To fetch data I am using SharePoint oData service.
I got an example of similer functionality here http://demos.telerik.com/kendo-ui/grid/remote-data-binding
And tried below code
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://server/_api/Web/Lists(guid'guid of list')/Items"
},
schema: {
model: {
fields: {
Title: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"Title"
}
]
});
});
</script>
</div>
</body>
</html>
And got below error
Refused to execute script from
'http://server/_api/Web/Lists(guid'listguid50387715207_1459178447636&%24inlinecount=allpages&%24format=json&%24top=20'
because its MIME type ('application/atom+xml') is not executable, and
strict MIME type checking is enabled.


You might want to change the transport-property to
transport: {
read: {
url: "http://server/_api/Web/Lists(guid'guid of list')/Items",
beforeSend: function (xhr) {
xhr.setRequestHeader("Accept", "application/json; odata=verbose")
}
}
}
in order to force sharepoint to return json-data instead of atom+xml (which is the default if you ommit the accept-header).

Related

express handlebars template wont render partial

this problem has got me almost depressed..
not so long ago this whole app worked but recently (probably more than 3 months, perhaps 6) one of my routes refuses to render any handlebars template I pass it, including ones that are rendering successfully via other routes.
this is the offending route:
app.get('/ListContentItems', function (req, res, next) {
try{
getAuthToken().then(authToken =>{
axios({
method:"get",
// url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page="+req.params.page+"&size="+req.params.size,
url: "https://"+cmsEnvironment+"/content-repositories/"+respositoryId+"/content-items?page=0&size=2",
headers:{
"Authorization": "Bearer " + authToken
}
})
.then(response => {
var contentGraph = response.data;
var stringContent = JSON.stringify(response.data,null,'\t');
console.log(stringContent);
res.render("list-content-items",{
static_path:'/static',
theme:process.env.THEME || 'flatly',
pageTitle : "List Content Items",
pageDescription : "List Content Items",
reqParams : req.query,
contentGraph : contentGraph._embedded,
stringContent : stringContent
})
// res.render('list-content-items',{static_path:'/static','pageTitle':'List Content Items - Success','contentGraph': contentGraph._embedded, 'stringContent' : stringContent, 'reqParams': req.query});
})
.catch(error => {
console.log(error);
res.render('list-content-items',{'pageTitle':'List Content Items - Fail','reqParams': req.query, 'error':error});
});
})
.catch(error => {
console.log(error);
next(error);
})
}
catch (e) {
next(e)
}
/* res.render('list-content-items',{title:"List Content Items",error:"figure out how to authorize so that i can list the content items and create links.."}) */
})
this is the template:
{{> header }}
{{#each contentGraph }}
{{#each this}}
{{log this}}
{{this.id}}
{{#each this}}
{{#if (eq this._meta.schema 'http://www.coops.net/draping-config')}}
{{this.label}}<br />
{{else if (eq this._meta.schema 'http://c1-qa.adis.ws/c/cmslabs/content-stack')}}
{{this.label}}<br />
{{else}}
{{this.label}}<br />
{{/if}}
{{/each}}
{{/each}}
</div>
{{/each}}
{{> footer }}
this is the log output:
{ id: '3fae61b6-56ef-4c31-9c53-40f45131b435',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'Image Block 2',
schema: 'http://c1-qa.adis.ws/c/cmslabs/image-block' },
image:
{ _meta: [Object],
id: 'b7a1bced-e921-42ab-baef-b5aa43cd3701',
name: 'Fashion_Womens_Collection_SSS',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
editorial:
{ callToAction: [Object],
useParentAsCtaHotspot: false,
title: 'This coat is far too big',
text: 'but it\'s trendy',
overlayAlignment: 'Top Left',
overlayTheme: 'Darken',
alignCopyText: 'center' },
aspectRatio: { w: 4, h: 3 } },
version: 1,
label: 'Image Block 2',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2020-08-11T13:45:50.420Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2020-08-12T19:39:12.261Z',
lastPublishedVersion: 1,
lastPublishedDate: '2020-08-12T19:39:11.301Z',
deliveryId: '3fae61b6-56ef-4c31-9c53-40f45131b435',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=3fae61b6-56ef-4c31-9c53-40f45131b435',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=3fae61b6-56ef-4c31-9c53-40f45131b435{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/3fae61b6-56ef-4c31-9c53-40f45131b435/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=3fae61b6-56ef-4c31-9c53-40f45131b435' } } }
{ id: '66436a40-eea3-414e-9036-98580220787a',
contentRepositoryId: '5c5c64adc9e77c0001d73a22',
folderId: null,
body:
{ _meta:
{ name: 'draping---sofa',
schema: 'http://c1-qa.adis.ws/c/cmslabs/draping-demo' },
SVG:
{ _meta: [Object],
id: '1200180d-7332-4228-8e88-1919906e44b8',
name: 'test_sofa',
endpoint: 'bccdemo',
defaultHost: 'i1.adis.ws' },
Textures: [ [Object], [Object], [Object] ] },
version: 1,
label: 'Draping - Sofa',
status: 'ACTIVE',
createdBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
createdDate: '2019-03-12T23:20:41.925Z',
lastModifiedBy: '2f38a1a9-c76d-4f34-91fa-652d09b6eede',
lastModifiedDate: '2019-03-12T23:20:41.925Z',
deliveryId: '66436a40-eea3-414e-9036-98580220787a',
_links:
{ self:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'content-item':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a{?projection}',
templated: true },
publish:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/publish' },
planned:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/planned{?epoch,time}',
templated: true },
update:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a' },
'restore-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/restore' },
'content-repository':
{ href:
'https://api.amplience.net/v2/content/content-repositories/5c5c64adc9e77c0001d73a22' },
'content-item-version':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{/version}',
templated: true },
'content-item-versions':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/versions{?page,size,sort}',
templated: true },
'content-item-history':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/history{?page,size,sort}',
templated: true },
copy:
{ href:
'https://api.amplience.net/v2/content/content-repositories/{id}/content-items?sourceContentItemId=66436a40-eea3-414e-9036-98580220787a',
templated: true },
unarchive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/unarchive' },
archive:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/archive' },
'set-locale':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/locale' },
'create-localizations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localize' },
localizations:
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/localizations{?page,size,sort}',
templated: true },
'localization-jobs':
{ href:
'https://api.amplience.net/v2/content/localization-jobs/search/findByRootContentItem?id=66436a40-eea3-414e-9036-98580220787a{&page,size,sort}',
templated: true },
'edition-slot-associations':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/edition-slot-associations' },
'edit-workflow':
{ href:
'https://api.amplience.net/v2/content/content-items/66436a40-eea3-414e-9036-98580220787a/workflow' },
'content-item-with-children':
{ href:
'https://api.amplience.net/v2/content/content-items/search/findByIdWithChildren?id=66436a40-eea3-414e-9036-98580220787a' } } }
this is visually what appears:
and the HTML output:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Amplience Demo: List Content Items">
<meta name="author" content="">
<meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width">
<title>Amplience Demo - List Content Items </title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/static/css/custom.css"/>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/?id=&store=">
<span class="d-lg-block d-none">Amplience - Content Simplified</span>
<span class="d-block d-lg-none">Amplience</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown"><a class="nav-link" href="/showJSON?id=&store=">ShowJSON</a></li>
<li class="nav-item"><a class="nav-link" href="/carousel?id=&store=">Carousel</a></li>
<li class="nav-item"><a class="nav-link" href="/panels?id=&store=">Panels</a></li>
<li class="nav-item"><a class="nav-link" href="/ListContentItems/5/1">List Content Items</a></li>
</ul>
</div>
</nav>
<main role="main" class="container">
</main><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body>
</html>
I think it's quite clear that the body of the template simply isn't rendering.
but other more complex routes render as expected..
let me know if you need further information.

After starting a brand new project and pulling this one route in I had a moment of enlightenment - here's the answer for anybody who hits a similar problem:
I was using the express-handlebars package which defaulted to main.hbs as it's layout.
I'd written a bunch of conditionals in there (bit of a noob error on reflection) which was preventing the body ever rendering - must've been a bit of a fluke that only this route was broken.
Lesson: don't put any complicated logic in your main.hbs file if your using express-handlebars.

How to generate an SVG of Highcharts graphics with images on the bars and show on the canvas tag?

I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow that i did until here:
http://jsfiddle.net/Posture/7aLzdej4/
<!DOCTYPE html>
<html>
<head>
<title>Pattern Fill in Canvas</title>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Highcharts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<!-- Canvg -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
</head>
<body>
<br>
<div style="background-color: #ffffff;">
<div id="graf-teste" style="min-width: 80%; height: 200px; max-width: 100%; margin: 0 auto"></div>
<button id='btn_capt'>Capturar Gráfico</button>
</div>
<script type="text/javascript">
var redrawEnabled = true,
ctr = 0;
ctr1 = 1;
Highcharts.chart('graf-teste', {
// $('#graf-teste').highcharts({
chart: {
events: {
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var chart = this,
renderer = chart.renderer;
chart.series[0].points.forEach(function(p) {
console.log(p);
var widthRatio = p.shapeArgs.width / p.shapeArgs.height,
id = 'pattern-' + p.index + '-' + ctr;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://i.pinimg.com/originals/6c/38/66/6c38667a1977cbcac6f94b92decd7927.png', 0, 0, 1, widthRatio).attr({
}).add(pattern);
p.update({
color: 'url(#' + id + ')'
}, false);
});
chart.series[1].points.forEach(function(q) {
console.log(q);
var widthRatio = q.shapeArgs.width / q.shapeArgs.height,
id = 'pattern-' + q.index + '-' + ctr1;
var pattern = renderer.createElement('pattern').add(renderer.defs).attr({
width: 1,
height: widthRatio,
id: id,
patternContentUnits: 'objectBoundingBox'
});
renderer.image('https://s2.glbimg.com/GFHUa5KeFPDTmwtAVjWl1A7oqTQ=/695x0/s.glbimg.com/po/tt2/f/original/2014/07/14/imagem0.jpg', 0, 0, 1, widthRatio).attr({
}).add(pattern);
q.update({
color: 'url(#' + id + ')'
}, false);
});
ctr++;
ctr1++;
chart.redraw();
redrawEnabled = true;
}
}
}
},
title: {
text: 'Gráfico Teste'
},
exporting: {
enabled: false
},
xAxis: {
categories: ['']
},
yAxis: {
min: 0,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
stacking: 'percent',
dataLabels: {
enabled: true,
format: '<b>{point.percentage:.0f}%</b>',
//point.percentage:.1f
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
type: 'bar',
name: 'Serie 1',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [250]
}, {
type: 'bar',
name: 'Serie 2',
enableMouseTracking: false,
// borderWidth: 1,
// borderColor: '#000000',
data: [100]
}],
credits: {
enabled: false
}
});
</script>
<canvas id="graf"></canvas>
<script type="text/javascript">
$("#btn_capt").on('click',function(e){
var svg = $('#graf-teste').highcharts().getSVG();
canvg(document.getElementById('graf'),svg);
var img = graf.toDataURL("image/png"); //img is data:image/png;base64
img = img.replace('data:image/png;base64,', '');
});
</script>
</body>
</html>
Comments: It's totally necessary use highstock, because of others charts in page.

Take a look at this demo: http://jsfiddle.net/BlackLabel/u20c8vhL/
I created a new div for the chart and render the SVG there by this method:
$("#btn_capt").on('click', function(e) {
var svg = chart.getSVG();
$('#containerContainer').prepend(svg);
});

Converting traditional js include to require JS

I want to convert below html code to requireJS. In this code, I am trying to use JQuery Querybuilder component, however I am getting issues because some of js files are older than requireJS
<!DOCTYPE html>
<html>
<head>
<title>jQuery QueryBuilder</title>
<script src="scripts/dot/doT.js"></script>
<script src="js/libs/jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script src="scripts/jquery-extendext.js" type="text/javascript"></script>
<script src="scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="scripts/query-builder.js" type="text/javascript"></script>
</head>
<body>
<div id="builder"></div>
<script>
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
</script>
</body>
</html>

I was able to figure this out, issue was mainly with 'dot/doT' call in query-builder.js file
Below is the code that works for me:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/require/require.js" type="text/javascript"></script>
<script src="require_config.js" type="text/javascript"></script>
</head>
<body>
<div id="elmId">TODO write content</div>
<div id="builder">TODO write content</div>
</body>
<script>
require(['dot/doT','jquery','jquery-extendext','bootstrap','query-builder'], function (dot,$) {
console.log("loaded jquery!!!",$("#elmId"));
var myFilters = [{
id: 'column1',
label: 'Column 1',
type: 'string'
}, {
id: 'column2',
label: 'Column 2',
type: 'double'
}, {
id: 'column3',
label: 'Column 3',
type: 'boolean'
}];
$('#builder').queryBuilder({
filters: myFilters
});
});
</script>
</html>
require_config.js file contains below code:
requirejs.config({
paths: {
jquery: 'js/libs/jquery/jquery-3.4.1.min',
dot:'scripts/dot',
'jquery-extendext': 'scripts/jquery-extendext',
bootstrap:'scripts/bootstrap.min',
'query-builder': 'scripts/query-builder.min'
},
shim: {
jquery: {
exports: ['jQuery', '$']
},
//https://requirejs.org/docs/api.html#config
bootstrap : { "deps" :['jquery'] }
}
});
Hope this helps someone in future.

infragistics igGrid in a dialog box does not take user's input

I have an application using infragistics asp.net web grid. In the main page, Grid is displayed no problem. user can select a row from main grid, from there a dialog box pops up where a second grid is. The second grid just display the details of user-selected grid one's row.
Now I have a problem in the second grid, where user couldn't modify any existing values. I counld't find out anything I did differently in the second grid from first grid. see my code:
<script type="text/javascript">
$(document).ready(function () {
$.ig.loader({
scriptPath: "js/",
cssPath: "css/",
resources: "igGrid.*"
});
$.ajax({
type: "POST",
url: "Default.aspx/LoadA",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
error: function (result) {
alert(result.d); }
});
function OnSuccess(result) {
$.ig.loader(
function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblMain").igGrid({
dataSource: jsonLocal,
autoGenerateColumns: false,
renderCheckboxes: true,
width: "100%",
height: "100%",
primaryKey: "ColA",
columns: [
{ key: "ColA", headerText: "ColA", dataType: "number" },
{ key: "ColB", headerText: "ColB",ataType: "string" }],
features: [
{ name: "Updating",
editMode: "row",
columnSettings: [
{ columnKey: "ColA", readOnly: true } ]
},
{ name: "Resizing",
deferredResizing: false,
allowDoubleClickToResize: true
},
{
name: "Filtering",
allowFiltering: true,
caseSensitive: false,
type: "local"
},
{
name: "Selection",
mode: "row",
cellSelectionChanging: igGridCellSelectionChanged
}
] //end feature
}) //end igGrid
} //end function
) //end loader
} //end onSuccess
$("#tblMain").on("iggridselectionrowselectionchanged", igGridCellSelectionChanged);
function igGridCellSelectionChanged(event, ui) {
var ColA = ui.row.element[0].cells[0].innerText;
$.ajax({
type: "POST",
url: "Default.aspx/LoadB",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{ColA:"' + ColA+ '"}',
success: OnAttachments,
error: function (result) {
alert(result.d);
}
});
};
function OnAttachments(result) {
$.ig.loader(function () {
$.ig.loader(function () {
var jsonLocal = new $.ig.JSONDataSource({ dataSource: result.d, responseDataKey: "d" });
$("#tblAttachment").igGrid({
dataSource: jsonLocal,
width: "800",
height: "80%",
autoGenerateColumns: false,
primaryKey: "UId",
columns: [
{ key: "Col1", headerText: "Col1", dataType: "number", width: "50px" },
{ key: "Col2", headerText: "Col2", dataType: "string", width: "100px" }
],
fixedHeaders: true,
showHeader: true,
features: [{ name: "Updating"}]
});
});
});
};
$('#dialog').dialog({
modal: true,
autoOpen: false,
closeOnEscape: false,
width: 800,
height: 500,
buttons: [{ text: "OK",
click: function () {
$("#dialog").dialog("close");
}
}] //end buttons
}); //end dialog
})
</script>
<body>
<div class="page">
<table>
<tr><td>
<table id="tblMain" border="1" align="center"></table>
</td></tr>
<tr><td>
<table>
<tr>
<td align="right">
<button id="btnAttach" class="button">
Additional Info</button>
</td>
</tr>
</table>
</td></tr></table>
<div id="dialog" title="Attach Contracts">
<table><tr><td>
<table id="tblAttachment" border="1" align="center">
<tr><td></td></tr>
</table>
</td></tr></table>
</div>
</div>
</body>

I think the problem is caused by changing the focus from input to that dialog. Just set trackFocus property to false.
//Initialize
$(".selector").igDialog({
trackFocus: false
});

Creating a 2x2 Button Grid with Centered Buttons?

I have a 2x2 button grid. Now I'd like to shrink the buttons to
200x200, place each in a container as a space place holder, then center
each button in its respective container.
In my image, I've only
shrunk the two top buttons so you can see the spacing on the page.
How can I go from the first image to the second image, which was
Photoshop'ed?
The goal: (actually, all 4 centered buttons is the goal)
File: app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Home',
ui: 'plain',
style: 'background-color: #c9c9c9',
height: 200,
width: 200
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'News',
ui: 'plain',
style: 'background-color: #b9b9cb',
height: 200,
width: 200
}
]
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Mail',
ui: 'plain',
style: 'background-color: #a9c9c9',
flex: 1
},
{
xtype:'button',
text: 'Search',
ui: 'Search',
style: 'background-color: #c9c9c9',
flex: 1
}
]
}
]
});
Ext.Viewport.add(view);
}
});
File: index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>

Simply add centered:true to the configuration of all your buttons.
Good luck.
P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.

Resources