Telerik Forums
UI for ASP.NET MVC Forum
2 answers
268 views
Hi,
I seem to be having an issue with client side events and lazy loading.
I have a tv on my layout view as follows:

@Html.Kendo().TreeView().Name("MainMenu").DataSource(dataSource => dataSource
.Read(read => read.Action("Index", "MainMenu"))).DataTextField("MenuText").DataUrlField("Url")

I have code on the server that correctly returns the parts of the tv as necessary.
All is well. My tree displays. When I click on  a parent node a server call is made and the children are show.
Great.

Now the trouble.
I add the following javascript  and when I click on a node I get the alert just fine. However, once, I click ok, I get an error in kendo.all.min.js. Attached is a screenshot of the error.

Thanks ... Ed


function _LayoutOnLoad()
{
    $(function ()
    {
        $("#MainMenu").kendoTreeView({
            select: OnMainMenuSelect
        })
    });
}
function OnMainMenuSelect(e)
{
    alert("Selecting: " + e.node.textContent);
}
Randy Hompesch
Top achievements
Rank 1
 answered on 01 Aug 2013
1 answer
296 views
I have an OData datasource of UserGroups, called with /api/UserGroups?$expand=USERS.  In Fiddler, I see 1..* users in each user group.

I would like to know how to display this in a data grid as a part of a details view per group.  I would like to accomplish this with data set, rather than making a secondary call to something like /api/Users?$filter....  as the data is all there in the primary data set.


Here is my main data set - I was initially working with the detailInit() to make a secondary call, but as I mentioned, this isn't necessary:

$(function () {
    var dataSource = new kendo.data.HierarchicalDataSource({
        type: "odata",
        transport: {
            read: {
                // See http://www.odata.org/documentation/odata-v2-documentation/uri-conventions/ for OData URI conventions
                // OData: ~/api/Users?$inlinecount=allpages&top=2
                // OData: ~/api/Users?$inlinecount=allpages - includes odata.count
                // OData: inline filtering: ~/api/Users?$filter=USERNAME eq 'asgro'
                // to include hierarchical data, use the OData /api/UserGroups?$expand=USER
                // To reduce the payload sice, the query ~/api/UserGroups will only include the USERGROUP entities, and not any navigation property content
                 
 
                url: "/api/UserGroups?$expand=USERS",
                dataType: "json"                                // the default result type is JSONP, but WebAPI does not support JSONP
            },
            parameterMap: function (options, type) {
                // this is optional - if we need to remove any parameters (due to partial OData support in WebAPI
                var parameterMap = kendo.data.transports.odata.parameterMap(options);
 
                //delete parameterMap.$inlinecount;               // remove inlinecount parameter
                //delete parameterMap.$format;                    // remove format parameter
 
                return parameterMap;
            }
        },
        schema: {
            data: function (data) {
                return data.value;
            }
            ,
            total: function (data) {
                console.log("count: " + data["odata.count"]);
                return data["odata.count"];
            },
            model: {
                fields: {
                    ID: { type: "string" },
                    NETWORKID: { type: "string" },
                    GROUPNAME: { type: "string" },
                    DESCRIPTION: { type: "string" },
                    DATECREATED: { type: "date" },
                    DATEMODIFIED: { type: "date" },
                    //ROLESSTRING: { type: "string" },
                    SUBSCRIPTIONSTRING: { type: "string" }
                }
            }
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        detailTemplate: kendo.template($("#template").html()),
        detailInit: function(e) {
            console.log('detailInit');
            // detailInit,
        },
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        }
    });

The template is as follows:

<body>
    <div>
        User Groups:
        <div id="grid"></div>       
         
        <script type="text/x-kendo-template" id="template">
            <div class="tabstrip">
                <ul>
                    <li class="k-state-active">
                        Users
                    </li>
                </ul>
                <div>
                    <div class='user-details'>
                        <ul>
                            <li><label>User Name:</label>#= USERS.USERNAME #</li>
                            <li><label>First Name:</label>#= USERS.FIRSTNAME #</li>
                            <li><label>Last Name:</label>#= USERS.LASTNAME #</li>
                        </ul>
                    </div>
                </div>
            </div>
        </script>
         
 
    </div>
</body>

I used USERS.USERNAME as when $expand=USERS, the USERS collection is included.

Thanks.


Petur Subev
Telerik team
 answered on 01 Aug 2013
2 answers
331 views
Hi there,

I have a problem with a multiselectfor in my test application.

I am attempting to return a list of roles for a user into a multiselectfor in a template.

In the template I have the following:
    @(Html.Kendo().MultiSelectFor(model=>model.RoleList)
    .Name("RoleList")
        .HtmlAttributes(new { style = "width: 310px;" })
        .Placeholder("Select roles...")
        .DataTextField("RoleName")
        .DataValueField("RoleId")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetClientRolesList", "Client", new { id = ViewContext.RouteData.Values["id"] });
                read.Type(HttpVerbs.Post);
            })
            .ServerFiltering(false);
        })
)
This shows the list of Roles available in the multiselect, but it doesn't show any values in the box. I am able to click on the box and select some items from the list and they are then shown in the box. When I post back, those items do not arrive.

