Telerik Forums
UI for ASP.NET MVC Forum
2 answers
1.0K+ views

I have implemented the File Manager like in the Demo and I have added the Download in the ContextMenu.

https://demos.telerik.com/aspnet-mvc/filemanager

https://docs.telerik.com/aspnet-mvc/knowledge-base/filemanager-create-download-command

so fare so good.

 

Now when I double click on a folder I get into the folder, but when I double click on a file nothing happens.

How can I implement that the file is open (downloaded) on double click?

 

In the Demo (https://demos.telerik.com/aspnet-mvc/filemanager) ist looks like the same behavior.

Raimo
Top achievements
Rank 1
Iron
 answered on 14 Jul 2021
1 answer
592 views

Hi, I have a kendo grid and need to get a querystring value.  See below code.

 

Browser Url = http://blahblah/blah/36?EvaluationCriteriaGrid-mode=edit&chiefEvalCriteriaId=110

 

UI.cshtml

                                

@(Html.Kendo().Grid(Model.ChiefEvaluationCriteriaList.AsEnumerable())
                        .Name("EvaluationCriteriaGrid")
                        .Columns(columns =>
                        {

                            columns.Bound(p => p.EvaluationCriteriaName);
                            columns.Bound(p => p.MinScore).Width(100).Title("Min Score").Format("{0:0}");
                            columns.Bound(p => p.MaxScoreDisplay).Width(100).Title("Max Score");
                            columns.Command(command => { command.Edit(); }).Width(180).Title("Action");
                        })
                        .CellAction(cell =>
                        {
                            if (cell.Column.Title == "Action")
                            {
                                if (cell.DataItem.EvaluationResultID ==
                                    ServiceProxy.Model.DomainConstants.EVALUATION_RESULT_APPROVED)
                                {
                                    cell.HtmlAttributes["style"] = "display:none;";
                                }
                            }
                        })
                        .Editable(editing => editing.Mode(GridEditMode.InLine))
                        .Pageable()
                        .Sortable()
                        .Scrollable()
                        .DataSource(dataSource => dataSource
                        .Server()
                        .Model(model => model.Id(c => c.ChiefEvaluationCriteriaID))
                        .Read("EvaluationQuestionnaire", "EvaluationCriteria", new { area = "Proposal", Id = Model.SolicitationDetails.SolicitationID })
                        .Update("EditEvaluationCriteria", "EvaluationCriteria", new { area = "Proposal", Id = Model.SolicitationDetails.SolicitationID })

                    )

                )

 

Controller.cs

[HttpPost]

 public ActionResult EditEvaluationCriteria( int Id, int chiefEvalCriteriaId, int maxScoreDisplay, int minScoreDisplay = 0 )
        {

               if (ModelState.IsValid)
                    {
                       Do something
                     }

 

                    return view

        }

 

 

Thank you for the support

 

Anton Mironov
Telerik team
 answered on 13 Jul 2021
1 answer
81 views

When I paste rows from an excel sheet and try to sync the datasource the submit event doesn't include the pasted rows.  This works fine in version 2020.2.513, but doesn't in version 2021.1.224.  Any ideas?


@(Html.Kendo().Spreadsheet()
        .Name("CommentsSpreadsheet")
        .HtmlAttributes(new { style = "width:100%;" })
        .Toolbar(false)
        .Sheetsbar(false)
        .Sheets(sheets =>
        {
            sheets
            .Add()
            .Name("Comments")
            .DataSource<DocumentCommentSpreadsheetEntry>(ds =>
                ds.Custom()
                .Batch(true)
                .Transport(t => t.Read("onRead").Submit("onSubmit"))
                )
            .Columns(columns =>
            {
                columns.Add().Width(100);
                columns.Add().Width(100);
                columns.Add().Width(100);
                columns.Add().Width(200);
                columns.Add().Width(200);
                columns.Add().Width(200);
                columns.Add().Width(200);
                columns.Add().Width(300);
                columns.Add().Width(300);
            })
            .Rows(rows =>
            {
                rows.Add().Height(30).Cells(cells =>
                {
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    cells.Add()
                            .Bold(true)
                            .Background("#015991")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                });
            });
        })
    
)

<script>

function onRead(options) {
            var data = [
                {
                    Section: '',
                    Page: '',
                    Line: '',
                    Item: '',
                    Category: '',
                    Email: '',
                    Subject: '',
                    Comment: '',
                    ProposedSolution: ''
                }
            ]
            options.success(data);
        }
        function onSubmit(e) {
           //No rows included in created or updated
           console.log(e.data);
            
        }
</script>

Ivan Danchev
Telerik team
 answered on 13 Jul 2021
1 answer
876 views

Here is what I tried:

            

using (FileStream stream = new FileStream(FullFileNameDOC, FileMode.Open)) wordDocument = new DocxFormatProvider().Import(stream); Header header = wordDocument.Sections.First().Headers.Default; RadFlowDocumentEditor editor = new RadFlowDocumentEditor(header.Document); using (Stream stream = new FileStream($@"{TemplatesDirectory}FormHeader.PNG", FileMode.Open)) editor.InsertImageInline(stream, "png");

using (FileStream stream = new FileStream(FullFileNameDOC, FileMode.Open)) wordDocument = new DocxFormatProvider().Import(stream); Header header = wordDocument.Sections.First().Headers.Default; RadFlowDocumentEditor editor = new RadFlowDocumentEditor(header.Document); using (Stream stream = new FileStream($@"{TemplatesDirectory}FormHeader.PNG", FileMode.Open)) editor.InsertImageInline(stream, "png");

... this inserts the image but not in the Word document Header; it inserts the image in the Word document Body.

Thanks.

Martin
Telerik team
 answered on 12 Jul 2021
0 answers
146 views

Good day,

I'm using Server hierarchy Grid which containes a sub grid in DetailTemplate.

But there's no expend icon in the grid which data was loaded successfully. In page HTML codes, there's <td class="k-hierarchy-cell"> but style.display = 'none'

Please help to check.

Code and screenshot as below:

 

@{ Html.Kendo().Grid(Model)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.BookingNumber).Width(200);
            columns.Bound(e => e.QuotationId).Width(120).Title("QT#");
            columns.Bound(e => e.ProformaETD).Width(120);
            columns.Bound(e => e.BLShipper).Width(400);
            columns.Bound(e => e.BLConsignee).Width(400);
            columns.Bound(e => e.BLNotify1).Width(400);
            columns.Bound(e => e.BLNotify2).Width(400);
            columns.Bound(e => e.BLContractHolder).Width(400);
        })
        .DetailTemplate(item =>
        {
            Html.Kendo().Grid(item.Containers)
                    .Name("Ctn_" + item.BookingId)
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ContainerNumber).Width(150);
                        columns.Bound(o => o.ContainerType).Width(100);
                        columns.Bound(o => o.IsSOC);
                    })
                    .Pageable()
                    .Width(500)
                    .Render();
        })
        .Pageable()
        .Scrollable()
        .DataSource(dataSource => dataSource.Server().PageSize(20))
        .Sortable()
        .Height(650)
        .Render();
        }

 

