Develop Reference

How to expand a kendo grid on clicking a column value using angular js

I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.

you write expand(this) method out of the controller in your js.

How to Set Kendo grid height to a fixed value on page load

I am trying to get a Kendo grid with a static height and width.
It absolutely must not change height and width when I page (which it currently does, due to variably-sized data).
If data increases ,I should provide the Scrolling.
The problem is that when the page is first loading with Data the kendo grid is not setting to that fixed height and width.
but if I resize the window it is getting that fixed height and Providing the Scroll option inside Kendo Grid
So I can I set the height Of kendo Grid at a fixed value when it loads for first time
Kendo Version : v2014.1.318
Code:
$("#ViewUnitContainerTracking").kendoGrid({
sortable: true,
height:"280px",
columns: [
{
field: "UnitCode",
title: "Unit",
width: "15%"
},
{
field: "UnitName",
title: "Unit Name",
width: "35%"
},
{
field: "Status",
title: "St",
width: "5%",
template: $("#TemplateViewUnitTrackingStatus").text()
},
{
field: "StartDate",
title: "Start Date",
//template: $("#TemplateViewUnitTrackingStartDate").text(),
width: "15%",
//type: "date"
},
{
field: "EndDate",
title: "End Date",
//template: $("#TemplateViewUnitTrackingEndDate").text(),
width: "15%",
//type: "date"
},
{
field: "AssessPrgress",
title: "%OAP",
width: "10%"
},
{
field: "Status",
title: "Status",
hidden: true
}
],
editable: false,
resizable: false,
mobile: true,
dataSource: data.UnitList
});
Html Page:
<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>

Answer of the problem is:-
dataBound: function() {
$('#ViewUnitContainerTracking .k-grid-content').height(280);
}
Adding this to the Kendo grid will Solve the issue.
As After Data Bound event we can set the custom Css property of the Grid as the Grid dynamic height is set previous to this event.

I m doing this dynamically, to set the Grid to 100%, means, minus bootstrap header and footer:
<script type="text/javascript">
var gridElement = $("#serviceGrid");
function resizeGrid() {
$("#serviceGrid").css("height", $(window).height() - $("#itheader").height() - $("#itfooter").height() - 2);
gridElement.data("kendoGrid").resize();
}
$(window).resize(function() {
resizeGrid();
});
</script>
The "- 2" is because of two 1px borders a top and bottom..

I find this more reliable option which works with locked/frozen columns as well. You can call below lines of code in window's resize event handler
var availableHeight = 500; // Calculate this value based on space available in grid's parent container
$('#YOUR_GRID_ID').data('kendoGrid').setOptions({ height: availableHeight})

Inline editing with conditionally disabled controls

I am using the Telerik Kendo UI grid. I have configured it to use grid inline editing. I have an interesting requirement. One of the columns is a checkbox and this defines whether some of the controls are editable or not. i.e when ticked columns E,F,G are read-only and others are editable. When unticked column B,C are editable and others are read-only.
I have successfully implemented this but I would like to improve it. I have implemented it so that the controls are disabled. However, I would prefer if it the controls change to labels such as the Display Mode.
function gridEdit(e) {
setRowStatus(e.container, e.model.IsCustomJob);
}
function setRowStatus(c, isSpecificSH) {
changeControlStatusNumeric(c, 'ColumnB', !IsCustomJob);
changeControlStatusNumeric(c, 'ColumnC', !IsCustomJob);
changeControlStatusNumeric(c, 'ColumnE', IsCustomJob);
changeControlStatusNumeric(c, 'ColumnF', IsCustomJob);
changeControlStatusDropDown(c, 'ColumnG', IsCustomJob);
}
function changeControlStatusNumeric(c, name, isEnabled) {
var ctrl = c.find("input[name='" + name + "']").data("kendoNumericTextBox");
ctrl.enable(isEnabled);
if (!isEnabled) {
ctrl.value('');
}
}
The problem with my implementation as can be seen below is that it is not very clear for the user which items are editable and which items are not. That is why I would like to change the disabled controls to labels or maybe hide them completely. Is there a functionality in the Grid API for implementing this ... or maybe I should implement this using jquery?
When Ticked:
When Unticked:

I'd suggest creating custom editors for the columns that should be disabled and then conditionally append read-only content instead of the editor, e.g. like this:
Grid:
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
}, {
field: "Category",
title: "Category",
width: "160px",
editor: categoryDropDownEditor,
template: "#=Category.CategoryName#"
}, {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
}, {
command: ["edit", "destroy"]
}],
editable: "inline"
});
Editor:
function categoryDropDownEditor(container, options) {
// if model is set to disabled we don't show an editor
if (options.model.disabled) {
$("<span>" + options.model.get(options.field).CategoryName + "</span>").appendTo(container);
return;
};
$('<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.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
});
}
You could set the model.disabled property in your changeControlStatusNumeric function, or if you don't want an additional field in the model, you can add a CSS class to the container and check for that in the custom editor.
(demo)

Adjusting Shield UI Grid columns sequence

After doing some research I seem to be unable to solve a problem with a Shield UI Grid control. I want to be able to allow users to place columns in a order of their choice. I have similar orders like the code below:
$(function () {
$("#grid").shieldGrid({
dataSource: {
data: products
},
columns: [
"ProductName",
{ field: "['Category']['CategoryName']", title: "CategoryName", format: "{0:c}", width: "330px" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
And after I didn’t find the solution I placed some additional controls on the page to display the columns sequence, but this doesn’t liik quite the way I want.
Is there a way to dynamically change places of the grid columns?

As a matter of fact the solution is quite simple. The Shield UI Grid control supports dynamical column reordering.
All you need is to include the columnReorder property set to true in your code:
columnReorder: true,
In addition to that there is no need to use additional controls. Using drag and drop users can just drag the column and place it in the desired position.

Calling controller action from KENDO UI Grid Control using template definition

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?