Telerik Forums
UI for ASP.NET MVC Forum
8 answers
610 views

I'm looking at the Hierarchy Grid Demo (http://demos.telerik.com/aspnet-mvc/grid/hierarchy) for inspiration on something similar I need to do.

In the demo, it's a list of people, and the detail grid shows orders placed for the person in the parent grid.  So hypothetically, how would you implement a client side filtering condition that used data from the details to get a list of the parents?  Say I want a list of all people who had orders shipped to Australia?  Would I have to build a custom search, then populate the grid with the results, or is there a way to build that filter condition within the built in grid capabilities?

Stefan
Telerik team
 answered on 01 Nov 2017
7 answers
446 views
Hi all,

I am busy trialing KendoUI Complete for MVC with a purchase coming month end.

I have a KendoUI Grid in place with the editor mode being set to GridEditMode.PopUp.
I have created an EditorTemplate for the popup and this is working great for editing existing records. Everything 100% here.

My problem comes in with creating a new one. The editor only shows 2 fields - Description and Date (Textbox and DatePicker).
When I click the Update button in the editor I get a validation message "The Key Field Is Required" and cannot create the new record.
I have decorated the key property in my model with Editable(false), Browsable(false) and ReadOnly(true)  and still the message persists.
The key field is not even displayed in the Editor, so why is there validation on it?
The key field is a Guid type.

Any ideas how to get around this?

Another smaller issue, is I cannot resize the editor. I have tried ".Window(window => window.HtmlAttributes(new { @style = "width:500px;" }))" but it has zero effect. The editor is always the same default size no matter what I do.

TIA
Mike
Jesse
Top achievements
Rank 1
Veteran
 answered on 31 Oct 2017
4 answers
6.1K+ views

Hi!

I use Kendo UI for MVC 2016.1.301, with MVC 6 (Core 1.0). I have a grid with some fixed (bound) columns, and a few dynamic columns. I have managed to add the columns dynamically, with titles. The data type for these dynamic columns are bool. I've found various samples but none of them works, either they don't compile or they have no effect. I must add I'm new to the Razor engine so I don't understand exactly what's happening at all times.

So, how do I replace the [X] with data from the view model? I've tried variations on this theme, using .Bound and .Template, but nothing compiles either compile-time or run-time:

1.for (int i = 0; i < Model.PresetsList.PresetsList.Count(); i++)
2.{
3.    string titel = Model.PresetsList.PresetsList[i].PresetsName;
4.    int columnIndex = i;
5.    columns.Bound(cgi => cgi.MadeChoicePresetsList[columnIndex].IsSelected.ToString()).Title(titel);
6.}

 

Here's the current code which displays a [X] instead of data:

01.    @(Html.Kendo().Grid<C.ViewModels.ChoiceGroupItemViewModel>()
02.        .Name("choicegroupitemsgrid")
03.        .Columns(columns =>
04.        {
05.            columns.Bound(col => col.ChoiceGroupID).Title("gruppID");
06.            columns.Bound(col => col.ItemID).Title("artikelID");
07.            columns.Bound(col => col.ManufacturerItemID).Title("Tillv. artikelnr");
08.            columns.Bound(col => col.ItemName).Title("Benämning");
09.            columns.Bound(col => col.CustomerPayablePriceInclTax).Title("Pris").HtmlAttributes(new { align = "right" });
10. 
11.            foreach (var presets in Model.PresetsList.PresetsList)
12.            {
13.                columns.Template("[X]").Title(presets.PresetsName);
14.            }
15.        }
16.        )
17.        .Scrollable()
18.        .Pageable(pgbl => pgbl
19.            .Refresh(true)
20.            .PageSizes(true)
21.            .ButtonCount(5)
22.        )
23.        .Sortable(sortable => { sortable.SortMode(GridSortMode.SingleColumn); })
24.        .DataSource(datasrc => datasrc
25.            .Ajax()
26.            .Read(read => read
27.                .Action("ChoiceGroupItems", "ChoiceGroup", new { area = "Backoffice", id = Model.ChoiceGroupID })
28.            )
29.            .PageSize(20)
30.        )
31. 
32.)

Konstantin Dikov
Telerik team
 answered on 31 Oct 2017
6 answers
880 views
Hi 
Please help me out. I am breaking my head to achieve the load on demand treelist in kendo. I have followed the instructions as per the url http://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding. But nothing worked out. My scenario is like that I need to load the parent nodes when loading the page first. Then on clicking the parent node, need to fire a call to get the child nodes. For me, it load the parent nodes first, but I can't see the expand icon coming up for nodes having children. Just see the attached image. I don't know what I'm doing wrong. Attaching the view page code and also the controller methods. Please let me know what is the issue? Well appreciated, if you could share some code for sample other than the demo sample.
View code
----------------------
 <div>

                @(Html.Kendo().TreeList<TelerikMvcApp1.Models.AssetModel>()
                .Name("assetTreeList")
                .Columns(columns =>
                {
                    columns.Add().Field(a => a.AssetName).Width(70).Expandable(true);
                })
                .Sortable()
                .DataSource(dataSource => dataSource
                    .Read(read => read.Action("LoadTree", "Home"))
                    .ServerOperation(false)
                    .Model(m =>
                    {
                        m.Id(e => e.AssetId);
                        m.ParentId(e => e.ParentAssetId);
                        m.Field(e => e.AssetName);
                        m.Field(e => e.ParentAssetId);
                    })
                    )
                .Scrollable(true)
                .Height(540)
               //.Events(e => e
               ////.DataBound("onAssetTreeListDataBound")
               //// ////.Change("treelist_change")
               //)
                )

            </div>
