Questions on UI for Blazor Forum

1 answer

256 views

I have a checkbox in a grid (Telerik Grid for Blazor). When I click the checkbox (using incell editing) the value changes however it does not save to the database and if I leave the page and come back the data is back to the old values.

This is the code for the grid:

                        <TelerikGrid Class="custom-icons" Data="@OfficesList" 
                                Reorderable = "true"
                                EditMode = "@GridEditMode.Incell"  
                                Sortable = "true"
                                Pageable = "true"
                                SelectionMode = "GridSelectionMode.Multiple"
                                OnUpdate = "@UpdateItem"                                 
                                @ref="OfficeListGrid"  
                                @bind-SelectedItems="@SelectedItems">
                            <DetailTemplate Context="office">
                                <Incumbents Office="@office"></Incumbents>
                            </DetailTemplate>                            
                            <GridColumns>
                                 <GridCommandColumn Context="OfficeCommandsContext">
                                    <GridCommandButton Command="Edit" Class="btn btn-sm btn-primary" Icon="edit">Edit</GridCommandButton>
                                 </GridCommandColumn>
                                <GridColumn Field="@nameof(GetOfficesResult.OfficeName)" Title="Office" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.OfficeSeqNum)" Title="Office Sequence #"Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsVacant)" Title="Is Vacant" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.IsPrimaryPartisan)" Title="Is Primary Partisan" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsPrimaryNonPartisan)" Title="Is Primary Non Partisan" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.PrimaryDistrictType)" Title="Primary Voting District Type" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.PrimaryDistrictCode)" Title="Primary Voting District" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.IsGeneral)" Title="Is General Ballot" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.GeneralDistrictType)" Title="General Voting District Type" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.GeneralDistrictCode)" Title="General Voting District" Editable="false" />
                                <GridColumn Field="@nameof(GetOfficesResult.CanFileAgain)" Title="Can File Again?" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.TermLength)" Title="Term Length" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingDistrictType)" Title="General Voting District Type" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingDistrictCode)" Title="General Voting District" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.SalaryType)" Title="Salary Type" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.Salary)" Title="Salary" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FilingFee)" Title="Filing Fee" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.NextElection)" Title="Next Election" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.Notes)" Title="Notes" Editable="false"/>
                                <GridColumn Field="@nameof(GetOfficesResult.FederalOnly)" Title="Is Federal Only"  />
                            </GridColumns>
                        </TelerikGrid>

This is the code behind for the Update Item:

        public async Task UpdateItem(GridCommandEventArgs args)
        {
            var currState = OfficeListGrid.GetState();

            GetOfficesResult offices = (GetOfficesResult)args.Item;

            ////Reset any current editing
            currState.EditField = null;
            currState.OriginalEditItem = null;

            //Reset any current insertion 
            currState.InsertedItem = null;

            //Add the item to edit to the state
            var target = OfficesList.FirstOrDefault(o => o.OfficeID == offices.OfficeID);

            if (target != null)
            {
                target.OfficeID = offices.OfficeID;
                target.OfficeName = offices.OfficeName;
                target.FilingDistrictCode = offices.FilingDistrictCode;
                target.FilingDistrictType = offices.FilingDistrictType;
                target.PrimaryDistrictCode = offices.PrimaryDistrictCode;
                target.PrimaryDistrictType = offices.PrimaryDistrictType;
                target.GeneralDistrictCode = offices.GeneralDistrictCode;
                target.GeneralDistrictType = offices.GeneralDistrictType;
                target.IsVacant = offices.IsVacant;
                target.IsPrimaryPartisan = offices.IsPrimaryPartisan;
                target.IsPrimaryNonPartisan = offices.IsPrimaryNonPartisan;
                target.IsGeneral = offices.IsGeneral;
                target.OfficeSeqNum = offices.OfficeSeqNum;
                target.CanFileAgain = offices.CanFileAgain;
                target.TermLength = offices.TermLength;
                target.SalaryType = offices.SalaryType;
                target.Salary = offices.Salary;
                target.FilingFee = offices.FilingFee;
                target.NextElection = offices.NextElection;
                target.Notes = offices.Notes;
                target.FederalOnly = offices.FederalOnly;
            }



            offices = args.Item as GetOfficesResult;

            GetOfficesResult originalItem = OfficesList.Where(itm => itm.OfficeID == offices.OfficeID).FirstOrDefault();
            GetOfficesResult itemToEdit = GetOfficesResult.GetClonedInstance(originalItem);


            await OfficeListGrid.SetState(currState);
            SelectedItems = OfficesList;

            AddToSelectedCollection(itemToEdit);


            //Use the state to remove the edited item and close the editor
            //currState.EditField = null;
            //currState.OriginalEditItem = null;
            await OfficeListGrid.SetState(currState);
            await RebindGrid();
        }

