Questions on Kendo UI for jQuery Forum

1 answer

127 views

Hi, I have the following problem and do not know how to fix it, do not leave me buttons to edit, delete the command. please help. and excuse my English

I leave the files you work

php.editing

<?php
require_once '../lib/DataSourceResult.php';
require_once '../lib/Kendo/Autoload.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json');
$request = json_decode(file_get_contents('php://input'));
$result = new DataSourceResult('mysql:host=localhost;dbname=northwind;charset=utf8', 'root', 'jp72240');
$type = $_GET['type'];
$columns = array('ProductID', 'ProductName', 'UnitPrice', 'UnitsInStock','Discontinued');
switch($type) {
case 'create':
$result = $result->create('products', $columns, $request->models, 'ProductID');
break;
case 'read':
$result = $result->read('products', $columns, $request);
break;
case 'update':
$result = $result->update('products', $columns, $request->models, 'ProductID');
break;
case 'destroy':
$result = $result->destroy('products', $request->models, 'ProductID');
break;
}

echo json_encode($result,JSON_NUMERIC_CHECK);

exit;

}
?>

Grid

answered on 22 Jul 2015

1 answer

158 views

responsive groupable

My grid has "groupable: true", however only selected columns are groupable:

columns: [
{ field: "todo", groupable: false },
{ field: "author", minScreenWidth: 768 } ]

"Trouble" is the "grouping drop area" is visible on any screen size, but the groupable columns are not shown on small screens.

How can I control visibility of the "grouping drop area" based on screen size?

A "groupable.minScreenWidth" property would be great.

Grid

answered on 22 Jul 2015

2 answers

105 views

ng-disabled doesn't work in IE10

I found that <input kendo-date-time-picker ng-disabled="true" /> doesn't disable the calendar and clock icons in IE10 so user can still use them to set datetime, but it works fine in IE11, chrome and other browsers, is it a bug?

Here is a example to reproduce the issue: http://dojo.telerik.com/@darkthread/UFIVo

DatePicker

answered on 21 Jul 2015

4 answers

697 views

Reading the Selected Row data in grid to the Controller using ajax call

Hi,

I have a grid structured with few columns and a column with checkbox using client template method.
Now i want to read the row values that are selected on an button action click and that has to be passed to the controller for processing the data.

I have mentioned my grid structure below
@(Html.Kendo().Grid<MyMVC.Models.MyModel>()
.Name("MyGrid")
.Columns(columns =>
{
columns.Bound("").Width(25).ClientTemplate("<input type='checkbox' checked='checked' id='rowcheck' ></input>"); -- CheckBox in grid
columns.Bound(p => p.LeaveDate)
columns.Bound(p => p.start);
columns.Bound(p => p.end);
columns.Bound(p => p.reason).Width(400);
})

.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetLeaveGridData", "StaffManagment"))
.ServerOperation(false)

)
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.HtmlAttributes(new { @style = "font-family:calibri; font-size:12px" })
.Scrollable()
)

I have done the coding for selecting the key column leave date using the jquery, but i want remining column data to be passed to the controller.
Can anyone help me out how to achieve this. Is this possible or we have to go with some other methodology.

Note : The selected row mentions the row which are checked by the user in the checkbox column.

Thanks
M.Mayilsamy
On Behalf of Jeremy

Grid

answered on 21 Jul 2015

1 answer

802 views

Using a custom template for a custom button on kendo ui editor

I'm trying to create a custom button for the kendo ui editor. The button works fine except when I try to use a custom template.
Here's the code for my custom button:

var currentDateAction = {

name: 'currentDate',

tooltip: vm.TemplateLetterCurrentDateLabel(),

template: '<button class="k-button">' + vm.TemplateLetterCurrentDateLabel() + '</button>',

exec: function () {

var editor = $(this).data('kendoEditor');

editor.exec('inserthtml', { value: vm.TemplateLetterCurrentDate() });

}

};

If I comment the template line, the button works, otherwise it doesn't.
What do I have to do, to have a custom template for my button?

Editor

answered on 21 Jul 2015

1 answer

76 views

Issues adding a row while the grid has a filter

