)
I am using KENDO UI with IFRAME and I want to display an alert when the user clicks to close his WEB browser when the IFRAME is active with KENDO.
So I specify that I want to see the alert is triggered only if the IFRAME is active
Here is my code :
<button id="refresh" class="k-button k-primary" title="START">START</button>
<div id="messageDialog"></div>
<script>
var isClosed = false;
$("#refresh").click(function(e) {
e.preventDefault();
var id = "target_iframe";
var dialog = $("<div><iframe class='k-content-frame' name='" + id + "'></div>").kendoWindow({
title: "test",
close: function() { this.destroy() },
iframe: true,
close: function(e) {
if(!isClosed) {
$("#messageDialog").kendoDialog({
title: "test",
content: "Exit ?",
visible: false,
show: function() {
e.preventDefault();
},
actions: [{
text: "Exit",
action: function(e){
setTimeout(function() {
isClosed = true;
$("#target_iframe").data("kendoWindow").close();
}, 200);
},
primary: true
},{
text: "Cancel"
}]
}).data("kendoDialog").open();
}
},
deactivate: function() {
isClosed = false;
}
});
dialog.data("kendoWindow").center().open();
$("<form />", {
action: "https://www.mywebsite.com/",
method: "post",
target: id
})
.hide().appendTo("body")
// add any data
.append("<input name='foo' />").find("[name=foo]").val("bar").end()
.submit().remove();
});
</script>
Thank you in advance :)
Related
I use kendo grid and want to show kendo tooltip for icon in header cells.
I have the following code:
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("List", "i3screenResult"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
},
dataBinding: function (e) {
$('.questionmark').on("hover", function () {
var tooltip = $(this).kendoTooltip({
content: $(this).attr('tooltip'),
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
}).data("kendoTooltip");
});
},
scrollable: false,
columns: [
{
field: "BackgroundReportAccount",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.BackgroundReportAccount.Details")' />",
width: 150
},
{
field: "ProviderReferenceId",
headerTemplate: "#T("DrugConsortium.i3screen.Fields.ProviderReferenceId") <img src='/images/question-mark-icon.png' class='questionmark' tooltip='#T("DrugConsortium.i3screen.Fields.ProviderReferenceId.Details")' />",
width: 150
},
//....
]
});
});
</script>
It works, but only since second hover event for img.
Why so and how to fix?
Try this AFTER grid initialization:
$('#grid').kendoTooltip({
content: function(e) {
return $(e.target).attr('tooltip');
},
filter: 'img.questionmark',
width: 120,
position: "top",
animation: {
open: {
effects: "zoom",
duration: 150
}
}
});
Also, you should change the attribute name from tooltip to data-tooltip since tooltip is not a standard HTML attribute. Then you can get it's value with $(e.target).data('tooltip');
Demo
I want to implement individual form for ajax call. I want to have a command, which opens new popup window with one field, user fills this field and then clicks "Send" and then I do an ajax call to controller. My code:
$(document).ready(function () {
var grid = $("#memberList-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("MemberSearchList", "RandomPoolSelection"))",
type: "POST",
dataType: "json",
data: function () {
var data = {
SearchMember: $('##Html.IdFor(model => model.SearchMember)').val(),
SelectionId: $('#SelectionId').val()
};
addAntiForgeryToken(data);
return data;
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(Model.PageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(Model.AvailablePageSizes)],
#await Html.PartialAsync("_GridPagerMessages")
},
scrollable: false,
columns: [
{
field: "PrimaryID",
title: "#T("PoolMemberList.Fields.PrimaryID")",
width: 150
},
{
field: "FirstName",
title: "#T("PoolMemberList.Fields.FirstName")",
width: 150
},
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
]
});
wndExclude = $("#exclude")
.kendoWindow({
title: "Excuse Reason",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
excludeTemplate = kendo.template($("#excludeTemplate").html());
});
function showExclude(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wndExclude.content(excludeTemplate(dataItem));
wndExclude.center().open();
}
and template :
<script type="text/x-kendo-template" id="excludeTemplate">
<div id="exclude-container">
<input type="text" class="k-input k-textbox" id="note">
<br />
</div>
</script>
how to implement sending this data (with ID) to controller?
A simple way to do what you want is using a partial view.
this is your command grid
{
command:
{
text: "Exclude",
click: showExclude
},
title: " ",
width: 100
}
and here your function :
function showExclude(e) {
$(document.body).append('<div id="excludeWindow" class="k-rtl"></div>');
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$('#excludeWindow').kendoWindow({
width: "80%",
title: 'excludeForm',
modal: true,
resizable: false,
content: "/YourController/GetPartial?id=" + dataItem.Id,
actions: [
"Close"
],
refresh: function () {
$("#excludeWindow").data('kendoWindow').center();
},
close: function() {
setTimeout(function () {
$('#excludeWindow').kendoWindow('destroy');
}, 200);
}
}).data('kendoWindow');
}
After clicking on the button, you load your window(popup) and call an action that loads a partial view to fill the content of the window.
You can pass whatever you want to your partial view (for example, here I just send Id)
public ActionResult GetPartial(Guid id)
{
var viewModel= new ViewModelExclude
{
Id = id,
};
return PartialView("_exclude", viewModel);
}
and the partial view is something like this:
#model ViewModelExclude
#using (Html.BeginForm("", "Your action", FormMethod.Post, new { id = "SendForm"}))
{
<input class="k-rtl" name="#nameof(Model.Id)" value="#Model.Id">
<button type="submit" class="btn btn-primary">Send</button>
}
and then call Your ajax after clicking on send button:
$("#SendForm").submit(function (e) {
e.preventDefault();
var form = $(this);
var formData = new FormData(this);
$.ajax({
type: "POST",
url: '#Url.Action("send", "yourController"),
data: formData,
contentType: false,
processData: false,
success: function (data) {
},
error: function (data) {
}
});
});
Your send action something like this:
[HttpPost]
public ActionResult Send(ViewModelExclude view)
{
....
return Json();
}
I want to hide delete button in some rows with certain conditions. I have checked the following link but it is still not working well.
http://www.telerik.com/forums/hide-edit-and-delete-button-based-on-the-status-of-each-record
Their code like this:
function onEdit() {
$(".k-grid-cancel").on("click", function () {
setTimeout(function () {
console.log("trigger");
$("#Grid").data("kendoGrid").trigger("dataBound");
});
})
}
The problem is when you changed any items in the popup edit window, the delete button will show up on the original gray out area. Although you click the cancel button, it will disappear. But if you click the right up corner [x] to close the popup edit window, the delete button will stay there.
Any body know there is any new update for the kendo grid conditional button?
Thanks
First add an event in the grid as
.Events(ev =>
{
ev.Cancel("onEditCancel");
})
And then on js
function onEditCancel(e) {
e.sender.cancelChanges();
e.preventDefault();
}
It will work.
You can achieve this requirement by using onDataBinding event of KendoGrid.
function onChange(arg) {
var selected = $.map(this.select(), function(item) {
return $(item).text();
});
console.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
}
function onDataBound(arg) {
console.log(arg);
console.log("Grid data bound");
}
function onDataBinding(arg) {
console.log(arg);
console.log("Grid data binding");
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 350,
change: onChange,
dataBound: onDataBound,
dataBinding: onDataBinding,
selectable: "multiple cell",
pageable: true,
sortable: true,
columns: [
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}"
},
{
field: "UnitsInStock",
title: "Units In Stock"
}
]
});
});
Check this link http://jsfiddle.net/HuTpj/68/ and see the console for events trigger while loading the grid.
In my SPA using backbone.marionette I am trying to render a CompositeView inside tab of an other CompositeView.
I have successfully rendered the control but events are not being registered in DOM
Here is my code sample:
MainView: view.js (that received the subView and render it inside tab)
define(["marionette", "backbone", "kendo", "../SubView/view"],
function (Marionette, Backbone, kendo, subView) {
var View = Marionette.CompositeView.extend({
template: "MainView/template.t",
onRender: function () {
var tabStrip = this.$("#tabStrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.append({
text: "Sub View",
content: new subView().render().$el.html()
});
},
onShow: function () {
//Set Default Active Tab
var tabStrip = $('#tabStrip').data().kendoTabStrip;
tabStrip.select(0);
},
});
return View;
MainView: template.t
<div id="tabStrip"></div>
SubView: view.js
define(["marionette", "backbone", "kendo"],
function (Marionette, Backbone, kendo) {
var View = Marionette.CompositeView.extend({
template: "SubView/template.t",
},
onRender: function () {
var data = [{ Description: "Test 1", ID: 1 }, { Description: "Test 2", ID: 2 }]
this.$("#ddlTest").kendoDropDownList({
dataSource: data,
dataTextField: "Description",
dataValueField: "ID",
});
return this;
},
});
return View;
});
SubView: template.t
<input id="ddlTest"/>
Any help will be highly appreciated.
I am using a Kendo UI grid, which looks like this:
function refreshGrid()
{
$(".k-pager-refresh.k-link").click();
}
var editWindow;
var fields= {FullName: {type: "string"}, Email: {type: "string"}, LogCreateDate: {type: "date"}};
var gridColumns =
[{
width: 90,
command: {
name: "edit",
text: "Edit",
click: function(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
editWindow = $("#edit").kendoWindow({
title: "Edit User",
modal: true,
visible: false,
resizable: false,
width: 800,
height: 400,
content: 'myediturl' + dataItem.ID
});
editWindow.data("kendoWindow").center().open();
return false;
}
}
},
{
width: 90,
command: {
name: "delete",
text: "Delete",
click: function(e) {
//alert(this.dataItem($(e.currentTarget).closest("tr")).ID);
var id = this.dataItem($(e.currentTarget).closest("tr")).ID;
if (confirm("Are you sure you want to delete this user?"))
{
$.ajax({
type: 'POST',
url: '#Url.Action("deleteuser","admin",null, "http")' + "/" + this.dataItem($(e.currentTarget).closest("tr")).ID,
success: function (param) { refreshGrid(); },
async: false
});
}
return false;
}
}
},
{
field: "FullName",
title: "Full Name",
type: "string"
},
{
field: "Email",
title: "Email",
type: "string"
},
{
field: "LogCreateDate",
title: "Created",
type: "date",
template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #'
}];
//getSorts the columns of the grid
function getColumns() {
//Parsing the set of columns into a more digestable form
var columns = "";
for (var col in gridColumns) {
if (!!gridColumns[col].field)
{
if (columns.length > 0) {
columns += ";";
}
columns += gridColumns[col].field + "," + gridColumns[col].type;
}
}
return columns;
}
function getSorts(sortObject) {
if (!(sortObject)) {
return "";
}
//Getting the row sort object
var arr = sortObject;
if ((arr) && (arr.length == 0)) {
return "";
}
//Parsing the sort object into a more digestable form
var columnSet = getColumns();
var returnValue = "";
for (var index in arr) {
var type = "";
for (var col in gridColumns) {
if (gridColumns[col].field === arr[index].field) {
type = gridColumns[col].type;
}
}
returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type;
}
return returnValue;
}
var grid;
$(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "mydatasourceurl",
type: "POST",
},
parameterMap: function (data, type) {
data.filters = JSON.stringify(data.filter);
data.columns = JSON.stringify(getColumns());
data.sorts = JSON.stringify(getSorts(data.sort));
console.log(data);
return data;
}
},
schema: {
fields: fields,
data: "Data",
total: "Total"
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
toolbar: [{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}],
height: 392,
groupable: false,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: gridColumns
});
grid = $("#grid").data("kendoGrid");
});
My create toolbar action is not triggered on click. How can I resolve this problem, is Kendo UI able to handle toolbar click events? The best solution I came up with looks like this:
$(".k-button.k-button-icontext.k-grid-add").click(function () {
//If the window doesn't exist yet, we create and initialize it
if (!grids[gridContainerID].addWindow.data("kendoWindow")) {
grids[gridContainerID].addWindow.kendoWindow({
title: "Add " + entityName,
width: "60%",
height: "60%",
close: onClose,
open: onAddOpen,
content: addUrl
});
}
//Otherwise we just open it
else {
grids[gridContainerID].addWindow.data("kendoWindow").open();
}
//Centralizing and refreshing to prepare the layout
grids[gridContainerID].addWindow.data("kendoWindow").center();
grids[gridContainerID].addWindow.data("kendoWindow").refresh();
return false;
});
Thanks in advance.
Instead of using that complex selector use the one that Kendo UI creates from name:
toolbar: [
{
name: "Add",
text: "Add new record",
click: function(e){console.log("foo"); return false;}
}
],
and then:
$(".k-grid-Add", "#grid").bind("click", function (ev) {
// your code
alert("Hello");
});
In kendogrid docs here shows that there is no click configuration for grid toolbar buttons like grid.colums.commands.
To solve this problem you can reference following steps:
create a template for toolbar
<script id="grid_toolbar" type="text/x-kendo-template">
<button class="k-button" id="grid_toolbar_queryBtn">Query</button>
</script>
apply tempate to toolbar
toolbar:[{text:"",template: kendo.template($("#grid_toolbar").html())}]
add event listener to button
$("#grid_toolbar_queryBtn").click(function(e) {
console.log("[DEBUG MESSAGE] ", "query button clicked!");
});