Kendo grid with DropDown in column has messed up styling - angularjs

I've hooked up a DropDown editor inside a Grid column, and I've followed the Kendo example here :
http://demos.telerik.com/kendo-ui/grid/editing-custom
I actually do have the downdown editor working in Add/Edit mode, and with the DataSource binded to it. However, I can't figure out why the styling is all messed up.
As you can see in the below image, the dropdown is rendered but there is also an text box rendered just below it.
All appears to be styling fine in my plunker example, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview, but not in my real project code.
My HTML :
vm.userDimenGridOptions = { // Kendo grid - USER DIMENSIONS...
selectable: true,
sortable: true,
pageable: true,
columns: [
{ field: "id", width: "50px", hidden: true },
{ field: "dimension", width: "120px", editor: dimenDropDown, template: "#=dimension#" },
{ field: "hierarchy", width: "80px" },
{ template: '<button onclick="return up(\'#=uid#\')">up</button><button onclick="return down(\'#=uid#\')">down</button>' },
{ command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 170 }
],
editable: "inline",
toolbar: ["create"],
messages: {
commands: {
cancel: "Cancel",
canceledit: "Cancel",
create: "dimension",
destroy: "Delete",
edit: "Edit",
save: "Save changes",
select: "Select",
update: "Update"
}
}
};
My angular controller code :
// SERVER-SIDE DIMENSIONS DATA SOURCE
vm.dimensionsDataSource = new kendo.data.DataSource({
transport: {
read: getDimensionsFromServer
}
});
function dimenDropDown(container, options) {
$('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "name",
dataValueField: "name",
dataSource: vm.dimensionsDataSource
});
}
I also wanted to show an image of what the Insepect Elements looks lik in Chrome. Indeed some weird behavior here; see the SPAN inside the SPAN. And within each SPAN tag there's an INPUT tag.
Why two input tags ???

Take the Template off from the column and try. I'm not sure though
{ field: "dimension", width: "120px", editor: dimenDropDown }

Related

Why isnt the Kendo Grid inline editable?

I have a Kendo grid in html as follows:
<div
kendo-grid="grid"
k-options="gridOptions"
k-data-source="gridData"
k-selectable="true"
k-columns="gridColumns"
k-editable="editableOptions">
</div>
The Angular back end is:
$scope.gridData = new kendo.data.DataSource({
data: $scope.users, <-- the data binds correctly in the grid
editable: {
createAt: "bottom"
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "string", visible: true },
Name: { type: "string", editable: true }
}
}
},
sort: [
{ field: "Name", dir: "asc" }
],
pageSize: 15,
editable: true
});
$scope.gridOptions = {
};
$scope.gridColumns = [
{ field: 'Name', title: 'First Name', width: 60 },
{ field: 'Id', title: ' ', width: 120 },
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
];
$scope.editableOptions = "inline";
So the User Data Load correctly with 5 rows, but there should be an extra row at the bottom for adding a new user via the line
editable: {
createAt: "bottom"
},
but this is not being created when the grid loads.
Also, they should be able to delete via the following command
{
command: ["destroy"],
title: " ",
width: "175px",
editable: "inline"
}
but this is also not being displayed.
What am I missing here?
make the row editable when clicking on the edit button:
Define editable once, like this:
editable: {
mode: "inline" ,
createAt: "bottom"
},
Your command:
{
command: ["edit","destroy"]
}
and also add toolbar for create:
toolbar: ["create"]
Here is a sample : Sample Dojo
make it editable once click in the cell:
editable:
editable: {
createAt: "bottom"
},
command:
{
command: ["destroy"]
}
toolbar:
toolbar: ["create", "save", "cancel"],
and also in your dataSource set batch: true
Here is a sample: Sample Dojo

How to Go to the function after clicking the link with the previous value on Kendo UI Grid?

