Telerik Forums
UI for ASP.NET MVC Forum
4 answers
279 views

hi, im using asp.net 5 with MVC 6 and i have 2 problem using GridEditMode.PopUp

----------------------------------------------------- view ----------------------------------------------------------------------------

 @(Html.Kendo().Grid<Organization>()  .Name("grid")

.Columns(columns =>             {                

 columns.Bound(p => p.Name).Title("Name");

columns.Bound(p => p.Email).Title("Email");

 columns.Bound(p => p.Disabled).Title("Disabled").Width(120);                         columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);             })

.HtmlAttributes(new { style = "height: 550px;" })             

.ToolBar(toolbar => toolbar.Create().Text("Add"))             

.Editable(editable =>{ editable.Mode(GridEditMode.PopUp); editable.TemplateName("Edit"); })             

.Pageable( pageable => pageable .Input(false) .Numeric(false) ) .Filterable().Sortable().Scrollable()          .Events(events => events.Edit("insertPopupCaption"))             

.DataSource(dataSource => dataSource.Ajax().PageSize(11).Events(events => events.Error("grid_error"))

.Model(model =>  {                        

 model.Id(p => p.Id);                         

model.Field(p => p.Name).Editable(false);

model.Field(p => p.Email).Editable(true);                         

model.Field(p => p.Disabled); })

.Create(update => update.Action("Create", "Organization"))

.Read(read => read.Action("GetAll", "Organization"))                

 .Update(update => update.Action("Update", "Organization"))                 

.Destroy(update => update.Action("Delete", "Organization"))     )             )

-----------------------------------------------------------------------------------------------------------------------------------

Problems:

 1- As you can see im using editable.TemplateName("Edit") but this template is never found in the path "/view/Organization/EditorTemplates/Edit.cshtml" the only way to make it works is using the template in the path  "/view/Shared/EditorTemplates/Edit.cshtml" (i have seen projects with mvc5 and this problem never happens)

 

2- if i try to remove the tag editable.TemplateName("Edit");  tring to use the template by default, this template seems to dont have in account the model because  the field NAME "model.Field(p => p.Name).Editable(false);" is set to as not edittable BUT IN THE POPUP IT CAN BE EDITTABLE...

 

 Thanks for your help...

 

 

Lo
Top achievements
Rank 1
 answered on 02 Dec 2016
2 answers
93 views

I'm following this example to export my grid to PDF: http://demos.telerik.com/aspnet-mvc/grid/pdf-export

In the pdf configuration, I'd need to use both pdf.TemplateId and pdf.RepeatHeaders, but when try to use them in my grid I get the following error: "Cannot resolve symbol TemplateId", and same with RepeatHeaders. I've attached and image showing this behaviour.
I'd like to know how to use those configurations properly.

Thanks in advance

Matias
Top achievements
Rank 1
 answered on 01 Dec 2016
2 answers
380 views

I've got a grid using the InCell edit mode with a custom editor template, and I'm trying to select all the text when the user clicks the cell to edit.  I've seen (and tried) several suggestions in other forums, but they simply don't work for me.  Currently, I'm down to this, which doesn't work but seems like it should:

Editor template:

@model decimal?
 
@(Html.Kendo().NumericTextBoxFor(m => m)
      .Decimals(2)
      .RestrictDecimals(true)
      .Spinners(false)
      .HtmlAttributes(new { style = "width:100%" })
)

 

In the client-side edit handler:

e.container.find('input').each(function () {
  var editor = this;
  setTimeout(function () { editor.select(); });
});

 

The reason I'm using .each is that there seems to be two input elements in the edit container.  I've tried .select on each of them individually, to no avail.

Any thoughts on this?

Chris T.
Top achievements
Rank 1
 answered on 01 Dec 2016
2 answers
220 views

Hello,

I'm trying to install Asp .NET MVC extensions in Visual Studio Professional 2013 via NuGet. NuGet keeps asking for the password even though I am sure it is correct. I have tried resetting the password twice without effect.

In package.json there is:

    <package id="Telerik.UI.for.AspNet.Mvc5" version="2016.3.1118" targetFramework="net452" />

 

