Telerik Forums
UI for ASP.NET MVC Forum
7 answers
228 views
I was originally using the Scheduler in a project with simply one html and one css file. Now I am currently using the trial version of Kendo UI Complete for ASP.NET MVC and have the Scheduler set up as an MVC 4 project. The javascript from my original code still creates the calendar; however I am currently commenting out the old code and instead attempting to borrow from the code provided on the demo for ASP.NET MVC, index.cshtml. Here's my adaption of the code:

@(Html.Kendo().Scheduler<iDashboard.Models.TaskViewModel>()
    .Name("scheduler")
    .Date(new DateTime(2013, 6, 13))
    .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
    .Height(400)
    .Views(views =>
    {
        views.DayView();
        views.WeekView(weekView => weekView.Selected(true));
        views.MonthView();
        views.AgendaView();
    })
    .Timezone("Etc/UTC")
    .Resources(resource =>
    {
        resource.Add(m => m.OwnerID)
            .Title("Owner")
            .DataTextField("Text")
            .DataValueField("Value")
            .DataColorField("Color")
            .BindTo(new[] {
                new { Text = "Office", Value = 1, Color = "#f8a398" } ,
                new { Text = "Home", Value = 2, Color = "#51a0ed" } ,
                new { Text = "Shared", Value = 3, Color = "#56ca85" }
            });
    })
    .DataSource(d => d
        .Model(m => {
            m.Id(f => f.TaskId);
            m.Field(f => f.OwnerID).DefaultValue(1);
        })
        .Read("Task_Read", "Home")
        .Create("Task_Create", "Home")
        .Destroy("Task_Destroy", "Home")
        .Update("Task_Update", "Home")
        .Filter(filters =>
        {
            filters.Add(model => model.OwnerID).IsEqualTo(1).Or().IsEqualTo(2);
        })
    )
)

For some reason I am only getting a gray line. I'm not sure why the .Views method is not working. As far as I know, I referenced all the necessary files in the head tag of _Layout in the html. I could be wrong but it seems to me that everything is fine with the model and controller, but for some reason the view is not displaying the scheduler. I'd appreciate if someone could point me in the right direction. Thank you!

Note: I based the model and controller off of the following tutorial --> http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/scheduler/ajax-editing


Rosen
Telerik team
 answered on 22 Aug 2013
1 answer
1.1K+ views
Hello,
I'm trying to develop a search form that will load datas from a stored procedure into a Kendo UI Grid item....

I've some problem passing back the Model to the Action Method in the controller...

Here's my view code

@model  DemoRicerca_Interno.Models.RicercaClienteObject
 
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
 
 
 
<div>
    <div id="ricerca"></div>
 
    <div>Query : @Html.EditorFor(x => x.Query)</div>
    <div>Match Exact : @Html.EditorFor(x => x.MatchExact)</div>
    <div>AncheEstinti : @Html.EditorFor(x => x.AncheEstinti)</div>
    <button id="showGrid">Carica</button><br />
 
    <script type="text/javascript">
        $("#showGrid").click(function () {
            $("#grid").data("kendoGrid").dataSource.read();
        });
 
        
    </script>
 
 
    <div id="content">
        @(Html.Kendo()
            .Grid<DemoRicerca_Interno.Models.Rapporto>()
            .AutoBind(false)
            .Name("grid")
            .Columns(columns =>
                {
                    columns.Bound(x => x.IDInterno).Visible(false);
                    columns.Bound(x => x.IDRapporto);
                    columns.Bound(x => x.Descr);
                    columns.Bound(x => x.Filiale);
                    columns.Bound(x => x.RM);
                    columns.Bound(x => x.NDG);
                })
                .DataSource(ds => ds
                .Ajax()
                .Read(read =>
                    {
                        read.Action("GetClienti", "Ricerca");
                            //new DemoRicerca_Interno.Models.RicercaClienteObject { Query = Model.Query, MatchExact = Model.MatchExact, AncheEstinti = Model.AncheEstinti });
                    }
                    )
 
              )
 
            )
    </div>
 
 
</div>
The RicercaController

public
class RicercaController : Controller
   {
       public ActionResult Index()
       {
           ViewData.Model = new RicercaClienteObject();
 
           return View();
       }
 
       public ActionResult GetClienti([DataSourceRequest] DataSourceRequest request, RicercaClienteObject ricerca)
       {
           xxxEntities model = new xxxEntities();
 
           var res = model_SP_GET_INTESTATARIO(xxx, ricerca.Query, ricerca.MatchExact, xxx, DateTime.Now.AddDays(-1), 0, ricerca.AncheEstinti, null, null);
 
           List<Rapporto> lst = new List<Rapporto>();
 
           foreach (var item in res)
           {
               var rapporto = new Rapporto();
 
               rapporto.Descr = item.INTESTAZIONE.Trim();
               rapporto.Filiale = item.FILIALE.Trim();
               rapporto.IDRapporto = item.CODICE_RAPPORTO.Trim();
               rapporto.NDG = item.NDG.Trim();
               rapporto.RM = item.RM.Trim();
               rapporto.IDInterno = item.ID_RAPPORTO;
 
               lst.Add(rapporto);
           }
 
           var result = lst.ToDataSourceResult(request);
           return Json(result);
 
       }
 
   }
