Thought I'd post this for anyone who has a similar issue. And also for kendo staff to see and fix (if it is indeed a bug).

Note: all references to input are in regard to type=checkbox and type=radio, not text input areas

I was adding input boxes to a mobile listview and found that if any tag is added outside of the label tag holding the input, the input doesn't work. It also appears that an input without a label container doesn't seem to function properly either. Whereas a input defined inside a label inside a mobile listview will have extra classes and an ::after appended to it, none of these show up in the case noted in the first sentence of this paragraph. I finally got it to work with a workaround after observing "correctly working" inputs and what kendo injects into the html for those items.

IT policy at my work prevents me from creating a code snippet, so I pasted the code below, which is a modified version of http://demos.telerik.com/kendo-ui/m/index#popover/index:

Note the modified lines in the listviews where I remove labels in a few of them and in others I add random html tags before and after the </label>. It didn't matter if they were empty or had content in them.

I also tried modifying the 'checked="checked"' values via jQuery and also through data-binding with a ternary operator like one of your admins showed in this forum thread: http://www.telerik.com/forums/dynamically-creating-checkbox-listview-doesn-t-allow-selecting. While the value shows to be checked, and a $(elem).prop('checked') will return true/false correctly, the box doesn't show the checkbox when 'checked="checked"' is present in the input element (see the 'clickit' function and 2nd item of listview with checkboxes in the code snippet).

The thing that finally worked was to use jQuery to set the $(elem).prop('checked', true/false) ANDmanually add the classes I note were added automatically to inputs that 'work properly' : km-widget km-icon km-check. Note the very first listview item with checkboxes in the code snippet.

Now the question for staff: Why doesn't kendo automatically add these classes to listview inputs except in cases where it's <label>TEXT<input type="radio/checkbox" /></label> ? Is this a bug? Or if it's intended, why? In more complicated templates, such as the one in my code, it requires workarounds with setting the listview's data-click AND adding those three above classes to all my inputs if they're not exactly in a format that "works" (it also seems all kendo examples of inputs in listviews follow that exact formatting, which leads me to assume this issue is known...just uncommonly crossed upon by users). It's not a big deal once I figured it out, but the time spent wondering what was wrong and stepping through my code and all the possibilities was time consuming.

Or am I just doing things in the most horribly wrong way?

P.S. Out of curiosity, why was there a need to override/prevent the default behavior of the checkbox and radio inputs? Just for aesthetic purposes?

H,

Current the Window widget has Maximize and Minimize events, but not a Restore event.

Can you please consider adding a Restore event?

I have added the functionality in the Window widget source code, but I this is not a good long-term solution.

 

Thanks

 

I have a templated list:

<script type="text/x-kendo-tmpl" id="xts-contents-detail-template">
   <div id='contents-list-sortable' data-role="listview sortable" data-template="xts-content-item-template" data-selectable="single"
        data-bind="source: contentDataSource">
   </div>
</script>

<script type="text/x-kendo-tmpl" id="xts-content-item-template">
   <div>
      <hr>
      <h5> <span data-bind='text: name'> </span> </h5>
      <span data-bind='text: description'> </span>
   </div>
</script>

Which later gets populated in Javascript:

            this.pObservableContent = kendo.observable({
                contentDataSource: new kendo.data.DataSource({
                    data: [],
                }),
            });

            let listView = new kendo.View('#xts-contents-detail-template', {
                model: this.pObservableContent,
            });

            // put the list somewhere
            let listHtml = listView.render();
            this.pView.element.find('.contents-list').html(listHtml);

            // make the list sortable
            // this.pView.element.find('#contents-list-sortable').kendoSortable({
            $('#contents-list-sortable').kendoSortable({
            });

Also, some content gets added later on:

           this.pObservableContent.contentDataSource.data(this.pReportDefinition.contents);

The user may then re-order the list.

this.pObservableContent.contentDataSource.data() does not reflect the user selected order. How do I know what the new order is?

Good afternoon,

Is there a sample on how to validate a field as required/mandatory in a Kendo Grid that allows inline editting and that is bound to a source using MVVM?

I know I can define that in the schema but I don't see how to define the schema with the data-* attributes in this case... should I do it with Javascript manually?

A sample would be nice ..so please if you know of any please share it here.

Thanks!

 

Hi guys,

i'm Liuk and i like a lot Kendo's Grid.

But i've a problem with the Hierarchy system, because i can't find a method for open the subgrid only if there is a flag true.

I give an example:

This is th example take from the kendo text

<code>

