I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
Related
Hello I built an application in Spring with Thymeleaf and I am displaying the forms on one page and the results on another page and I would like to show both on the same page.
Here is my index page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau e-mail</title>
</head>
<body class ="bg-light" >
<h2 text-align="center">Cautare telefon sau email</h2>
<div class ="text-center" >
<form method ="post" action ="/raspuns" >
<div class="form-group">
<input type ="number" minlength="10" maxlength="10" class="form-control" name ="text2" th:value ="${text2_value}" placeholder="Numar telefon" pattern="[0-9]{10}" required/>
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
<br></br>
<form method ="post" action ="/raspuns2" >
<div class ="form-group" >
<input type ="email" class ="form-control" placeholder ="Adresa email" th:value="${email_value}"
name ="email" />
<input type ="submit" value ="Cauta" class ="btn btn-primary" margin-top="2%"/>
</div>
</form>
</div>
</body>
</html>
An here is my results page:
<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org" >
<head>
<meta charset ="UTF-8" ></meta>
<meta name ="viewport" content ="width=device-width, initial-scale=1, shrink-to-fit=no" >
<!-- Read CSS -->
<link rel ="stylesheet" th:href ="#{/webjars/bootstrap/css/bootstrap.min.css}" >
<link rel ="stylesheet" th:href ="#{/stil.css}" >
<!-- Read JS -->
<script th:src ="#{/webjars/jquery/jquery.min.js}" defer ></script>
<script th:src ="#{/webjars/bootstrap/js/bootstrap.min.js}" defer ></script>
<title> Cautare telefon sau email</title>
</head>
<body>
<form action="/">
<button class ="btn btn-primary">Acasa</button>
</form>
<h1> Cautare telefon</h1>
<table class="table">
<tbody>
<tr th:each="map : ${map_list}" >
<td> CNP:</td>
<td th:text ="${map.get('cif')}" ></td>
<td> Nume:</td>
<td th:text ="${map.get('den_client')}" ></td>
</tr>
</tbody>
</table>
</body>
</html>
How can I make them appear on the same page ? I would appreciate if someone could give me a small example please. Thanks
I am facing a pretty strange problem .I have compiled the cordova app and it runs on android smoothly now on mac when i try to compile the app for the iOS it don't show me the component of onsenui and page comes without button ,toolbars etc . I tried to open it on web browser and it gives me same result .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css"/>
<!--parse code only
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
<!-- parse code only -->
<!--<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- Enable all requests, inline styles, and eval() -->
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator">
<ons-page>
<ons-toolbar>
<div class="center">Toolbars</div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Toolbar Variations</ons-list-header>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
HTML Content
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page4.html', { animation : 'slide' } )">
Search Box
</ons-list-item>
<ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page5.html', { animation : 'slide' } )">
Images
</ons-list-item>
</ons-list>
</ons-page>
</ons-navigator>
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left" style="line-height: 44px">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Title</div>
<div class="right" style="line-height: 44px">
Right
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page4.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="center">Search</div>
<div class="right" style="padding-right: 6px">
<input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;">
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<ons-template id="page5.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-back-button>Back</ons-back-button>
</div>
<div class="right">
<ons-search-input></ons-search-input>
</div>
</ons-toolbar>
<div style="text-align: center">
<br />
<ons-button modifier="light" onclick="myNavigator.popPage()">
Pop Page
</ons-button>
</div>
</ons-page>
</ons-template>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js"></script>
</body>
</html>
The code overall looks ok.
The only thing missing is ons.bootstrap(). I'm guessing you accidentally removed it at some point. Add that and you should be ready to go.
Here's a working demo of your code with ons.bootstrap() added.
On a sidenote - since you don't seem to be using angular right now you might be interested in checking out Onsen 2. It has both an angular and a pure js version.
OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo
I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Something</title>
<!-- load tableSorter theme -->
<link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascropt">
$(document).ready(function(){
$("table").tablesorter({
theme : 'blue',
widgets : ['zebra','columns'],
sortList: [[0,0]],
debug : true,
widthFixed: false,
showProcessing : true
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like the theme option is not being set. When you initialize tablesorter without any options:
$("#myTable").tablesorter();
The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:
<script type="text/javascropt">
$(function(){
$("#myTable").tablesorter({
theme: "blue"
});
});
</script>
Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".
So i am new to the jquerymobile world.
I am trying to put a jquerywrapper around my users pages.
I have most of it working, but i am stuck where the page is wide and does not fit in the width of a mobile device and it seems to be a fixed wide and can not scroll
So i am looking for suggestions on the correct way to do this.
The wide data/page CANNOT be changed.
Thanks for any help
some of the key elements::
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/inc/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.css">
<body class="ui-mobile-viewport ui-overlay-c" >
<div class="pagewithmenu" data-role="page" id="user-home" data-theme="d" data-url="user-home">
<div data-theme="b" data-role="header" style="text-align: center;" data-title="<?=$siteuser->fname?> <?=$siteuser->lname?>">
<?=$siteuser->fname?> <?=$siteuser->lname?>
Home
</div>
<div id="mycontent" data-role="content" >
<div class="article" style="ov">
<!--
***** WIDE PAGE DATA HERE *****
this is user generated code and can be anything
for example this is one i am seeing the problem
-->
<table width="663" cellspacing="0" cellpadding="2" bordercolor="purple" border="5" background="http://www.unitnet.com/sboggs/picts//purple_star.jpg" height="497" class="c3">
<tr>
<td>
some picts
</td>
</tr>
</table>
</div>
</div>
</div>
I'm completely new to jQuery Mobile and just trying to get a feel for how it might to work in my environment.
One Page 1 I'm displaying values that come down from the server. What I want to do is go to Page2 to set the values and then pressing "Back" have page 1 show the updated values.
Currently when I hit back, it's showing the original values and I need to do a manual partial or full refresh to get them updated.
How can I tell jQuery Mobile to auto refresh a page on hitting the back button? I'm using data-rel="back".
I guess I'm looking to see if there's a universal setting for this or something. Similar to $.mobile.ajaxEnabled = false; which I needed to turn on in my environment to get things working.
Thanks
UPDATE:
I've added some code here per request. Not sure it will really help. But here's what's going on. I'm trying to use jQuery Mobile in the context of an IBM XPages application. XPages is basically Java Server Faces but it has Dojo 1.8.1 built into it do to certain things like a Partial Refresh of a Div automatically. So for instance on a button I can write server side code - int a Java Managed Bean, get a result, and have it partial refresh a div on the webpage. Cool stuff. But the problem I GUESS is conflicts between jQuery Mobile and the build in Dojo that makes those things work. I don't want to use the mobile portion of Dojo because jQuery seems so much better.
Anyway - I got jQuery Mobile to work by making sure it loaded BEFORE the dojo pieces loaded. The other way around it wouldn't work at all. I'd like to work with individual pages rather then virtual pages in one.
I'm not sure if I care about much caching really as the pages will almost always be changing. I'm working on an inventory application with iPads and barcode scanners. So for instance on page1 I scan an item. Then I might move to page 2 to let the user do something with the item, on hitting the back button I want page 1 to refresh so it's updated with any new information
Thanks for any advice!!!
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/#Da&#Ib&2Tfxsp.css&2TfxspLTR.css&2TfxspSF.css.css">
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.1/dojo/dojo.js" djConfig="locale: 'en-us'"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-us/#Iq.js"></script>
<script type="text/javascript">dojo.require('ibm.xsp.widget.layout.xspClientDojo')</script>
<link rel="stylesheet" type="text/css" href="/jqm.nsf/themes/czarnowskiMobile.min.css">
</head>
<body class="xspView tundra">
<form id="view:_id1" method="post" action="/jqm.nsf/home.xsp" class="xspForm" enctype="multipart/form-data">
<div data-role="page" data-theme="b">
<div data-role="header">
<h1><span id="view:_id1:_id2:computedField1" class="xspTextComputedField">Scanner</span></h1></div>
<div data-role="content">
<div id="view:_id1:_id2:callback3">
<ul data-role="listview"><li><a id="view:_id1:_id2:callback3:link2" href="/jqm.nsf/menuFacility.xsp" class="xspLink">Facility Menu</a></li><li><a id="view:_id1:_id2:callback3:link3" href="/jqm.nsf/menuShow.xsp" class="xspLink">Show Menu</a></li></ul><br><div id="view:_id1:_id2:callback3:_id12:timePanel">
<table><tr><td><span id="view:_id1:_id2:callback3:_id12:label1" class="xspTextLabel">viewScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField1" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button1" id="view:_id1:_id2:callback3:_id12:button1" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button3" id="view:_id1:_id2:callback3:_id12:button3" data-role="none">Clear</button></td>
</tr>
<tr><td><span id="view:_id1:_id2:callback3:_id12:label2" class="xspTextLabel">sessionScope</span></td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField2" class="xspTextComputedField"></span></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button2" id="view:_id1:_id2:callback3:_id12:button2" data-role="none">Update</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button4" id="view:_id1:_id2:callback3:_id12:button4" data-role="none">Clear</button></td>
</tr>
<tr><td>Current Time</td>
<td><span id="view:_id1:_id2:callback3:_id12:computedField3" class="xspTextComputedField">7:39:40 PM</span></td>
<td></td>
<td></td>
</tr>
<tr><td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button5" id="view:_id1:_id2:callback3:_id12:button5" data-role="none">Partial Refresh</button></td>
<td><button class="xspButtonCommand" type="button" name="view:_id1:_id2:callback3:_id12:button6" id="view:_id1:_id2:callback3:_id12:button6" data-role="none">Full Refresh</button></td>
<td></td>
<td></td>
</tr>
<tr><td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div id="view:_id1:_id2:callback2">
Footer Test</div>
</div>
</div>
<script> $.mobile.ajaxEnabled = false;
$.mobile.pushStateEnabled = false;</script>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!dgljtbhtgw!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
<script type="text/javascript">
XSP.addOnLoad(function() {
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler1", "view:_id1:_id2:callback3:_id12:button1", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler3", "view:_id1:_id2:callback3:_id12:button3", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler2", "view:_id1:_id2:callback3:_id12:button2", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:eventHandler4", "view:_id1:_id2:callback3:_id12:button4", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachPartial("view:_id1:_id2:callback3:_id12:_id32", "view:_id1:_id2:callback3:_id12:button5", null, "onclick", function(){}, 2, "view:_id1:_id2:callback3:_id12:timePanel");
XSP.attachEvent("view:_id1:_id2:callback3:_id12:_id34", "view:_id1:_id2:callback3:_id12:button6", "onclick", null, true, 2);
});
</script>
</body>
</html>