I am not sure why it doesn't save

Thank you in advance

Max

Grid

answered on 04 Apr 2022

1 answer

81 views

Can the second level of a context menu ever pop up instead of down?

The second level of Context Menu never pops up, always down, even if there is no space to do so.

It seems like the first level will pop up if there isn't enough room below the menu to show the items. However, the second level always appears below the menu that was expanded.

Demo here:

https://demos.telerik.com/blazor-ui/contextmenu/overview

Make your window not very tall, so the "clickable" part (that says "Right-click to open Context menu" is barely visible at the bottom of the screen").

Then right-click; and hover over "Style". The sub menu appears below the word "Style", and is cut off by the bottom of the window. It should know that there is no space down there, and pop "up".

What can I do to fix this?

Thanks!

ContextMenu

answered on 04 Apr 2022

1 answer

778 views

Is it possible to set a custom width for the k-animation-container that comes from filter dropdown in grid component?

Hello,

I'd like to apply custom width on the dropdown element for the filter row in grid component. The last column in our project is wide enough for the cell content but not wide enough for the filter row dropdown. I was wondering if it'd be possible to target a `.k-animation-container` element that is connected to the dropdown. Here's a demo that shows the issue.

Result I'd like to get:

Kind regards,

Greg

Grid

answered on 01 Apr 2022

1 answer

451 views

Is it possible to trigger Window Maximize/Minimize actions from code?

For example, when the user clicks on a button inside (or outside) the Window, I maximize or minimize the Window. Something like window.Maximize();

The specific use case here is when the user loads data, I want to automatically maximize the Window for them. It is difficult for the user to find the maximize button because the window width becomes greater than the browser window and they have to drag the window to find the maximize button and click it.

Window

answered on 31 Mar 2022

3 answers

913 views

Removing Manage Password

Hi,

When I entering the password, the password is stored in chrome browser.

So I need to remove the manage password and I have attached the image below

Please see below code

<EditForm Model="@resetPasswordModel" OnValidSubmit="@SaveChanges" autocomplete="off">
<FluentValidator TValidator="ResetPasswordValidator" />
<p>@Model.Name</p>
<EFormRowGroup LabelText="New Password" Id="Password">
<TelerikTextBox Id="Password" @bind-Value="@resetPasswordModel.Password" Password="true" AutoComplete="off"/>
</EFormRowGroup>
<EFormRowGroup LabelText="Confirm Password" Id="ConfirmPassword">
<TelerikTextBox Id="ConfirmPassword" @bind-Value="@resetPasswordModel.ConfirmPassword" Password="true" AutoComplete="off"/>
</EFormRowGroup>
<EValidationSummary />
<EDialogActions>
<TelerikButton Icon="save" Primary="true" ButtonType="@ButtonType.Submit">Save</TelerikButton>
<TelerikButton Icon="cancel" ButtonType="@ButtonType.Button" OnClick="@CancelClick">Cancel</TelerikButton>
</EDialogActions>
</EditForm>

Could you please advise on this.

Thanks,

Vishnu Vardhanan.

TextBox

answered on 31 Mar 2022

1 answer

661 views

Scroll treeview

Is there a way to have the treeview scroll vertically?

Thanks ... Ed

TreeView

answered on 31 Mar 2022

1 answer

177 views

Blazor Editor insertHTML command Exception

Please see REPL: https://blazorrepl.telerik.com/wcYncXGa24oOJuTr39 or attached sample file.

await Editor.ExecuteAsync(new HtmlCommandArgs("insertHTML", "Hello", true));

Executing the above code by clicking the Insert button in the REPL throws this exception:

Unhandled exception rendering component: _V[e] is not a function
TypeError: _V[e] is not a function
...

Any workarounds?

Thanks!

Editor

updated answer on 31 Mar 2022

1 answer

198 views

TabStrip not removing k-state-active on ActiveTabIndexChanged event

Hello, I am trying to use the TabStrip component but am running into issues. I have tried every combination of demos that are in the documentation, and none seem to function. I have tried it by just using @ref, I've tried just using ActiveTabIndex, and I've tried the below, and none seem to function the same as in the demos. With each way I tried, the previous active tab keeps it's .k-state-active class, and the newly selected tab receives a .k-state-active class. The previously selected tab does not get reset to .k-state-default. I have also tried this not nested within a TelerikGridLayout and it did not make a difference. Any input would be greatly appreciated

<TelerikGridLayout>
    <GridLayoutColumns>
        <GridLayoutColumn Width="100%"></GridLayoutColumn>
    </GridLayoutColumns>
    <GridLayoutRows>
        <GridLayoutRow Height="10vh"></GridLayoutRow>
        <GridLayoutRow Height="90vh"></GridLayoutRow>
    </GridLayoutRows>
    <GridLayoutItems>
        <GridLayoutItem Column="1" Row="1" Class="m-auto">
            <img src="Images/logo.png" />
        </GridLayoutItem>
        <GridLayoutItem Column="1" Row="2">
            <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="BaseDashboardTabStrip" ActiveTabIndex="@currentTab" ActiveTabIndexChanged="@TabChangedHandler">
                <TabStripTab Title="Tab 1">
                </TabStripTab>
                <TabStripTab Title="Tab 2">
                </TabStripTab>
                <TabStripTab Title="Tab 3">
                </TabStripTab>
                <TabStripTab Title="Tab 4">
                </TabStripTab>
                <TabStripTab Title="Tab 5">
                </TabStripTab>
                <TabStripTab Title="Tab 6">
                </TabStripTab>
            </TelerikTabStrip>
        </GridLayoutItem>
    </GridLayoutItems>
</TelerikGridLayout>
@code {
    TelerikTabStrip BaseDashboardTabStrip;
    int currentTab { get; set; } = 0;
    void TabChangedHandler(int newIndex)
    {
        currentTab = newIndex;
        StateHasChanged();
    }
}

TabStrip

answered on 30 Mar 2022

1 answer

1.4K+ views

NumericTextBox - Default to blank/null

I am attempting to utilize TelerikNumericTextBox, rather than TelerikTextBox, in order to take advantage of the Min, Max, Format, and other features available. However, upon making the switch I am no longer able to display a blank/null value in the textbox.

I don't see any mention of this in the TelerikNumericTextBox docs (https://docs.telerik.com/blazor-ui/components/numerictextbox/overview) and I assume this behavior is by design. Is there a way to allow a TelerikNumericTextBox to have a blank/null value? Perhaps a TelerikMaskedTextBox would work?

NumericTextBox

answered on 29 Mar 2022

1 answer

375 views

disable underlying component

Hello,

I have a parent component that holds a pop up window. When the window pops up (is visible) then the parent component becomes disabled (no user interaction with the parent - underlying component - is possible).

Within this window, I have another Dialog window that will pop up upon closing the window, if a certain condition is not met.

When this Dialog pops up, the underlying component (which in this case is the pop up window) doesn't become disabled. Instead, the effect will take place again on the parent component.

How would I make the 'disable' effect take place on the window located in the parent component, and not on the parent component, upon the popping up of the Dialog?

Thank you.

Window

answered on 29 Mar 2022