I have put the below code on my dataSource. It is inserting the data into the dataSource like it should but the row does not show up on the grid unless I do something on the grid like changing the sort. Do I need to re-sync the grid with the dataSource? If so how do I do that?

change: function (e) {
if (e.action == "add") {
var newItem = e.items[0];

if (this.filter() != undefined) {
var filter = this.filter().filters;
var i = filter.length;
while (i--) {
filterValue = filter[i].value;
filterField = filter[i].field;
switch (filterField) {
case "product.textField":
newItem.product.textField = filterValue;
break;
case "product.valueField":
newItem.product.valueField = filterValue;
break;
default:
newItem[filterField] = filterValue;
}
}
}
}
}
thx!

Grid

answered on 21 Jul 2015

12 answers

1.6K+ views

[Solved] Conflict w/ bootstrap.js & dropdownlist

There seems to be a conflict with the DropDownList widget when bootstrap.js (version 3.1.1) is also referenced.

When you click down arrow the selection moves to the next item but the dropdown closes.

Left & right arrows work properly. If you switch to bootstrap version 3.0.0 arrow keys work fine.

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css">
</head>
<body>

<div id="example" class="k-content">
<div id="cap-view" class="demo-section">
<h2>Customize your Kendo Cap</h2>
<div id="cap" class="black-cap"></div>
<div id="options">
<h3>Cap Color</h3>
<input id="color" value="1" />

<h3>Cap Size</h3>
<select id="size">
<option>S - 6 3/4"</option>
<option>M - 7 1/4"</option>
<option>L - 7 1/8"</option>
<option>XL - 7 5/8"</option>
</select>

<button class="k-button" id="get">Customize</button>
</div>
</div>
<style scoped>
.demo-section {
width: 460px;
height: 300px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 30px;
}
#cap {
float: left;
width: 242px;
height: 225px;
margin: 20px 30px 30px 0;
background-image: url('../../content/web/dropdownlist/cap.png');
background-repeat: no-repeat;
background-color: transparent;
}
.black-cap {
background-position: 0 0;
}
.grey-cap {
background-position: 0 -225px;
}
.orange-cap {
background-position: 0 -450px;
}
#options {
padding: 1px 0 30px 30px;
}
#options h3 {
font-size: 1em;
font-weight: bold;
margin: 25px 0 8px 0;
}
#get {
margin-top: 25px;
}
</style>

<script>
$(document).ready(function() {
var data = [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
];

// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});

// create DropDownList from select HTML element
$("#size").kendoDropDownList();

var color = $("#color").data("kendoDropDownList");

color.select(0);
var size = $("#size").data("kendoDropDownList");

function onChange() {
var value = $("#color").val();
$("#cap")
.toggleClass("black-cap", value == 1)
.toggleClass("orange-cap", value == 2)
.toggleClass("grey-cap", value == 3);
};

$("#get").click(function() {
alert('Thank you! Your Choice is:\n\nColor ID: '+color.value()+' and Size: '+size.value());
});
});
</script>
</div>

</body>
</html>

DropDownList

answered on 21 Jul 2015

1 answer

103 views

[Solved] How to stop binding for part of the View

Our Views are composed from dynamic components, each having own "View" and ViewModel. They are built independently and can have identical names of bound properties in a Model. As far as I see, when applying binding between View and ViewModel, Kendo UI will travers entire DOM tree. This will apply wrong values to components that do not belong to the "View" in question, but have the same name of bound properties. With Knockout I can use "controlsDescendantBindings" instruction to stop binding from drilling down on a DOM subtree - does Kendo UI have any way to do the same?

Thanks,

Sam

General Discussions

answered on 21 Jul 2015

1 answer

55 views

Custom editor with Angular JS - element compiled twice

It seems the Angular howto: "Custom editor with Angular JS" is out-dated?

From the howto...

$scope.categoryDropDownEditor = function(container, options) {

var editor = $(

'<input kendo-drop-down-list required k-data-text-field="\'CategoryName\'" k-data-value-field="\'CategoryID\'" k-data-source="ddlDataSource" data-bind="value:'

+ options.field + '"/>')

.appendTo(container);

$compile(editor)($scope);

editor.css("visibility", "visible");

}