Paul
Top achievements
Rank 1
 answered on 01 Dec 2016
6 answers
169 views

I am instantiating a custom command inside a grid.
If a certain condition is met, the command button (.k-grid-AddNewThing) is appended with the ("k-state-disabled") style class to disable the button.
This works great on load when wired up to the .DataBound event.

However, when the Edit button is clicked and subsequently the Cancel button is clicked, the ("k-state-disabled") style class is removed and reverted to the default.

I have tried to wire up the .Cancel event to re-apply the ("k-state-disabled") style class, but it seems that the .Cancel event is ansyncly firing the default action along with my custom function. 

There are two paths that i figure.

1. Client Template w/Conditional: this would be favorable, since i can remove the javascript function completely.
2. Somehow implement a callback/promise in the default .Cancel event.

I don't know if any of these are possible though.

Any ideas?

 

Grid Helper Event Method

.Events(e => { e.DataBound("disableCustomCommand"); e.Cancel("disableCustomCommand"); })

 

JS function:

    function disableCustomCommand(e) {
        var grid = this;
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
            if (model.isVerified == true) {
                $(this).find(".k-grid-AddNewThing").addClass("k-state-disabled").text("NewThing Exists");
            }
        });
    }
//This works perfectly on the .DataBound event, but does not process properly when called by the .Cancel event and reverts to default style class, giving the impression that the .find() method did not find the element or the .addClass() method did not apply the style.

 

 

Chris
Top achievements
Rank 1
 answered on 30 Nov 2016
7 answers
1.5K+ views

Hi, 

I am attempting to set the initial value of an input control inside the Popup editor by using a hierarchical grid's Edit event. The popup displays correctly, but the MVVM binding is not updating the model. This is the case for any of the input controls i try to set the value of. However, if i manually (non-programmatically) change the input value, the model is successfully updated. I have also tried to use the .data("").trigger("change") method to fire off the change event of the input control to no avail. I have tried setting the value on several other controls (not just a dropdownlist) and the result is the same-the display text is shown correctly but the value is not updated in the model. Any ideas on how to update the model?

Below is the Grid Helper, Javascript function, and Editor Template. Attached is a screenshot of the form data; notice how CourseID is set to 0 (CourseID is non-nullable).

 

MVC Grid Helper: 

<script id="childTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
                    .Name("tabStrip_#=CourseID#")
                    .SelectedIndex(0)
                    .Animation(a => a.Open(o => o.Fade(FadeDirection.In)))
                    .Items(i =>
                    {
                        i.Add().Text("Classes").Content(@<text>
                            @(Html.Kendo().Grid<LMS_Web_MVC.Models.ClassFull>()
                            .Name("grid_#=CourseID#")
                            .ToolBar(t => t.Create().Text("Add Class"))
                            .Columns(columns =>
                            {
                                columns.Bound(o => o.ClassID);
                                columns.Bound(o => o.BeginDate).Format("{0:yyyy-MM-dd HH:mm}");
                                columns.Bound(o => o.EndDate).Format("{0:yyyy-MM-dd HH:mm}");
                                columns.Bound(o => o.Enrollees);
                                columns.Bound(o => o.Active);
                                columns.Command(c => { c.Edit(); }).Title("Actions");

                            })
                            .Editable(e => e.Mode(GridEditMode.PopUp).Window(w => w.Width(600)).TemplateName("ClassEditor"))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(10)
                                .Read(read => read.Action("Get_ClassesByCourse", "Class", new { courseID = "#=CourseID#" }))
                                .Update(u => u.Action("SaveClass", "Class"))
                                .Create(c => c.Action("SaveClass", "Class"))
                                .Model(m => { m.Id(c => c.ClassID); m.Field(c => c.Active).DefaultValue(true);
                                })
                            )
                            .Events(ev => ev.Edit("onEdit"))
                            .Pageable()
                            .Sortable()
                            .ToClientTemplate())
                        </text>);
                    }
        ).ToClientTemplate())
</script>

 

Javascript Function

