I have the following directive
angular.module("KendoDemos", [ "kendo.directives" ])
.directive('myDirective',function(){
return{
template:'<div k-on-resize="resized()" kendo-splitter k-orientation="horizontal"id="splitter"><div><div kendo-grid="myGrid" options="mainGridOptions"></div></div><div><p>{{hello}}</p></div></div></div></div>',
scope:{},
controller:function($scope,$element){
$scope.hello = "Hello from Controller!";
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
}]
};
$scope.resized = function(){
if($("#splitter .k-pane:first").css("width") < '350px'){
$scope.myGrid.hideColumn("ContactName");
$scope.myGrid.hideColumn("Country");
}else{
$scope.myGrid.showColumn("ContactName");
$scope.myGrid.showColumn("Country");
}
};
}
}
})
Basically just creating a kendo Grid with some data and using a kendo splitter, the grid comes on the left side of the splitter. I have attached a event on kendo splitter where if the width is < 300px the grid will hide some columns.
This directive works perfectly if placed used only once on the a page but will not work if used multiple times. How to resolve this ??
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 have the below command button column in my Kendo grid..
How to disable the "Edit" button in the rows with empty "ItemValue".
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup"
});
you may hide edit button by on dataBound function as below
dataBound: function (e) {
var grid = $("#list485").data("kendoGrid");
var gridData = grid.dataSource.view();
for (var i = 0; i < gridData.length; i++) {
var currentUid = gridData[i].uid;
if (gridData[i].ItemValue == "") {
var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
var editButton = $(currenRow).find(".k-grid-edit");
editButton.hide();
}
}
}
i hope this will help you
Not sure if this can fulfill your need but it works fine for inline editing.
$("#list485").kendoGrid({
dataSource: dataSource,
columns: [
{ command: [{ name: "edit" }], title: " ", width: "100px"},
{ field: "ItemValue", title: "Item Description" }
],
editable: "popup",
edit: function(e) {
if(e.model.ItemValue == 100)//your condition
{
$("#grid").data("kendoGrid").refresh();
}
}
});
Anyway this is what I could able to find till now.
There must be some better solution for this.
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>"
Within an AngularJS directive, I trigger a callback function that needs access to a directive-level object that has been injected.
I am using a KendoUI template function for this, however I think this is more an issue about scope than the function.
Directive:
app.directive('projectEditorGrid', function (dataSourceFactory) {
var dataSourceFactory = new dataSourceFactory("/odata/ProjectEditor");
return {
link: function ($scope, $element, $attrs) {
$element.kendoGrid({
dataSource: dataSourceFactory.projects(),
pageable: true,
height: 400,
toolbar: ["create"],
columns: [
{ field: "WebsiteName", editable: true, width: 190, title: "Project Name", validation: { required: { message: "Project name is required" } } },
{ field: "WebsiteNotes", title: "Project Notes" },
{ field: "WebsiteGUID", title: "Project API ID", editable: false },
{ field: "DefaultContentType", title: "Default Content Type", width: "160px", editor: defaultContentTypeDropDownEditor, template: "#=ContentTypes.Descriptions#" },
{ command: ["edit", "destroy"] }
],
editable: "inline"
});
function defaultContentTypeDropDownEditor(container, options) {
console.log(container + " : " + options);
var dataSourcFactory = dataSourceFactory("/odata/ContentType");
var dsContentTypes = dataSourceFactory.contentTypes(); // returns a kendo.data.DataSource() object
$('<input required data-text-field="Description" data-value-field="ContentTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: dataSourceFactory.contentTypes()
}); // kendoDropDownList
}
}
}
});
dataSourceFactory is injected into the directive and successfully used to display the data.
When a row edit is triggered, defaultContentTypeDropDownEditor is called with its default parameters, container, options. If I could pass the dataSourceFactory to this function I'd be set, but not clear on how to accomplish this from the activating call.
options:
Object {field: "DefaultContentType", editor: function, model: n.extend.o}
editor: function defaultContentTypeDropDownEditor(container, options) {
field: "DefaultContentType"
model: n.extend.o
__proto__: Object
container:
[<td role="gridcell" data-container-for="DefaultContentType"></td>]
As you can see, dataSourceFactory is visible at the function level (injected into the directive), however is not accessible from within the defaultContentTypeDropDownEditor. Can someone please explain how to accomplish this?
The injected object is dataSourceFactory. By renaming the initial initialization to dataSourceFactory1 and the function callback's use of it to dataSourceFactory2, I was able to get this working.
Thanks to Nikos for pointing me in the right direction.
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?