Hi all,

 we try to develope a Documentservice for one of our projects. In this we need a editor, to create and modify the documents. Our idea: the user is able to set fields in the text. The field could be a tag like this for example:

<span class="serialfield" sfield='firstname'><span class='sfieldinfo'></span>Firstname<span class='delsfield'></span></span>

<span class="serialfield" sfield='lastname'><span class='sfieldinfo'></span>Lastname<span class='delsfield'></span></span>​

The fields should be non-editable. The result should be similar to the attached mockup.

My questions:

1. How could it work, that i insert 'non-editable' elements in the editor?

2. How to style them?

3. How to get a event on click on them (to remove the element on click on the span.delsfield)?

We are using a combo box on an iPad and we have a bluetooth scanner hooked up so the user can either key in the values or scan a barcode.

When we key in the value from the virtual keyboard no problems.

When we scan the barcode the value shows up momentarily in the control and then gets cleared out.

We added a dataBound event which gets fired when typing in through the keyboard, but does not get fired when the blue tooth scanner puts text into the control.

$("#combobox").kendoComboBox({

     dataTextField: "text",

     dataValueField: "value", 

     filter: "startswith",

     dataSource: data,

     dataBound:getData 

});

function getData(e)
{
     scannedData = this.text();
     console.log(scannedData);
}

 

Is there a lower level even we can trap to get the value that temporarily shows up in the control?

If we can get the value we can save it and repopulate it to the combo box.

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

            <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "editing.php",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "?type=read",
                                    contentType: "application/json; charset=utf-8",
type:"POST"


                                },
                                update: {
                                    url: crudServiceBaseUrl + "?type=update",
                                    contentType: "application/json; charset=utf-8",
type:"POST"

                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "?type=destroy",
                                    contentType: "application/json; charset=utf-8",
type:"POST"                                    

                                },
                                create: {
                                    url: crudServiceBaseUrl + "?type=create",
                                    contentType: "application/json; charset=utf-8",
type:"POST"                                    

                                },
                                parameterMap: function(data) {
                                     return kendo.stringify(data);
                                  
                                }
                            },
                            batch: true,
                            pageSize: 20,
                            schema: {
                                data: "data",
model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });

                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create","save"],
                        columns: [
                            { field:"ProductName", title: "Nombre del Producto" },
                            { field: "UnitPrice", title:"Precio Unitario", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Unidades", width: "120px" },
                            { field: "Discontinued",title:"Disponible", width: "120px" },
                            { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
                        editable: "popup"
                    });
                });
            </script>

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;

}
?>​

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.

 

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

 

 

 

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

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:

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?

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!

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>

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