Telerik Forums
UI for ASP.NET MVC Forum
7 answers
281 views
Hello,
it is possible to use the edit and delete buttons,but to put my own action,a javascript function,when i click on them?
i want to use them,because they already have their style(image and color) ,OR to create custom buttons just like the edit/delete buttons,with my own handler when i click on them.

Regards,
Daniel
Max
Top achievements
Rank 1
 answered on 23 Aug 2013
1 answer
402 views
Hello,
I would like to know if there are some examples on how to create a Master Detail Page with Kendo UI. This is what I would like to have:

1) A Grid acting as the master, displaying master rows with buttons for adding, updating and deleting records.

2) Under the Grid I would like to have a PartialView? showing a form details where the user can view the detail data of the selected grid row
, enter data for a new entry, update the details of the selected grid row.

Best Regards
Petur Subev
Telerik team
 answered on 22 Aug 2013
1 answer
424 views
I have been using inline edit with the Grid control in several projects for a while now and everything has worked great.  However, on a new page I have a grid that uses inline editing/creation, however when create is called via Ajax, all of the rows are passed into the controller action and my code is duplicating all the records.  I have compared this page with the pages that work correctly and I cannot seem to find the issue.  I must be missing something.  I think I just need another set of eyes.  Below is the code in the page/controller that is NOT working.

@model SS.Web.Models.SystemCustomerConcernViewModel
@{
    ViewBag.Title = "SystemCustomerConcern";
}
<section class="contentTitle">
    Customer Concern List
</section>
@(Html.Kendo().Grid<SS.Web.Models.SystemCustomerConcernViewModel>()
    .Name("SystemCustomerConcernGrid")
    .Columns(columns =>
    {
        columns.Command(command => command.Destroy()).Width(90).HtmlAttributes(new { style = "vertical-align: top;" });
        columns.Bound(p => p.SystemCategoryType).ClientTemplate("#=SystemCategoryType.description#").Width(160).HtmlAttributes(new { style = "vertical-align: top;" });
        columns.Bound(i => i.customerConcern).HtmlAttributes(new { style = "vertical-align: top;" });
        columns.Bound(i => i.billedHours).Width(100).HtmlAttributes(new { style = "vertical-align: top;" });
        columns.Bound(i => i.techPayHours).Width(115).HtmlAttributes(new { style = "vertical-align: top;" });
        columns.Bound(i => i.servicePerformed);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create();
        toolBar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .HtmlAttributes(new { style = "height: 675px" })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Navigatable() //set so user can tab between cells in edit mode
    .DataSource(dataSource => dataSource
                                .Ajax()
                                .Events(events => events.Error("error_handler"))
                                .PageSize(100)
                                .Batch(true)
                                .ServerOperation(false)
                                .Model(model =>
                                {
                                    model.Id(i => i.systemCustomerConcernID);
                                    model.Field(p => p.SystemCategoryType).DefaultValue(
                                        ViewData["defaultSystemCategoryType"] as SS.Web.Models.SystemCategoryTypeViewModel); //this is used when you add a new item
                                })
                                        .Read(read => read.Action("List", "SystemCustomerConcern"))
                                        .Create(create => create.Action("Create", "SystemCustomerConcern"))
                                        .Update(update => update.Action("Update", "SystemCustomerConcern"))
                                        .Destroy(destroy => destroy.Action("Delete", "SystemCustomerConcern"))
                                ))
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>



[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Create([DataSourceRequest] DataSourceRequest request,
            [Bind(Prefix = "models")]IEnumerable<SystemCustomerConcernViewModel> systemCustomerConcerns)
        {
            var results = new List<SystemCustomerConcernViewModel>();

            if (systemCustomerConcerns != null && ModelState.IsValid)
            {
                foreach (var systemCustomerConcernViewModel in systemCustomerConcerns)
                {
                    SystemCustomerConcern systemCustomerConcern = new SystemCustomerConcern
                    {
                        customerConcern = systemCustomerConcernViewModel.customerConcern,
                        billedHours = systemCustomerConcernViewModel.billedHours,
                        techPayHours = systemCustomerConcernViewModel.techPayHours,
                        servicePerformed = systemCustomerConcernViewModel.servicePerformed,
                        isActive = systemCustomerConcernViewModel.isActive,
                        systemCategoryTypeID = systemCustomerConcernViewModel.SystemCategoryType.systemCategoryTypeID
                    };

                    systemCustomerConcernViewModel.systemCustomerConcernID = this.systemCustomerConcernService.Create(systemCustomerConcern);
                    results.Add(systemCustomerConcernViewModel);
                }
            }

            return Json(results.ToDataSourceResult(request, ModelState));
        }

Daniel
Telerik team
 answered on 22 Aug 2013
2 answers
556 views
Hello,

I know there is an InnertHtml button and I need to build the same functionality. working on other elements. 
How can I add text to the Kendo UI MVC Editor at the cursor position ?
Shaun
Top achievements
Rank 1
 answered on 22 Aug 2013
1 answer
694 views
Hi to everyone.
I have an MVC view with a Kendo DatePicker
@(Html.Kendo().DatePicker()
                        .Name("myDataPicker")       
                        .Value(DateTime.Now.Date)
                        .Format("dd/MM/yyyy")
                        .HtmlAttributes(new  {style = "width: 150px;" })
                    )


I need to change the date of my element from javascript, and I'm doing it in this way
 $("#myDataPicker").kendoDatePicker({
                value: new Date(),        
                format: "dd/MM/yyyy", ( I have to do this because it doesn't remember the given format in the helper )
            });

It works but this function changes some style in the element, in particular in the first span
k-input is added causing a padding issue and style has now a width:100%, not 150px as I set in the helper and I have when the page is just opened
so before
<span class="k-widget k-datepicker k-header" style="width: 150px;">
after
<span class="k-widget k-datepicker k-header k-input" style="width: 100%;">

I have to use an ugly workaround changing the class and style from jquery but I was wondering if there is a better solution

any help is appreciated
thank's
Mauro
Georgi Krustev
Telerik team
 answered on 22 Aug 2013
7 answers
205 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.0K+ 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.6K+ 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
121 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
158 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?