<!DOCTYPE html><html><head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script><script src="js/kendo.all.min.js"></script></head><body><div id="example"><div id="grid"></div><script> $(document).ready(function() {var element = $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"}, pageSize: 6, serverPaging: true, serverSorting: true}, height: 600, sortable: true, pageable: true, detailInit: detailInit, dataBound: function() {this.expandRow(this.tbody.find("tr.k-master-row").first());}, columns: [{ field: "FirstName", title: "First Name", width: "110px"},{ field: "LastName", title: "Last Name", width: "110px"},{ field: "Country", width: "110px"},{ field: "City", width: "110px"},{ field: "Title"}]});});function detailInit(e) { $("<div/>").appendTo(e.detailCell).kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"}, serverPaging: true, serverSorting: true, serverFiltering: true, pageSize: 10, filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }}, scrollable: false, sortable: true, pageable: true, columns: [{ field: "OrderID", width: "110px" },{ field: "ShipCountry", title:"Ship Country", width: "110px" },{ field: "ShipAddress", title:"Ship Address" },{ field: "ShipName", title: "Ship Name", width: "300px" }]});}</script></div></body></html>

</code>

for my example i wanna see the sub grid only if the city is "Tacoma", but i can't find a solution online.

Ty for the help guys and i'm sorry for the bad English,

BB Liuk

Hello

I'm using kendoUI multiselect, but have some issues with the event click and destroy.

I'm using Kendo UI v2017.1.118, AngularJS v1.6.4 and jquery-2.2.1

Here is my source code using the MultiSelect:

F

<div ng-controller="icpSinglePersonSelectionController as c" >
    <select kendo-multi-select id="selectusers" name="selectusers" k-ng-model="c.uids" k-value-primitive="true"
                k-options="c.selectOptions"  k-on-change="c.onMultiSelectSelected(kendoEvent)" >
    </select>
</div>

 

 

app.controller("icpSinglePersonSelectionController",
    
    ['$http', '$scope', function
        ($http, $scope) {
        var me = this;
       
        me.uids = [];
        me.AllowMultipleSelections= false
           
           me.uid="111111"
           me.pname="test"
           me.uids = [];
           me.value_url ="ContentService/" & uid & "/" & pname          
           me.possible_value_url = "ContentService/getPossiblePersonValuesForEdit?uid=" &
                                 uid & "&pname=" & pname
          var  dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: me.possible_value_url,
                    }
                },                          
                schema: {
                    data: function (data) {
                        return angular.fromJson(data);
                    }
                }
            });
            $http.get(me.value_url).then(function (renspose) {

                    var jsondata = angular.fromJson(renspose);
                    var itemData = jsondata[me.pname];
                        if (angular.isArray(itemData)) {
                            me.uids = itemData.map(function (item) { return item.uid; });
                        }
                        else {
                            me.uids = [itemData.uid];
                        }
                                 
                    me.selectOptions = {
                        dataTextField: "reference_text",
                        dataValueField: "Id",
                        footerTemplate: 'Total #: instance.dataSource.total() # items found',
                        itemTemplate: '<table><tr><td><img class="k-state-default" src="#:data.icon#" height=50px></img></td>' +
                                      '<td><span class="k-state-default"><h3>#: data.reference_text #</h3><p>#: data.department #</p></span></td></tr></table>',
                        tagTemplate: '<img class="k-state-default" src="#:data.icon#" height=20px></img><span>#:data.reference_text#</span>',
                        virtual: {
                            mapValueTo: "dataItem",
                            valueMapper: function (options) {
                                $http.post("UserService/getPersons",
                                    { uids: me.uids }
                                ).then(function (response) {
                                    options.success(response); //return the dataItems that correspond to provided values
                                });
                            },
                            itemHeight: 80
                        },
                        dataSource: dataSource,
                        pageSize: 80,
                        serverPaging: false,
                        serverFiltering: true,
                        height: 520,
                        value: me.uids,
                        autoClose: true,
                        maxSelectedItems: 1,
                        filter: "contains",
                    };

            });
            me.onMultiSelectSelected = function (e) {
                var multiselect = e.sender,
                   amountOfSelectedItems = multiselect.dataItems().length,
                   maxSelectedItems = multiselect.options.maxSelectedItems;

                if (amountOfSelectedItems >= maxSelectedItems) {
                    $('.k-input').attr('readonly', "readonly");
                }
                else {
                    $('.k-input').removeAttr('readonly');
                }

            }; 
       
        
}]);

 

Note: When I delete virtualization the events return to work and if I use virtualization without grouping it works.