And the models

public class RicercaClienteObject
  {
     
      [DataType( System.ComponentModel.DataAnnotations.DataType.Text)]
      public string Query { get; set; }
      public int AncheEstinti { get; set; }
       
      public int MatchExact { get; set; }
  }
 
 public class Rapporto
  {
      public string IDRapporto { get; set; }
       
      public string Descr { get; set; }
       
      public int? IDInterno { get; set; }
       
      public string Filiale { get; set; }
       
      public string RM { get; set; }
       
      public string StatoRapporto { get; set; }
       
      public string NDG { get; set; }
       
      public string Servizio { get; set; }
       
      public int? IDCliente { get; set; }
  }
How do I pass back the Model without using a js function and create a javascript object?

Thanks

Daniel
Telerik team
 answered on 21 Aug 2013
6 answers
1.7K+ views
I have an ajax grid using popup edit mode and kendo dropdownlists in the popup.  On the post to the controller the dropdownlist value is not bound to the model property if the model property is a nullable int.  If I use the regular mvc dropdownlist the value posts fine.  I also have a kendo dropdownlist of states (text and value are both string) and that posts fine to the model property of string.

I am using the internal build from 8/31.

The Grid: 
@(Html.Kendo().Grid<Contact>()
    .Name("ContactGrid")
    .Columns(columns =>
    {
        columns.Bound(x => x.LastName).Title("Last Name");
        columns.Bound(x => x.FirstName).Title("First Name");
        columns.Command(command => { command.Edit(); command.Destroy(); }).Title("Actions").Width(200);
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(100)
        .Model(model => model.Id(p => p.Id))
        .Read("_Read", "Clients")
        .Update("_Update", "Clients")
        .Create("_Create", "Clients")
        .Destroy("_Destroy", "Clients")
    )
    .ToolBar(toolbar => toolbar.Create().Text("Add New Client"))
    .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(true))
    .Sortable()
    .Scrollable(scrollable => scrollable.Virtual(true).Height(280))
    .Events(events => events.Edit("edit"))
)

Model's editor template
<div class="mvceditor-label">
     @Html.LabelFor(x => x.State)       
 </div>
 <div class="mvceditor-field">
     @Html.Kendo().DropDownListFor(x => x.State).BindTo(new SelectList(@ViewBag.States, "Abbreviation", "Name"))
</div>
  
 <div class="mvceditor-label">
     @Html.LabelFor(x => x.LabId)       
 </div>
 <div class="mvceditor-field">
     @Html.DropDownListFor(x => x.LabId, new SelectList(@ViewBag.Labs, "Id", "Description"))
 </div>
 
 <div class="mvceditor-label">
     @Html.LabelFor(x => x.TierId)       
 </div>
 <div class="mvceditor-field">
     @Html.Kendo().DropDownListFor(x => x.TierId).BindTo(new SelectList(@ViewBag.Tiers, "Id", "Description"))
     @Html.ValidationMessageFor(x => x.TierId)
 </div>

The Model:
public class Contact
{
    public int? Id { get; set; }
 
    [Required(ErrorMessage="Required")]
    [DisplayName("First Name *")]
    public string FirstName { get; set; }
 
    [Required(ErrorMessage = "Required")]
    [DisplayName("Last Name *")]
    public string LastName { get; set; }
     
    [Required(ErrorMessage = "Required")]
    [DisplayName("User Tier *")]
    public int? TierId { get; set; }
     
    public string State { get; set; }
     
    [DisplayName("Default Lab")]
    public int? LabId { get; set; }
     
    public string LastUpdateBy { get; set; }
 
}

Controller:
public ActionResult Index()
{
    SetupLists();
    return View();
}
 
public ActionResult _Read([DataSourceRequest] DataSourceRequest request)
{
    return Json(contactsService.Get().ToDataSourceResult(request));
}
 
[HttpPost]
public ActionResult _Create([DataSourceRequest] DataSourceRequest request, Contact contact)
{
    if (ModelState.IsValid)
    {
        contact.LastUpdateBy = User.Identity.Name;
        contactsService.Create(contact);
    }
 
    return Json(new[] { contact }.ToDataSourceResult(request, ModelState));
}
 