Charles
Top achievements
Rank 1
 updated question on 12 Jul 2021
0 answers
264 views

Try to use the Drag and Drop to reorder the rows. 
I'm stuck in an error that I'm not figuring out.

The error: Uncaught TypeError: Cannot read property 'insert' of undefined

The line: grid.datasource.insert(newIndex, dataItem );

I'm sure the datasource has data, since the "console.log(dataItem)" returns the object model


var Material = new kendo.data.Model.define({
    id: "NR_position",
    fields: {
        NR_position: { type: "number" },
        CD_Material: { type: "number" },
        NM_Material: { type: "string" }
    }
});

var Controller = {
    dataSource: {        
        ListMat: new kendo.data.DataSource({
            transport: { read: { url: matList, type: "POST" } },
            model: Material,             
            dataType: "json",
            url: "data/person.json"
        })
    },
    init: function () {
        var grid = $("#grdMatOrder").kendoGrid({
            dataSource: Controller.dataSource.ListMat,
            columns: [
                { field: "NR_position", title: "Order" },
                { field: "CD_Material", title: "Code" },
                { field: "NM_Material", title: "Name" }
            ]
        }).data("kendoGrid");

        grid.table.kendoSortable({
            filter: ">tbody >tr",
            hint: function (element) {
                var table = $('<tr colspan=4" class="placeholder></ tr>'), hint;

                table.append(element.clone());
                table.css("opacity", 0.7)                

                return table;
            },

            change: function (e) {
                var skip = grid.dataSource.skip(),
                    oldIndex = e.oldIndex + skip,
                    newIndex = e.newIndex + skip,
                    data = grid.dataSource.data(),
                    dataItem = grid.dataSource.getByUid(e.item.data("uid"));

                console.log(dataItem)

                grid.dataSource.remove(dataItem);
                grid.datasource.insert(newIndex, dataItem );
            }
        });
    }
};