I have a grid with multi-column headers and there is a group column A which is locked. Here is the code:

 I want to unlock the group column A programmatically before printing the grid so that it appears as one grid instead of two. I have set locked=false for COLUMN1, COLUMN2 and group column A before printing but it still stays locked. Then I've set only group column A as unlocked before printing and the group still stays locked. I am using recursive method to unlock them but I but in order to show the gist of this functionality I am doing this to unlock:

Where thisGrid is instance of above grid. If anyone has programmatically locked/unlocked multi-column header please help. Thanks

Hi!

I want to clear, for example, the filter array in my grid:

Filter is cleared, but after this .filter() function, my grid is automatically refreshed.
How to clear filter, sorting and paging with 1 time grid refreshing?

Thanks.

Hello,

I am using templates with ahref for Kendo toolbar, but the Images dont Show. Only one Show full rest is cut or overlapped i believe

@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Resizable(true)
.Items(items =>
{           
            items.Add().Template("<a href='javascript: void(0)' class='abutton save' onclick='GoBack()' title='Speichern' > </a>");

items.Add().Template("<a href='javascript: void(0)' class='abutton delete' onclick='onDelete()' title='löschen'> </a>");
               
             items.Add().Template("<a href='javascript: void(0)' class='abutton goback' onclick='GoBack()' title='Zurück zur Liste' > </a>");

})
)

 

my css

.abutton.save {
background: url('@Url.Content("~/Images/Save_new.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.goback {
background: url('@Url.Content("~/Images/arrow_left.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}
.abutton.delete {
background: url('@Url.Content("~/Images/delete.png")');
background-repeat: no-repeat;
height:40px;
width:40px;
vertical-align:middle;
}

What am i doing wrong

 

Thanks

 

Anamika

We are facing an issue in telerik grid when we bind it using the .BindTo() and set the .ServerOperation(false).

If we sort our grid or select the next page, it appears that the data source for the grid is still associated to the original data source and we lose the indexing in the grid.
As our grid also requires keyboard navigation through the arrow keys (selecting the down arrow should select the next row in the grid and selecting the up arrow should go to the previous row), we wrote some custom JavaScript to achieve that. (We know we can achieve the navigation also through selecting down or up arrow and spacebar, but due to business needs we want it to be a one key operation).However, we cannot accomplish this after a sort or page as the data source still points to original data source before sort and the selection jumps to the next index in the original data source instead of the adjacent row.

So our question is how to set the data source to point to the sorted data source?
We did try re-reading the data source and refreshing it but that points it all back to the original data source and the grid loses all its sorting or paging as well.
dataSource.read();
dataSource.refresh();

Here is the custom code we have in our JavaScript which is executed when a user clicks the arrow key to select the next row in the grid

function nextRow() {
    var gridService = $(gridId).data("kendoGrid");
    if (gridService !== undefined) {
        var rowCount = gridService.dataSource.data().length;
        if (rowCount !== undefined) {
            var rows = gridService.items();
            var currSelRowIndex = rows.index(gridService.select());
            var nextRowIndex = rowCount - 1;
            if (currSelRowIndex < rowCount - 1) {
                nextRowIndex = currSelRowIndex + 1;
                selectServiceLineRow(nextRowIndex, true);
            }
           else {
                nextRowIndex = 0;
                var pageService = gridService.dataSource.page();
                var pageSizeService = gridService.dataSource.pageSize();
                if ((pageService) * pageSizeService < gridService.dataSource.total()) {
                    gridService.dataSource.page(pageService + 1);
                    selectServiceLineRow(nextRowIndex, true);
                }
            }
        }
    }
}

function selectServiceLineRow(serviceLineRowIndex, withFocus) {
    var gridService = $(gridId).data("kendoGrid");
    var rowAt = gridService.dataSource.at(serviceLineRowIndex);
    var rowuid = rowAt.uid;
    var row = gridService.tbody.find("tr[data-uid='" + rowuid + "']");
    gridService.select(row);
    var cell = row.find('td:eq(0)');
    gridService.current(cell);
    if (withFocus) {
        cell.focus();
    }
    serviceLinesGridCalcPrevNextButton(serviceLineRowIndex);
}


The grid’s datasource is bined in cshtml like this.


            .DataSource(d => d
                .Ajax()
                .Events(e => e.Error("onWebApiError").Change("ResetGridScrollbar(\"#ServiceLinesGrid\")"))
                //Remove .ServerOperation when paging is added
                .ServerOperation(false)
                .Model(m => m.Id(e => e.LineNumber)))
            .BindTo(Model.ServiceLines)