Hi,

When lock more than one columns in grid, each column has thick border on right side, how do we have thick border only on last column?

I have attached the sample image with grid three columns are locked, I need thick border at third column right on side (marked in green), do not need thick borders on column one & two (marked in red).

Thanks,

Hi,

We were using kendo react grid with column menus  enabled.

Column menu pops up when user clicks the icon (three dots) at the end of each column. We want the functionality of popup column menu on header click instead sorting [current default functionality]. 

It would be help us if you provide working example or ways to achieve it.

Thanks,

Hello,

I found a bug when process a group with null value.

This is the example that doesnt work: https://stackblitz.com/edit/react-hmnv9d?file=app%2Fmain.jsx

The first group with field 'estadoDenominacion' value 'null' is not rendering.

The response string in the products-loader.jsx is an example of our .NET Core API, our backend is something like this:

using Kendo.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

public DataSourceResult Get([DataSourceRequest] DataSourceRequest requestl) 
{
    return Repository.Get().ToDataSourceResult(request);
}

The Kendo.MVC library we are using are: Telerik.UI.for.AspNet.Core 2021.2.511

I found the method: translateDataSourceResultGroups use the key field of the response to build a group object but if the field is null or undefined, then use undefined as value, and in this case, the value of the first group must be null.

here do yoyu have a snippet of your library:

// utils.js
var isPresent = function (value) { return value !== null && value !== undefined; };

// deserialization.js
var valueOrDefault = function (value, defaultValue) { return isPresent(value) ? value : defaultValue; };
var normalizeGroup = function (group) { return ({
    aggregates: group.Aggregates || group.aggregates,
    field: group.Member || group.member || group.field,
    hasSubgroups: group.HasSubgroups || group.hasSubgroups || false,
    items: group.Items || group.items,
    value: valueOrDefault(group.Key, valueOrDefault(group.key, group.value))
}); };

The value is returning undefined because group.value is undefined (doesnt exist in the response).

Thanks!

I have a Date I'd like to edit which represents a time in a timezone other than the web browser's.  I am using a Scheduler component to display appointment times to the user.  These appointment times may be in a timezone other than the user's (i.e. the client's web browser's machine's time zone).  A user in CDT (America/Chicago) may edit a Scheduler configured to present times in EDT (America/New_York).  The Scheduler handles this nicely with separate "start" and "startTimezone" (and end/endTimezone) properties.  This allows the Scheduler to correctly display dates from the Eastern timezone.

const MyDatePicker = (props) => {
const regularDateInCDT = new Date(2021, 4, 31, 7, 30);
const zonedDateInCDT = ZonedDate.fromLocalDate(startTimeInCentralTimezone, "America/Chicago");
const zonedDateInEDT = zonedDateInCentralTimezone.toTimezone("America/New_York");
console.log("This looks right:", zonedDateInEasternTimezone.toString()); // "Mon May 31 2021 08:30:00 GMT-0400 (EDT)"  "EDT" is "America/New_York".
return <DateTimePicker value={zonedDateInEasternTimezone} />; // Nope!  Throws an exception about requiring a Date.  A ZoendDate is not a Date.
}

Essentially, what I'd like is a function that will convert "7:30 AM in web browser timezone" into some value that a DateTimePicker will display as 8:30 AM.  (7:30 CDT is 8:30 EDT.)  In this particular example, I could just add one hour, but I want something that will work with any arbitrary pair of timezones.

Have I explained what I'm trying to do sufficiently?

I am developing a data entry form that involves complex relationships between individual fields and the data service.  I may be in a situation where Form.onChange may be helpful, but I'm not sure.  The online documentation says "Use onChange only if you cannot achieve the desired behavior through the Field component by FormRenderProps." but doesn't actually given an example.  How do I call this method?

Note: This is not about FieldRenderProps.onChange.

function FuncyComponent() {
    const someData = {id: 123, etc};
    const form = <Form initialValues={someData} render={formRenderProps =>
        <FormElement>some fields</FormElement>} />;

    const handleButtonClick = (event: whatever) => {
        form.onChange("id", {value: 9876});
    };

    return <div>
        {form}
        <button onClick={handleButtonClick}>Change The ID</button>
    </div>;
}
 