[HttpPost]
public ActionResult _Update([DataSourceRequest] DataSourceRequest request, Contact contact)
{
    if (ModelState.IsValid)
    {
        contact.LastUpdateBy = User.Identity.Name;
        contactsService.Update(contact);
    }
 
    return Json(new[] { contact }.ToDataSourceResult(request, ModelState));
}
 
private void SetupLists()
{
    IList<Lab> labs = labsService.Get();
    labs.Insert(0, new Lab { Description = "" });
 
    IList<Tier> tiers = tiersService.Get();
    tiers.Insert(0, new Tier { Description = "" });
 
    IList<Institution> institutions = institutionsService.Get();
    institutions.Insert(0, new Institution { Description = "" });
 
    IList<Contact> contacts = contactsService.Get();
    contacts.Insert(0, new Contact { FullName = "" });
 
    IList<Grant> grants = grantsService.Get();
    grants.Insert(0, new Grant { Description = "" });
 
    IList<State> states = statesService.Get();
    states.Insert(0, new State { Name = "" });
 
    ViewBag.Labs = labs;
    ViewBag.Tiers = tiers;
    ViewBag.Institutions = institutions;
    ViewBag.Contacts = contacts;
    ViewBag.Grants = grants;
    ViewBag.States = states;
}
Petur Subev
Telerik team
 answered on 21 Aug 2013
2 answers
151 views
There doesn't appear to be an extension for this feature that is documented as an available method and is easily reachable using the JavaScript implementation. I would expect it to be directly off the Chart() method, but it's not there.

