I'm wondering if there is any support for styling a Dialog in the .net core version of telerik that I am trialling right now?  The documentation lists the ability to add a cssclass but that is only for the button, not for the entire dialog itself, I need to replicate previous functionality we were using where a cssclass is applied to the object in javascript when the dialog has been open for a certain amount of time.

This was the only documentation I could find and it's only able to add a class to the button, not the entire dialog.

Configuration, methods and events of Kendo UI Dialog - Kendo UI for jQuery (telerik.com)

I have a question because the focus is not moving.
1. User presses button
2. Search dialog is opened.
3. Input and grid exist in dialog.
4. After searching in input, output search result on grid
5. Press ArrowDown at input to move focus to grid
6. Processing according to the keyboard that the user pressed on the grid (pressing the up key to go up within the grid, and pressing the down key to go down within the grid)

I've done up to process 4.
So when I pressed ArrowDown in the input of the dialog during process 5,
Call $('#grid').find('table')[0].focus();

When grid's navigable is true,
normally focuses on the header of the grid.
And the rest of the keystrokes except for the direction key within the grid are output normally.

If the grid's navigable does not enter false or navigable,
The grid's header is not focused.

The problem here is...
1. If navigable = true, ==> focus goes but direction key does not work
2. Without navigable => focus does not go by itself (keyboard event not detected)

To sum up, when there is input and grid in the dialog, I want to focus on grid, and I want to detect all key events of grid, including direction keys.

Ask for advice.

Hello
I'm going to create a dialog and place grid and image view in it vertically. At this time, the height of grid and image view should match the height of the dialog, and the area should be divided by a ratio of 8:4.
Whenever I select a row in the grid, I want to take an image file from a specific path and show it in the image view, so is there an example or material that I can refer to?
When I searched for grid in dialog, I saw the kendo window data, but I want to implement it as a dialog instead of a window.
And when you put the grid in the dialog, is there a way to make the height of the grid 100%?
Also, when I searched Kendo image view, I saw the editor, and I wonder if there is a function that outputs only simple images, not editor.

Hi,

Upgrading to Kendo UI v2021.3.914 dialog titles are now truncated to half the dialog width.

As per here: https://netcorerepl.telerik.com/cvPPafaS01WpoJLM05   where the only change is the title. 

Is there a workaround for this?

thanks

Rod

I'm wondering if Telerik has pre-defined CSS to right align a group of kendo-textboxes in a div? I am using a slightly modified default Theme. I'd like these to line up nice and cleanly so it doesn't look jagged like this?

@{
    ViewData["Title"] = "Modify Patient";
    Layout = null;
}

