Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

I have a kendo upload on one of my forms. This upload button has the following async, multiselect, autoUpload = false, batch = true. The problem I am running into is if the user selects 5 files, but meant to only select 4, they click the remove icon for that row.

I am having issues removing that file from the file portion of the upload control. If I select 5 and then remove them all, the upload is still acting as if all 5 are there. kendoUpload.getFiles() is always showing me every file they selected.

Just be clear, I am trying to remove a file from memory before the user fully uploads them. The process is that they select the files, the files populate a grid, and then once the user is ready they click an 'upload' button that will fire off the server call. Prior to them clicking upload everything is client side.

Upload

answered on 19 Nov 2021

1 answer

144 views

Can I bind the graph highlight feature to a button click?

I have an application that displays a donut graph with 3 sections. My goal is to highlight the proper section of the graph when the correlated button is clicked. Attached is a relevant image. If the user clicks the 'No Issue' button below, I would like the green portion of the graph to be highlighted. I'd like similar functionality for the other buttons as well. Is this possible? I've perused the docs and have come across various highlighting information, but nothing related to "turning on the highlight" on button click.

Charts

answered on 19 Nov 2021

2 answers

543 views

How to remove unused blank line?

Go here: https://demos.telerik.com/kendo-ui/multiselect/index

and select Anne King, Andrew Fuller and Nancy Leverling.

MultiSelect now uses two lines and the second line is blank, even after the widget loses focus.

How can I get rid of this extra blank line?

My page has lots of stuff on it, and the extra line causes most of the page to shift down.

MultiSelect

updated answer on 19 Nov 2021

1 answer

1.3K+ views

Search not working with React material-table using remote data

I'm using the material-table module here [1] with remote data from a web service. I've included the search parameter, but it's not working and there are no error messages in the console.

Here is the code:

import React from 'react';
import ReactDOM from "react-dom";
import MaterialTable from 'material-table';


import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowUpward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
};

const GET_PUBLICATIONS_URL = 'http://193.62.54.159/backend/v1/publications?';


class App extends React.Component {

    render() {
        return (
            <MaterialTable
                icons={tableIcons}
                title="Remote Data Preview"
                columns={[
                    { title: 'Publication ID', field: 'publicationId' },
                    { title: 'PMID', field: 'pmid' },
                    { title: 'First author', field: 'firstAuthor' },
                    { title: 'Publication', field: 'title' },
                    { title: 'Journal', field: 'journal' },
                    { title: 'Status', field: 'status' },
                ]}
                data={query =>
                    new Promise((resolve, reject) => {
                        // let url = 'https://reqres.in/api/users?'
                        let url = GET_PUBLICATIONS_URL
                        url += 'size=' + query.pageSize
                        url += '&page=' + (query.page)
                        fetch(url)
                            .then(response => response.json())
                            .then(result => {
                                resolve({
                                    data: result._embedded.publications,
                                    page: result.page.number,
                                    totalCount: result.page.totalElements,
                                })
                            })
                    })
                }
                options={{
                    search: true
                }}
            />
        )
    }
}

// export default DemoMUITable_RemoteData;
ReactDOM.render(<App />, document.getElementById("root"));

Here is an example of the output from the web service call used above cinema hd:

{
    _embedded: {
        publications: [{
                publicationId: "5d2dbec2483e4bcddc82c61c",
                pmid: "jqfWof0a6N",
                title: "hDoClFK1xW",
                journal: "bsmw70kDBz",
                firstAuthor: "NUed57buOd",
                publicationDate: "2019-07-16T12:07:01.937Z",
                correspondingAuthor: {
                    authorName: "VRbSDd72mC",
                    email: "YgH4UoELBp"
                },
                status: "ELIGIBLE",
                _links: {
                    self: {
                        href: "http://193.62.54.159/backend/v1/publications/5d2dbec2483e4bcddc82c61c?pmid=false"
                    }
                }
            },
            {
                publicationId: "5d2dbeff483e4bcddc82c61d",
                pmid: "WlQsCFYg3b",
                title: "bsthfcP7zY",
                journal: "sUULVFkYJQ",
                firstAuthor: "NUed57buOd",
                publicationDate: "2019-07-16T12:07:01.937Z",
                correspondingAuthor: {
                    authorName: "UOTBdYbsRh",
                    email: "ZUmHQ7evjl"
                },
                status: "ELIGIBLE",
                _links: {
                    self: {
                        href: "http://193.62.54.159/backend/v1/publications/5d2dbeff483e4bcddc82c61d?pmid=false"
                    }
                }
            },
            {
                publicationId: "5d2dbf05483e4bcddc82c61e",
                pmid: "V1KphgdwaG",
                title: "KoXVQJjoGp",
                journal: "1bO9QNNDCM",
                firstAuthor: "NUed57buOd",
                publicationDate: "2019-07-16T12:07:01.937Z",
                correspondingAuthor: {
                    authorName: "KsfpbpEAGc",
                    email: "p69YIXvYEq"
                },
                status: "ELIGIBLE",
                _links: {
                    self: {
                        href: "http://193.62.54.159/backend/v1/publications/5d2dbf05483e4bcddc82c61e?pmid=false"
                    }
                }
            },
            {
                publicationId: "5d2dbf0a483e4bcddc82c61f",
                pmid: "JEmARsAgWM",
                title: "CiOTlRIeD4",
                journal: "l1ofJObwtJ",
                firstAuthor: "NUed57buOd",
                publicationDate: "2019-07-16T12:07:01.937Z",
                correspondingAuthor: {
                    authorName: "rGdQGN5oPh",
                    email: "6PI3NfrnmV"
                },
                status: "ELIGIBLE",
                _links: {
                    self: {
                        href: "http://193.62.54.159/backend/v1/publications/5d2dbf0a483e4bcddc82c61f?pmid=false"
                    }
                }
            },
            {
                publicationId: "5d346e129bb39d8c6e33faa4",
                pmid: "cNUmFPonBy",
                title: "0LwQYP0fUK",
                journal: "C3gQOWPZ2C",
                firstAuthor: "q1LwUyYpgO",
                publicationDate: "2019-07-16T12:07:01.937Z",
                correspondingAuthor: {
                    authorName: "oJdt6ae7sp",
                    email: "jhdOF23b9m"
                },
                status: "ELIGIBLE",
                _links: {
                    self: {
                        href: "http://193.62.54.159/backend/v1/publications/5d346e129bb39d8c6e33faa4?pmid=false"
                    }
                }
            }
        ]
    },
    _links: {
        first: {
            href: "http://193.62.54.159/backend/v1/publications?page=0&size=5"
        },
        self: {
            href: "http://193.62.54.159/backend/v1/publications"
        },
        next: {
            href: "http://193.62.54.159/backend/v1/publications?page=1&size=5"
        },
        last: {
            href: "http://193.62.54.159/backend/v1/publications?page=5&size=5"
        }
    },
    page: {
        size: 5,
        totalElements: 26,
        totalPages: 6,
        number: 0
    }
}

