I have a editor template for my kendo grid defined as
<script id="my-editor-template" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="ContactName">Contact</label>
</div>
<div data-container-for="ContactName" class="k-edit-field">
<input type="text" class="k-input k-textbox" name="ContactName" data-bind="value:ContactName">
</div>
<!-- more fields, etc -->
</script>
In my grid definition, I definte editable like this:
editable =
{
mode: 'popup',
template: kendo.template($('#my-editor-template').html()),
confirmation: 'Are you sure you want to delete rec'
};
But I would like to make the popup window wider. I tried wrapping the contents of my template in a
<div style="width: 800px;"></div>
but the popup window stayed the same with, and made the contents scrollable (i.e., 800px content inside a 400px window).
I know I can do a
$(".k-edit-form-container").parent().width(800).data("kendoWindow").center();
after the window is opened, but all the content of the window is formatted for like 400px, and it feels a little hackish. Is there not a way I can dictate teh size in the template markup?
Kendo grid popup window is using kendo window, so you can set the height and width like this
editable: {
mode: "popup",
window: {
title: "My Custom Title",
animation: false,
width: "600px",
height: "300px",
}
}
Here is dojo for you, but since i did not define a custom template it still use default one so as the result the window size already 600 x 300 but the content is not.
After an hour+ long research following code fixed my issue. I had to put this code in the edit event.
$(".k-edit-form-container").attr('style', "width:auto");
Related
Using Kendo UI JQuery Editor control, How I can write html document as a template with predefined fields that get data from database ?
For example if user typed Name:[fname] [lname]
It get replaced with first and last name data from database. I use PHP.
The Editor provides reference to the HTML element which represents the editor's content area. You can therefore set the content of the DOM elements in the Editor's content:
<input id="ddl" />
<textarea id="editor" rows="10" cols="30" style="width:100%; height:450px" aria-label="editor">
<div >
<div>Hello <span id="fname" contenteditable="true">___</span>,</div>
</br>
<div>your email is: <span contenteditable="true" id="email">___</span></div>
</div>
</textarea>
<script>
$(document).ready(function () {
// create Editor from textarea HTML element with default set of tools
$("#editor").kendoEditor({
resizable: {
content: true,
toolbar: true
}
});
//make the editor content non-editable and only some elements editable by setting the contenteditable attribute for the desired elements
var editor = $("#editor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", false)
$("#ddl").kendoDropDownList({
optionLabel:"--Select user--",
dataTextField:"user",
dataValueField:"id",
dataSource:[
{id:1, user: "John", fname:"John",lname:"Doe",email:"john#email.com"},
{id:2, user: "Jane", fname:"Jane",lname:"Smith",email:"jane#email.com"}
],
change:function(e){
var item = e.sender.dataItem();
editorBody.find("#fname").text(item.fname);
editorBody.find("#email").text(item.email);
}
})
});
</script>
Here is an example
I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();
I have the following code and would like to hide the label:
<div>
<input type="checkbox" data-filter-value="17_72" class="attrib filterselector unav_option" name="filter[17]" id="filter_17_72" value="72" disabled="">
<label class="optionvalue" for="filter_17_72"> Some Text</label> </div>
There are several of these in my code and I'd like to have all the labels hidden where their input has the state disabled=""
Any help would be fantastic.
You can use jQuery to achieve this. So it can be something like this
$(function () {
if ($('input[type=checkbox]').prop('disabled')) {
var hide = $('label').hide();
}
});
Jsfiddle
I didn't get managed via JS so I tried via CSS and it works:
#filterForm input.unav_option + label {display:none !important;}
So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.
How do I make this div invisible until the image is clicked?
Preview of page when the div is visible:
So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.
I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.
Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.
Something like (without animations):
<div id="cart" style="display:none">
</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/>
Worked it out. Had to use jQuery.
In the < head> :
<script>
$(document).ready(function(){
$(".addtocart").click(function(){
$(".addedcartbg").fadeIn(500);
$(".addedcartbg").delay(1000);
$(".addedcartbg").fadeOut(500);
});
});
</script>
In the < body> :
<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
css
.hide{
display:none;
}
html
<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>
js
$(function(){
$('.hide-show').bind('click',function(){
$('.hide').fadeIn(500).delay(2000).fadeOut(500);
});
});
can we use google AJAX Language API with EXTjs?????
i have tried example for translitration i have one html file
and typemarathi.js
google.load("elements", "1", { packages: "transliteration" });
function onLoad() {
var options = {
sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage: [google.elements.transliteration.LanguageCode.MARATHI],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control = new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the editable DIV with id
// 'transliterateDiv'.
control.makeTransliteratable([myname]);
}
google.setOnLoadCallback(onLoad);
it works fine.
but if i write the textfield in extjs
Ext.onReady(function(){
var form1=new Ext.FormPanel({
renderTo:document.body,
frame:true,
title:'My First Form',
widyh:250,
items:[{ xtype:'textfield', fieldLabel:'First name', name:'firstname'}]
});
});
and try to pass firstname (name attribute to control.makeTransliteratable([firstname])) then it does not work... it says invalid id error
but if i pass->(html textfiled name to it) control.makeTransliteratable([myname]) it works fine
(i want to type and display multiple nonEnglish languages data
programatically frontend i used EXTjs is there any another way to do so if yes the suggest me. pls..
Yes you can.
Besides someone should clean his code, thats hurrible.
Yes, you can. But you should know that ExtJs automatically generates identifiers for html elements:
html:
<div class="x-form-item x-form-label-left x-box-item" id="ext-gen27" style="left: 0px; top: 0px;">
<label style="width: 55px;" class="x-form-item-label" id="ext-gen28">Send To:</label>
<div style="padding-left: 60px; width: 668px;" class="x-form-element" id="ext-gen26">
<div class="x-form-field-wrap x-form-field-trigger-wrap x-trigger-wrap-focus" id="ext-gen24" style="width: 668px;">
<input type="text" name="to" id="ext-comp-1002" autocomplete="off" size="24" class=" x-form-text x-form-field x-form-focus" style="width: 651px;">
</div>
</div>
</div>
js:
....
items: [{
xtype: 'combo',
store: ['test#example.com', 'someone-else#example.com' ],
plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
fieldLabel: 'Send To',
name: 'to'
}]
As I understand you need to translate the label. In order to do this you should get the id of the label. To do this you can use TextField's label property (myField.label.id). If you want to translate a lot of elements then probably it'll be better for you to use something like this:
var control = new google.elements.transliteration.TransliterationControl(options);
var labelIds = [];
Ext.each(Ext.select('label'), function(item){
labelIds.push(item.id);
});
control.makeTransliteratable(labelIds);
But be aware that you should call this only after rendering all elements. Also you can write a some plugin that will inject this functionality into 'render' method. Writing a plugin is a better but a bit more harder way.