Telerik Forums
UI for ASP.NET MVC Forum
1 answer
120 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
525 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
214 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.5K+ 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
1 answer
338 views

Scenario:
From SharePoint site ribbon icon click opens a dialog window and loads View1.
On View1 a button click navigates to View2.
On View2 a button click should navigate back to View1.

Problem: The Forward navigation is working fine with the href below

window.location.href = '@Url.Action("Index", "Tab")';

But the backward navigation is not working. I have two different Controllers [HomeController, TabController]

<div class="k-closeDiv">
        @(Html.Kendo().Button()
        .Name("closeButton")
        .Content("Close")
        .HtmlAttributes(new { type = "button" })
        .Events(e => e.Click("onCloseButtonClick"))
        )
    </div>
 
 function onCloseButtonClick() {
        window.location.href = '@Url.Action("Index", "Home")'; //NotWorking..??
    }

I have tried all the available options below.

  1. Here
  2. RedirectToAction("Action","Controller")
  3. RedirectToRoute("routeName") 

No errors but No option is working.

Is this an issue since I am loading views in dialog window.??

Please suggest. Thanks

 

 

T. Tsonev
Telerik team
 answered on 30 Nov 2016
9 answers
1.3K+ views

We have a server in UK, and our clients are in US with different timezones.

 

In a grid, we set up a datetime field with default value as datetime.now in the cshtml view file. However, we found the issues:

 

1. The datetime.now is server datetime, not client datetime, so it is always wrong. how can we use the users datetime value?

 

2. we have tried using onsave event with gridrow.isnew() to set client's default value. however, if the user change the value, the isnew() is still return true which overwrites user's  new input.

 

Thanks

Viktor Tachev
Telerik team
 answered on 30 Nov 2016
1 answer
1.8K+ views

I have a grid in a cleintTemplate with a checkbox column, as below,  in a single grod with checkbox, the click event is firedt using the class, but when the grid is inside a clientTemplate column the same way does not work.  Ive tried various ways, but cant seem to get this checkbox to fire a click event.

What extra is required for the checkbox in a grid inside a cleinttemplate column.

 

Thanks

@(Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
.Name("siteCriteriaCriteria")
.HtmlAttributes(new { style= "height:60vh; " })
.Scrollable()
.Columns(columns =>
{
columns.Bound(p => p.siteId).Title("siteId").Width(50).Hidden();
//columns.Bound(p => p.premiseAreaId).Title("premiseId").Width(50).Hidden();
columns.Bound(p => p.areaId).Title("AreaId").Width(50).Hidden();
columns.Bound(p => p.name).Title("Hazard Area").Width(150);
columns.Template(p => "").HtmlAttributes(new { @class = "templateCell" }).Title("criteria").Width(200).ClientTemplate(
Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
.Name("areaCriteria_#=areaId#")
.TableHtmlAttributes(new { @class = "GridNoHeader" })
.Columns(c =>
{
c.Bound(e1 => e1.name).Title("Training").Width(150).HeaderHtmlAttributes(new { style = "display:none;" }).HtmlAttributes(new { style = "height: 15px" });
c.Bound(e1 => e1.areaId).Title("Area").Width(100).Hidden();
c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# ' # class='chkbx' />").HtmlAttributes(new { style="height: 15px" }).HeaderHtmlAttributes(new { style="display:none;" }); ;
})
.Events(events=> events.DataBound("siteCriteriaCriteria_onDataBound"))
.DataSource(source1 => source1
.Custom()
.Transport(transport => transport
.Read(read =>
{
read.Url("/Api/SiteInfo/_getTrainingAreas/_si=" + Model.SiteId)
.DataType("json");
})

))
.ToClientTemplate().ToHtmlString()
);
// columns.Command(command => { command.Edit(); }).Width(250);
})
.Events(events => events.Save("onSave").DataBound("hideEditCommand"))
.NoRecords("No criteria exists.")
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(source => source
.Custom()
.Schema(schema => schema
.Model(m => m.Id(p => p.siteId)))
.Transport(transport => transport
.Read(read =>
{
read.Url("/Api/SiteInfo/_getPremiseArea/_si=" + Model.SiteId )
.DataType("json");
})
))
)

 

 

 

JAVASCRIPT

$('#areaCriteria_').on("click", ".chkbx", function (e) {
alert("Click Occurred");
});

Eyup
Telerik team
 answered on 30 Nov 2016
3 answers
2.6K+ views

Hi,

I've almost over 200+ grids in my app. I am trying to add a external search area to search in all columns

 

$('.k-grid').each(function () {
            var $gridElement = $(this);
            var $grid = $gridElement.data('kendoGrid');

            var toolbar = $grid.table.prev('.k-grid-toolbar');
            if (toolbar.length > 0)
            {
                var searchContainer = $('<div style="width: 200px; float:right;"></div>').appendTo(toolbar);
                var searchBox = $('<input type="text" class="form-control"/>')
                    .appendTo(searchContainer)
                    .on('keyup', function () {
                        var val = $(this).val();

                        var filters = [];
                        $.each($grid.columns, function (i, item) {
                            if(item.field && item.field.length > 0)
                            {
                                filters.push({ field: item.field, operator: 'contains', value: val })
                            }
                        });
                        $grid.dataSource.filter({
                            logic: "or",
                            filters: filters
                        });
                    });
            }

....................

 

But I've two problems:

    1) It does filtering in server-side, I want to make it in client-side.

    2) Because I'm binding some columns with SelectLists, I cannot search amoung them. 

 

Do you have any suggestions?

Regards.

Danail Vasilev
Telerik team
 answered on 29 Nov 2016
5 answers
1.7K+ views

Hi,
I configured the Kendo MultiSelect for ajax binding, I send parameters to the server, All as described in
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/multiselect/overview#sending-parameters-to-the-server
Everything works fine except my call to the refresh method (http://docs.kendoui.com/api/web/multiselect).
The thing is that a new ajax request does not occur when I call refresh (is it by design? should I use another API?),
I need the List Of Values to be updated by a new Ajax call on change of another control.
The parameters I send to the server are

1. the text typed
2. a value of another control

Thanks in advanced,

Lauri

 

 

Georgi Krustev
Telerik team
 answered on 29 Nov 2016
8 answers
303 views

Reading the docs on the scaffolder (http://docs.telerik.com/kendo-ui/aspnet-mvc/scaffolding) shows the dialog appearing when Add | New Scaffolded Item is selected, which is fine.

Unfortunately when I pick Add | Controller I still get the Kendo UI Scaffolder dialog when all I want is a plain MVC controller.

How can I fix this behaviour?

Matt
Top achievements
Rank 1
 answered on 29 Nov 2016
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?