Here are my app's dependencies:

"dependencies": {
    "@material-ui/icons": "^4.2.1",
    "material-table": "^1.40.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },

General Discussions

answered on 19 Nov 2021

1 answer

134 views

[Solved] ViewHTML is changing HTML entered to form that some email clients do not like

Hi,

If I use the ViewHTML feature and add the following:

After closing the popup and clicking on the ViewHTML button again my code has changed to:

and then the final output from the editor on saving becomes:

Is there any way to tell it not to return rgba type code as the output from the editor is being used for emails and rgba is not working properly in various email clients.

Many thanks,

Steve

Editor

answered on 19 Nov 2021

2 answers

2.2K+ views

Kendo switch change event using jquery

is there any way ,to get the Change event of kendo switch with jquery?i dont want to use kendo helper

<input type="checkbox" id="tst" aria-label="Notifications Switch" />
the following does not work:

$("#tst").change(function(){ alert("works");});

i

Switch (Mobile)

answered on 18 Nov 2021

0 answers

138 views

Move scrollbar of long table with locked columns below footer but keep footer in view

Dojo

The above Dojo shows my code. I have a table with many rows. I want the first row locked and the table has a footer. I want the footer to remain visible regardless or where the user scrolls vertically. I want the footer to track horizontally with the rest of the table though so the columns stay lined up. This has to also be responsive so it works on various screen sizes and devices. I tried the sample in one of the previous questions on here but that doesn't work with the conditions mentioned above. How would I accomplish this?

Grid

asked on 18 Nov 2021

1 answer

852 views

How to validate an optional date with a date input mask

I have a dateinput field that I need to validate. Unfortunately I can't seem to figure out how to make it work. The requirements are as follows:

1. The date is optional.

2. If the date is provided, it must be a valid date.

3. The input mask could be in various languages.

When I try to validate I get invalid date when the date field just has the input mask (month/day/year) showing.

Here is a dojo showing my example.

https://dojo.telerik.com/@dojolee/ukIKedUL

DatePicker

answered on 18 Nov 2021

1 answer

2.4K+ views

One validation error for group of checkboxes

I have a list of checkboxes and I need to validate if at least one is checked. If not, I want one error message to appear for the entire group. That message should appear in a separate <span></span> below the group. I know how to do this with radio buttons but these are checkboxes so they can't all have the same name. I've looked at the other posts on here from 2013, 2015, and 2019 but none of them really answer my question. How would I do something like that?

Validation

answered on 18 Nov 2021

1 answer

537 views

autocomplete attribute on AutoComplete widget

How can I set the HTML autocomplete attribute on an input which uses Kendo UI AutoComplete widget to a value other than "off"?

So far, I have tried the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1109/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1109/js/kendo.all.min.js"></script></head>
<body>
  <input type="text" id="countries" autocomplete="one-time-code" />
  <script>
  $(function(){
      
      var countries = [ "Australia", "Canada", "United States of America"];
    
      var countriesDataSource = new kendo.data.DataSource({
        data: countries
      });
      $('#countries').kendoAutoComplete({
        dataSource: countriesDataSource
      });
  });
  </script>
</body>
</html>

But if you see the screenshot, no matter the HTML markup, the input gets the autocomplete="off" attribute (and value). Guessing this is part of the autocomplete widget?

I am trying to get round the Chrome issue reported here where the previous input to an input[type=password] is autofilled with a username / email.

So want to know how to set the autocomplete attribute on a Kendo-ified AutoComplete input, to a value of my choice.

Alternatively, any solid method of avoiding Chrome autofill on the Kendo UI AutoComplete widget would be greatly appreciated.

Thanks in advance

AutoComplete

answered on 18 Nov 2021