@{
    var sexesList = new List<SelectListItem>() { new SelectListItem { Text = "Male", Value = "M" }, new SelectListItem { Text = "Female", Value = "F" } };
}
<div>
    <kendo-textbox name="SubjectID" placeholder="" value="" readonly="false" class="k-hidden"/>
    <div>
        <kendo-textbox name="FirstName" placeholder="" value="" readonly="false">
            <textbox-label content="First Name" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="MiddleName" placeholder="" value="" readonly="false">
            <textbox-label content="Middle Name" floating="false" />
        </kendo-textbox>
    </div>
    
    <div>
        <kendo-textbox name="LastName" placeholder="" value="" readonly="false">
            <textbox-label content="Last Name" floating="false" />
        </kendo-textbox>
    </div>
    <div>
            <kendo-textbox name="MedicalRecordNumber" placeholder="" value="" readonly="false">
                <textbox-label content="MRN" floating="false" />
            </kendo-textbox>
        </div>
    <div>
        <label>Date Of Birth</label>
        <kendo-dateinput name="DateOfBirth" format="MMM/dd/yyyy">
        </kendo-dateinput>
    </div>
    <div>
        <label>Sex</label>
        <kendo-dropdownlist name="Sexes"
                            datatextfield="Text"
                            datavaluefield="Value"
                            bind-to="sexesList">
        </kendo-dropdownlist>
    </div>
    <div>
        <kendo-datasource name="clinic_doctors_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <transport>
                <read url="@Url.Action("List_Doctors", "Clinic")" />
            </transport>
        </kendo-datasource>
        <span>
            <label>Doctor:</label>
            <kendo-dropdownlist name="Doctor" option-label="Doctor" placeholder=""
                                datatextfield="FullName"
                                datavaluefield="ClinicUserID"
                                datasource-id="clinic_doctors_list">
            </kendo-dropdownlist>
        </span>
    </div>
    <div>
        <kendo-textbox name="AddressLine1" placeholder="address" value="" readonly="false">
            <textbox-label content="Address Line 1" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="AddressLine2" placeholder="" value="" readonly="false">
            <textbox-label content="Address Line 2" floating="false" />
        </kendo-textbox>
    </div>

    <div>
        <kendo-textbox name="City" placeholder="" value="" readonly="false">
            <textbox-label content="City" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-datasource name="usa_state_list" type="DataSourceTagHelperType.Ajax" server-operation="false">
            <transport>
                <read url="@Url.Action("List_USA_States", "Clinic")" />
            </transport>
        </kendo-datasource>
        <span>
            <label>State:</label>
            <kendo-dropdownlist name="State" option-label="State" placeholder=""
                                datatextfield="StateName"
                                datavaluefield="StateAbbreviation"
                                datasource-id="usa_state_list">
            </kendo-dropdownlist>
        </span>
    </div>
    <div>
        <kendo-textbox name="Country" placeholder="" value="USA" readonly="true">
            <textbox-label content="Country" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="ZipCode" placeholder="" value="" readonly="false">
            <textbox-label content="Zip" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectPhone" placeholder="" value="" readonly="false">
            <textbox-label content=" Phone " floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectAltPhone" placeholder="" value="" readonly="false">
            <textbox-label content="Alternate Phone Number" floating="false" />
        </kendo-textbox>
    </div>
    <div>
        <kendo-textbox name="SubjectEmail" placeholder="" value="" readonly="false">
            <textbox-label content="Email" floating="false" />
        </kendo-textbox>
    </div>

</div>

Thanks,

Russ

I am most definitely NOT a UI/UX developer (I try to stick to the invisible stuff behind the scenes), but I've been tasked with developing a quick web page (ASP.NET Core 5 MVC, in case it matters) in which a user can look up the price of a product.  I have a database of nearly a million products.  I would like this thing to be responsive.  Obviously I could simply provide a search box and do it that way, but the products are broken up into five levels of a hierarchy.  It would be possible (and relatively easy) to create a page with cascading drop-downs.  However I'd prefer something even more flexible, preferably combining the best of all worlds, so that if a user knows what he/she is looking for, he/she can get to it more quickly/directly.  I'm thinking it might be nice to create a search that combines these various possible elements, where a user could pre-select 0-5 hierarchies and then still use a search at any point along the path.  I'm struggling to come up with a good visual presentation of that, though, so any advice, especially with a working example, would be much appreciated!

Thanks in advance!

I am a software engineer supporting a legacy product which uses Telerik 2018.2.516.45 . We are using Telerik for ASP.NET Core . 

We have a Telerik  Radwindow embedded into an .aspx page which we intend to use as a modal dialog box thus:

< telerik : RadWindow runat="server" ID="rwE1Products"  DockMode="false"  VisibleOnPageLoad="false" AutoSize="true" OnClientBeforeShow="onPopupShow" OnClientClose="onPopupHide" ClientIDMode="Static">

    <ContentTemplate>
        <div class="info_popup">
            <Repeater runat="server" ItemType="System.Tuple`2[System.String,System.String]" ID="rptData">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>

<!-- some content -->

                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
                <EmptyTemplate>
                </EmptyTemplate>
            </Repeater>
        </div>
    </ContentTemplate>
</telerik:RadWindow>

And on this page, we call it thus:

    function showE1Product() {
        var oWnd = $find('rwE1Products');
        oWnd.show();
        $('#RadWindowWrapper_rwE1Products').css({ 'z-index': '10007' });
        $('#rwE1Products_C').css({ 'overflow': 'hidden' });
    }

Which is called with a button click.

When we click the button, the modal appears blank and the screen is moreover locked.  Looking in our chrome developer tools, we see the error:

Uncaught TypeError: Cannot read property 'style' of undefined
    at c.RadWindow.setOverflowVisible (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:851)
    at c.RadWindow.autoSize (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:641)
    at c.RadWindow._afterShow (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:488)
    at c.RadWindow.show (ScriptResource.axd?d=wl5RKBCXTWDacHhxsSq8Q5gVEhb1VTyApq4eHCb1LIATB-dfkUbfjZqwHAMAcwKstvsADD5CfrfCrz5tBRnf1RC2Ji982n8TmXGh3FF4LqbYvZEtKgOV2F48baIXy3BkdwUasQ2&t=2afde251:439)
    at showE1Product ()
    at HTMLAnchorElement.onclick ()

Drilling down into the radwindow card, within the radwindow javascript, i see the problem here:

if(this._dockMode){this.get_contentElement().style

get_contentElement() is returning null. And the reason it is returning null is because this.pending_ui is also null.  

I have been googling, asking colleagues, and scanning these forums without finding any idea as to how to solve the issue. I removed the "ClientIDMode=Static" field without result.

I see that this call is set only when dockmode is nonzero. Is there a way to null that out and bypass the issue? If not, why would pending_ui be null?   

This is well down into the guts of the radwindow implementation at this point, so I thought it worthwhile to ask for advice at this juncture.

One final clue is that this was apparently working up until about April of this year, but we're seeing the same problem on IE 11 , which hasn't been updated in forever,  so I don't think the issue is due to a browser change. 

UPDATE:

The javascript methods on the clientshow and clienthide hooks are

    function onPopupShow(sender, args) {
        $('#updateProgressDiv').show();
    }
    function onPopupHide(sender, args) {
        $('#updateProgressDiv').hide();
    }

which is apparently another div on the page.   

Removing these hooks allows the dialog to display without locking the screen. However, we still do not see the content.

UPDATE 2: Modifying the "open window" javascript to use a manager thus: 

    function showE1Product() {
        var manager = GetRadWindowManager(); 
        manager.open(null, 'rwE1Products');
/*        var oWnd = $find('rwE1Products');
        oWnd.show(); */
        $('#RadWindowWrapper_rwE1Products').css({ 'z-index': '10007' });
        $('#rwE1Products_C').css({ 'overflow': 'hidden' });
    }

Gets rid of the console errors, but the content is still not populated.

Still, we seem to have answered at least one of the problems: We were getting the errors because we weren't using a radwindowmanager when one was available.

UPDATE #3 :

Solved the problem.  Removed the clientidmode=static and changed the open method to

    function showE1Product() {
        var oWnd = $find('<%= rwE1Products.ClientID %>');
        oWnd.show();
        $('#RadWindowWrapper_<%= rwE1Products.ClientID%>').css({ 'z-index': '10007' });
        $('#<%= rwE1Products.ClientID%>_C').css({ 'overflow': 'hidden' });
    }

Apparently radwindow doesn't like static ids.  If anyone would like to shed some light on why this would be and how we can use them PROPERLY, I'd love to read it.  But the issue itself is solved.

UPDATE #4: Now that I know what to look for, I find out that you just can't use static ids with a telerik control.

https://www.telerik.com/forums/changing-window-clientidmode-to-static-causes-javascript-error

So the problem was the static id, and there is no way to use one; we must use default client id mode. This question is answered. 

Respectfully,

Brian P.

Using either html or tag helper, the width and height seem to only accept px.  Dialog for other products accept %.  Does Dialog for Asp.Net Core accept %? 

If I edit the output HTML using browser devtools, percentage works fine.  So I'm guessing I'm just missing something.  

Hello,

the buttons of the dialog are defined as "role=toolbar". In this case the buttons need to be controlled by the arrow keys and to disable the tab function.

"For a horizontal toolbar (the default):
Left Arrow: Moves focus to the previous control. Optionally, focus movement may wrap from the first element to the last element.
Right Arrow: Moves focus to the next control. Optionally, focus movement may wrap from the last element to the first element."

Also the "role=toolbar" should just be set, if the item count is three or more.

"Use toolbar as a grouping element only if the group contains 3 or more controls."

Source: https://www.w3.org/TR/2014/REC-wai-aria-20140320/roles#toolbar

You should remove the "role=toolbar" or just set it with three items or more and add the arrow control.