The function creating the cell editor does a $compile on the custom element "editor". However when I follow this approach I noticed that in my own code the link functions in my directives on the custom element execute twice. Upon investigation it seems that since Kendo compiles the TD containing my custom element, my custom element will automatically get compiled so doing a compile within the custom cell editor function is not correct?

Grid

answered on 21 Jul 2015

1 answer

489 views

Editable grid - navigating with arrows

Using the products example, I have a 5 column grid. Columns 1 and 2 are frozen, 3 and 4 are editable, and 5 is not editable.

I have used the onkeypress event to modify the tab behavior so it will only tab in columns 3 and 4, but it will also wrap from the last item in column 4 to the first one in column 3.

What I need to figure out is how to also change the selected cell based on using the arrow keys. The first one I am working on is the UP keypress. While I can detect the UP press, and I'm not sure the best way to get the previous row for the same column.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/frozen-columns">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css" />
    <script src="http://cdn.kendostatic.com/2015.2.624/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="grid"></div>
<script>
        $(document).ready(function() {
   var crudServiceBaseUrl = "http://demos.kendoui.com/service";
   var dataSource = new kendo.data.DataSource({
           transport: {
           read: {                url: crudServiceBaseUrl + "/Products",                dataType: "jsonp"              },
           update: {                url: crudServiceBaseUrl + "/Products/Update",                dataType: "jsonp"              },
           destroy: {                url: crudServiceBaseUrl + "/Products/Destroy",                dataType: "jsonp"              },
           create: {                url: crudServiceBaseUrl + "/Products/Create",                dataType: "jsonp"              },
           parameterMap: function(options, operation) {
               if (operation !== "read" && options.models) {
                   return {models: kendo.stringify(options.models)};
               }
           }
       },
       batch: true,
       pageSize: 30,
       schema: {
           model: {
               id: "ProductID",
               fields: {
                   ProductID: { editable: false},
                   ProductName: { editable: false },
                   UnitPrice: { editable: true},
                   UnitsInStock: {editable: true},
                   Discontinued: { editable: false, type: "boolean" }
               }
           }
       }
          });

   $("#grid").kendoGrid({
       dataSource: dataSource,
       editable: true,
       scrollable: true,
       navigatable: true,
       height: 500,
       columns: [
           { field: "ProductID", title: "ProductID", locked: true, lockable: false, width:110 },
           { field: "ProductName", title: "Product Name", locked: true, lockable: false, width: 510 },
           { field: "UnitPrice", title: "Unit Price", width: 510, attributes: {class: "editable-cell" } },
           { field: "UnitsInStock", title: "Units In Stock", width: 510, attributes: {class: "editable-cell" } },
           { field: "Discontinued", title: "Discontinued", width: 510 }
       ]
       }).find("table").on("keydown", onGridKeydown);
   });

   function onGridKeydown(e){
       if (e.keyCode === kendo.keys.TAB) {
           //Only want tabs to cycle through items specified with editable-cell
           //Tabbing in last item in grid will wrap to first editable-cell.
           var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
           var current = grid.current();
           var nextCell, nextRow;
           if (!current.hasClass("editable-cell")) {
               nextCell = current.nextAll(".editable-cell");
               if (!nextCell[0]) {
                   //search the next row
                   nextRow = current.parent().next();
                   nextCell = current.parent().next().children(".editable-cell:first");
               }
               nextRow = current.parent().next();
               if(!nextRow.length && !nextCell.length){
                   nextCell = grid.tbody.find(".editable-cell:first");
               }
               grid.current(nextCell);
               grid.editCell(nextCell[0])
           }
       } else if (e.keyCode === kendo.keys.UP) {
           var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
           var current = grid.current();
           console.log("up");
           //Need to move 'up' one row but maintain same column.
           //If UP pressed in first row in grid, wrap to last row.
       } else if (e.keyCode === kendo.keys.RIGHT || e.keyCode === kendo.keys.LEFT) {
           console.log("sideways");
           //If right, go nextCell (like a tab)
           //if left, see if possible to get previous cell.
       }
   };
</script>
</body>
</html>

Grid

answered on 21 Jul 2015