<script>

    function onEdit(e) {
        if (e.model.ClassID == null) {
            var courseGrid = $("#grid").data("kendoGrid");
            var parentRow = courseGrid.dataItem(this.wrapper.closest("tr").prev());
            var id = parentRow.CourseID;
            $("#CourseID").data("kendoDropDownList").value(id);
            $("#CourseID").data("kendoDropDownList").trigger("change");
        }

</script>

 

Editor Template

@model LMS_Web_MVC.Models.ClassFull

<div data-container-for="CourseID" class="k-edit-field">
    @Html.Kendo().DropDownListFor(model => model.CourseID).OptionLabel("Choose Course").Filter(FilterType.Contains).HtmlAttributes(new { style = "width:400px" }).DataTextField("CourseTitle").DataValueField("CourseID").ValuePrimitive(true).DataSource(ds => {
    ds.Custom()
    .ServerFiltering(true)
    .ServerPaging(true)
    .PageSize(100)
    .Type("aspnetmvc-ajax")
    .Transport(t =>
    {
        t.Read("Get_SimpleCourseList", "Course", new { filterActive = false });
    })
    .Schema(s =>
    {
        s.Data("Data").Total("Total");
    });
}).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
</div> 

 

Chris
Top achievements
Rank 1
 answered on 30 Nov 2016
1 answer
95 views

Hi all, I've problem to load drop down list inside kendo grid foreign key column:

My configuration is the following:
I have a view

@model Pomini.DeviceMonitor.Configurator.Models.Device.DeviceSearchModel
 
@{
    ViewBag.Title = "Device";
    Layout = "~/Views/Shared/_DefaultLayoutForKendoGrid.cshtml";
}
 
@section PageScript {
    <script src="~/Scripts/device.js"></script>
}
 
<div class="row">
 
    <div class="col-md-12">
        <h1>Device List of @Model.RollshopName</h1>
 
        @(Html.Kendo().Grid<Pomini.DeviceMonitor.Business.Device>(Model.DeviceList)
            .Name("DeviceGrid")
            .Columns(columns =>
            {
            columns.Bound(p => p.DeviceID);
            columns.Bound(p => p.SerialNumber);
            columns.ForeignKey(p => p.DeviceType, @Model.DeviceTypeEnumList, "Value", "Name");
            columns.Template(@<text></text>).ClientTemplate(@Html.ActionLink("View Configuration", "Index", "Item", new { deviceId = "#=DeviceID#" }, null).ToHtmlString());
            })
            .Pageable()
            .Sortable(sortable =>
            {
                sortable.Enabled(true);
                sortable.SortMode(GridSortMode.SingleColumn);
            })
            .Filterable()
            .ToolBar(toolbar =>
            {
                toolbar.Create();
                toolbar.Save();
            })
            .Editable(editable =>
            {
                editable.Mode(GridEditMode.InCell);
                editable.Enabled(true);
                editable.DisplayDeleteConfirmation(true);
            })
            .Navigatable()
            .DataSource(dataSource =>
                dataSource.Ajax()
                .Batch(true)
                .Model(model =>
                {
                    model.Id(p => p.DeviceID);
                    model.Field(p => p.DeviceID).Editable(false);
                })
                .Read(read => read.Action("Device_Read", "Device"))
                .Create(create => create.Action("Device_Create", "Device", new { rollshopId = @Model.RollshopId }))
                .Update(update => update.Action("Device_Update", "Device"))
                .Sort(sort => sort.Add("DeviceID").Ascending())
            )
        )
    </div>
 
</div>

 

My viewmodel page, from which I retrieve all data I need in my view

public class DeviceSearchModel
    {
        public DeviceSearchModel(int rollshopID)
        {
            this.RollshopName = Business.Rollshop.Query(x => x.ID == rollshopID).FirstOrDefault() != null ? Business.Rollshop.Query(x => x.ID == rollshopID).FirstOrDefault().Name : "";
            this.DeviceTypeEnumList = Business.Helper.GetListFromEnum<DeviceTypeDescriptions>();
            this.DeviceList = Business.Device.Query(x => x.RollshopID == rollshopID);
            this.RollshopId = rollshopID;
        }
 
        public string RollshopName { get; private set; }
 
        public List<EnumModel> DeviceTypeEnumList { get; set; }
        public IEnumerable<Business.Device> DeviceList { get; private set; }
        public int RollshopId { get; private set; }
    }

 

I've also the class that own the structure of my dropdown items:

public class EnumModel
        {
            public int Value { get; set; }
            public string Name { get; set; }
        }

 

This is my Enum class:

public enum DeviceTypeDescriptions
    {
        [Display(Name = "Starndard Grinder")]
        StandardGrinder = 0,
        [Display(Name = "Pomini digital texturing")]
        PDT = 1,
        MWGrinder = 2,
        BladeGrinder = 3
    }

 

And this is the method I use to populate my dropdownlist item's from my Enum:

public static List<EnumModel> GetListFromEnum<T>()
        {
            return Enum.GetValues(typeof(T))
                .Cast<T>()
                .Select(x => new EnumModel()
                {
                    Value = Convert.ToInt32(x),
                    Name = x.ToString()
                }).ToList();
        }

 

This is my Device class: in this class I retrieve data which populate the grid:

public sealed class Device : IBusinessDomain
    {
        public int DeviceID { get; internal set; }
        public int RollshopID { get; internal set; }
 
        public string SerialNumber { get; set; }
 
        public int DeviceType { get; set; }
 
        //public DeviceTypeDescriptions DeviceTypeDescription { get; set; }
         
        public Lazy<Business.Rollshop> Rollshop { get; internal set; }
        public Lazy<IEnumerable<Business.Item>> ItemList { get; internal set; }
 
        public static IEnumerable<Device> Query(Expression<Func<Data.MainDB.Device, bool>> where = null)
        {
            using (var db = new Repository())
            {
                IEnumerable<Device> result = db.Device.Enumerate(where).Select(x => (Device) x).ToArray();
                return result;
            }
                 
        }
 
public static explicit operator Device(Data.MainDB.Device arg)
        {
            var value = Mapper.Map<Device>((Data.MainDB.Device) arg);
            return value;
        }
}

 

And this is my database model object:

public partial class Device
    {
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
        public Device()
        {
            this.Item = new HashSet<Item>();
        }
     
        public int ID { get; set; }
        public string SerialNumber { get; set; }
        public int DeviceType { get; set; }
        public System.DateTime CreationDate { get; set; }
        public System.DateTime LastUpdateDate { get; set; }
        public int RollshopID { get; set; }
     
        public virtual Rollshop Rollshop { get; set; }
        [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
        public virtual ICollection<Item> Item { get; set; }
    }

 

Ok so now this is my situation. I hope is clear.
The behaviour in this situation is that grid will be populated well on load, but when i click cell to edit content, dropdown does'n appear and i can't edit cell (no textbox also appear) (only for DeviceType column, for SerialNumber column all works).
If in my grid I change bound to foreign key in this way:

 

columns.ForeignKey(p => p.DeviceType, @Model.DeviceTypeEnumList, "Name", "Name");

 

when i load my grid, DeviceType column will remain blank (not bound to it's value), but when i click on this the cell enter correctly in edit mode and show my dropdown. Then if I choose an item in the dropdown, when i click outside cell, this cell return blank (item I choosen is not shown in grid).
I hope is all clear!
Thank

Konstantin Dikov
Telerik team
 answered on 30 Nov 2016
6 answers
502 views

I have a detail template like this example http://demos.telerik.com/aspnet-mvc/grid/detailtemplate. Hte thing is that i want to send the selected rows values to a controller.

When i have a simple grid i send the selected values like this :

 $('#send').click(function () {
                var items = {};
                var grid = $('#GridMarcaPar').data('kendoGrid');
                var selectedElements = grid.select();
                for (var j = 0; j < selectedElements.length; j++) {
                    var item = grid.dataItem(selectedElements[j]);
                    items['GridMarcaPar[' + j + '].CodMarca'] = item.CodMarca;
                }
                $.ajax({
                    url: '@Url.Action("Index", "Busqueda")',
                    type: "POST",
                    async: false,
                    data: items,
                    success: function (result) {
                        console.log(result);
                    }
                })
            })

But when i try to send the selected values of the detail template like this it never call the action Index:

$('#send').click(function () {
                var items = {};
                var grid = $('#grid_#=CodMarca#').data('kendoGrid');
                var selectedElements = grid.select();
                for (var j = 0; j < selectedElements.length; j++) {
                    var item = grid.dataItem(selectedElements[j]);
                    items['grid_#=CodMarca#[' + j + '].CodMarca'] = item.CodMarca;
                }
                $.ajax({
                    url: '@Url.Action("Index", "Busqueda")',
                    type: "POST",
                    async: false,
                    data: items,
                    success: function (result) {
                        console.log(result);
                    }
                })
            })

 

This is my detail template code:

<script id="client-template" type="text/x-kendo-template">
                    @(Html.Kendo().TabStrip()
                                        .Name("tabStrip_#=CodMarca#")
                                        .SelectedIndex(0)
                                        .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
                                        .Items(items =>
                                        {
                                        items.Add().Text("Más Datos").Content(@<text>
                        @(Html.Kendo().Grid<TelerikMvcApp4.Models.MarcaParecido>()
                                               .Name("grid_#=CodMarca#")
                                               .Columns(columns =>
                                               {
                                                   columns.Bound(o => o.DescMarca).Title("Marca").Width(110);
                                                   columns.Bound(o => o.DescTitular).Title("Titular").Width(300);
                                                   columns.Bound(o => o.PorcentajeSimilitud).Title("% Similitud").Width(70)
                                                   .HtmlAttributes(new { style = "text-align:right" });
                                                   columns.Bound(o => o.PorcentajeError).Title("% Error").Width(70)
                                                   .HtmlAttributes(new { style = "text-align:right" });
                                                   columns.Bound(c => c.EnviarCorreo).ClientTemplate("<input type='checkbox' />").Title("¿Enviar?").Filterable(false).Width(120).HtmlAttributes(new { @onclick = "click" });
                                               })
                                                .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .PageSize(5)
                                                .Read(read => read.Action("MarcaParecidoDetalle", "Busqueda", new { codMarca = "#=CodMarca#" }))
                                                )
                                                .Selectable(s => s.Mode(GridSelectionMode.Multiple))
                                                .ToClientTemplate())
                                        </text>
                                        );
                                        })
                                    .ToClientTemplate()
                    )
                </script>

 

I hope someone can help me.

Konstantin Dikov
Telerik team
 answered on 30 Nov 2016
1 answer
158 views

I have a partial view that receives a model filled with data that can be bound to the Kendo TreeView like this:

  @(Html.Kendo().TreeView()
            .Name((string)ViewBag.TreeName)
            .DragAndDrop(true)
            .BindTo(Model, (NavigationBindingFactory<TreeViewItem> mappings) =>
            {
              mappings.For<MenuItemModel>(binding => binding
                .ItemDataBound((item, model) =>
                {
                  item.Text = model.Text;
                  item.ActionName = model.Action;
                  item.ControllerName = model.Controller;
                  item.ImageUrl = model.Icon;
                  if (model.Items == null || model.Items.Count == 0)
                  {
                    item.Id = model.Action;
                  }
                  item.Enabled = true;
                })
                .Children(model => model.Items)
              );
            })
            .Animation(true)
            .AutoScroll(true)
            .Events(e =>
            {
                e.Drag("MainMenuDrag").Drop("MainMenuDrop").DragStart("MainMenuDragStart");
            })
  )

My problem is that the Drag & Drop functionality only works when the icon of a treeview item is dragged. When the text is dragged the event handlers do not even get called. Is this intended? If yes then, is there a work around for this issue?
I need the links (anchor tags) because I have an event handler bound to them that requires both the url and the id properties from the dataItem.

Dimitar
Telerik team
 answered on 30 Nov 2016
4 answers
1.4K+ views

Hello,

I would like to force users to select dates from the DatePicker calendar widget,  preventing them from manually keying the dates into the rendered input control. Ideally the input control would be hidden and replaced with a label showing the currently selected date.

Is there a way to configure this out of the box?

Many Thanks,

Mike

Eyup
Telerik team
 answered on 30 Nov 2016
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
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
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
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?