Questions on UI for ASP.NET MVC Forum

1 answer

234 views

How to use Panelbar as menu plus breadcrumb for layout (page)

Hi,

I would like to know how to setup a generic MVC layout(page) with a (panelbar) menu on the left (collapsable when mobile)
together with a Breadcrumb. Should be responsive / mobile first.
Actually something like your demos page navigation, but then the menu should be collapsable. Like the panelbar.

Is there a complete example for this ? Or do I have to fuzzle manually to achieve this ?

(At first I was thinking about using the menu control, but to my surprise I saw that control is not responsive.)

Martin

Breadcrumb

Menu

PanelBar

answered on 15 Jun 2021

1 answer

458 views

How to customize grid filter row autocomplete?

Hello,

i'm using MVC5 Razor helper to create grid and i'm trying to show specific autocomplete values in filter row. As i undestood it from forums and docs i have to replace standard filter row input by manually creating kendoAutoComplete(...) with my own dataSource, as shown for example here with classic filter menu:

https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

or here with filter row:

https://www.telerik.com/forums/server-side-filtering-with-row-filter-mode-filters-too-soon!

My custom JS autocomplete:

<script>
function onFilterAutocomplete(e)
{
	e.element.kendoAutoComplete({
		filter: 'contains',
		dataSource: {
			serverFiltering: true,
			serverSorting: true,
			transport: {
				read: '@Url.Action("FilterAutocompleteAsync")'
			}
		}
	});
}
</script>

My server method:

[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<JsonResult> FilterAutocompleteAsync([DataSourceRequest]DataSourceRequest dataSourceRequest) => Json(/*... db stuff...*/);

When i try to replace input by defining:


columns.Bound(x => x.ColumnName).Filterable(x => x.Cell(y => y.Template("onFilterAutocomplete")));

my JS function is executed on grid init and no errors are shown in browser console. But when i try to filter, the automatic autocomplete on filter input keeps showing values as normaly from grid dataSource (standard behaviour) and my controller method won't get called.

If i try to replace input by defining:

columns.Bound(x => x.ColumnName).Filterable(x => x.UI("onFilterAutocomplete")));

my JS function won't get called at all.

What am i doing wrong here?

PS: I've tried with following versions:

telerik.ui.for.aspnetmvc.hotfix.2019.2.619.commercial.digitally-signed

and

telerik.ui.for.aspnetmvc.hotfix.2021.2.511.commercial.digitally-signed

AutoComplete

Filter

Grid

answered on 15 Jun 2021

1 answer

178 views

Editing with Rowtemplate in a Treelist does not work

Hello

I am trying to use Rowtemplate on a Treelist so that we can completely control how the row is rendered, however once i have my Treelist up and running with a Rowtemplate then all the editing functionality disappears.

The cell editing works perfectly when no RowTemplateId is specified and as soon as i enable my custom Rowtemplate the editing stops working immediately, i even try manually calling edit on a cell, however no editing seems to work once i start using the custom RowTemplate.

But all the rest of the RowTemplate functionality is working, so is RowTemplates only for displaying elements right now or is it a bug?

Cheers

Uffe

TreeList

answered on 15 Jun 2021

1 answer

104 views

Limiting width of columns in Scheduler mvc

Hi

I am trying to make the scheduler, day week and month views to fit only a single screen without needing to horizontally scroll. But each day takes up 50% of the screen and its totally unnecessary wasting of the screen space.

Google searches dont give me results, or tell me that it cannot be done.. AND YET, every single demo on the telerik website perfectly fits into a div that takes up 80% of the width of the screen. So its possible, dont tell me it is not.

How?

Here is some code:

cshtml file:

@model project.models.schedulerModel
@using Kendo.Mvc.UI
<div id="appointmentCalenderContainer" class="calenderContainer">
	@(
	Html.Kendo().Scheduler<SchedulerModelTaskViewModel>()
		.Name("appointmentsCalender")
		.Width(1880)
		.Height(820)
		.Editable(true)
		.AllDaySlot(false)
		.EventTemplate("<div class='eventBox'><div class='eventInner'><span>#= title #</span></div><div class='eventInner'><span>#= description #</span></div></div>")
		.Views(views => {
			views.DayView(x => x.Selected(true));
			views.WeekView();
			views.MonthView();
		})
		.DataSource(d => d
			.Model(m => {
				m.Id(f => f.TaskID);
			})
			.Read("Read", "CitizenDashboard")
			.Create("Create", "CitizenDashboard")
			.Destroy("Destroy", "CitizenDashboard")
			.Update("Update", "CitizenDashboard")
		)
	)
</div>

Scheduler

answered on 15 Jun 2021

1 answer

171 views

Displaying broken German umlauts in standalone Telerik Reporting Designer

Displaying broken German umlauts in standalone Telerik Reporting Designer. I get this data from Postgres datasource to textboxes and table values, but on a preview and in pdf file shows incorrect symbols of German language. How can I fix that?. Thanks.

PDFViewer

TextBox

answered on 08 Jun 2021

4 answers

2.7K+ views

Loading grid on DropDownList change or button click event

Hi,

I want to load the grid either or both the below ways:
1. On change (selected index changed) event of DropDownList. The selected value from dropdown should be passed to grid and based on it grid should display result.
2. On click of the button event. The selected value from dropdown should be passed to grid on button click and based on it grid should display result.

Do we have any kind of example which shows meets my above requirements or any kind of lead that I look into it will be very helpful.

Thanks,
Nirav

Grid

answered on 07 Jun 2021

3 answers

807 views

how send input kendotextbox value to autocomplete textbox with possible suggestions.

Good day guys,

how possible is this, to send input textbox value to autocomplete textbox while typing. and the autocomplete should be set to readonly.

see attached image

