I have a basic Telerik Grid using Batch Edit Mode. This all works great but I have had feedback from User Testing that it is not initially obvious the grid is being used for Data Entry. 

Is there a way I can show the Cells that are editable, by always showing the Inputs / Select Dropdowns without the user having to focus onto the cell first?

I have attached a picture of how the grid looks currently, I would like the inputs / select dropdowns to be visible all the time.

I have been playing around with the new DropDownnTree component (which I love btw) but found that there isn't a "clear" event so I have to use the "change" event which the clear button triggers. The problem is that the value is not reset before triggering this event therefore I can't use it to check if the change event was fired by the clear button.

Dojo: https://dojo.telerik.com/UNIdEjEH

I would think either resetting the component before triggering the change button or adding a clear event is needed.

Thanks.

Hi,

 

hopefully, someone reads my finding.

 

I already posted the issue in ASP.NET Core forum.

https://www.telerik.com/forums/bug-drag-drop-in-grid-within-tabstrip-not-working

 

However, I like to repost it here.

 

Problem description:

When inside a tabstrip the grid loses the ability to reorder rows. 

Example

See dojo: https://dojo.telerik.com/UcEJiSaj

Screenshot

it's impossible to drop the dragged row

 

So i'm using Kendo's grid but i need a more advanced type of grid. With columns headers and rows headers, but know how to do it. The row headers need to stay under the "Mov Aberto" column.

so I have JS code . In UI I have two radio buttons like communities  and badges . When I clicked on Badges then kendo.data.DataSource transport.Read() method is calling two time but read method should call one time . how can I stop read method for multiple calling. Here I am sharing my code . Can you modify this code by which we can call read method at one time not multiple time

getData = function () {
            $scope.searchDS = [];
            var count = 1;
            if ($scope.$root.usrID != -1) {
                $scope.searchDS = new kendo.data.DataSource({

                    transport: {
                        read: {
                            url: function () {
                                return getQueryUrl();
                            },
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            dataType: 'json',
                            beforeSend: function (e) {
                                e.preventDefault();
                            }
                        },
                        parameterMap: function (options, operation) {
                            // $scope.badgeItemsCnt = 0;
                            console.log(operation);
                            console.log(options);
                            var sort = "";
                            if ($scope.frm.sortBy.Value == "1") //A-Z Order asc
                                sort = { "badgeTitle.raw_lowercase": { "order": "asc" } };
                            else if ($scope.frm.sortBy.Value == "2") //Z-A Order desc //
                                sort = { "badgeTitle.raw_lowercase": { "order": "desc" } };
                            else if ($scope.frm.sortBy.Value == "3") //Newest First desc
                                sort = { "CreatedDate": { "order": "desc" } };
                            else if ($scope.frm.sortBy.Value == "4") //Oldest First asc
                                sort = { "CreatedDate": { "order": "asc" } };

                            var filter = getFacetFilters($scope.frm.sortBy.Value);

                            var query = { "query_string": { "query": getSearchFilter() } };

                            var shouldfilter = [];
                            var mustNotFilter = [];
 
                            if ($scope.$root.usrID > -1) {
                                if ($scope.badgeSearchType == "Public") {
                                    mustNotFilter.push({ "term": { "publishStatus.raw": "Private" } });
                                }
                                //else if ($scope.badgeSearchType == "Private") {
                                //        shouldfilter.push({ "term": { "ownerId.raw": appSettings.userProfileID } });
                                //        filter.push({ "term": { "publishStatus.raw": "Private" } });
                                //    }
                            }

                            if ($scope.$root.usrID > -1) {
                                shouldfilter.push({ "term": { "userProfileID.raw": $scope.$root.usrID } });
                                //if ($scope.$root.profile_cid > -1) {
                                //    filter.push({ "term": { "communityID": parseInt($scope.$root.profile_cid) } });
                                //}
                            }
                            else if (appSettings.examTakerID > -1) {
                                shouldfilter.push({ "term": { "examTakerID.raw": appSettings.examTakerID } });
                            }
                            query = { "must": query, "filter": { "bool": { "minimum_should_match": shouldfilter.length > 0 ? 1 : 0, "should": shouldfilter, "must": filter, "must_not": mustNotFilter } } }

                            $scope.GetQuery = query;

                            var str = JSON.stringify({
                                //"_source": true,
                                //"_source": {
                                //    "excludes": ["communityName"]
                                //},
                                "sort": sort,
                                "query": { "bool": query },
                                "aggs": JSON.parse("{" + getFacets($scope.frm.sortBy.Value) + "}")
                            });

                            return str;

                        }
                    },
                    serverPaging: true,

                    pageSize: 10,
                    page: 1,
                    schema: {
                        type: "json",
                        data: function (data) {
                            bindFacets(data.aggregations);
                            return data.hits.hits;

                        },
                        total: function (data) {
                            $scope.badgeItemsCnt = data.hits.total.value;
                            if ($scope.badgeItemsCnt == 0) {
                                $scope.showNobadges = true;
                            }
                            return data.hits.total.value;
                        }
                    }
                });
                try {
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                } catch (e) { }

            }
        }

