I am new on kendo ui. I need your help, please. I need to use checkbox somewhere. My problem is when I edit any record, checkbox which is on popup menu can show status of attribute but grid doesn't show. I want to show attribute of the record show in checkbox on grid.
I try to this sample :http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/grid-with-checkbox-column but It doesn't work for my expected.
Here is my code:
{
field: "isWorking",
title: "Çalışıyor",
editor: '<input type="checkbox" #= isWorking ? \'checked="checked"\' : "" # class="chkbx" />'
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
$("personGrid.k-grid-content").on("change","input.chkbx",function(e){
var grid = $("#personGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.set("isWorking", this.checked);
});
And screenshots of how it works. Please follow the ss.
From here this is solution from linke where is given by me up of issue.
Here code is my first work:
{
field: "isWorking",
title: "Çalışıyor",
template: "<input type='checkbox' id='isWorking'/>"
},
{
command: [
{
name: "edit",
text: {
edit: "",
update: "Tamam",
cancel: "İptal"
},
className: "grid-command-iconfix"
},
{
name: "destroy",
text: "",
className: "grid-command-iconfix"
}
],
title: " ",
width: "120px"
}
],
editable: {
mode: "popup",
window: {
title: "Kayıt".i18n()
},
confirmation: "Silmek istediğinizden emin misiniz?".i18n(),
confirmDelete: "Yes"
},
edit: function (e) {
console.log(e);
$("#maritalStatus").data("kendoDropDownList");
}
});
}
});
And here how is work ss. It's show status on popup edit menu but it doesn't show on grid.
please could you help me?
You're setting the checkbox in the template but not its value. It will have always the initial state. Try this template:
template: "<input type='checkbox' id='isWorking' # if (isWorking) { # checked=\"checked\" # } # />"
Demo
Related
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 like this. Inside this template I'm using data-click attribute to the button but event is not firing at all. I don't know what went wrong.
Here is my code. Can anyone help.
$("#defect_grid_general").kendoGrid({
dataSource: ELQApp.GeneralDefectStore,
columns: [
{ field: "Name", title: "Component" },
{ field: "Opname", title: "Operation" },
{ field: "DefectDescription", title: "Defect" },
{ field: "qty", title: "Qty", template: "<input type='text' readonly='readonly' id=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.LaunchKeyPad(this.id,"gen_defect")' style='width:60px' value='#=DefectQty#' readonly=readonly/> <a id='decrement_qty' name='-' data-role='button' onmousedown = 'ELQApp.ELQViewModel.IncrementDecrementValuesBtn1(this.name,"#:ELQGeneralDefectInfoId#","update")' class='km-button minusBtn'></a><a data-role='button' data-name='+' data-type=#=ELQGeneralDefectInfoId# data-flag='update' id='increment_qty' data-click='ELQApp.ELQViewModel.IncrementDecrementValuesBtn' class='km-button plusBtn'></a>", width: "155px" },
{ field: "", title: "", template: "<button data-click='ELQApp.ELQViewModel.RemoveGeneralDefect'>Delete</button>" },
{ field: "", title: "", template: "<input type='button' value='More Info' name=#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.OpenModal("more_info_popup",this.name,this)' id='rem'/>", width: "110px" },
{ field: "", title: "", template: "<a id =#=ELQGeneralDefectInfoId# onclick='ELQApp.ELQViewModel.RemoveGeneralDefect(this.id)' class='deleteBtn'></a>", width: "50px" }
],
height: 220,
});
Hey Chinthaka,
<div id="test-grid" data-role="grid" data-bind="source: testDataSource"
data-columns='[
{
field: "Site",
title: "Site"
} ,
{
title: "Action",
template: kendo.template($("#conditional-action-template").html())
}
]'></div>
<div id="log"></div>
<script id="conditional-action-template" type="text/x-kendo-template">
# if(FirstActionEnabled) { #
<div class='action circle' data-bind="click: firstActionClick"></div>
# } #
# if(SecondActionEnabled) { #
<div class='action square' data-bind="click: secondActionClick"></div>
# } #
</script>
I am giving you fiddle link..
Link- http://jsfiddle.net/falafelsoftware/B8ynX/
I hope you like it..
if you like then don't forget to vote me...
I'm using Kendo-UI's Drag and Drop Tree View for an application I'm working on.
I'm looking to append some text to the selected list-item.
I can not find anything in the documentation and am having a hard time selecting the appropriate item.
This is the Kendo-UI code:
<script>
$("#treeview-left").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Furniture", expanded: true, items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
] },
{ text: "Decor", items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
] }
]
});
$("#treeview-right").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "Storage", expanded: true, items: [
{ text: "Wall Shelving" },
{ text: "Floor Shelving" },
{ text: "Kids Storage" }
]
},
{ text: "Lights", items: [
{ text: "Ceiling" },
{ text: "Table" },
{ text: "Floor" }
]
}
]
});
</script>
This is a snippet of the generated code (notice the "aria-select='true'" , this is because I've selected the element, now I want to append text to this element):
<li role="treeitem" class="k-item" data-uid="82bceebe-f6a8-4d44-80ec-76f4b3db5041" aria-selected="true" id="treeview-left_tv_active">
<div class="k-top">
<span class="k-icon k-plus" role="presentation"></span>
<span class="k-in k-state-selected">Alberta</span>
</div>
<ul class="k-group" style="display:none" role="group">.....</ul>
</li>
This is my code at this point, I've tried a few other things, but have reverted back to this, which I know is incorrect:
<script>
$(function () {
$(".k-treeview li:first").click(function () {
$(this).append("test");
});
});
</script>
Any help is appreciated.
The aria attributes are for accessibility and not really meant to be used for other purposes.
You can use the select event and access the selected element in e.node:
$("#treeview").kendoTreeView({
dataSource: ds,
select: function(e) {
var model = this.dataItem(e.node);
model.set("text", model.get("text") + "test");
}
})
You can play with it here.
If you want to get the selected node at other times, use the select method.
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";
}
}