Questions on Kendo UI for jQuery Forum

1 answer

163 views

dropdown with add new item in a grid collumn

I'm Already implemented a dropdown in a grid collumn according to this demo: https://demos.telerik.com/kendo-ui/grid/editing-custom

I'm Already did a test with this custom dropdown: https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem

I thinking if its possible to add this custom dropdown in a collumn of the grid to add a new category if the category is not found in the dropdown.

The collumn field doesnt show in the collumn Comment.

I tried the following code without success, some tips of how to solve this?

EDIT 1: I tried a solution from stackoverflow, and I think it is very close to solving this issue(http://dojo.telerik.com/OZIXOlUM). Still, the addNew function expects the widgetID. In the onclick of the add new button, the widgetID is passing nothing (see print screen). How did I get this ID? The script "noDataTemplate" is trying to get the id this way '#:instance.element[0].id#', but as I said, nothing returns.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Vat Grid</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">
    <link rel="stylesheet" href="styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="styles/kendo.silver.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/estilo.css">
    <link rel="stylesheet" href="css/daterangepicker.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/jszip.min.js"></script>
    <script src="js/pako_deflate.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    
        <div id="grid"></div>
    

    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <div>
            No data found. Do you want to add new item - '#: instance.filterInput.val() #' ?
        </div>
        <br/>
        <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new item</button>
    </script>

    <script>
        $(document).ready(function(){
            var dataSource = new kendo.data.DataSource({
                data: categories
            });

            var gridDataSource = new kendo.data.DataSource({
                data : [ {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "-",
                    "Confirmed": 1,
                    "Stat": 1
                },
                {
                    "Commen": "Some Comment",
                    "Confirmed": 1,
                    "Stat": 1
                }]
            });

            $("#grid").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                        field: "Stat",
                        title: "Status"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed",
                        template: " <input name='Confirmed' class='Confirmed' type='checkbox' data-bind='checked: Confirmed' #= Confirmed ? checked='checked' : '' #/>"
                    }, {
                        field: "Commen",
                        title: "Comment",
                        editor: commentCategoryEditor,
                        template:  "#=Commen#",                      
                        //template: "<input id='Commen'>",
                        width: 450,
                        nullable : true
                    }]
            }); 

        });

        var categories = [{
            "CategoryName": "-"
        },{
            "CategoryName": "Category 1"
        }, {
            "CategoryName": "Category 2"
        }];

        function commentCategoryEditor(container, options){
        $('<input name="Commen">')
                .kendoDropDownList({
                    filter: "startswith",
                    dataTextField: "CategoryName",
                    dataValueField: "CategoryID",
                    dataSource: dataSource,
                    noDataTemplate: $("#noDataTemplate").html()
            });
        }

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList();
            var dataSource = widget.dataSource;

            if (confirm("Are you sure?")) {
                dataSource.add({
                    CategoryID: 0,
                    CategoryName: value
                });
                dataSource.one("sync", function() {
                    widget.select(dataSource.view().length - 1);
                });
                dataSource.sync();
            }
        };
            
                
            

    </script>
</div>


    

</body>
</html>

Regards,

Jorge

DropDownList

Grid

answered on 10 Sep 2021

1 answer

529 views

Apply grid filter from transport string?

Hi!

Can I also apply a filter string representation read from a filter transport.parameterMap?

let grid = $('#myGrid').data("kendoGrid");

// This works, apply filter from object
grid.dataSource.filter({ field: "amount", operator: "eq", value: 7 });

// read the grid' filter as string
let filterstring = grid.dataSource.transport.parameterMap({ filter: grid.dataSource.filter() }).filter;
// value is now "amount~eq~7"

// Q: can something like this be done in some way?
grid.dataSource.filter("amount~eq~1234567"); // bad code

Thanks!

Data Source

Filter

Grid

answered on 09 Sep 2021

2 answers

279 views

Kendo Upload - No Title for remove button

Hi team,

In Kendo Upload, with the Default theme (LESS), the remove button (cross) for an uploaded file does not show its title when mousing over, see screenshot.

Seems the result of a bad pointer-events css.

Best regards,

Laurent.

Upload

answered on 09 Sep 2021

2 answers

2.3K+ views

Kendo grid Edit & create button popup title change

Hi,

I'm trying to change kendo grid Edit & create button popup titles,

both buttons popups same win but need to change edit button popup title as exists (Edit), & create(Add new record) button popup title to Add new record,

please help me to do this change...

General Discussions

answered on 08 Sep 2021

1 answer

902 views

Multiselect Customizing Template list css issue

Hi

I am working on Multiselect Customizing Template given on https://demos.telerik.com/kendo-ui/multiselect/template

I followed the example and created the same into my project. But the issue i am facing is that I have to copy the css as given in the example and add it into my css file.

Now talking about the css linked with #customers-list

This id is generated automatically by kendo.

Now if i want to add multiselect at multiple places into my project i have to add new id dependency into the css for it to support the image styling with the text.

Is there any way that i only create the CSS ones and use it for other select boxes as well

CSS in example:

 #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }
                
                /* Material Theme padding adjustment*/
                
                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }

MultiSelect

answered on 08 Sep 2021

1 answer

104 views

search does not works when we use setOptions({messages: { defaultFileName: node.fileName}})

https://dojo.telerik.com/utOdediD/18

PDFViewer

answered on 08 Sep 2021

1 answer

1.5K+ views

Tooltip does not hide when element is hidden

I have a grid where I have some buttons with icons for every row. For those buttons I need to display some tooltips. To do this I am using the kendo tooltip however when the user hovers the button and after the tooltip is displayed the user clicks on the button, the button is hidden but the tooltip is still shown.

How can I close the tooltip when the element is no longer visible on the screen?

ToolTip

answered on 08 Sep 2021

0 answers

207 views

pdf viewer search sometime on the first/second page of the doc, sometimes through all document

have no idea from what it depends, but it would be great to understand

PDFViewer

asked on 07 Sep 2021

1 answer

297 views

kendo.parsedate

kendo.parseDate("/Date(-62135537400000)/")

it returns Mon Jan 01 0001 08:37:02 GMT-0752 (Pacific Standard Time) I need the time and it is 8:30 it is adding 7 minutes, start happening recently it was working on the page since 2018.

Grid

answered on 07 Sep 2021

4 answers

183 views

Looking up value

Hi,
I'm working in a form that will look up the value in textbox 1 and return the corresponding value in textbox 2, similar to excel vlookup. For example, in text box 1, the user may type in 2112, and I'd like for it to look up 2112 in a list and the corresponding value would be "Travel" and it places that in text box 2. I'm not sure what are the terms I should be googling to learn more about how to accomplish this. Any ideas? Thanks!

General Discussions

answered on 06 Sep 2021