It is vaguely referenced here (http://www.kendoui.com/forums/permalink/boGkX66aG2OF1P8AAFTdxQ), but I can't tell where.

We're using 2013.1.514.

@(Html.Kendo().Chart().RenderAs()) //<-- this doesn't work.
Kelvin
Top achievements
Rank 1
 answered on 21 Aug 2013
1 answer
203 views

I am using a master detail grid in Ajax mode with a client grid in a client template.  If I don't include the client template, everything is fine.  When I do include the client template, I get a syntax error for every line in the master grid.  The syntax error is the ImageId (the model id) of the master grid.  I can see no reference to it anywhere in the runtime code.

A second, somewhat related question is how do I reference items in the client grid?  For instance when I am creating the client grid in the template, I can get the value of the ImageId from the master grid using "#=ImageId#'.  However, if I try to reference the fields of the client grid data structure the same way I get an error saying it can't find the field.  I am assuming this is because it is looking in the master grid data structure.  How do I reference the client data structure's fields?

Thank you,
Kerry

The aspx is included below:

01.<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<int?>" %>
02.<%@ Import Namespace="WellsFargo.NewsPub.Web.UI.Areas.Attachment.Models" %>
03.<%
04.    var workflowUrl = Url.Content("~/" + Constants.Areas.Attachment + "/" + Constants.Controllers.Image + "/" + Constants.ImageController.ExecuteImageWorkflowCommand);
05.%>
06.<% Html.Kendo().Grid<ImageModel>()
07.       .Name("PublicationImagesGrid")
08.       .DataSource(dataSource => dataSource
09.                                     .Ajax()
10.                                     .Model(model => model.Id(i => i.ImageId))
11.                                     .Read(Constants.ImageController.ReadPublicationImages, Constants.Controllers.Image, new { publicationId = Model })
12.                                     .Destroy(destroy => destroy.Action(Constants.ImageController.DeleteImage, Constants.Controllers.Image))
13.       )
14.       .HtmlAttributes(new { @class = "image-grid" })
15.       .Columns(columns =>
16.                    {
17.                        columns.Bound(pub => pub.PublicationId).Hidden(true);
18.                        columns.Bound(pub => pub.ImageId);
19.                        columns.Bound(c => c.Thumbnail)
20.                               .Title("Thumbnail")
21.                               .Width(1)
22.                               .ClientTemplate("<img src='#= ThumbnailSrc #" + "' alt='#= Tag #' />");
23.                        columns.Bound(pub => pub.ImageSortOrder).Title("Sort Order");
24.                        columns.Bound(c => c.FileName)
25.                               .Title("File Name")
26.                               .Width(1);
27.                        columns.Bound(c => c.Dimensions)
28.                               .Width(1);
29.                        columns.Bound(c => c.Tag);
30.                        columns.Bound(c => c.Caption);
31.                        columns.Bound(c => c.ImageId)
32.                               .ClientTemplate("#= get_image_approval_control('"
33.                                               + workflowUrl
34.                                               + "', ImageId, 1, '"
35.                                               + Constants.ImageController.ReadPublicationImages + "', "
36.                                               + (int)DataConstants.ImageStatus.Approved + ", "
37.                                               + (int)DataConstants.ImageStatus.Rejected + ", "
38.                                               + (int)DataConstants.ImageStatus.ApprovalRequired + ") #")
39.                               .Width(150)
40.                               .Title("Status");
41.                        columns.Command(command => command.Destroy());
42.                        columns.Bound(c => c.Height).Hidden(true);
43.                    })
44.       .ClientDetailTemplateId("child-image-template")
45.       .ToolBar(toolbar => toolbar.Template(() =>
46.                                                { %> <a onclick='create_image(<%= Model %>)' class='k-button'>Add New Image</a> <% }))
47.       .Events(e => e
48.           .DataBound("image_grid_data_bound")
49.       )
50.       .Render();
51.%>
52.  
53.<script id="child-image-template" type="text/x-kendo-template">
54.    <%= Html.Kendo().Grid<ChildImageDto>()
55.    .Name("ChildImages_#=ImageId#")
56.    .DataSource(ds => ds.Ajax().Read(Constants.ImageController.ReadChildImages, Constants.Controllers.Image, new {parentImageIdStr = "#=ImageId#"}))
57.    .Columns(col => { 
58.            col.Bound(i => i.ChildImageId);
59.            col.Bound(i => i.MimeType); 
60.            col.Bound(i => i.Dimensions);
61.            col.Bound(i => i.BinarySrc).ClientTemplate("<img src='#=BinarySrc#' alt='#=Tag#' />");
62.    })
63.    .ToClientTemplate() %>
64.</script>
Rosen
Telerik team
 answered on 21 Aug 2013
1 answer
238 views
Hello Kendo UI Team,

I'm trying to add and select a new item to a treeview with remote datasource. This works as long as the branch of the tree is already loaded. If the branch is not loaded, the append-method returns null as documented. I tried to add a success callback method but it seems as if it is never called.

function createNewItem() {
    var tree = $("#dvTree").data("kendoTreeView");
    var selected = tree.dataItem(tree.select());
    var newnode = { text: '<new>', type:itemtype };
    newelement = tree.append(newnode, $(tree.select()), function () { alert("success"); });
   
    console.log(newelement);
 
    if (newelement) {
        tree.select(newelement);
        tree.trigger("select", { node: newelement });
    }
}
Am I trying a wrong approach here? Kendo UI Version is 2013.2.716.

Thanks in advance.
Daniel
Telerik team
 answered on 21 Aug 2013
6 answers
373 views
when clicking on a event in the schedule, it opens a window, how can we edit that window, or replace it with another,
 thanks.
Alan Mosley
Top achievements
Rank 1
 answered on 21 Aug 2013
1 answer
870 views
How to click kendo grid bound column to open a new window?
I want the command text be the bound column data. click the data cell to open a new window.

ie how to make the text "bounddata" to show the grid bound column data, for example if its' a data filed , I want the date to show in the cell, click the cell link to pop up a new window.

  columns.Command(command => command.Custom("ViewDetails").Text(bounddata)Click("showDetails"));


ie, for the example   http://demos.kendoui.com/web/grid/custom-command.html,

I like to open the detail window by clicking the Title link instead of click "View Detail".
How to do this? Can you provide detail sample code?


Thanks!


Nikolay Rusev
Telerik team
 answered on 21 Aug 2013
2 answers
125 views
I have what I consider the basics of kendo scheduler installed and it doesn't display correctly. I tried pasting the code from the kendo scheduler basic demo and experienced the same issues. Attached is a screenshot of what I see in Chrome. Below is a minimal page.
<!DOCTYPE html>
<head>
    <title></title>
    <link href="Content/kendo/kendo.common.min.css" rel="stylesheet" />
    <link href="Content/kendo/kendo.default.min.css" rel="stylesheet" />
    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
    <div class="k-content">
        <div id="mydiv"></div>
    </div>
    <script>
        $(function () {
            $("#mydiv").kendoScheduler({
                height: 600
            });
        });
    </script>
</body>
</html>
Robert Murdoch
Top achievements
Rank 1
 answered on 20 Aug 2013
4 answers
344 views
I am using the latest internal build (Kendo UI Complete v2013.2.814) of KendoUI and have noticed if I return empty lists to a dropdown the OptionLabel is no longer rendering correctly.

Example Usage:

@(Html.Kendo().DropDownListFor(model => model.EmploymentId)
                      .OptionLabel("* Not Selected")
                      .DataTextField("Name")
                      .DataValueField("Id")
                      .BindTo(Model.Employments)
                      .Events(e => e.Select("EmploymentSelected")))
Nick
Top achievements
Rank 1
 answered on 20 Aug 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
Dialog
MultiColumnComboBox
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?