Controller Methods
-------------------------------------------------
 public IEnumerable<AssetModel> GetAssetTreeListBasedOnPermissions()
        {
            try
            {
                List<AssetModel> list = new List<AssetModel>();
                list.Add(new AssetModel { AssetId = 1, ParentAssetId = null, AssetName = "asset1" });
                list.Add(new AssetModel { AssetId = 2, ParentAssetId = 1, AssetName = "asset2" });
                list.Add(new AssetModel { AssetId = 3, ParentAssetId = null, AssetName = "asset3" });
                list.Add(new AssetModel { AssetId = 4, ParentAssetId = 2, AssetName = "asset4" });

                IEnumerable<AssetModel> enumlist = list
                    .Select(x => new AssetModel
                    {
                        AssetId = x.AssetId,
                        ParentAssetId = x.ParentAssetId,
                        AssetName = x.AssetName
                    });
                return enumlist;

              
            }
            catch (Exception ex)
            {
                return null;
            }
        }

        public JsonResult LoadTree([DataSourceRequest] DataSourceRequest request, int? id)
        {
            var result = GetAssetTreeListBasedOnPermissions().ToTreeDataSourceResult(request,
                e => e.AssetId,
                e => e.ParentAssetId,
                e => id.HasValue ? e.ParentAssetId == id : e.ParentAssetId == null,
                e=>e
            );

            return Json(result, JsonRequestBehavior.AllowGet);
        }
Model class
------------------------
 public class AssetModel
    {
        public long AssetId { get; set; }
        public long? ParentAssetId { get; set; }
        public string AssetName { get; set; }
        public bool HasChildren { get; set; }
    }
Thanks in advance
Binta Prasad
Tsvetina
Telerik team
 answered on 31 Oct 2017
4 answers
1.2K+ views

Hello,

I would like to fire click Event when already selected tab item is clicked. Looks like OnSelect doesnt get fired if the selected item is clicked again. I tried implementing JavaScript but doesnt get fired

$(function () {
$("#tbAdress .k-tabstrip-items").on("click", "li.k-state-active", function () {
//custom logic
});
});

 

here is my layout

@(Html.Kendo().MobileLayout()
.Name("mobile-tabstrip")
//.Header(obj => NavBarTemplate(this))
.Header(
@<text>
@Menumobile()
</text>
)
.Footer(
@<text>
@(Html.Kendo().MobileTabStrip()
.Name("tbAdress")
.SelectedIndex(999)
.Events(events => events
.Select("onTabSelect")
)
.Items(items =>
{
                   
                    items.Add().Text("Objekt").HtmlAttributes(new { @data_icon = "home" });
items.Add().Text("GoogleMaps").HtmlAttributes(new { @data_icon = "gps-e" });
})
)
</text>)
)

 

How can i achieve this

 

-Anamika

Anamika
Top achievements
Rank 1
 answered on 31 Oct 2017
1 answer
3.8K+ views

Hi there guys, i am trying to make the value of a column header(Title) different from what the column is bound to. So my grid have a few columns where the value displayed in the column is different from what the column header say. So instead of the title being static like.

columns.Bound(c => c.CurrentPlanStatus).ClientTemplate("<a href='"+ "Plan/EditTab" + "?pkid=#= ProjectKeyID #&pid=#=ProjectID #&fyid=#=CurrentFiscalYearID #&ptid=#=ProjectTypeID #&prgmid=#=ProgramID #'" + ">#=CurrentPlanStatus#</a>").Title("FY 18");

 

i want it  to be something like

columns.Bound(c => c.CurrentPlanStatus).ClientTemplate("<a href='"+ "Plan/EditTab" + "?pkid=#= ProjectKeyID #&pid=#=ProjectID #&fyid=#=CurrentFiscalYearID #&ptid=#=ProjectTypeID #&prgmid=#=ProgramID #'" + ">#=CurrentPlanStatus#</a>").Title("FY" + c => c.CurrentFiscalYear.ToString());

 

How do i go about doing this? thanks.

Chinonso
Top achievements
Rank 1
 answered on 30 Oct 2017
1 answer
114 views

Hi, 

is there a keyboard combination to move to the next cell when editing a table in the editor? I would have expected that the tab key moves to the next cell when the focus is in a table, but apparently that is not the case. (Version 2017.3.1026).

Regards

Erwin

Ivan Danchev
Telerik team
 answered on 30 Oct 2017
2 answers
246 views

Hi

In aspnet mvc, I'm using a Kendo grid integrating the sortable component.

The setup is just like this example:

