I have a question about kendo window.
I have a input like this
<div id="windowForAssign"></div>
<div>
<p>Your name</p>
<input type="text" id="name" >
<button type="button" id="btnSend">Send</button>
</div>
And when I click on button, a window will pop-up. Here, I use Kendo window.
$('#btnSend').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Sample title";
var url = "";
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '120px',
iframe: true,
resizable: false,
title: title,
content: null,
visible: false
});
var popup = $("#windowForAssign").data('kendoWindow');
popup.open();
popup.center();
}
But I don't know how to get data from input for content.
Thank you for your help!
You can use the content method for this. From Telerik docs:
Gets or sets the content of a Window.
Just pass in the input's value by using popup.content($("#name").val());
Dojo example here
<div id="windowForAssign"></div>
<div>
<p>Your name</p>
<input type="text" id="name" />
<button type="button" id="btnSend">Send</button>
</div>
<script>
$(document).ready(function () {
$('#btnSend').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Sample title";
var url = "";
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '120px',
iframe: true,
resizable: false,
title: title,
content: null,
visible: false
});
var popup = kendoWindowAssign.data('kendoWindow');
popup.content($("#name").val());
popup.open();
popup.center();
};
});
</script>
To get the input value, you can use jQuery as follows:
$("#name").val();
Learn more about jQuery's .val() method here
This will get you the desired value from the input field that you require to set the content for your window.
Now, set your content property that you are specifying in your initialization parameters for your kendo window.
Set the content property to following:
content: { template: kendo.template($("#name").val()) }
instead of: content: null
that you have set.
Learn more about kendo.Window's content method here
This should get you the input value for your kendo window on button click event.
Here I am using kendo.template method that kendo has to set the content for the kendo window and you can read more about that here
Related
I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.
I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.
Does anybody know If I can do this while creating the control?
<div id="fund" class="col-xs-3">
input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.test,
widget: $parent.searchSource,
dataTextField: 'managerName',
dataValueField: 'managerId',
filter: 'contains',
autoBind: false,
minLength: 3,
enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value
change: function(){ if(this.value() && this.selectedIndex == -1)
{
setTimeout(function () {$parent.selectedManagerId(null);}, 100);}},
dataSource: {
serverFiltering: true,
transport: {
read: $parent.retrieveManager
}
}
}" />
</div>
I ended up wrapping the kendo combox definition in a function, so it now looks likes this:
<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />
The kendo combobox is still wrapped and has an id, which I later use to manipulate it in javascript:
<div class="col-xs-3" id="funds">
<input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.selectedManagerId,
...
}" />
</div>
And this is the JavaScript function bound to the onclick checkbox's event:
function SetFundsCombobox() {
var fundsDiv = document.getElementById('funds');
var inputSelector = fundsDiv.getElementsByClassName('k-input');
var span = fundsDiv.getElementsByTagName('span');
if (document.getElementById('overrideGlobalMappingCheck').checked) {
document.getElementById('funds').disabled = false;
inputSelector[0].disabled = false;
span[1].classList.remove("k-state-disabled");
} else {
document.getElementById('funds').disabled = true;
inputSelector[0].disabled = true;
span[1].classList.add("k-state-disabled");
}
};
I'd have rather preferred to perform this via the view model, but it works for now.
EDIT:
I've been able to do this the right way (following the MVVM pattern), so now rather than wrapping the kendo combo box in a function, I added the following function in the view model:
$scope.overrideGlobalMappingChecker = ko.computed(function () {
if ($scope.entityMapping()) {
var checkboxChecked = $scope.entityMapping().overrideGlobalMapping();
$("#funds .k-input").prop('disabled', !checkboxChecked);
if (!checkboxChecked) {
$scope.selectedFundId(null);
}
}
});
So now, what the html only needs is the definition of the id in the div containing the combo box:
<div class="col-xs-3" id="funds">
<input data-bind="title: $parent.selectedFundName, kendoComboBox: {
autoBind: false,
...
}" />
</div>
And that's it, it's a much cleaner/correct way to handle this.
This has been answered several times but it seems Sweet Alert has made changes and html:true no longer works, just trying to add a clickable URL
Docs say
HTML is no longer used. Instead, use the content object.
but they don't really provide any examples
Below code works but displays the entire <a href .... </a> rather than just the CLICK HERE
swal({
title: "TITLE HERE",
//text: "<a href='#'>CLICK HERE<a>",
html: true
});
This code should work . You can use content now with specific DOM element
var el = document.createElement("a");
el.href = "www.stackoverflow.com";
el.innerText = "Click here";
swal("Write something here:", {
content: el,
});
check this here :
https://sweetalert.js.org/docs/#content
as shown in the sample you can pass a slider input to the alert
Here is a working fiddle
https://jsfiddle.net/vq13hac4/2/
Sweet Alert can handle the creation of the html element for you. So the answer by Niladri can be rewritten as:
swal("Write something here:", {
content: {
element: "a",
attributes: {
href: "http://www.stackoverflow.com",
innerText: "Click here"}}});
#Niladri options is good for Sweet Alert 2.
var form = document.createElement("div");
form.innerHTML = `
<span id="tfHours">0</span> hours<br>
<input style="width:90%;" type="range" name="tfHours" value=0 step=1 min=0 max=25
onchange="window.changeHours(this.value)"
oninput="window.changeHours(this.value)"
><br>
<span id="tfMinutes">0</span> min<br>
<input style="width:60%;" type="range" name="tfMinutes" value=0 step=5 min=0 max=60
onchange="window.changeMinutes(this.value)"
oninput="window.changeMinutes(this.value)"
>`;
swal({
title: 'Request time to XXX',
text: 'Select time to send / request',
content: form,
buttons: {
cancel: "Cancel",
catch: {
text: "Create",
value: 5,
},
}
}).then((value) => {
//console.log(slider.value);
});
I have created a Codepen with a Sweet Alert form data inside. Try it here!
I'm trying to get an instance of the current modal window (to save the data of the modal window to a file). But no success. I tried to do this via onActivate and then console.log($(this));
What is the correct method for doing this? Or I should have filled the data via template and then use content property of the kendoWindow ? THX!
Grid:
$("#grid")
.kendoGrid({
dataSource: {
transport: {
read: {
url: "/api/GridData/GetCustomers",
dataType: "json"
}
}
},
columns: [
{
command: { text: "View Details", click: viewDt },
title: "View DT",
width: "100px"
}
]
});
HTML:
<form id="formViewDetail">
Имя клиента:<br>
<input type="text" name="ClientName" id="ClientNameViewDetail" value="">
<br>
ОКПО:<br>
<input type="text" name="ClientOKPO" id="ClientOKPOViewDetail">
<br>
Дата регистрации:<br>
<input type="text" name="RegistrationDate" id="RegistrationDateViewDetail">
<br>
Дата закрытия:<br>
<input type="text" name="RemovalFromClientsDate" id="RemovalFromClientsDateViewDetail">
<br>
Комментарий:<br>
<input type="text" name="Comment" id="CommentViewDetail">
<br>
<button id="SubmitViewDetail">Сохранить</button> <button id="CloseViewDetail">Закрыть</button>
</form>
Modal window:
var myWindow = $("#window");
myWindow.kendoWindow({
width: "600px",
title: "Редактирование данных клиента:",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
activate: onActivateWnd
//close: onClose
});
function onActivateWnd(e) {
console.log($(this));
}
Fill in data:
function viewDt(e) {
var dItem = this.dataItem($(e.currentTarget).closest("tr"));
console.log(dItem);
myWindow.data("kendoWindow").center().open();
//disabling input
$("#formViewDetail").find("#ClientNameViewDetail").prop('disabled', true);
$("#formViewDetail").find("#ClientOKPOViewDetail").prop('disabled', true);
$("#formViewDetail").find("#RegistrationDateViewDetail").prop('disabled', true);
$("#formViewDetail").find("#RemovalFromClientsDateViewDetail").prop('disabled', true);
//passing data to form input
$("#formViewDetail").find("#ClientNameViewDetail").val(dItem.ClientName);
$("#formViewDetail").find("#ClientOKPOViewDetail").val(dItem.ClientOKPO);
$("#formViewDetail").find("#RegistrationDateViewDetail").val(dItem.RegistrationDate);
$("#formViewDetail").find("#RemovalFromClientsDateViewDetail").val(dItem.RemovalFromClientsDate);
}
The provided information suggests that the Window holds one data item from the Grid, which is displayed when the user clicks on a button inside a Grid row. In this case, it will be a lot easier to retrieve the desired information from the Grid's data item, instead of the Window's content. The Grid data item is available in the dItem variable.
If you want to save the Customer information after the user has edited it, then consider using the Grid's built-in popup editing and the save event. In this way, the Grid data item will always hold the latest values.
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save
http://demos.telerik.com/kendo-ui/grid/editing-popup
It is also possible to use popup editing with a custom popup edit form template:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-editable.template
Finally, in order to get a data item with the Kendo UI-related stuff inside, use toJSON() to get a plain object:
http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-toJSON
I am getting data from server and loading them to JQuery auto suggest. It's works fine. But I don't know how to configure it. I Initialize my text box to it. Now i need when user select one value from it, He will be not able to choose another value of he cant enter a word, except he can delete old value.
Here is my code :-
$(document).ready(function(e){
//handle auto suggestion when compose message
var user_ids = {};
//var hidden_user_ids = $('input:hidden[name=user_ids]');
var url = '/account/insiderName';
var conf = {
selectedItemProp: 'name',
searchObjProps: 'name',
asHtmlID: 'insider_ids',
neverSubmit: true,
multiSelect: false,
preFill: ',' //, {{attributes: {name: 'joe', value: '12345'}, num: '1'}},
};
$('.insiderUser').autoSuggest(url, conf);
});
Here is my text Box Code:-
<div class="field to"><input type="text" name="toInsider" value="" class="insiderUser"/></div>
Add this configuration option also:
selectionLimit: 1
since it defaults to false, which means no limit.
From the docs: https://github.com/wuyuntao/jquery-autosuggest
I have an x-editable input, which I'm using to edit usernames. The default action of the element is when you click on itself, you can edit a value. But I want to enable click on the element's .editable and be able to edit the value inside my input. To shorten stuff here is a jsfiddle of my current situation.
jQuery:
$(function(){
$.fn.editable.defaults.mode = 'inline';
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name'
}
);
//ajax emulation. Type "err" to see error message
$.mockjax({
url: '/post',
responseTime: 100,
response: function(settings) {
if(settings.data.value == 'err') {
this.status = 500;
this.responseText = 'Validation error!';
} else {
this.responseText = '';
}
}
});
HTML:
<div class="control-group control-group-inline">
<label class="control-label labelModified" for="publicname-change">Public name:</label>
<div class="controls">
Mr. Doe
<div class="edit">edit <i class="icon-pencil pencil-input-change"></i></div>
</div>
</div>
It would be nice if someone can help me and edit my linked jsfiddle in the way I described. On click .edit, be able to edit value.
It has a function called enable you can use that to enable edit
$('.edit').click(function(e){
e.stopPropagation();
$('#publicname-change').editable('toggle');
});
This won't work if you don't add the first line because default behaviour is to disable edit on click of any other element.
Edit:
To enable editing only on the click of edit button and not the text, set toggle property to manual.
$('#publicname-change').editable({
type: 'text',
url: '/post',
pk: 1,
placement: 'top',
title: 'Enter public name',
toggle:'manual'
}
JSFiddle