@model is ClientUserViewModel

So model.RoleList returns a List of RoleViewModels
[DisplayName("Roles")]
public List<RoleViewModel> RoleList
{
    get;
    set;
}
RoleViewModel looks like this:
namespace MyApp.Models
{
    public class RoleViewModel
    {
        public int RoleId
        {
            get;
            set;
        }
         
        public string RoleName
        {
            get;
            set;
        }
 
    }
}
The Client Roles List in the Client Controller looks like this:
public ActionResult GetClientRolesList(int id, [DataSourceRequest] DataSourceRequest request)
{
    using (var db = new MyAppEntities())
    {
        var rolesList = (from role in db.webpages_Roles
                         select new RoleViewModel()
                         {
                            RoleId = role.RoleId,
                            RoleName = role.RoleName
                         });
 
        return Json(rolesList.ToList());
    }
}
And finally, the Update statement it calls is this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ClientUser_Update(int id, [DataSourceRequest] DataSourceRequest request, ClientUserViewModel clientUser)
{
    if (clientUser != null && ModelState.IsValid)
    {
        try
        {
            ClientUserRepository.Update(id,clientUser);
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("ClientName", ex.Message);
        }
    }
 
    return Json(new[] { clientUser }.ToDataSourceResult(request, ModelState));
}
When this method is called, the clientUser.RolesList has the correct number of items, but the items themselves are essentially empty. That means that the RoleId is 0 and the RoleName is null.

The grid statement on the main page is here:
@(Html.Kendo().Grid<MyApp.Models.ClientUserViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(u => u.UserId).Hidden();
        columns.Bound(u => u.FirstName).Width(100);
        columns.Bound(u => u.LastName).Width(100);
        columns.Bound(u => u.UserName).Width(100);
        columns.Bound(u => u.RoleList).Hidden();
        columns.Bound(u => u.zTimestamp).Hidden();
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientUser"))
    .Pageable()
    .Filterable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:580px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Batch(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(u => u.UserId))
        .Create(update => update.Action("ClientUser_Create", "Client", new { id = ViewContext.RouteData.Values["id"] }))
        .Read(read => read.Action("ClientUser_Read", "Client", new { id = ViewContext.RouteData.Values["id"] }))
        .Update(update => update.Action("ClientUser_Update", "Client", new { id = ViewContext.RouteData.Values["id"] }))
        .Destroy(update => update.Action("ClientUser_Destroy", "Client", new { id = ViewContext.RouteData.Values["id"] }))
    )
)
The "id" referred to here is the specific customer's id (real world client, not IT client.) and it's essentially supposed to show a list of users for that client and the roles that they are associated with. I am supposed to be able to add and remove roles for a user via the multiselect.

Any ideas what I'm doing wrong?

Regards,
Tony
Tony
Top achievements
Rank 1
 answered on 31 Jul 2013
3 answers
882 views
HI,
I've write this
but for kendo control doesn't wok why?

@(Html.Kendo().NumericTextBoxFor(m => m.size)
                              .Min(1)
                              .Decimals(0)
                              .Format("{0:D}")
                              .Spinners(false)
                )
                @Html.ValidationMessageFor(m => m.size)

thanks
Petur Subev
Telerik team
 answered on 31 Jul 2013
2 answers
382 views
Hello
Comunity:

It’s the
first time that I use the “AutoCompleteFor” of Kendo MVC Razor.

The
“AutoCompleteFor” works correctly but when I call to Create Function, the Model
not recognized the selected value in the AutoComplete.

Someone can
help me?

AutoComplete:
@(Html.Kendo().AutoCompleteFor(model => model.CountryCode)
                    .Name("acCountry")
                    .DataTextField("ISO")
                    .DataSource(ds =>
                    {
                        ds.Read(read =>
                        {
                            read.Action("GetCountriesForAutoComplete", "Country")
                                .Data("onAdditionalData");
                        })
                        .ServerFiltering(true);
                    })
                )
 
<script>
        $.validator.unobtrusive.parse("#CreateRegionForm");
        //$('#CreateRegionForm').kendoValidator();
        function onAdditionalData() {
            return {
                text: $("#acCountry").val()
            };
        }
         
    </script>
Autocomplete Read:
public ActionResult GetCountriesForAutoComplete(string text)
        {
            text = text.ToUpper();
            var result = FwdManager.Country.GetAll()
                .Where(p => p.ISO.Contains(text) || p.NameEsp.Contains(text))
                .Select(s => new DtoCountry()
                                            {
                                                Id = s.Id,
                                                ISO = s.ISO,
                                                NameEsp = s.NameEsp,
                                                NameEng = s.NameEng,
                                                Observations = s.Observations,
                                                PAIS_UNION_EUROPEA = s.PAIS_UNION_EUROPEA,
                                                Active = s.Active
                                            });
 
            return Json(result, JsonRequestBehavior.AllowGet);
        }