http://demos.telerik.com/aspnet-mvc/sortable/integration-grid

However, my grid has a set height and is scrollable.  If I drag a row over the top (or bottom) of the grid, I'm expecting the grid to automatically scroll until it reaches the top (or bottom) row.  I have set the autoscroll property to true on the sortable component.  But I can only scroll to the top (or bottom) of the display, no automatic scrolling occurs.

Is this possible with the kendo grid in aspnet mvc?

I'm looking for the same behavior as the Kendo UI sample - http://dojo.telerik.com/@petyosi/IgOkU

Any help or specific examples would be appreciated

 

David
Top achievements
Rank 1
 answered on 30 Oct 2017
1 answer
368 views

Hi,

We are looking to implement a grid. We have the dropdown element working, but we need the contents of it to be driven by another field in the grid.

Eg a "Type" would yield a list of "SubTypes" based on the "Type" selected.

 

An existing row would only show "SubTypes" based on the "Type" set, whilst with an addition, the "Type" would be required first, then the "SubType".

 

Is this functionality possible?

 

Thank you,

Ciprian

Stefan
Telerik team
 answered on 30 Oct 2017
1 answer
484 views

Hello,

I'm currently using ASP.NET MVC Kendo UI to generate a Grid. I am able to filter one column, but upon filtering a second or more columns, I receive a '500 Internal Server Error' (see the attached screenshot). The code files are as follows:

View.cshtml

01.<head>
02.    <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.common.min.css")" rel="stylesheet" type="text/css" />
03.    <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
04.    <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.default.min.css")" rel="stylesheet" type="text/css" />
05.    <link href="@Url.Content("~/Content/kendo/2017.3.1018/kendo.rtl.min.css")" rel="stylesheet" type="text/css" />
06. 
07.    <script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
08.    <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.web.min.js")"></script>
09.    <script src="@Url.Content("~/Scripts/kendo/2017.3.1018/kendo.aspnetmvc.min.js")"></script>
10.</head>
11.<body>
12.<div class="row">
13.    @Html.AntiForgeryToken()
14.    @(Html.Kendo().Grid<JccsRecordsRequest.ViewModels.SubmittedList>()
15.        .Name("SubmittedRequests")
16.        .Columns(columns =>
17.        {
18.            columns.Bound(p => p.LastName).Title("Last Name")
19.            columns.Bound(p => p.FirstName).Title("First Name")
20.            columns.Bound(p => p.BirthDate).Title("Date of Birth").Format("{0:MM/dd/yyyy}");
21.            columns.Bound(p => p.CreateDate).Title("Date & Time Submitted").Format("{0:MM/dd/yyyy hh:mm:ss tt}");
22.            columns.Bound(p => p.RequestorType).Title("Request Type");
23.            columns.Bound(p => p.RequestorID).Title("").Filterable(false)
24.            .ClientTemplate(Html.ActionLink("View", "RequestDetail", new { id = "#= RequestorID #", RequestStatus = "#= RequestStatus #", ButtonID = "Start" }, new { @class = "btn btn-success" }).ToHtmlString());
25.        })
26. 
27.        .Pageable()
28.        .Sortable()
29.        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
30.        .DataSource(source => source
31.            .Ajax()
32.            .PageSize(20)
33.            .Read(read => read.Action("GetSubmittedRequests", "Admins").Data("sendAntiForgery"))
34.        )
35.    )
36.</div>
37. 
38. 
39.<script type="text/javascript">
40.    function sendAntiForgery() {
41.        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
42.    }
43.</script>
44.</body>

 

Controller.cs

01.[HttpPost]
02.[ValidateAntiForgeryToken]
03.public ActionResult GetSubmittedRequests([DataSourceRequest] DataSourceRequest request)
04.{
05.    return Json(SubmittedRequestsList().ToDataSourceResult(request));
06.}
07. 
08.public IEnumerable<SubmittedList> SubmittedRequestsList()
09.{
10. 
11.    var db = new RecordRequestContext();
12. 
13.    var SubmitedRequestsEnum = db.Requestor
14.        .Where(w => w.RequestStatus == RequestStatus)
15.        .OrderByDescending(o => o.CreateDate)
16.        .Select(sl => new SubmittedList
17.        {
18.            RequestorID = sl.RequestorID,
19.            StudentLastName = sl.LastName,
20.            StudentFirstName = sl.FirstName,
21.            StudentBirthDate = sl.BirthDate,
22.            CreateDate = sl.CreateDate,
23.            RequestorType = sl.RequestorType,
24.            RequestStatus = sl.RequestStatus,
25.            RequestCount = (from a in db.Requestor where a.RequestStatus == RequestStatus select a).Count()
26.        }
27.        ).ToList();
28.    return SubmitedRequestsEnum;
29.}

Upon inspection in Google Developer Tools, it just occurs when we filter on more than one column. We are using the latest Kendo UI javascript files (2017.2.1018), so I'm unsure what is going on.

Please advise. Thanks.

Stefan
Telerik team
 answered on 30 Oct 2017
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
Rob
Top achievements
Rank 3
Bronze
Bronze
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
Bronze
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?