Since I had problems, with a simple test, I went back to the original Telerik page that shows the integration of the kendo components in a polymer application
It looks like ANY example (it's easy, since there is a Dojo link...) doesn't work, at least with the current version of Kendo.
What am I missing???
Andrea
P.S.: the page is this one: http://docs.telerik.com/kendo-ui/third-party/webcomponents
Update:
I can obtain the behavior of the kendo grid, for example, with the following approach:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<script src="../telerik/js/kendo.all.min.js"></script>
<script src="../telerik/js/kendo.webcomponents.js"></script>
<dom-module id="my-view2">
<link rel="import" type="css" href="../telerik/styles/kendo.common.min.css">
<link rel="import" type="css" href="../telerik/styles/kendo.default.min.css">
<link rel="import" type="css" href="../telerik/styles/kendo.default.mobile.min.css">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
...
<div id="grid"></div>
...
ready: function () {
var element = $(this.$.grid).kendoGrid({
dataSource: [
{ Id: 1, Name: 'Pamela Andersson' },
{ Id: 2, Name: 'Naomi Campbell' },
{ Id: 3, Name: 'Monica Bellucci' }
],
sortable: true,
filterable: true,
selectable: true
});
}
But I cannot obtain the styles correctly applied. Even if the official documentation says that it's deprecated, it should still work, including the external stylesheets as you can see in the code (any other 'position' breaks the code...).
So for example sorting works, but I cannot see the correct icon.
When I try to filter, the form appears unstyled, and in the topleft corner of the window...
I reproduced your symptoms following the first steps of the Telerik guide. The console indicates that the Kendo-specific Web Components script is not found on the server:
While the webcomponentsjs polyfill shouldn't be needed for Chrome, there may be modifications in their version of the polyfill that are needed for Kendo UI to function properly.
I recommend submitting a support request with the Kendo team.
I've published webcomponent wrappers for Kendo UI Core at Kendoui-core-components that make Kendo UI (for jQuery) can be initialized through html element attributes, like:
<k-auto-complete id="customers"
data-text-field="ContactName"
data-source='{
type:"odata",
transport:{
read:"https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"},
group:{field:"Country"}
}'
heigth="400"
style="width:100%"></k-auto-complete>
You can install the package by 'npm i kendoui-core-components'.
Meanwhile I also authored a VSCode extension called 'vsc-kendo-core-components' which provides autocomplete for editing element attributes.
Hope the two derivatives make Kendo UI for jQuery more intuitive and effective.
Related
My app isn't npm and I need to use Sweet Alert 2.
I looked for information on the site https://sweetalert2.github.io, but without success.
Is there any way to use Sweet Alert 2 without npm?
Regards, Felipe.
Just add cdn links in view:
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>
Js code:
<script>
$(document).ready(function(){
Swal.fire({
type: 'success',
title: 'Your work has been done',
showConfirmButton: false,
timer: 1500
})
});
</script>
I found the answer, just use the tag below before all javascript imports to avoid errors:
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
you can grab it from jsdelivr CDN put below link in the head tag
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
I am using jqgrid to display data. I am very new to this
I have tried How to change the theme of the jqGrid? but its not working for me.
Can anyone tell me how to change theme of grid?
For the jQWidgets Grid, you should do two things: include the CSS theme file and then set the widget's theme property to the theme's name. Example: Styling and Appearance
jqGrid uses jQuery UI CSS for the grid by default. Thus you have to include some jQuery UI CSS. I'd recommend you to choose one from well-known CSS and use it directly from Internet. There are some common CDNs, which provides servers in different locations of the world and which have long time interval for caching. As the result the CSS will be loaded quickly and the next loading will be made mostly from the local cache. As the results, the loading could be typically more quickly as loading form your private web site.
On jQuery UI blog you can find URLs to jQuery CDN, MaxCDN, Google Ajax Libraries API (CDN), Microsoft Ajax CDN and other.
The list of standard themes is relatively long: black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader. You can choose someone and use it. For example
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
In the same way free jqGrid (it's the fork of jqGrid, which I develop) is accessible from two other CDNs too (cdnjs and jsDelivr CDN). See the wiki article for details.
As the result, the typical code, which uses free jqGrid can looks like described here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Your page title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/css/ui.jqgrid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<script>
//<![CDATA[
$(function () {
"use strict";
$("#grid").jqGrid({
colModel: [
{ name: "firstName" },
{ name: "lastName" }
],
data: [
{ id: 10, firstName: "Angela", lastName: "Merkel" },
{ id: 20, firstName: "Vladimir", lastName: "Putin" },
{ id: 30, firstName: "David", lastName: "Cameron" },
{ id: 40, firstName: "Barack", lastName: "Obama" },
{ id: 50, firstName: "François", lastName: "Hollande" }
]
});
});
//]]>
</script>
</head>
<body>
<table id="grid"></table>
</body>
</html>
See JSFiddle demo too.
In other words, you don't need to generate customized jQuery UI theme, but you should just use one from existing.
I am using jqGrid 4.6.0.
Implemented Column chooser feature using the below code.
I am using
jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css
$.extend($.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 500,
msel_opts: { dividerLocation: 0.5 }
});
$grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 260,
height: 280,
classname: "column-chooser",
msel_opts: { //multiselect options
autoOpen: true,
header: true,
height: "auto",
classes: "column-chooser",
beforeclose: function () { return false; } //keep multiselect drop down open
}
});
}
});
The column chooser popup is showing up without available columns and make all columns visible options..
It just has one option available i.e., select columns..
Can somebody help..
thanks in advance...
It's very suspected where you get jquery.multi-select.js and multi-select.css. I suppose that you get wrong files. jqGrid which you downloads from trirand contains plugins subdirectory with ui.multiselect.js and ui.multiselect.css. So the typical contain of <head> of the page where you use jqGrid with columnChooser could be the following
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
I posted the bug report recently where I described some small steps to make "Remove all" and "Add all" working in case of usage the last versions of jQuery and jQuery UI. The modified versions of ui.multiselect.js and jquery.jqGrid.src.js you can download from here and here.
The demo can be used as prototype for the usage of columnChooser.
I was using a different Multiselect js and css files..
I downloaded the JQGRID 4.6.0 package.. it gave me the ui.multiselect.css and ui.multiselect.js files.. i added them in my project..
now the column chooser popup is showing up with available columns and make all columns visible options.. thank you Oleg.
Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
....
<script type="text/javascript">
$("img").lazyload({
placeholder : "/mgr/images/spinner.gif"
});
</script>
....
</head>
<body>
<div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
<g:each in="${Friends}" status="i" var="Friends">
<img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
</div>
This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?
thanks for your help
jason
Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.
Change:
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
To:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>
I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.
jQuery 1.6.4 from Google CDN.
jQuery 1.6.4 from jQuery's CDN.
Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..
to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new html
> $('.lazy').Lazy({
> chainable: false,
> enableThrottle: false,
> onFinishedAll: function () {
> // do what you need ajax call or other
> },
> beforeLoad: function () {
> // do what you need ajax call or other
> },
> afterLoad: function () {
> // do what you need ajax call or other
> },
> onError: function () {
> console.log('could not be loaded');
> }
> });
I am using jqGrid 3.7.2 with local data. For some columns the default sorttypes are not sufficient. I need to provide a custom sorttype, which I understand from the documentation is possible. I don't know how to get it to work though. The code below is my best attempt at getting it to work - I can't make it call the custom sorting function though. The idea is to sort the 'Posn' field in the order 'GK'->'DEF'->'MID'->'STR'. Here is the code I'd like to get working:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Testbed</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/south-street/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="/thirdParty/jqGrid/ui.jqgrid.css" >
<script type="text/javascript" src="/thirdParty/jqGrid/grid.locale-en.js"></script>
<script type="text/javascript" src="/thirdParty/jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$().ready(function()
{
tableToGrid("#playerTable",
{
datatype: "local",
sortable: true,
hidegrid: false,
multiselect: false,
altRows: true,
height: "100%",
width: "155px",
shrinkToFit: true,
rowNum: 100,
colNames: ['Posn','Name'],
colModel: [
{name:'Posn', index:'Posn', width:100, sorttype:
function(cell)
{
if (cell=='GK') return '0';
if (cell=='DEF') return '1';
if (cell=='MID') return '2';
if (cell=='STR') return '3';
}
},
{name:'Name', index:'Name', width:200, sorttype:"text"}
]
});
});
</script>
</head>
<body>
<table id="playerTable">
<thead>
<tr><th>Posn</th><th>Name</th></tr>
</thead>
<tbody>
<tr><td>GK</td><td>Almunia</td></tr>
<tr><td>GK</td><td>Fabianski</td></tr>
<tr><td>DEF</td><td>Campbell</td></tr>
<tr><td>DEF</td><td>Clichy</td></tr>
<tr><td>MID</td><td>Denilson</td></tr>
<tr><td>MID</td><td>Diaby</td></tr>
<tr><td>STR</td><td>Arshavin</td></tr>
<tr><td>STR</td><td>Bendtner</td></tr>
</tbody>
</table>
</body>
</html>
Probably you read about the usage of sorttype as a function in Tony's answer to my thread http://www.trirand.com/blog/?page_id=393/help/custom-local-sort-with-respect-of-the-function-as-index/. Your problem could be very easy solved. My suggestion to use index as a function for custom sorting of local jqGrid data work fine in the version 3.7.1, but not more in the version 3.7.2 of jqGrid. The feature sorttype as a function is implemented in the jqGrid after the release of the version 3.7.2.
So to be able to use sorttype as a function you have to download the latest version of jqGrid from http://github.com/tonytomov/jqGrid/tree/master. This is an uncompressed version of jqGrid. If you not familier with uncompressed version of jqGrid I'll recommend you to read http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_to_install#development_installation to undertand which of js files and in the which order you should include. Under http://www.ok-soft-gmbh.com/jqGrid/CustomSorttype1.htm you can find a working example of your code where the custom function really work.
According to this forum post, a custom sorttype is only called when the grid is initialized and not during the onSortCol event:
As I understand it right now, if I have a custom sorttype like sorttype:sortDate, the function sortDate will only be called when jqGrid is initialized and not the event onSortCol. Is the only way to make onSortcol call SortDate is by manually over riding onSortCol event and writing the tedious code that does this and updates the grid accordingly? Why doesn't defining the sorttype:sortDate just over ride onSortCol event automatically? I mean when the jqGrid gets initailized it sorts correctly, but when I call the event it must do some built in sort. Why I ask is because my sortDate function doesn't have any code that actually updates jqGrid. it just returns 1,-1, or 0. its used in something outside of jqGrid…
Does this explain the behavior you are seeing?