I have a Form in which I'd like users to be able to select zero or more items from a table.  Rows in this table should contain a checkbox, and clicking the checkbox will include or exclude the corresponding item from the Field's value.  Perhaps the value will be a comma-separated list of the IDs of all the selected items.  An array is fine too.

Let's say we're doing an online purchase form for a fast food restaurant where customers have a small catalog of products to purchase from.  Maybe this is the entire product table:

Id: 1, Name: Hamburger, Price: $5
Id: 2, Name: Fries, Price: $2
Id: 3, Name: Soda, Price $2

The user would see:

[ ] Hamburger
[ ] Fries
[ ] Soda

If the user chooses a hamburger and soda, the SelectedItems value will be "1, 3" (or hopefully [1, 3]).  The end result is that after pushing the submit button, the onSubmit event will fire with a values object like this:

{ OrderId: 1234, SelectedItems: [1, 3], PaymentMethod: "cash" }

How can I use the Forms API to achieve this?  I thought perhaps a FieldArray would help, but I didn't see any examples of that class in use.  The online docs pretty much just say that a FieldArray has a "component" property and that the component does stuff with a FieldArrayRenderProps.  No actual examples.

My two questions:

1. How would you recommend I implement the table as described above?
2. What is an example of a typical use of a FieldArray?

I am using Kendo React version:4.5.0 for Date Picker. For the DatePicker I am using format="MM/dd/yyyy" and formatPlaceholder={{ year : 'YYYY', month : 'MM', day : 'DD' }}.

For this I have two queries:

1. How to have the focus to change automatically from MM to DD to YYYY when the user is typing in the date? Right now we have to use left and right arrow keys to move.

2. Right now the when the user type in the date for example in the YYYY the year is being input from right to left. So, how to have that implemented from left to right ?

Hello,

Im trying to create a custom cell with drag and cell selection and its look it is not possible because I dont have the original `<td/>` in the `GridCellProps`.

Here you have an example:

https://stackblitz.com/edit/react-xwdgxd?file=app/main.jsx

I found a "workaround" but I dont know if this is the correct way to do that:

https://stackblitz.com/edit/react-xwdgxd-tfwi7j?file=app/main.jsx

In Grid the prop cellRender do you have the original td allowing to override some props but without the need to know all internal props. Would be great if you can do that in the `GridColumn`.

I dont want to override the cellRender in the Grid and i dont want to know about data-grid-col-index.

Any suggestions?

Thanks!

Hello!

PDFExport, pageTemplate has 2 props, pageNum & totalPages.

Is it possible to send some custom values over props to "pageTemplate"?

Thank you, Matjaz Reberc

Hello,

I am trying to display a list of images with buttons that delete them when clicked. I'm using the Upload component and utilizing the 'listItemUI' attribute and it works wonderfully. However, I am trying to reverse the order of the elements displayed so that the most recent is at the top and the least recent is at the bottom.

 CustomListItemUI(e) {
        return (
            <ul id="custom-list-item-UL">
                {e.files.map((el, index) => {
                    if (el.Thumbnail_URL) {
                        return (
                            <li
                                className="k-file"
                                key={index}
                            >
                                <div className="k-file-single">
                                    <img src={el.Thumbnail_URL} onClick={() => this.toggleDialog(el)} />
                                </div>
                                <button
                                    type="button"
                                    onClick={async () => {
                                        this.actualUploader.current.onRemove(el.uid);
                                        await this.props.deleteImage(el.ID);
                                    }}
                                    tabIndex="-1"
                                >
                                    <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                    </span>
                                </button>
                            </li>
                        );
                    } else {
                        return (
                            <li key={index}>
                                <Loader errorsPresent={el.validationErrors} />
                                {
                                    el.ID || el.validationErrors?.length >= 0 ? <button
                                        type="button"
                                        onClick={async () => {
                                            this.actualUploader.current.onRemove(el.uid);
                                        }}
                                        tabIndex="-1"
                                    >
                                        <span aria-label="Remove" title="Remove" className="k-icon k-i-delete">
                                        </span>
                                    </button>
                                        : null
                                }
                            </li>
                        );
                    }
                })
                }
            </ul>
        );
    }

I have tried sorting the data that goes into the <ul> and it doesn't make a difference.

I have tried putting display: flex, and flex-direction: column-reverse, and this works but places the scroller at the bottom with the most early upload (which is also not what I want). Is there some kind of sorting attribute or method I can use to achieve what I want?