Hi..

I have Radio button. But I don't see the radio getting focus, or any indication that it has focus. How can set the CSS so it show's that it has focus???

 

<input type="radio' id="radio1" class ="k-radio"

 

I have tried...

 

K-radio:focus{

  border: 10px solid red;

 color : red

}

 

nothing

Any ideas?

thx

 

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

 

What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.

So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".

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?

 

 

https://dojo.telerik.com/ahoKociN/2

 

 

1) normal select box : (in the iPAD)

<select id="size0" >
    <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>

 

2) kendo ui select box :

 

  Question : 

How can I input like 1) on mobile while using kendo jquery?

 

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;"
                        }
                    }
                ]
            });

}