Create Method:
[HttpPost]
        public JsonResult Create(Region region)
        {//region.CountryCode is null!!!!
            JsonResult jsonOutput = null;
            if (ModelState.IsValid)
            {
                try
                {
                    ConvertToUpperCase(region.GetType(), region);
                    CheckKeyFields(region);
                    FwdManager.Region.Insert(region);
                    FwdManager.Commit();
                    jsonOutput = Json(new { success = true });
                }
                catch (Exception ex)
                {
                    jsonOutput = ErrorJson(ex);
                }
            }
            else
            {
                jsonOutput = ErrorJson(ModelState);
            }
            return jsonOutput;
        }
Petur Subev
Telerik team
 answered on 31 Jul 2013
1 answer
89 views
All of the columns in my grid are dynamic and are referenced by an enumerator, in 514 this was working and posting the value "sort: Fields[3].value" now it just passes undefined.

I'm guessing this is caused by the "patch" for the jquery stuff.

I have the latest version of 2.716

If this isn't going to be fixed then how should dynamic fields be implemented in MVC4?
Atanas Korchev
Telerik team
 answered on 31 Jul 2013
8 answers
312 views
Hi, I nedd some help.
I  want to populate a Grid in MVC but I can't
I have the next code in view Index

<%: Html.Kendo().Grid<KronosWorkV2.Models.Employee>()
                    .Name("Grid")
                    .Columns(columns => {        
                        columns.Bound(p => p.id);
                        columns.Bound(p => p.Name).Width(140);
                    })                        
                    .Pageable()
                    .Navigatable()
                    .Sortable()
                    .Scrollable()
                    .DataSource(dataSource => dataSource        
                        .Ajax()
                        .Read(read => read.Action("Editing_Read", "SupEmps"))                        
                    ) %>

then I have the nex code in ActionResult:

public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
        {            
            return Json(db.Employees.ToDataSourceResult(request));            
        }

when I debug in the action I see that the object db.Employees has items(rows) but when return to Index.aspx the Grid is empty.
 
where I am rong, some body please can help me.
Thanks beforehand for your help.
Michele
Top achievements
Rank 2
 answered on 31 Jul 2013
1 answer
131 views
Hi,

I need change functionality for standard adding a new row (toolbar command Create() ) so that it would add the row straight above the selected row, for user's convenience - to allow the user to fill new row data based on the data in the selected row.
See the attached picture

Thank you in advance

Shabtai

Iliana Dyankova
Telerik team
 answered on 31 Jul 2013
4 answers
209 views
Hello,
I'm trying to load some combobox values from the controller... but when I open the dropdown I got 2 items undefined (even if in the controller for test I return an empty collection)...what am I doing wrong?
Thanks

View :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<KendoUIMvcApplication1.TestObj>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    PROVA HEADER
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
   <%
       Html.Kendo().ComboBox()
           .Name("comboBox")
           .DataTextField("Description")
           .DataValueField("Value")
           .AutoBind(false)
           .Placeholder("Selezionare un oggetto")
           .DataSource(ds =>
               {
                   
                  // ds.Ajax()
                  // .ServeOperation(false)    
                   ds.Read(read =>
                       {
                           read.Action("GetCombo", "TestIDEA");
                       });
               })
               .Events(events =>
                   {
                       events.Change("Test");
                   })
               .Render();
        %>
   
    <script>
        function Test(e) {
            alert('changed');
        }
        
    </script>
</asp:Content>

Controller :

   public ActionResult GetCombo([DataSourceRequest] DataSourceRequest request)
        {

            List<TestObj> myList = new List<TestObj>();

            //myList.Add(new TestObj { Value = "1", Description = "A1" });
            //myList.Add(new TestObj { Value = "2", Description = "A2" });

            return Json(myList, "text/html", Encoding.UTF8, JsonRequestBehavior.AllowGet);
          
        }

Thanks
Michele
Top achievements
Rank 2
 answered on 31 Jul 2013
1 answer
210 views
Hi, 
   I am remotely consuming a grid hosed in an MVC application. For the most part I have got it working as I am using template fields for the allot of things. 

I am parsing some of the elements in a method that calls to controller which renders the grid as a partial view. I then spit this out into a literal control in an aspx page. 

I need to be able to get the pager functionality calling the ajax data  source with an absolute url rather than the relative one it currently uses. 

so this is my data source action 
[AllowCrossSite]
public ActionResult FallsDataSource([DataSourceRequest] DataSourceRequest request, string casenote)
{
    IList<FallsAssessEventDTO> events = bedmanEvents.GetEvents(casenote, BedmanEventType.FallsRiskAssessment).Cast<FallsAssessEventDTO>().ToList();
    var model = events.Select(e => (FallsAssessment)e).ToList();
    AddImages(model);
    var queryable = model.AsQueryable();
    return Json(model.ToDataSourceResult(request));
}
below is the ajax datasource configuration 

datasource.Ajax().Read(read => read.Url("http://" + Request.Url.Host).Action("FallsDataSource", "FallsAssessment", new { Casenote = ViewBag.Casenote }))).Pageable()


I was looking at the Url method on the CrudOperationBuilder but unsure how to use this properly. 

Thanks 

David 
Vladimir Iliev
Telerik team
 answered on 31 Jul 2013
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
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
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?