I'm having trouble adding a formatter to a checkbox in my grid. I'm currently using one of the latest versions of free-jqgrid.
My column is defined as such:
name: 'tested', width: 95, template: "booleanCheckboxFa", editable: true, formatter: function (cellValue, option) {
return '<input type="checkbox" name="checkbox" id="txt_' + option.rowId + '" onclick="alert(\'hi\')" />';
}
},
I just have an alert on the onclick event just to prove I got that far, ultimately this function will control the state of other checkboxes in the same row.
the rendered html i get back is:
<input type="checkbox" value="<input type="checkbox" name="checkbox" id="txt_jqg2" onclick="alert('hi')">" id="jqg2_tested" name="tested" role="checkbox" aria-checked="false" class="editable">
it seems to be adding the rendered html and adding it into the chekbox html, instead of just replacing it. No errors appear in my developer tools console.
I also tried
$("input[type=checkbox]").click(function() {
with an alert in that function, but it never fires.
If there's a BETTER way to bind a function to the click event of a checkbox, I'm all for it. Any help is greatly appreciated!
Related
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");
The existing solution for dropdownlist:
<input id="countryid" name="countryid"
data-role="dropdownlist"
data-text-field="text"
data-value-field="value"
data-bind="value: countryid"
data-source="CountryidNameList"
data-auto-bind="true"
data-bound="updateModel"
data-value-primitive="true"/>
function updateModel(e) {
var widget = e.sender;
setTimeout(function() {
widget.trigger("change");
});
};
when we migrate to new version of Kendo UI 2015 (commercial version), the above solution does not work any more:
for form, the dropdownlist does not set the first value of the dropdownlist any more;
for kendo-grid (change the input, but still use the updateModel function), in edit mode: the dropdownlist is showing a loading icon (there is no error and the value is loaded in the dropdownlist while click)
anyone can help?
Well you can modify your kendo element a bit as:
<input id="countryid"
name="countryid"
data-text-field="text"
data-value-field="value"
data-option-label="Select Country..."
data-bind="source: CountryidNameList,value:countryid" data-role="dropdownlist"
></input>
and do the source binding from javascript. Have done a JSBin for your issue here. Hope you find it useful!
I am using the tokeninput control found here at http://loopj.com/jquery-tokeninput/ - its quite popular I believe.
I have the following code that fills the input box nicely with author names - but I want to prepopulate the control with values found in the database when the user is in an EDIT session i.e. to find authors that have been found for that record already (looks something like this):
Here's the code:
$("#authorlist").tokenInput('/author/getauthors/', {
hintText: "Enter surname",
searchingText: "Searching...",
preventDuplicates: true,
allowCustomEntry: true,
highlightDuplicates: false,
tokenDelimiter: "*",
theme: "facebook"
// prePopulate: [{"id": 5016, "name": "Test 1" }]
});
Obviously this already gets a full list of authors (/author/getauthors/) - but it needs to prepopulate from that list too, with authors already found that record - and thats the bit I can't seem to figure out.
I can see that that you can use prePopulate in the javascript (I've commented it out) and I have the found author values in my Edit.cshtml i.e.
#foreach(var item in Model.AUTHORs.Select(model => new { model} ))
{
<div type="hidden" id="authorHidden" > #item.model.FULL_NAME</div>
}
So it's just a case of putting those values in some kind of json format and getting the tokeninput control to populate them ready for when the form is loaded and shown to the user.
Other code for displaying the tokeninput control in Edit.cshtml is:
<div class="editor-label">Authors</div>
<div class="authors">
<div class="editor-field">
<input type="text" id="authorlist" name="tiAuthors" />
</div>
</div>
Any help or pointers are much appreciated.
You could use an HTML5 data-* attribute on your input inside the view to put the list of authors that you want to be prepopulated:
<input type="text" id="authorlist" name="tiAuthors" data-authors="#Json.Encode(Model.AUTHORs.Select(a => new { id = a.AuthorId, name = a.AuthorName })))" />
and then:
$('#authorlist').tokenInput('/author/getauthors/', {
hintText: 'Enter surname',
searchingText: 'Searching...',
preventDuplicates: true,
allowCustomEntry: true,
highlightDuplicates: false,
tokenDelimiter: '*',
theme: 'facebook',
prePopulate: $('#authorlist').data('authors')
});
I am having trouble when submitting a dynamically created form.
This is how I create the form after a radio button is checked:
$(document).ready(function(){
$('input[name$="rad-tweet"]').click(function(){
var radio_value = $(this).val();
if(radio_value==='hash') {
$('#mainform2').empty();
$('#mainform2').remove();
$('#radio-buttons').after('<form action="" id="mainform" method="POST" ></form>');
$('#mainform').append('<label class="label" for="Location" > Location</label>'+
'<input class ="text-box" type="text" name="Location" id="Location"/>'+
'<label class="label" for="Since" >Since</label>'+
'<input class ="text-box" type="text" name="Since" id="Since" />'+
'<select name="Time" id="Time" style="width:80px;">'+
'<option value="MINUTE">Minute(s)</option>'+
'<option value="HOUR">Hour(s)</option>'+
'<option value="DAY">Day(s)</option>'+
'<option value="WEEK">Week</option>'+
'</select>'+
'<label class="label" for="Time" >Ago </label>'+
'<label class="label" for="Limit" >Up to</label>'+
'<input class ="text-box" type="text" name="Limit" id="Limit" />'+
'<label class="label" for="Limit" >Results </label>'+
'<input class ="submit-button" type="submit" id="submitButton" value="Get Hashtags" style="width:95px;" />');
}
else if(radio_value==='trends') {
$('#mainform').empty();
$('#mainform').remove();
$('#radio-buttons').after('<form action="" id="mainform2" method="POST" ></div>');
$('#mainform2').append('<label class="label" for="Location" > Location </label>'+
'<input class ="text-box" type="text" name="Location" id="Location"/> '+
'<input class ="submit-button" type="submit" id="submitButton" value="Get Trends" style="width:95px;" />');
}
});
This code follows the code above, and I try to make an XHR request to a php script when the from #mainform is submitted.
$('#mainform').submit(function(){
if(runProgram()){
//Loading div. To be hidden upon sucessful ajax. Disable submit button
document.getElementById("Loading").style.visibility="visible";
document.getElementById("submitButton").disabled=true;
$.ajax({
url: "indexProgram.php",
type: 'POST',
data: $(this).serialize(),
success:function(data, textStatus, jqXHR){
//take away loading div and reenable submit.
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("submitButton").disabled=false;
var arr = data.split(",-,");
BeginTime = arr[3];
if(!(/^\s*$/).test(arr[0])) {
var lookAt = ge.createLookAt('');
data_array = arr[4].split("|");
alert(data);
// Set the position values.
lookAt.setLatitude(parseFloat(arr[0]));
lookAt.setLongitude(parseFloat(arr[1]));
//lookAt.setLatitude(43.653226);
//lookAt.setLongitude(-79.3831843);
lookAt.setTilt(50.0);
lookAt.setRange(9000.0); //default is 0.0
// Update the view in Google Earth.
ge.getView().setAbstractView(lookAt);
}
else{
alert("Location does not exist. Please try again with an existing Location")
}
},
complete : function(){
modDom(data_array);
}
});
}
//doesn't refresh pag
return false;
});
});
Before, when the form was static, the ajax xhr call completed successfully, now it doesn't.
I have been reading about what the issue might be, and about how the form is not in the DOM, and to use .live, and I have tried, but it still does not work.
Could somebody please help me out?
Your problem is that in the first place your document loads then jquery code is loaded. Then you create a dynamically created form which jquery does not get to post. Instead remove $('document').ready() and put a function let suppose submit_form(). call this form on the click event of you form and your form will be submitted. Another approach is that when dynamically you are creating form element assign them all an class. Before submitting the form loop through with this class to get all values and append the with the serialize form to submit.
Your answer lies in the depths of the Live event handler for jquery.
http://docs.jquery.com/Events/live
I don't really remember all that well, but i think its got to do something with the click event handler not binding dynamic elements, but the Live event handler does it, so try using that.
UPDATE
Sorry, its seem that the Live() event handler has been deprecated in the latest jQuery.
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers. Users of older versions of jQuery should use
.delegate() in preference to .live().
The alternative is to use the jquery On() event handler.
http://api.jquery.com/on/
EXAMPLE USAGE
$("#dataTable tbody tr").on("click", function(event){
alert($(this).text());
});
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.