I have a problem when initiating jqxButton inside jqxWindow:
Expected: When I click Add button, the Confirm button caption will be set to "Add", otherwise when I click Edit button.
Problem: The Confirm button caption is set to proper button at the first time I clicked, but then the caption will not changed.
Note: The problem raised if i set window property autoOpen: false.
This problem raised when I use jQWidgets V5.1.0.
When I use jQWidgets v4.3.0, this problem does not happen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="" />
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Add" });
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").jqxButton({ value: "Edit" });
});
var jqxWidget = $('#jqxWidget');
var offset = jqxWidget.offset();
$('#window').jqxWindow({
autoOpen: false,
minWidth: 200,
height: 300,
width: 500,
initContent: function ()
{
$("#confirm").jqxButton();
}
});
});
</script>
</head>
<body class='default'>
<div id="jqxWidget">
<div style="float: left;">
<div>
<input type="button" value="Add" id="btnAdd" />
<input type="button" value="Edit" id="btnEdit" />
</div>
</div>
<div id="mainDemoContainer">
<div id="window">
<div id="windowContent">
<input type="button" id="confirm" />
</div>
</div>
</div>
</div>
</body>
</html>
This comes late of course, but does the change in the caption have to occur through the jqxButtons properties only? After testing your code I came to following:
$('#btnAdd').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', "Add"); // Works !
//$("#confirm").jqxButton('val', "New Value"); // Does not work the first time only
//$('#confirm').jqxButton({ value: "Button" }); // uncaught exception: Invalid property: value
});
$('#btnEdit').click(function () {
$('#window').jqxWindow('open');
$("#confirm").attr('value', 'Edit');
});
May this answer help others who meet this issue.
Related
I'm trying to create a MaterialiseCSS range slider which is based on noUiSilder. The documentation says:
Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the nouislider.css and nouislider.js files located in the extras folder.
I did everyting unfortunately it is showing the defaut HTML range (like the one in the link).
My html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link href="extras/noUiSlider/nouislider.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="extras/noUiSlider/nouislider.min.js"></script>
<script type="text/javasript" src="js/phonefinder.js"></script>
</head>
<body class="grey lighten-4">
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
</body>
</html>
js/phonefinder.js:
$(function(){
var slider = document.getElementById('test5');
noUiSlider.create(slider, {
start: [20, 80],
connect: true,
step: 1,
range: {
'min': 0,
'max': 100
},
format: wNumb({
decimals: 0
})
});
});
What am I doing wrong?
The noUiSlider range isn't a a input type, it should be a div.
So:
<form>
<div class="input-field">
<p class="range-field">
<input type="range" id="test5" min="0" max="100" />
</p>
</div>
</form>
should be:
<form>
<div id="connect"></div>
</form>
I am trying to open a simple modal dialog and I have been struggling to do this. Can
any one please help? This is the HTML code(please remove pre). This simply doesnot work.
Can any one please tell **strong text**me why? I have not been getting the kind of output that I really
need.
Any one help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<script src="js/jquery.magnific-popup.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
</head>
<body>
<a class="popup-modal" href="#test-modal">Open modal</a>
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>Modal dialog</h1>
<p>You won't be able to dismiss this by usual means (escape or
click button), but you can close it programatically based on
user choices or actions.</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
<script>
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
</body>
</html>
Load jquery before the magnific-popup plugin, it relies on jquery (I've never used it but I'm assuming so seeeing as it is pre-appended withfixed 'jquery')
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/magnific-popup.css" rel="stylesheet" />
<!-- Jquery loaded first here... -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!-- Plugins after... -->
<script src="js/jquery.magnific-popup.js"></script>
</head>
<body>
I am trying to convert a page from HTML to PDF using CFDOCUMENT.
Here is a screen shot of the original page
and here is a screen shot of the converted PDF page:
Here is the HTML of the original page:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!--[if gt IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
<title>Big Shots Registration</title>
<meta name="description" content="PlayerSpace.Com offers state of the art league, tournament and sport event management tools combined with powerful social networking features." />
<meta name="keywords" content="league management,tournament management,sports event management,league management software,tournament management software" />
<meta name="title" content="Big Shots Registration" />
<meta name="author" content="PlayerSpace.Com">
<meta http-equiv="expires" content="Tue, 05 Nov 2013 00:00:00 E883T" />
<link rel="icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/css/stylesheets.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 8]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="/css/fullcalendar.print.css" media="print" />
<script type='text/javascript' src="/js/plugins/jquery/jquery-1.10.2.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type='text/javascript' src="/js/plugins/jquery/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/plugins/cookie/jquery.cookies.2.2.0.min.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/excanvas.min.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.stack.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="/js/plugins/charts/jquery.flot.resize.js"></script>
<script type="text/javascript" src="/js/plugins/sparklines/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="/js/plugins/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="/js/plugins/select2/select2.min.js"></script>
<script type="text/javascript" src="/js/plugins/uniform/uniform.js"></script>
<script type="text/javascript" src="/js/plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="/js/plugins/validation/languages/jquery.validationEngine-en.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/plugins/validation/jquery.validationEngine.js"" charset="utf-8"></script>
<script src="/js/plugins/scrollpane/jquery.jscrollpane.min.js"></script>
<script src="/js/plugins/scrollpane/mwheelIntent.js"></script>
<script src="/js/plugins/scrollpane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="/js/plugins/tagsinput/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/plugins/animatedprogressbar/animated_progressbar.js"></script>
<script type="text/javascript" src="/js/plugins/qtip/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/plugins/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/plugins/dataTables/FixedColumns.js"></script>
<script type="text/javascript" src="/js/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-dialog/bootstrap-dialog.js"></script>
<script type="text/javascript" src="/js/plugins/pnotify/jquery.pnotify.min.js"></script>
<script type="text/javascript" src="/js/plugins/ibutton/jquery.ibutton.min.js"></script>
<script type="text/javascript" src="/js/plugins/scrollup/jquery.scrollUp.min.js"></script>
<script type="text/javascript" src="/js/plugins/autosuggest/bsn.AutoSuggest_2.1.3.js"></script>
<script type="text/javascript" src="/js/plugins/autoexpand/jquery.autosize-min.js"></script>
<script type="text/javascript" src="/js/plugins/stepywizard/jquery.stepy.js"></script>
<script type="text/javascript" src="/js/plugins/bootstrap-select/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/plugins/plugindetect/plugindetect.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="/js/plugins/gmap/gmap3.min.js"></script>
<script type="text/javascript" src="/js/cookies.js"></script>
<script type="text/javascript" src="/js/actions.js"></script>
<script type="text/javascript" src="/js/charts.js"></script>
<script type="text/javascript" src="/js/pwdchkr.js"></script>
<script type="text/javascript" src="/js/plugins.js"></script>
<script type="text/javascript" src="/js/settings.js"></script>
<script type="text/javascript" src="/js/checkzip.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript" src="/js/afterajax.js"></script>
<script type="text/javascript" src="/js/aftereasytabs.js"></script>
<script type="text/javascript" src="/js/plugins/jeasyui/easyloader.js"></script>
<script type="text/javascript" src="/js/plugins/underscore/underscore-min.js"></script>
<script type="text/javascript" src="/js/plugins/easytabs/jquery.easytabs.min.js"></script>
</head>
<body id="registration_body_wrap">
<div id="registration_wizard">
<div id="registration_body">
<div class="row-fluid">
<div class="span12">
<div class="span2"></div>
<div class="span8">
<div class="content">
<div class="workplace">
<form method="post" action="/register/index_registration.cfm?wizard_action=pay_by_check&league=678&m0dal_update=registration_wizard&submethod=checkout&teamstatus=individual&requesttimeout=5000" name="dues_form" id="validation" class="reg_verify">
<div class="row-fluid">
<div class="span12">
<h4><b class="text text-error">Registration Dues Checkout</b></h4>
<h5>Please review your dues payment information and complete the checkout form below. <b class="text text-error">Red text indicates a required answer.</b></h5>
<div class="alert alert-info">
<h4 style="margin:0px;">Main Registration</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="main_p_dues_division_id5" value="2381" id="main_p_dues_division_id5">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum6785" style="width:40px !important;" value="300" id="sum6785">
</div>
</div>
<div style="width:60%;">
<p style="font-size:110%;">
<b>Todd John</b> for <b class="label label-info ttRT" title="This is the selected division for this player.">BIG SHOTS Report (Non-Div 1) $300</b>
</p>
<input type="hidden" name="main_p_duesA" id="main_p_dues2141_A" value="300_2381">
</div>
</div>
<div class="dr" style="margin:10px 10px 20px 10px ;"><span></span></div>
<div class="alert alert-info">
<h4 style="margin:0px;">Select your donation amount (optional)</h4>
</div>
<div class="row-form-reg clearfix">
<div class="pull-right tar" style="width:125px;">
<input type="hidden" name="int_donation_collected" id="int_donation_collected" value="0.00">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span>
<input type="text" readonly name="sum_donation" value="0" id="sum_donation" style="width:40px !important;">
</div>
</div>
<div style="width:60%;">
<div class="pull-left tac" style="margin:0px 5px 5px 0px;">
<b class="label label-warning"><h5 style="margin:2px 3px 2px 3px;">$0</h5></b>
<div></div>
<input type="radio" checked="checked" disabled name="donation" id="donation0.00" value="0.00" class="donation_radio" OnMouseOver="calc();" OnMouseOut="calc();">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Pay By Check</h4>
</div>
<div class="row-form-reg clearfix">
<div class="span6">
<label class="control-label">Total Due:</label>
</div>
<div class="span6 tar clearfix">
<div class="input-prepend" style="margin-left:0px;">
<span class="add-on">$</span></span>
<input type="text" name="totalSum" id="totalSum" value="300" readonly onmouseover="calc();" style="width:40px !important;">
</div>
</div>
</div>
<div class="alert alert-info">
<h4 style="margin:0px;">Alternative Payment Arrangements</h4>
</div>
<div class="well well-small" style="margin-top:-20px;">
Please contact your director for more information on how to pay by check.
</div>
</div>
</div>
</form>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$( "#main_p_dues2141_A" ).prop( "disabled", false );
$( "#donation0.00" ).prop( "disabled", false );
$.uniform.update();
calc();
$("#e_m_row").hide();
});
function calc()
{
elem1 = document.getElementById("sum6785");
elem2 = document.getElementById("sum_donation");
elem = document.getElementById("totalSum");
elem.value = parseFloat(elem1.value ) + parseFloat(elem2.value );
}
function loadwindow()
{
var myheight = $(window).height();
var mywidth = $(window).width();
window.open(
'https://bigshotsdc41213.playerspace.com//register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1',
'mywindow',
status=0,
toolbar=0,
menubar=0,
resizable=1,
width=mywidth,
scrollbars=1,
height=myheight
);
pay_by_checkScript();
}
function pay_by_checkScript()
{
document.dues_form.target='mywindow';
document.dues_form.action='http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=pay_by_check&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check&pay_by_check=1';
document.dues_form.str_billing_fname.value='pay_by_check';
document.dues_form.str_billing_lname.value='pay_by_check';
document.dues_form.str_billing_address1.value='pay_by_check';
document.dues_form.city.value='pay_by_check';
document.dues_form.str_billing_phone.value='555-555-5555';
document.dues_form.str_credit_card_type.value='pay_by_check';
document.dues_form.str_credit_card_number.value='4828640590401142';
document.dues_form.str_ccv_number.value='pay_by_check' ;
document.dues_form.submit();
//window.location = "http://bigshotsdc41213.playerspace.com/register/index_registration.cfm?wizard_action=registration_complete&league=678&teamstatus=individual&m0dal_update=registration_wizard&submethod=record_unpaid_preference&pref=check"
}
$(document).on("click", "[id*=uniform-donation]", function(){
var myval = $(this).find(':radio').val();
$('#int_donation_collected').val(myval);
$('#sum_donation').val(myval);
$(this).find(':radio').prop('checked', true);
$.uniform.update();
calc();
});
$(document).on("click", ".iagree", function(){
$(this).addClass("iagreewidth");
$(this).val('');
$(this).attr("placeholder", "");
calc();
});
function showem()
{
$("#e_m_row").show();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").show();
}
$("#checkout_now").attr('value','SUBMIT FIRST INSTALLMENT PAYMENT >>');
calc();
}
function hideem()
{
$(".iagree").removeClass("iagreewidth");
$(".iagree").val('');
$(".iagree").attr('placeholder', 'Type "I AGREE" in this box to complete your order and click the "PAY THESE DUES" button.');
$("#checkout_now").attr('value','SUBMIT DUES PAYMENT >>');
calc();
$("#e_m_row").hide();
if($("#confirmmultiple").length > 0){
$("#confirmmultiple").hide();
}
}
</script>
<script>
window.onload = function() {
for(var i = 0, l = document.getElementsByTagName('input').length; i < l; i++) {
if(document.getElementsByTagName('input').item(i).type == 'text') {
document.getElementsByTagName('input').item(i).setAttribute('autocomplete', 'off');
};
};
};
</script>
<script type="text/javascript">
function disableEnterKey(e){
var key;
if(window.event){
key = window.event.keyCode;
} else {
key = e.which;
}
if(key == 13){
return false;
} else {
return true;
}
}
</script>
</div>
</div>
</div>
<div class="span2"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I can't seem to get the pdf output to match the original. Any help would be appreciated.
In my experience PDF rendering was actually easier than I expected. What I would do is create a CFM file that just outputs the core page structure you want - so lose all of those javascript files and everything and just have the regular markup that you need on it. A normal CSS sheet should work just fine, but you might need to use CFINCLUDE to include it inline rather than relying on a link meta tag in your header.
The code to create your PDF is then as follows:
<cfdocument format="pdf"
pagetype="custom"
unit="cm"
pagewidth="21"
pageheight="29.7"
margintop="0"
marginbottom="0"
marginleft="0"
marginright="0"
filename="#pdf.path_render_page#"
overwrite="true"
fontembed="yes"
>
<cfinclude template='render_page.cfm'>
</cfdocument>
So the basic output CFM file is CFINCLUDE'd inside your CFDOCUMENT tag, makes for nice compact code and is easy to separate the PDF creation from the template. Your CFM template then would have your CSS file CFINCLUDE'd inside that too. The recursive include should work fine.
If you're wanting this to be printed out on paper then it gets a bit tricky, as you start having to work in physical measurements and not pixels, so your layout will end up being a lot of trial and error - printing one out and seeing how it looks etc.
The big gotcha is with fonts. If you want a font to be embedded in your PDF then it needs to be installed on the server machine, and referenced properly. If you open the CF admin you can view a page that lists the fonts available, and it has a few columns with different references to each font. I'm never sure which one of those columns gives the right reference for your CSS to marry up with the right font - I think it might vary depending on the font and the platform your server is running on, one of them will be right though, so again just trial and error.
Looking at your document it seems to be a form, so not sure quite how that would make sense in a straight PDF version - you'd might want to amend the layout anyway to make it more like a physical form perhaps?
I was wondering why dojo isn't responding to changes on a element?
I made an easy example to show my problem!
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
]);
require(["dojo/dom","dojo/on","dojo/domReady!"], function(dom, on){
on(dom.byId("tester"),"resize", function() { console.log('window on resize') });
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/ContentPane" style="width: 50%;" >
<div data-dojo-type="dijit/layout/BorderContainer" id="tester">
</div>
</div>
</body>
</html>
Everything works fine when I use on(window,"resize", function()); but I have no idea why the example above doesn't work.
Try this (use aspect instead of on):
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function(BC, CP){
require(["dojo/aspect","dojo/domReady!"], function(aspect){
var bc= new BC({}, "tester");
bc.startup();
aspect.after(bc, "resize", function() { console.log('window on resize') });
});
});
</script>
</head>
<body>
<div id="tester" style="width: 50%;height:100%;">
</div>
</body>
</html>
I have been trying all day to "catch" or assign/bind to the chosen state and assign it to a variable called "text" so that I can use it in yet another API call for the other drop down box "Products".
I figured I must just be missing something and was hoping for a little help.
Thanks.
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>Legis Connect</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/kendo.common.min.css">
<link rel="stylesheet" href="css/kendo.black.min.css">
<link rel="stylesheet" href="css/kendo.mobile.all.min.css">
<link rel="stylesheet" href="css/kendo.dataviz.min.css">
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div class="k-widget k-header">
<span class="infoHead">Information</span>
<p>
<input id="state" placeholder="Select State..." />
</p>
<p>
<input id="products"/>
</p>
<script>
$(document).ready(function() {
$("#state").kendoDropDownList({
// optionLabel: "Select State...",
dataTextField: "name",
dataValueField: "abbreviation",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/?apikey=????????",
dataType: "jsonp"
}
}
}
});
// change: function(test){
// var text = this.value()
var states=$("#state").data("kendoDropDownList");
states.bind("change", function(e) {
var text = (this.value())
alert (text)
});
$("#products").kendoDropDownList({
optionLabel: "Select product...",
dataTextField: "legislature_name",
dataValueField: "legislature_name",
dataSource: {
transport: {
read: {
url: "http://openstates.org/api/v1/metadata/"+text+"/?apikey=???????????????????",
dataType: "jsonp"
}
}
}
})
$("#products").data("kendoDropDownList");
});
</script>
</div>
</body>
</html>
It appears that you're trying to create cascading dropdowns; when you choose a value in the states dropdown list, it loads the products available for the selected state. There's a helpful article from Telerik on how to do that with the combo box controls (works the same from dropdown lists): http://docs.kendoui.com/getting-started/web/combobox/cascading. There's actually a property called cascadeFrom which you can set on the products dropdown list to tell it to cascade from the states dropdown list. Hope that helps!