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...
Related
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
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?
the grid do not display anything, this is the code in the javascript method
columns: [
{ field: "Dimension", title: "Mois", width: "130px" },
{ field: "Value", title: "Variation CA", width: "130px"},
{ field: "Value", title: "", width: "30px", template: '# if (Value >= 0 ) { # <img src="~/Images/uparrow.jpg" /> # } else # { <img src="~/Images/downarrow.jpg" #}#' }
]
});
I can' fix the problem, the grid do not display anything, any suggestions please? how can i display imaes in the column using the if condition