I have a kendo grid List with columns:
columns: [{
field: "LogID",
title: "Log ID",
width: 50
},
{
// here i need to show hyperlink 'Link' and after clicking
// here it should call function $scope.thisfuntion(logID) with
// parameter LogID above.
}],
i tried using
columns: [{
field: "LogID",
title: "Log ID",
width: 50
},
{
field: "",
title: "",
width: 200,
sortable: false,
template: "<a href='\\#' class='link' ng-click='this.thisFunction(LogID)'>#=Link#</a>",
}],
but after using this the list of the grid dosen't shows any value
Try this:
template: "<a href='\\#' class='link' ng-click='this.thisFunction(dataItem.LogID)'>#=dataItem.Link#</a>"
OR
template: "<a href ng-click=thisFunction(dataItem.LogID)>#: 'Link' #</a>"
In kendo, dataitem is a reserved word that represents the object behind the line.

A button on each row of Kendo ui Grid that expands detail view

I am using angular and Kendo ui Grid. I have a custom button on each row which i need it bound to a function that expand the detail view. Below is the grid options.
Please help
$scope.mainGridOptions = {
dataSource: financialYearsDataSource(),
sortable: true,
selectable: true,
columnMenu: true,
columns: [
{ field: "FinYearName", title: "Year Name", width: "150px" },
{field: "StartDate", title: "*Start Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "EndDate", title: "*End Date", type: "date", format: "{0:dd-MM-yyyy}", width: "150px"},
{field: "Remarks", title: "*Remarks", editor: descriptionEditor, hidden:true},
{
command: [
{name: "edit"},
{name: "destroy"},
{
text: " Expand/Collapse",
click: $scope.expandToggle,
className: "fa fa-map-marker"
},
], title: " ", width: "300px"
}],
editable: {
mode: "popup"
},
pageable: {
pageable: true,
refresh: true
},
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
};
Here is the toggle function that needs to do the toggling
$scope.expandToggle = function (e) {
e.preventDefault();
$scope.myGrid.expandRow($(this));
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));}
Here is a jsfiddle demo:http://jsfiddle.net/akimaina/ay3vv2cm/2/
I have updated your fiddle. Please check if this solves.
http://jsfiddle.net/ay3vv2cm/3/
$("#grid").on("click",".clsExpand", function(e){
$("#grid").data("kendoGrid").expandRow($(e.currentTarget).closest("tr"));
});

How to refresh kendo grid data when i sort or click on column?

I have a grid below when user click on subcategory Name column i am populating another grid on right side that is data for selected row, I want to add function to subcategory Name column when user click i want to refresh right side grid data to default. (no data should be display in right side until user select a row).
angular.module('thirdPartyManagementApp').value('subCategoryGridConfig', {
subCategoryGrid: {
sortable: true,
filterable: true,
selectable: true,
height: 600,
toolbar: [
{
template: kendo.template('<kendo-tabstrip><ul><li ng-class="{\'k-state-hover k-state-active\': defaultAllTab}">All</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultPendingTab}">Pending Review</li>')
},
{
template: kendo.template('<li ng-class="{\'k-state-hover k-state-active\': defaultReviewTab}">Reviewed</li></ul><kendo-tabstrip>')
}
],
columns: [
{
template: '<strong><span ng-if="this.dataItem.sortCode === 1" class="text-success">NEW</span><span ng-if="this.dataItem.sortCode === 2" class="text-danger">!</span></strong>',
width: '30px'
},
{
template: kendo.template('{{this.dataItem.subCategoryName}}<br/>Vendors...'),
field: 'subCategoryName',
title: 'Subcategory',
width: '100px',
template: (function(e) {
subCategoryGrid.columns.filter(function(data) {
return data.field === "subCategoryName";
})
subCategoryGrid.refresh();
});
},
{
field: 'status',
title: 'Status',
width: '65px'
}
]
},
Kendo grid hasn't sorting event, but datasource contains change event that fires when data changed and also sorted:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change
Try update data in this event handler
Don't forget check e.action to prevent loop

Can't use kendoComboBox in kendoGrid

I would like to bind combobox into kendo grid
Please give me example code grid that have bind combobox from database
var provinces = $("#ddlProvince").kendoComboBox({
placeholder: "Choose Province",
dataTextField: "pname",
dataValueField: "pcode",
dataSource:data_province
}).data("kendoComboBox");
<div id="gridData"></div>
What you looking for is called custom editor, you can find some example here http://demos.kendoui.com/web/grid/editing-custom.html
Link your field to specific editor
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor,
Define your editor
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
}
});
}
Now when you click edit on specific row, custom editor of your choice is appended.

Resources