I'm evaluating the Kendo for Asp.Net controls and am currently looking at the Grid. I want to build an new/edit form for a Person model. A person can have 0 or more phone numbers. The user should be able to enter the person's first name, last name, multiple phone numbers, and then at the bottom of the form, click a save button to save the person and their phone numbers to the database all at once in a transaction.

For phone number entry, I want to allow the user to click a "New" button that, when clicked, opens a modal dialog containing the form to create a new phone number (e.g. a drop down list for the phone type and a textbox for the phone number.) After filling out the form, they click "Ok" and it displays this unsaved phone number in a table. The phone number's row has an edit and delete button. If I click the edit button, it opens the modal and displays the phone number again as I entered it to allow me to edit it. If I click the delete button, it asks for confirmation from the user and if they provide it, it removes the phone number. Again this is all happening client-side.

Looking at the Kendo Grid, the Popup mode is the right idea as far as the user experience for data entry, but it appears that it is requried to save to make a server call to save to the database upon closing the modal? Since the person that the phone number is a child of does not exist, this won't work, not to mention I want to save in a single transaction. But if there's a way to allow the popup to close and save changes on the client-side only, that's all I need. The Grid's batch editing mode looks like the editing occurs client-side so it may allow me to submit my person and the phone numbers to save in a single transaction, but it uses inline editing, which we do not like for our user experience.

Is it going to be possible to modify the client-side behavior to allow editing Grid rows in a modal dialog so they can be sumitted (and bound to their model) all at once? If so, what would it take to accomplish? I understand the Grid's edit modes can't be mixed, but I'm not sure that means I can't wire up my own javascript that works with my own modal form and the client-side Grid API if necessary.

The Kendo DropDownList seems to take forever to load css. The values are loaded immediately although what is in the dropdown is the value not the text. The page is creating numerous dropdowns. It depends on the call but approximately 300. It works flawlessly with the mvc DropDownListFor. The Kendo call uses this:

@(Html.Kendo().DropDownList().Name("Reason" + person.Id.ToString()).DataTextField("Text").DataValueField("Value").BindTo(@Model.Reasons).Value(@person.ReasonId.ToString()))

All I have to do for the mvc drop down is the following:

@Html.DropDownListFor(m => person.Reason, Model.Reasons)

 

Should I do something different in the bind?

I am using Kendo MVC Upload control.  I am using it non-async mode with Multiple files marked false.

I want to use the events to control enabling/disabling the form Submit button.  This works except in one case.  If you select a file that fails validation, then select a new file that succeeds validation.  My Submit button is still marked disabled.

This seems to be because the onSelect event fires 1st and then the onRemove event fires 2nd.
I would like to suggest it would be better for the OnRemove event fire 1st and the onSelect event to fire 2nd.

$(document).ready(function () {
    $("#SubmitButton").attr("disabled", true);
});

function onSelect(e) {
    if (e.files[0].validationErrors == undefined) {
        $("#SubmitButton").attr("disabled", false);
    } else {
        $("#SubmitButton").attr("disabled", true);
    };
}

function onRemove(e) {
    $("#SubmitButton").attr("disabled", true);
}

 

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:

 

 

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?

 

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?

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

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:

 

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

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

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

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.

 

i want it  to be something like

 

How do i go about doing this? thanks.