Hi,

We were using some custom icons in our application and wanted to replace column menu icon with custom icon.

How to achieve it? please share if you have any example.

Hello,
it is possible somehow pass HTML into Hint component ?

Thank you
<Field name={"logo"}
       label={"Bound with logo"}
       hint={"Logo only displays on <strong>Premium</strong> jobs"}
       component={FormDropDownList} />
                     

I am trying to create a sortable list with a slider inside it.

Here the example: https://stackblitz.com/edit/react-a3gnj5?file=app/main.jsx

As you can see, the code without the Sortable component works well, but with the Sortable component I cant use the slider and the focus is lost when I try to writte in the input component and the rerender happens.

Any suggestion? The slider and the input must be a 'controller component'.

Thanks!

PD: sorry for the post title, please change it :)

We are using the Window component with stage="FULLSCREEN" in a page that has HTML content in addition to the react app.  When the window is opened it displays as expected but allows for scrolling down to see the content of the page that is not part of the react app. 

Is there a way to prevent this scrolling so that the window appears to be the only content available to the user?

stackblitz example:

https://stackblitz.com/edit/react-o5rkfv?file=index.html

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?