Telerik Forums
Kendo UI for jQuery Forum
2 answers
17 views

Hi,

I am doing default PDF export functionality of Kendo Grid. But exported PDF file has extra characters in meta data. That results weird title of the PDF in Chrome browser. I have attached screen shot of the exported pdf and also a meta data of the file.  

I found few solutions (https://www.telerik.com/forums/saving-grids-or-charts-as-pdf-and-getting-strange-characters-in-the-metadata) that mentioned that I need to have <meta Charset='UTF-8'> in my code, where grid has been initialized. But I have set UTF-8 charset only in my entire code, still facing same issue.

I have few questions:

1) Which charset value is getting used to export the grid in PDF? (i) <meta Charset='UTF-8'> written in my code or (ii) default export functionality has its own charset value

2)  I am using Telerik.UI.for.AspNet.Core 2020.3.1021 version for kendo UI. Which specific library is being used for PDF generation in Telerik.UI.for.AspNet.Core  2020.3.1021 ? 

3) Is there anything else to try to resolve this issue?

Angel Petrov
Telerik team
 answered on 17 Apr 2024
0 answers
8 views

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

 

Jonathan
Top achievements
Rank 1
Veteran
 asked on 12 Apr 2024
1 answer
9 views

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.

Neli
Telerik team
 answered on 11 Apr 2024
7 answers
920 views

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

<div id="example">
    <div class="demo-section k-content">
        <h4>Select an item</h4>
        <input id="dropdowntree" style="width: 100%;" />
    </div>
    <script>
        $(document).ready(function () {
 
            // create kendoDropDownTree from input HTML element
            $("#dropdowntree").kendoDropDownTree({
                placeholder: "Select ...",
                height: "auto",
                dataSource: [
                    {
                        text: "Furniture", expanded: true, items: [
                            { text: "Tables & Chairs" },
                            { text: "Sofas" },
                            { text: "Occasional Furniture" }
                        ]
                    },
                    {
                        text: "Decor", items: [
                            { text: "Bed Linen" },
                            { text: "Curtains & Blinds" },
                            { text: "Carpets" }
                        ]
                    }
                ]
              , change: function(e) {
                kendo.alert("Value: " + this.text());
              }
            });
        });
    </script>
</div>

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

Thanks.

John
Top achievements
Rank 1
Iron
 answered on 10 Apr 2024
1 answer
18 views

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

 

Neli
Telerik team
 answered on 09 Apr 2024
0 answers
7 views

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".

James
Top achievements
Rank 1
 asked on 08 Apr 2024
1 answer
12 views
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.
Martin
Telerik team
 answered on 05 Apr 2024
2 answers
33 views

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) { }

            }
        }


Trusha
Top achievements
Rank 1
Iron
 answered on 04 Apr 2024
4 answers
8.2K+ views
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?

01.@(Html.Kendo().Grid(Model)
02.      .Name("ResultList")
03.      .HtmlAttributes(new { style = "font-size:.8em; height:auto;" })
04.      .Columns(columns =>
05.        {
06.                     
07.          columns.Bound(p => p.ReportID).Width("100px")
08.            .Filterable(filter => filter.Operators(o => o
09.              .ForString(str => str
10.                .Clear()
11.                .Contains("Contains")
12.                .DoesNotContain("Does Not Contain")
13.                .StartsWith("Starts With")
14.                .EndsWith("Ends With")
15.                .IsEqualTo("Equal To")
16.                .IsNotEqualTo("Not Equal To")
17.          )));
18. 
19.          columns.Bound(p => p.ClientReportName).Width("100px")
20.            .Filterable(filter => filter.Operators(o => o
21.              .ForString(str => str
22.                .Clear()
23.                .Contains("Contains")
24.                .DoesNotContain("Does Not Contain")
25.                .StartsWith("Starts With")
26.                .EndsWith("Ends With")
27.                .IsEqualTo("Equal To")
28.                .IsNotEqualTo("Not Equal To")
29.          )));
30. 
31.          columns.Bound(p => p.ReportClassDescription).Width("100px")
32.            .Filterable(filter => filter.Operators(o => o
33.              .ForString(str => str
34.                .Clear()
35.                .Contains("Contains")
36.                .DoesNotContain("Does Not Contain")
37.                .StartsWith("Starts With")
38.                .EndsWith("Ends With")
39.                .IsEqualTo("Equal To")
40.                .IsNotEqualTo("Not Equal To")
41.          )));
42. 
43.          columns.Bound(p => p.ReportTypeDescription).Width("100px")
44.            .Filterable(filter => filter.Operators(o => o
45.              .ForString(str => str
46.                .Clear()
47.                .Contains("Contains")
48.                .DoesNotContain("Does Not Contain")
49.                .StartsWith("Starts With")
50.                .EndsWith("Ends With")
51.                .IsEqualTo("Equal To")
52.                .IsNotEqualTo("Not Equal To")
53.          )));                     
54.        })
55.      .Pageable(page => page.Refresh(true).Input(true))
56.      .Scrollable()
57.      .Groupable()
58.      .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
59.      .Filterable()
60.      .DataSource(dataSource => dataSource
61.        .Ajax()
62.        .Read(read => read.Action("QueueSearch_Read", "Queue"))
63.        .PageSize(100)
64.        .ServerOperation(true)
65.        )
66.      .Resizable(resize => resize.Columns(true))
67.      .Reorderable(reorder => reorder.Columns(true))
68.      )
Dimo
Telerik team
 updated answer on 03 Apr 2024
0 answers
10 views

 

 

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?

 

n/a
Top achievements
Rank 1
Iron
Iron
 asked on 30 Mar 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?