$(document).ready(function () {
    Controller.init();
});

        


        

anna
Top achievements
Rank 1
 asked on 09 Jul 2021
1 answer
4.5K+ views

I have a kendo grid and in the create action, I want to post back the content of another grid's data source to a razor pages server.

@(Html.Kendo().Grid<EntityModel>() .Name("mainGrid") .DataSource(ds => ds.Ajax() .Read(r => r.Url("/Index?handler=ReadEntity")) .Create(c => c.Url("/Index?handler=CreateEntity").Data("getData")) .Model(m => m.Id(id => id.EntityID)) ) ) function getData() { var otherModels = $("#otherGrid").data("kendoGrid").dataSource.data(); var temp = $.extend(true, {}, kendo.antiForgeryTokens(), { otherModels: otherModels }); return temp; }

The result looks like this

temp

  • otherModels
    • 0
      • Name: xyz ...

       

The action:

public JsonResult OnPostCreateEntity(List<OtherViewModel> otherModels, [DataSourceRequest] DataSourceRequest request, EntityViewModel entityModel) //otherModels is empty

This works fine for collections of simple objects like integers, but in this case, an exception is thrown:

"Cannot read property 'field' of undefined"

Anton Mironov
Telerik team
 answered on 08 Jul 2021
1 answer
463 views

Hello, I have a grid which uses popup editing, and inside the editor is another grid which uses incell-editing. This basically works, apart from the following:

For the nested grid, I want to use an editor template, containing a multiselect.

But on editing a cell with the editor template, nothing happens. What might be the reason for this?

Main Grid:

@(Html.Kendo().Grid<WorkspaceViewModel>()
            .Name("grid")
            .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("WorkspaceDialog"))
            .ToolBar(x => x.Create().Text("Add Workspace"))
            .Columns(columns =>
            {
                columns.Bound(column => column.Name);
                columns.Command(column =>
                {
                    column.Edit().UpdateText("Save");
                    column.Destroy();
                }).Width(230);
            })
            .DataSource(ds => ds.Ajax()
                .Read(r => r.Url("/Workspaces/Index?handler=ReadWorkspace").Data("getSearchParameters"))
                .Update(u => u.Url("/Workspaces/Index?handler=UpdateWorkspace").Data("getSelectedReports"))
                .Create(c => c.Url("/Workspaces/Index?handler=CreateWorkspace").Data("getSelectedReports"))
                .Destroy(d => d.Url("/Workspaces/Index?handler=DestroyWorkspace").Data("forgeryToken"))
                .Model(m => m.Id(id => id.WorkspaceID))
                .PageSize(10)
            ) )

Popup:

<div class="k-edit-field">
    @(Html.Kendo().Grid<ViewModels.ReportUserViewModel>()
        .Name("reportGrid")
        .Columns(columns =>
        {
            columns.Bound(column => column.Name);
            columns.Bound(c => c.SelectedUsers) //List<UserSelectViewModel>
                .ClientTemplateId("reportUserTemplate")
                .Sortable(false)               
                .EditorTemplateName("~\\/Views\\/Shared\\/EditorTemplates\\/UserSelect.cshtml")
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .DataSource(ds => ds
            .Ajax()
            .Read(r => r.Url("/Workspaces/Index?handler=ReadReport").Data("getSelectedReportUsers"))
            .Model(m => m.Id(id => id.ReportID))
            .PageSize(10)
            .ServerOperation(false)
        )
    )
</div>

Editor Template:

@model List<ViewModels.UserSelectViewModel>

@(Html.Kendo().MultiSelectFor(m => m)
    .AutoBind(false)
    .DataTextField("Name")
    .DataValueField("UserID")
    .BindTo((List<UserSelectViewModel>)ViewData["Users"])
    )

The controls are inside a Razor Pages application. Both templates are placed in the Views/Shared/EditorTemplates folder. In the Editor Template markup, I tried to use the absolute path to the view, because EditorTemplates("UserSelect") threw some error ("Unexpected token").

Everything works fine if I use the Multiselect in the main grid.

Jan-Frederik
Top achievements
Rank 1
Iron
Iron
 updated question on 06 Jul 2021
1 answer
171 views

Hi

I have successfully found a way to make the resource horizontal grouping headers have a div with several elements inside, and custom styling. 

I need this to add a portrait of people, their names and an apartment name, for each of the resource group headers.

However if i have 16+ columns to show in the horizontal view, it gets squished together, so there isn't enough space to see the details.

SO, i set the widths of each of the headers to 200px, and add them together and add the width to the this.view().table[0] 's styles. This works for the headers.... However, the horizontal scrollbar doesn't appear, and the events dont match anymore. So when i call any "refresh", "rebind", "resize" etc. method, the site crashes because it creates an infinite loop. 

What can i do?

Js databound function:

function hideStaffTimeHeader() {
	var view = this.view();

	// remove the times header row
	var trs = view.timesHeader[0].children[0].children[0].children;
	for (var i = 1; i < trs.length; i++) {
		trs[i].remove();
	}
	$(".k-scheduler-header-wrap > table > tbody > tr:eq(1)").hide();

	// attempt to set the width of each header and total width of entire table.
	var columns = view.table[0].children[0].children[0].children[1].children[0].children[0].children[0].children[0].children[0].children;
	var width = 0;
	for (var i = 0; i < columns.length; i++) {
		columns[i].style.width = "200px";
		width += 200;
	}
	view.table[0].style.width = width + "px";
}

 

the mvc razor cshtml:


@model IList<WebStaffScreen.Models.TaskViewModel>
@using Kendo.Mvc.UI

<div id="sc_container">
@(Html.Kendo().Scheduler<WebStaffScreen.Models.TaskViewModel>()
		.Name("staffCalender_scheduler")
		.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd-MM-yyyy')#</span>")
		.Date(DateTime.Now)
		.AllDaySlot(false)
		.Editable(e => e.TemplateName("StaffEditorPartialView"))
		.Views(v => v.DayView(d => d.Selected(true)))
		.Group(group => group.Resources("CitizenManagerName").Orientation(SchedulerGroupOrientation.Horizontal))
		.Resources(res => res.Add(m => m.CitizenManagerID)
			.Name("CitizenManagerName")
			.DataTextField("FullName")
			.DataValueField("ID")
			.DataSource(s => s.Read(r => r.Action("GetCitizenManagersInResidence", "StaffCalendar")))
		)
		.DataSource(d => d.Model(m => m.Id(f => f.TaskID))
			.Read("Read", "StaffCalendar")
			.Create("Create", "StaffCalendar")
			.Update("Update", "StaffCalendar")
			.Destroy("Destroy", "StaffCalendar")
		)
		.Events(e => e.DataBound("hideStaffTimeHeader"))
)
</div>


 

Update:

Heres a sample with the problem, and some Readme info in the Home/index page .. 

 

Attila
Top achievements
Rank 1
Iron
Iron
 updated question on 05 Jul 2021
1 answer
588 views

I'm trying to use the Kendo Datepickerfor in an MVC application that doesn't allow past dates to be selected. If we use .Min or .DisableDates then the input doesn't display the date from the Model.

I've tried a workaround with using a template to set the past dates as 'k-state-disabled' but couldn't get to a solid solution of disabling click events. It would work using the Open event, but when navigating in the calendar, it would still allow past dates to be selected.

Thoughts/help would be great.

Anton Mironov
Telerik team
 answered on 05 Jul 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?