Telerik Forums
UI for ASP.NET MVC Forum
1 answer
477 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
176 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
599 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
2 answers
193 views

Hi,

I am trying to get the .InsertUnorderedList()  to set a bullet point for every line there is in the Editor. But it only does the first line. Anyone that knows how to change this behaviour?

I have attached a picture of this.

Thanks,

Mark

Mark
Top achievements
Rank 1
Iron
 answered on 05 Jul 2021
1 answer
721 views

Hi,

How can I save the results of all steps when filling in all the Wizard steps ?  (in Telerik Asp.Net MVC Wizard control)

Lets say that step 2 is dependant on step 1 (screen should be rendedered with/without certain controls dependant of what was filled in on step 1.

How can I achieve this ?

Is there a serverside 'Next' click event or so ? Or a Select step event or so ?  I havent seen it to my dissapointing surprise.

(I know I can load content tabs with Ajax, but that doesnt give me the entered data.)

Martin

 

Ivan Danchev
Telerik team
 answered on 02 Jul 2021
1 answer
3.4K+ views

Hello,

how can i send a id parameter on Onclick delete action javascript, this is my code. i don't want to use action link because i'm using ajax call

Thanks for helping.

 


@(Html.Kendo().Grid(Model)
            .Name("Conventions")
            .Columns(columns => {
                columns.Bound(c => c.Libelle).Width("450px");
                columns.Bound(c => c.DateEnvoi).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.Statut.Libelle).Title("Statut");
                columns.Template(@<text></text>).ClientTemplate("<span class='k-icon k-i-delete' id='deleteIcon'></span>").HtmlAttributes(new { onclick = "onDeleteConvention()" }).Width("40px");

            }).NoRecords("Pas de conventions trouvés")
            .Scrollable().Height(200).DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Model(model =>
                {
                    model.Id(p => p.ConventionId);
                    model.Field(p => p.Libelle).Editable(false);
                    model.Field(p => p.DateEnvoi).Editable(false);
                    model.Field(p => p.Statut.Libelle).Editable(false);
                })
             )
            )

Ivan Danchev
Telerik team
 answered on 30 Jun 2021
1 answer
218 views

Hi,

I have a kendo grid with some thousands of records with employees.

so when i click new record in kendo grid, in new row first column is employee name. here am using employeename Edit template view to display employee inside kendo grid while editing.

so is there any possibility like i want to retrieve all the employees from grid and assign those values to dropdown list ( employeename Edit template view) instead of calling to DB.

Eyup
Telerik team
 answered on 30 Jun 2021
1 answer
132 views

Hi ,

I have a kendo grid which displays the all employees and their timesheets values. with sum aggregates in footer grid.

here is my requirement.

currently i am editing June month column of A person from the image shown.

in jQuery after getting A person records (using current cell and finding emp number of current row then am querying only that empnumber  to get  A person records) then i want to do sum of column of editing cell (june column).

but i dont want to apply any filters to grid. grid should display previous values only not to show only A person values.

 

Eyup
Telerik team
 answered on 30 Jun 2021
1 answer
577 views

I want to create MVVM Kendo Grid where it is grouped in multiple levels and also want a nested grid or a hierarchical grid for each parent's grid row i.e. each k-master-row .  In the ScreenShot Is it possible to create a Nested/ Child / Hierarchical Grid for each row? If yes, Can someone please provide me with sample demo. 

I didn't find any documentation or helpful resource?

 

 

Parent Grid:

   Grouped by Field 1

          Grouped By Field 2

             Row1

                           Nested  / Child Grid with child Grid Columns  For ROW1

             Row2

                        Nested / Child Grid with child Grid Columns For ROW 2

 

 

 

 

 

Tsvetomir
Telerik team
 answered on 28 Jun 2021
0 answers
492 views

I am using Kendo for Asp.Net MVC in my application. Recently I upgraded to version 2021.2.616 After that the treelist stopped showing data. Only "No records available." is shown(see attached pic)


@(Html.Kendo().TreeList<Models.CategoryModel>()
    .Name("treelist")
    .HtmlAttributes(new { id = "itemtreelist" })
    .Toolbar(toolbar =>
    {   
toolbar.Custom().Click("AddNewCategory_click").Text("Add New Item Category").Name("addNewCategory");

        }
    })
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).Width(200).Filterable(filterable => filterable.Ui("itemNameFilter"));
        columns.Add().Field(e => e.Description).Width(300);
        columns.Add().Field(e => e.IsActive).Template(
            "#if(IsActive == true){#" +
                Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(true).ToHtmlString()
            +"#}else{#" +
                Html.Kendo().CheckBox().Name("name#:IsActive#").HtmlAttributes(new { @class = "IsActive" }).Checked(false).ToHtmlString()
            + "#}#"
            ).Width(75).Filterable(false) ;
        columns.Add().Field(e => e.ImagePath).Title("Image").Filterable(false).Template(
            "#if(ImagePath == null){#" +
                "No Image"
            + "#}else{#" +
             "<img src='#=ImagePath#' alt='#=Name#' Title='#=Name #' style='height:50px;' />"
            + "#}#"
            );

        columns.Add().Command(c =>
        {
            
               
                c.Custom().Click("EditCategory_click").Text("Edit").Name("editCategory");
           
        }).Width(125);

        columns.Add().Command(c =>
        {
           
                c.Destroy();
           
        }).Width(125);


    })
    .Editable(e=>e.Mode("Inline"))
    .Height(200)
    .Filterable(filterable => filterable
        .Extra(false))
    .Sortable()
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("GetItemCategories", "Category"))
        .Create(c => c.Action("CreateItemCategory", "Category"))
        .Update(c => c.Action("UpdateItemCategory", "Category"))
        .Destroy(c => c.Action("DestroyItemCategory", "Category"))
        .Model(m => {
            m.Id(f => f.Id);
            m.ParentId(f => f.ParentCategoryId);
            m.Expanded(true);
            m.Field(f => f.Name);
            m.Field(f => f.Description);
            m.Field(f => f.IsActive);
        })
    )
    .Height(600)

)


 

Few Notes:

1. There are no console errors

2. The data is coming from the server correctly. I checked and verified in developer console

3. Everything was working before upgrade (previously used 2019.x.xxx)

4. this is the part of the code (in action method) that returns the data for the treelist


IEnumerable<CategoryModel> result = ... linq query here ...;
return Json(result.ToTreeDataSourceResult(request,
                    e => e.Id,
                    e => e.ParentCategoryId,               
                    e => e                   
                    ));

Azhar
Top achievements
Rank 1
Iron
 asked on 28 Jun 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
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
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
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?