Questions on Kendo UI for jQuery Forum

1 answer

617 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

764 views

How to programmatically "unselect" a row in a grid

Hope I picked the right forum section..

we maintain and program a rather large app using kendo ui and jquery based around c# code..

For a certain task I need to unselect some rows from the selection the user has done previously. But a google search only delivers results on "select grid row programmatically"
The grid in question allows multi-select of entire rows. How can I unselect certain rows based on the content of certain data-fields within said rows?

Thanks in advance

Grid

MultiSelect

answered on 13 Aug 2021

1 answer

144 views

TreeList with MultiSelect values on a cell

Hi there,

I would like to use the MultiSelect to set the value of a cell in a TreeList.

My code almost works, but once the MultiSelect closes the values displayed in the grid are not what I expected.

I tried using a template to display selected values, but it doesn't look right.

Here is a dojo link https://dojo.telerik.com/OdAFErap/11 and below the code of that dojo

Thanks in advance,

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treelist/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
            <div id="example">
            <div id="treelist"></div>
              
            <script type="text/kendo" id="alertsTemplate">
               # if (Alerts) { #
              <ul>
                # for(var i = 0; i< Alerts.length; i++){ #
                <li>#: Alerts[i].name #</li>
                # } #
              </ul>
              # } #
            </script>

              
            <script>
              $(document).ready(function () {
                
                var AlertsList = [
                  { code: '9', name: 'Black' },
                  { code: '5', name: 'Red' },
                  { code: '5', name: 'Yello' },
                  { code: '3', name: 'Blue' },
                  { code: '1', name: 'Green' }
                ];

                var alertsEditor = (container, options) => {
                  $('<input name="Alerts">')
                      .appendTo(container)
                      .kendoMultiSelect({
                        dataValueField: "code",
                        dataTextField: "name",
                        dataSource: AlertsList
                      });
                };
                
                    var dataSource = new kendo.data.TreeListDataSource({
                      data: [
                          { id: 1, Name: "Daryl Sweeney", Alerts: null, parentId: null },
                          { id: 2, Name: "Guy Wooten", Alerts: null, parentId: 1 },
                          { id: 32, Name: "Buffy Weber", Alerts: null, parentId: 2 },
                          { id: 11, Name: "Hyacinth Hood", Alerts: null, parentId: 32 },
                          { id: 60, Name: "Akeem Carr", Alerts: null, parentId: 11 },
                          { id: 78, Name: "Rinah Simon", Alerts: null, parentId: 11 },
                          { id: 42, Name: "Gage Daniels", Alerts: null, parentId: 32 },
                          { id: 43, Name: "Constance Vazquez", Alerts: null, parentId: 32 },
                          { id: 46, Name: "Darrel Solis", Alerts: null, parentId: 43 },
                          { id: 47, Name: "Brian Yang", Alerts: null, parentId: 46 },
                          { id: 50, Name: "Lillian Bradshaw", Alerts: null, parentId: 46 },
                          { id: 51, Name: "Christian Palmer", Alerts: null, parentId: 46 },
                          { id: 55, Name: "Summer Mosley", Alerts: null, parentId: 46 },
                          { id: 56, Name: "Barry Ayers", Alerts: null, parentId: 46 },
                          { id: 59, Name: "Keiko Espinoza", Alerts: null, parentId: 46 },
                          { id: 61, Name: "Candace Pickett", Alerts: null, parentId: 46 }
                        ],
                        schema: {
                            model: {
                                id: "id",
                                expanded: true,
                              	fields: {
                                  	Name:   { type: "string", editable: false },
                                  	Alerts: { type: "string", editable: true }
                                }
                            }
                        }
                    });

                $("#treelist").kendoTreeList({
                        dataSource: dataSource,
                        height: 540,
		                		batch: true,
                        editable: "inline",
                        columns: [
                            "Name",
                            { 
                              field: "Alerts",
                              editor: alertsEditor,
                              template: $("#alertsTemplate").html()
                            },
                            { command: ["edit"] }
                        ]
                    });
                });
            </script>
        </div>


    

</body>
</html>

answered on 02 Jul 2021

1 answer

78 views

How can I prevent KendoMultiSelect from deleting search term in filter box?

After an initial search, if the user selects multiselect line items, and then searches for a different term, upon trying to select another item, the search term box clears itself and the filtered items reload unfiltered. How can I fix this behavior?

MultiSelect

answered on 26 May 2021

2 answers

1.2K+ views

How to show a popup on hover in Kendo Multiselect

I have a kendo multiselect component that works great, but when text in my dropdown are too long I have to truncate it. I would show at least a tooltip on hover with the full text. Here is an example of the desired result (in this example my mouse is on the first result, getting a popup with the full text) :

MultiSelect

answered on 26 Apr 2021

1 answer

62 views

Possible to hide the deleteTag? (X)

I can't find an options to hide the deleteTag. I want the user to select/deselect items by clicking on the items in the multiselect dropdown, and not by clicking the deleteTag on each tag.

I can change the popup-message when the mouse is hovering the 'X', but I can't find an option to remove the 'X'

MultiSelect

answered on 15 Apr 2021

1 answer

191 views

MultiSelect Force Selection

Hello,
I have created a multiselect that has default values (coming from the server) in an array that I then add to the kendoMultiSelect object as follows:

$("#subscriptionsWindow").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: multiData,
filter: "contains",
value: defaults //defaults here is an array of default items
});

I want to prohibit the user from deselecting these values, as they are enforced by the admin but must be shown in the drop down list.

I tried the read only option and that didn't work...

Thanks

MultiSelect

answered on 15 Feb 2021

5 answers

507 views

How to change placeholder of kendo multiselect widget by css rules?

.k-multiselect-wrap > .k-input {

color: #f02c0c; /* specify the default input color */ content: "HOME";

}

This rule doesn't work. Change the color, but not the content.

MultiSelect

answered on 03 Feb 2021

6 answers

317 views

Multiselect.setDataSource() bug after upgrade to 2015.1.318

Sample

In previous the previous version of Kendo I was able to dynamically update the contents of a multiselect list by calling setDataSource with a modified list. After upgrading to 2015.1.318, doing so results in copies of the currently selected item(s) being added to the visible list. The actual selections returned from .value() is still correct, one of each, but what's being rendered is not.

From what I can see in the source, a good bit of the multiselect implementation was redone with this release. I'm assuming this was not the intended behavior, but I was hoping there was maybe a workaround for now until the issue is resolved?

MultiSelect