Questions on Kendo UI for jQuery Forum

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

117 views

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

126 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

817 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.3K+ 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

506 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

0 answers

175 views

What's causing the row height styles being added to every row in virtual scroll and how do I stop it?

When scrolling with frozen columns and virtual scrolling enabled, the grid freezes a few seconds when you scroll back up to previously loaded rows. Looks like kendo is adding inline height styles to each row that's causing the jank.

I see in the demos for frozen columns and virtual scrolling this does not happen. Is this being cause by a specific grid setting that we have? Is it possible to disable this?

Grid

updated question on 16 Nov 2021

2 answers

602 views

MaskedTextBox mask doesn't work correctly with promptChar: "" or " "

Hello,

I tried to hide the mask prompt characters. But I got strange results.

If I use empty string as a promptChar

input.kendoMaskedTextBox({ mask: "&", promptChar: "" });

then the mask doesn't work at all.

When I use a space as a promptChar

input.kendoMaskedTextBox({ mask: "&", promptChar: " " });

then the mask enforces the length but not contents - I can enter a space even when I shouldn't be able.

When I use an underscore as a promptChar or use default

input.kendoMaskedTextBox({ mask: "&", promptChar: "_" });
input.kendoMaskedTextBox({ mask: "&" });

then everything works as it should, I can enter only one character but not a space.

Is this a feature or a bug? I'm using Kendo UI v2021.1.119.

MaskedTextBox

answered on 16 Nov 2021

1 answer

455 views

Set Date on renderMessage in KendoChat

Is there a way to set the date on the renderMessage method. I'm using the renderMessage to pre-populate the chat instance with a predefined, persistent chat message. When you click on the chat bubble, it shows you the time in hh:mm:ss format.

I'm curious, is there a way to set the date on the renderMessage. If yes, can you control what shows up when you click on it (i.e. old stuff, you most likely want to see the time.

Thanks,

Richard

Chat

answered on 16 Nov 2021