I have a grid that contains several columns.  In the code below I have removed a few just to make it easier to read.  The standard display of this grid has the rows alternating between a light blue and white row color.  I need to be able to change the color of a row based on a specific value in that row.  For example, if the "ReportClassDescription" column is equal to "Express" then the background color for that entire row should be red. 
If it is easier I could also just changed the color of that particular cell.  So again, if "ReportClassDescription" is "Express" then that cell could just be red. 
How can I accomplish either of these scenarios?

I have a kendoGrid with filterable columns using jQuery. Let's say I have a column named Title. When I click on filter icon besides the column name a dropdown occurs that has "Filter" ption and on hovering over "Filter" option a new dropdown containing all the values from the columns is opened. I want this newly opened dropdown to the left always. How can I do so ?

 

$('#grid').data("kendoGrid");
            if (grid != undefined || grid != null)
                $('#grid').empty();

            var grid = $("#grid").kendoGrid({
                dataSource: DataSource,
                    schema: {
                        data: function (response) {
                            return response;
                        }
                    },
                },
                sortable: true,
                filterable: true,
                columnMenu: true,
                reorderable: true,
                resizable: true,
                multi: true,
                selectable: true,
                dataBinding: function () {
                    record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
                },
                noRecords: true,
                messages: {
                    noRecords: "No records found"
                },
                pageable: {
                    pageSize: 5,
                    input: true
                },
                columns: [
                    {
                        title: "Sr. No.",
                        template: "#= ++record #",
                        width: 70
                    },
                    {
                        field: "Title", title: 'Title',
                        width: "25%",
                        attributes: {
                            style: 'white-space: nowrap;'
                        },
                        filterable: {
                            multi: true,
                            extra: false,
                            search: true,
                            operators: {
                                string: {
                                    eq: "Is equal to",
                                    neq: "Is not equal to",
                                    contains: "Contains"
                                }
                            }
                        }
                    },

                    {
                        command: [
                            { name: "edit1", text: "", iconClass: "k-icon k-i-eye", className: "ob-view" }],
                        title: "Action", lock: true, width: 80, headerAttributes: {
                            style: "text-align: center;"
                        }
                    }
                ]
            });

}

 

 

Is there any way to make a FileManager widget that will allow for the uploading of both files and folders? I see that the 'directory' option of the Upload prevents the selection of files - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/directory - but I can't understand the logic here. Why would this be the case? In any event, if this must be the case, then is there a way to replace the upload widget inside of the FileManager widget on the fly, via a custom toolbar option? Even that would suffice. Or possibly have two upload widgets associated with the FileManager? One for files, and one for directories? If I have to, I'll implement a complete destruction and rebuild of the FileManager in order to facilitate this, but that's obviously far from ideal, especially if users are wanting to upload several different things in a single sitting.

Hi all,

I'm currently having a problem to try to change the focus one cell up/down using the key arrows when the focus is on a DatePicker component and it is located inside a Grid. The current behavior is that the focus is on the DatePicker and the up/down arrows change the segment value of the date. (It only changes the day, month or years).

Can you please give an idea how to override this kendo behavior?

Additionally, can you share with me more information about the keyboard navigation inside the DatePickers components?

I read this information DatePicker Component - Keyboard Navigation | Kendo UI for Angular (telerik.com) but it doesn't mention anything about the behavior pressing just the up/down arrows without opening the calendar component. 

 

Thank you in advance. 

I have a DropDownTree on my site. When the text of the item is too long to fit I am seeing a horizontal scrollbar and the gray colored background does not expand. I don't want auto width as that makes the container grow larger than the input control is. How can I instead have it wrap?