I want to format numeric column value as 55,25,236.30 in grid. I created a JS function and called from column template in grid. My JS function:
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
but the value is showing like 5,525,236.30. According to this link the default value for groupSize is [3]. Is it not possible to set multiple values like [3,2] like numberformat in C#?
Make sure that the NumberFormater function receives a numeric argument. Below is a test page that works.
On a side note, I am not sure there is a need to set the culture and groupSize every time you execute the function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<input class="k-textbox" type="number" value="5525236.3" />
<button id="format" class="k-button">Format numeric value</button>
<script>
$("#format").click(function(){
var formattedValue = NumberFormater(parseFloat($(".k-textbox").val()));
alert(formattedValue);
});
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
</script>
</body>
</html>
Related
I seem to have a very specific problem where something is missing and I just can't see it.
From and index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="./js/a1.js"></script>
<script language="javascript" type="text/javascript" src="./js/a2.js"></script>
<style>
</style>
</head>
<body onLoad="javascript:Scan()">
<div id = "TheDiv">?
</div>
</body>
</html>
From onLoad, I call Scan()
function Scan()
{
divResultado = document.getElementById('TheDiv');
//instanciamos el objetoAjax
ajaxScan=objetoAjax();
ajaxScan.open("GET", "myscan.php", true);
DBScan = setTimeout(Scan,15000 );
ajaxScan.onreadystatechange=function()
{
if (ajaxScan.readyState==4)
{
//mostrar resultados en esta capa
divResultado = ajaxScan.responseText;
}
};
ajaxScan.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxScan.send( );
}
myscan gets data from a database and in debug, I see that information is properly transfered to divResultado above.
But the data doesn't appear in the div with id = "TheDiv"
I've done this hundreds of times before, but something somwhere has made itself
invisible to me.
In the raw data HTML, I think it appears below and outside of the context.
What am I not seeing
Because you're not writing the data to the page, you're just assigning it to a variable:
divResultado = ajaxScan.responseText;
Which means divResultado no longer refers to the element on the page, it now refers to the text from the AJAX response.
To set the text to that element, try:
divResultado.innerText = ajaxScan.responseText;
Or, if the result is HTML:
divResultado.innerHTML = ajaxScan.responseText;
I am trying to use kendo UI validator over a textarea using validateinput but always returns false. This Dojo contains the script.
Thanks for your help.
https://dojo.telerik.com/ifIhEGIy
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
<script>
function validateFormHecho() {
var validator = $("#hechoForm").kendoValidator({
rules: {
controlValidate: function(input) {
switch (input.attr('id')) {
case 'txtDescripcion':
return true;
break;
}
}
}
}).data("kendoValidator");
alert(validator.validateInput($("input[id=txtDescripcion]")));
}
$(document).ready(function() {
$("#txtDescripcion").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
});
</script>
</head>
<form id="hechoForm">
<div><textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea></div>
<button onclick="validateFormHecho()">Click me</button>
</form>
</html>
you use <textarea rows="10" cols="30" id="txtDescripcion" name="txtDescripcion"></textarea>.
But in your alert you are searching for an input elem. Textarea is not a classic HTML input, so you have to edit this part:
alert(validator.validateInput($("input[id=txtDescripcion]")));
to
alert(validator.validateInput($("textarea[id=txtDescripcion]")));
Or use $("#txtDescripcion") as the id selector
PS: you misspelled txtDescrip t ion ;)
There simple is not input element with that id. If you search for any element with that id, you get your true: alert(validator.validateInput($("#txtDescripcion")));
How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I'm seeing an issue where I can see the bound 'test' value appear on the demo page on Chrome but not in Firefox. I'm already including the polyfills (webcomponents-lite.js) so I'm really not sure what's missing. Any ideas?? Thank you in advance.
ticket-item demo page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ticket-item demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<link rel="import" href="../ticket-item.html">
<script>
window.addEventListener('WebComponentsReady', function() {
let element = document.getElementById('ticket-item');
element.test = 'test';
});
</script>
</head>
<body>
<div class="vertical-section-container centered">
<h3>Basic ticket-item demo</h3>
<demo-snippet>
<template>
<ticket-item id="ticket-item"></ticket-item>
</template>
</demo-snippet>
</div>
</body>
</html>
ticket-item element
<dom-module id="ticket-item">
<template>
<style include="my-theme">
:host {
display: block;
}
</style>
<div>test: [[test]]</div>
</template>
<script>
class TicketItem extends Polymer.Element {
static get is() { return 'TicketItem'; }
static get properties() {
return {
test: String
};
}
}
window.customElements.define(TicketItem.is, TicketItem);
</script>
</dom-module>
The first thing:
Custom element names. By specification, the custom element's name must start with a lower-case ASCII letter and must contain a dash (-). There's also a short list of prohibited element names that match existing names. For details, see the Custom elements core concepts section in the HTML specification.
So, you must change the name of "item" element.
Instead of loading the webcomponents-lite.js directly, load webcomponents-loader.js (a client-side loader that dynamically loads the minimum polyfill bundle, using feature detection), that will do the rest.
Plnkr link: works both in Firefox and Chrome.
The problem was that I named my component 'ticket-item' and the id was set to 'ticket-item'. It apparently needs to be something different from 'ticket-item'. I change the id to 'item' and now I'm seeing the binding.
Now i done the ADD /Remove Elements
How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,
category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,
am looking one jquery or some open which do this same work,
refer some good plugins,
How to add the element when i click the ADD Elment, please chekc my code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').append(app_str);
$("#add_element").click(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
hdn_add_element_cnt = hdn_add_element_cnt+1;
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').fadeIn(10000).append(app_str);
//Increment Elemenet ID Count +1
document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;
})
})
function delete_element(element_id_no){
var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
$("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
<div id="add_element" style="width:400px; height:75px;">
ADD Element
</div>
<div id="element_area">
</div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>
jQuery doesn't need plugins to do this. Standard functions work well:
.append() adds elements, so to add a <div> to the <body>, just do this:
$('body').append('<div id="foobar">This is my text</div>');
.remove() similarly removes elements, so to remove that <div> that you added, just do this:
$('#foobar').remove();
.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:
$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');
Your question is really vague, so I'm not sure what else to say.