kind regards

AutoComplete

answered on 07 Jun 2021

2 answers

1.9K+ views

Fetch all files of local directory and populate files names in dropdownlist

Hello,

I want to Fetch all files in a local Folder (Directory) and populate file names and present them in my view page as a drop down list.

taking the name of the file selected and save it in my table as a string value.

any suggestions please ?

Thank you in advance.

DropDownList

View

answered on 04 Jun 2021

1 answer

115 views

Unable to find Diagram / End User Interaction in Kendo UI for ASP.NET MVC with DRAG AND DROP FUNCTIONALITY

I check on site some examples for drag-drop in diagram bug that is only available for ASP.Net AJAX but I need them in ASP.NET MVC. I attached a link as well for reference.

https://demos.telerik.com/aspnet-ajax/diagram/examples/interactions/defaultcs.aspx

So, anybody helps me that it is available for ASP.NET MVC or not.

Diagram

answered on 03 Jun 2021

1 answer

164 views

Bug in Column filter when Title is set. Order is wrong

When I dynamically add in a column and set the title the order in the column filter is wrong. Clicking on "1" in the Column filter disabled "4" which is the 5th column in the loop. However if I remove the Title, then it works as expected. I need to set the Title for my usage. Originally I tried setting the title to an actual text value but that is when I found the order was messed up.

            @(Html.Kendo().Grid<InventoryItemViewModel>()
    .Name("InventoryItemGrid")
    .Columns(columns =>
    {
    columns.Bound(c => c.InventoryItemId).Title("ID").ClientTemplate("#=kendo.toString(InventoryItemId, '000000')#").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Name).Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Description).Title("Description").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.InventoryItemTypeName).Title("Type").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.WetTonnes).ClientTemplate("<span class='source-#=WetTonnesSource#'>#=WetTonnes#</span>").Media("(min-width: 1200px)");
    columns.Bound(c => c.MoisturePercent).ClientTemplate("<span class='source-#=MoisturePercentSource#'>#=MoisturePercent#</span>").Media("(min-width: 1200px)");
    columns.Bound(c => c.CoarseFineRatio).ClientTemplate("<span class='source-#CoarseFineRatioSource#'>#=CoarseFineRatio#</span>").Title("Coarse Percentage").Media("(min-width: 1200px)");
    for (int x = 0; x < 6; x++)
    {
        columns.Bound(c => x).Title(x.ToString()).ClientTemplate(x.ToString());
    }


    columns.Bound(c => c.IsBlended).Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));
    columns.Bound(c => c.Status).ClientTemplate("#=statusTemplate(data)#").Media("(min-width: 1200px)").Filterable(ftb => ftb.Multi(true));

    columns.Bound(c => c.CreatedDate).Media("(min-width: 1200px)").Format("{0:g}").Hidden(true);
    columns.Bound(c => c.CreatedBy).Media("(min-width: 1200px)").Hidden(true);
    columns.Bound(c => c.LastUpdatedDate).Media("(min-width: 1200px)").Format("{0:g}").Hidden(true);
    columns.Bound(c => c.LastUpdatedBy).Media("(min-width: 1200px)").Hidden(true);
    columns.Template(@<text></text>).ClientTemplate("#=resColTemplate(data)#").Title("Details").Media("(max-width: 1200px)");
    })
    .Sortable()
    .Scrollable(s=>s.Height("auto"))
    .Filterable()
    .ColumnMenu(c=>c.Columns(true))
    .Excel(excel => excel
        .FileName("Inventory Item Export.xlsx")
        .Filterable(true)
        .AllPages(true)
        .ProxyURL(Url.Action("Excel_Export_Save", "InventoryItems"))
    )
    .ToolBar(t=>
    {

        t.Template(@<text>
            <div class="toolbar">
                 <label class="k-grid-title-label">Items</label>
<div class="k-grid-toolbar-btns">
<button type="button" class="btn btn-secondary btn-sm" id="ExcludeFilter" data-exclude-state="excluded">
<i class="fa fa-filter" aria-hidden="true"></i>
Exclude Archived
</button>
                     <button id="export" class="btn btn-secondary btn-sm"><i class="fas fa-file-excel"></i></button>
@if (PLS.Library.Authorize.AuthorizeUser(PLS.Models.Enum.AccessLevel.Create, PLS.Models.Enum.SystemSection.Inventory))
{
<a class="btn btn-primary btn-sm"  href="@Url.Action("Create", "InventoryItems", new { Area = "Inventory" })">
Create
</a>
}
</div>
<div class="k-grid-toolbar-search">
<span class="k-textbox k-grid-search k-display-flex">
<input autocomplete="off" placeholder="Search..." title="Search..." class="k-input">
<span class="k-input-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
</span>
</div>
           </div>
            </text>);
    })
    .Search(search =>
    {
        search.Field(f => f.InventoryItemId);
        search.Field(f => f.Name);
        search.Field(f => f.Description);
        search.Field(f => f.InventoryItemTypeName);
        search.Field(f => f.Status);
        search.Field(f => f.WetTonnes);
        search.Field(f => f.CoarseFineRatio);
        search.Field(f => f.MoisturePercent);
    })
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5)
    )
    .Selectable(selectable =>
    {
        selectable.Mode(GridSelectionMode.Single);
        selectable.Type(GridSelectionType.Row);
    })
    .Resizable(resize => resize.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("InventoryItems_Read", "InventoryItems"))
        .Sort(sort =>
        {
            sort.Add(f => f.StatusId).Ascending();
            sort.Add(f => f.CreatedDate).Ascending();
        })
        .PageSize(10).ServerOperation(false)
        .Filter(f => f.Add(x => x.Status).IsNotEqualTo("Archived"))
    )
)

Grid

answered on 02 Jun 2021