Telerik Forums
UI for ASP.NET MVC Forum
2 answers
402 views

I'm using latest build of Kendo UI MVC (2017.3.913) and I have a complex form which contains TabStrip.
Each Tab within the TabStrip contains PanelBar with multiple expandable\collapsible panels that allow me to view and edit data. When I expand a Panel the vertical scroll-barallows me to scroll down to view details etc.. Everything works fine so far.

On the form I also dynamically add a Kendo Window (dialog) and do various things like - Select Address,Select Person etc.. Dynamically creating it is a must - I destroy it after every time i use it. For demonstration the javascript function below creates the Window what I require to show the problem:

 

//This dynamically creates a Window (but donst show it yet)
function testCreateWindowDynamically()
{
  $(document.body).append("<div id='myContainerDiv' class='dlgContainer'></div>");
  $("#myContainerDiv").append("<div id='myDialogWindow' class='dlgDialog'></div>");
  var dialog =
    $("#myDialogWindow").kendoWindow({
      title: "",
      modal: true,
      actions: ["Close", "Minimize", "Maximize"],
      visible: false
    });
 
  $("#myDialogWindow").data("kendoWindow").maximize();
}

 

When I run this the vertical scroll bar on the tab strip disappears and I cant scroll down to view content not displayed on screen. Why is the vertical scroll bar disappearing?

 

Veselin Tsvetanov
Telerik team
 answered on 01 Nov 2017
8 answers
619 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
450 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.2K+ 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
893 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.9K+ 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
118 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
252 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
370 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
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
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Top achievements
Rank 1
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ivory
Top achievements
Rank 1
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
YF
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?