I would like to get confirmation before displaying(open) the popup editor when click on edit command button in the kendo grid same as delete confirmation.
I have used Edit event of the grid. It is successfully display the confirmation dialogue but behind it opens the popup editor window as well.
Is there any way I can display popup editor window only after confirmation from user?
You can use the editRow() method. Documentation.
HTML:
<div id="container">
<div id="grid"></div>
</div>
JavaScript:
var data = [{"FirstName": "Margaret", "LastName": "Peacock"},{"FirstName": "Nancy", "LastName": "Leverling"}];
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: data
},
editable: "popup",
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ command: { text: "Edit", click: edit }, title: "", width: "180px"}
]
}).data("kendoGrid");
function edit(e) {
e.preventDefault();
var conf = confirm("Are you sure you want to edit?");
if (conf) {
this.editRow($(e.currentTarget).closest("tr"));
}
}
See demo
Related
In my scenario, I am maintain a grid that need to be filter a particular column by the onchange event in a textbox. According to the text change grid should be filtered. I already able to use filter capability provided by the enhancedgrid and want to do it externally.
already imported 'dojox/grid/EnhancedGrid','dojo/data/ItemFileWriteStore', dojox/grid/enhanced/plugins/Pagination', 'dojox/grid/enhanced/plugins/Filter',
This is in the external js file. A.js
grid = new EnhancedGrid({
store: new ItemFileWriteStore({
data: gridObject
}),
// "username, firstName, lastName, email, userGroupName, lastLoginValue, phoneNo, organization, status"
structure: [
{
name: "User Login Name",
field: "username",
width: "84px"
},
{
name: "First Name",
field: "firstName",
width: "84px"
},
{
name: "Last Name",
field: "lastName",
width: "70px"
},
{
name: "Email",
field: "email",
width: "70px"
}
],
rowSelector: '20px',
minRowsPerPage: 5,
rowsPerPage: 5,
plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
},
filter: {
closeFilterbarButton: false,
ruleCount: 2
//itemsName: "rows"
}
}
}, "gridee");
console.log(grid);
/*append the new grid to the div*/
grid.placeAt("gridView");
grid.startup();
--------------- function end ----------------
UsersCtrl.prototype.filterGrid = function () {
var filterText = document.getElementById("txtFilter").value, innerDiv = document.getElementById("gridView").firstChild.getAttribute("id");
// innerDiv gave the grid id to be filtered.
dijit.byId(innerDiv).filter("username", filterText);// Dont no this is correct or not.
};
-----------html file-----------------
Here angular and dojo both used. angular function also called successfully and able to get into the filterGrid function.
grid === UsersCtrl
<input type="search" placeholder="Filter by Keywords" data-column="all" data-ng- model="grid.searchText" data-ng-change="grid.filterGrid()" data-dojo-type="dijit/form/TextBox" id="txtFilter">
<div id="gridView" style="width:100%; height:300px" align="center" class="claro"></div>
I am getting this error TypeError: object is not a function. Please help to overcome this.
Gladly I was able to get an idea after referring this Set query to search all fields of a dojo datagrid
import dijit/registry
grid = registry.byId("grid");
if (filterText) {
grid.setQuery({"username": filterText + "*"});
} else {
grid.setQuery({"username": "*"});
}
//dijit.byId("grid").store.fetch(query: {username: filterText});
I searched Over the Google. I didn't get any source for my requirement.
My output is like
If I click the 1st column linkbutton eFocus011 or other rows linkbutton means it will go to new web bage, but the toolbar Add new record was not working, because I used template for System Name columns field. How to get the correct output?
My code:
var grid= $("#DivGrid").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record",name: "popup",iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
// template: kendo.template($("#customPopUpTemplate").html())
},
navigable: true,
columns:
[
{
field: "SystemName",
title: "System Name",
width:"130px",
// template: '<a href >#: SystemName # </a>'
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
// template:'<a href class="list k-Linkbutton" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
// template: '<a href="\\#" onclick="NewWindow(this.id)" id="#= SystemId#" >#= SystemName #</a>'
},
{
field: "SystemIP",
title: "System IP",
width:"100px"
},
{
field: "SystemType",
title: "Type",
width:"80px",
editor: function (container, options) {
$("<input />")
.attr("data-bind", "value:SystemType")
.appendTo(container)
.kendoDropDownList({
dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
dataTextField: "text",
dataValueField: "text"
});
}
},
{
field: "OSKey",
title: "OS Key",
width:"200px"
},
{
command: ["edit","destroy"],
title: " ",
width: "190px"
}
]
}).data("kendoGrid");
$(".k-grid-popup", grid.element).on("click", function ()
{
var popupWithOption =
{
mode: "popup",
template: kendo.template($("#customPopUpTemplate").html()) ,
window: {
title: "Add New Record"
}
};
grid.options.editable = popupWithOption ;
grid.addRow();
$(".k-window-action")
{
//visibility: hidden ;
}
grid.options.editable = "inline";
});
};
</script>
Also I used two types of editing. If I click toolbar, means I used popup Kendo editing edit and Delete means inline editing?
I think error is in
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId #\" href='\\#'>#= SystemName #</a>"
If I changed this line to:
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemId=0 #\" href='\\#'>#= SystemName #</a>"
It will work only toolbar, columns linkbutton is not working.
Thanks in advance!!!
Your code is looking good to me
Confirm whether SystemId is present in models, if not then Rectify "SystemId" to "SystemIP"
and make a check
template:"<a onclick='NewWindow(this.id)' id=\"#= SystemIP#\" href='\\#'>#= SystemName #</a>"
I searched Over the Google, i didnt get my Requirement, My Screen Like
if i click the System Name Means i want to display the row details in another Web page how to do it?
My COde Like'
var grid= $("#DivGrid").kendoGrid(
{
dataSource: DataSource4,
scrollable: true,
sortable: true,
filterable: false,
reorderable: true,
resizable: true,
pageable: true,
toolbar: [ { text : "Add new record", name: "popup", iconClass: "k-icon k-add"} ],
editable : {
mode : "inline"
// template: kendo.template($("#customPopUpTemplate").html())
},
navigable: true,
columns:
[ {
field: "SystemName",
title: "System Name",
width:"130px",
// template: '<a href="\\#" id="Link1" onclick="NewWindow()" class="k-Linkbutton" >#= SystemName #</a>'
template:'<a href class="list k-Linkbutton" id="#= SystemId#" >#= SystemName #</a>'
// headerTemplate: ' <asp:linkbutton id="LinkButton2" Text="System Name">System Name</asp:linkbutton>'
},
{
field: "SystemIP",
title: "System IP",
width:"100px"
},
{
field: "SystemType",
title: "Type",
width:"80px",
editor: function (container, options) {
$("<input />")
.attr("data-bind", "value:SystemType")
.appendTo(container)
.kendoDropDownList({
dataSource: [ { text: "--Select--" ,value: "0"},{ text: "PC" ,value: "1"},{ text: "LAPTOP" ,value: "2" }],
dataTextField: "text",
dataValueField: "text"
});
}
},
{
field: "OSKey",
title: "OS Key",
width:"200px"
},
{
command: ["edit","destroy"],
title: " ",
width: "190px"
}
]
}).data("kendoGrid");
I want to display the Row details in another wen page i don't have any idea ? i searched Google But i didn't Get,
help me how to do ?
thanks in advance!!!
I have a KENDO Grid and the fields and columns in that are populated from a datasource which is intern populated from an action.
Now i want to bind a particular cell content in that grid to another controller action and pass that ID of the cell also. How do I accomplish this. Below is the code for my grid. I could find answers in kendo UI docs but they use HTML Helpers to achieve this. I want it in the same style as below. Let us take the readername as the cell content for which this binding is required. Anybody tried this before?
$("#eventsgrid").kendoGrid(
{
dataSource: eventsDataSource,
navigatable: true,
pageable:
{
input: true,
numeric: false
},
columns:[
{
field:"",width:"30px", template:'<input type="checkbox" id="selectevent"/>'
},
{
field:"CardNumber",width:"80px"
},
{
field: "Image", width: "45px", title: "Type", template: "<img src='/Content/Themes/Default/images/AlarmType.png' id='AlarmType'/>"
},
{
field: "Priority", width: "60px", title: "Priroty"
},
{
field: "Origin", title:"Event Time"
},
{
field:"Description", title:"Alarm Title"
},
{
field: "ReaderName", title: "Location"
},
{
field: "", title: "Actions and Interactions", width: "160px", template: '<input type="button" value="Acknowledge" onclick="CheckAck" id="Acknowledge" /><br/><a href="javascript:performActions()" >3 Actions</a>'
},
{
field: "Image", title: "More", width: "60px", template: "<img src='/Content/Themes/Default/images/Door.png' onclick='showDetails()' id='door' width='20' height='20'/><div id='cardholderdetails'></div>"
}
],
}).data("kendoGrid");
Now i have a function which calls a $.POST call with the parameters. This function is hooked to the click event of the button. Is there a different way to do this?
I've got a Kendo UI Grid that loads a popup when creating a new or editing an existing record.
I struggling to find a way to change the change the text of the Update button to "Save" when I'm creating a new record (it currently says "Update" - and its not correct).
I was able to change the title of the popup window, but my question is: how do I change the button text?
This is the code:
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
sortable: true,
groupable: true,
height: resizeGrid(),
filterable: true,
toolbar: ["create"],
columns: [
{ field: "OfficeName", title: "Office Name" },
{ field: "SupportNo", title: "Phone No.", width: "100px" },
{ field: "SupportEmail", title: "Email Address", width: "130px" },
{ field: "SupportFax", title: "Fax No.", width: "100px" },
{ field: "SupportFtp", title: "Ftp Url", width: "150px" },
{ command: ["edit", "destroy"], title: "Actions", width: "160px" }],
editable: "popup",
edit: function (e) {
var editWindow = e.container.data("kendoWindow");
if (e.model.isNew()) {
e.container.data("kendoWindow").title('Add New Office');
$(".k-grid-update").text = "Save";
}
else {
e.container.data("kendoWindow").title('Edit Office');
}
}
});
You should define command as:
command: [
{
name: "edit",
text: {
edit: "Edit", // This is the localization for Edit button
update: "Save", // This is the localization for Update button
cancel: "Cancel changes" // This is the localization for Cancel button
}
},
{
name: "destroy",
text: "Delete Office" // This is the localization for Delete button
}
]
In addition, if you also want to change the text Edit in the popup window, you should use:
editable : {
mode : "popup",
window : {
title: "Edit Office", // Localization for Edit in the popup window
}
}
This will update the text in the button of the PopUp Editor:
if (e.model.isNew()) {
$("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Activate";
}
else {
$("a.k-grid-update")[0].innerHTML = "<span class='k-icon k-update'></span>Save";
}
edit: function (e) {
if (e.model.isNew()) {
$(".k-window-title")[0].innerHTML = "Add";
}
}