Telerik Forums
UI for ASP.NET MVC Forum
3 answers
352 views

I have a parent grid with a client detail template.The client detail template has a child grid with a custom column button. When I click the custom command button in the child grid, it calls my function. After the function is executed, the parent grid's data source is re-read. This causes all expanded rows to be collapsed.

My code is not doing this, it seems to be the default behaviour of the custom command. In fact, to diagnose this behaviour, my customer button is calling an empty function.

My child grid also has a standard column 'Destroy' function. When that button is clicked, it does not cause the parent grid's data to be re-read.

Is there any way I can get my customer function to behave like the 'destroy' function and prevent the parent grid's data source from being re-read? 

Tsvetina
Telerik team
 answered on 08 Jun 2017
1 answer
253 views

Hi,

I have this error Uncaught ReferenceError: TypeMontant is not defined When i tried to display the editor Inline.

When clicking on Add new record, for the field TypeMontant, it's suppose to display a dropDownList, but this error appear.

I followd this tutorial : http://demos.telerik.com/aspnet-mvc/grid/editing-custom to achieved that

 

Here the view

@using EDC.NAVComptable.WebUi.Infrastructure.Configuration
@using EDC.NAVComptable.WebUi.Ressources
@using Kendo.Mvc.UI
@(Html.Kendo().Grid<EDC.NAVComptable.WebUi.ViewModel.Core.PosteComptableTypeMontantViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.PosteComptbCd).Width(110).Title(Layouts.PosteComptable).Filterable(filterable => filterable.UI("typeMontant").Multi(true));
            columns.Bound(e => e.TypeMontant).Width(110).Title(Layouts.TypeMontant).ClientTemplate("#=TypeMontant.RefrncCibleCd#");
            columns.Bound(e => e.DtDebutVersion).Width(110).Title(Layouts.DtDebutVersion).ClientTemplate("#= (DtDebutVersion == null) ? '' : kendo.toString(DtDebutVersion, 'yyyy-MM-dd') #");
            columns.Bound(e => e.DtFinVersion).Width(110).Title(Layouts.DtFinVersion).ClientTemplate("#= (DtFinVersion == null) ? '' : kendo.toString(DtFinVersion, 'yyyy-MM-dd') #");
            columns.Bound(e => e.DtsSupprm).Width(110).Title(Layouts.DtsSupprm).ClientTemplate("#= (DtsSupprm == null) ? '' : kendo.toString(DtsSupprm, 'yyyy-MM-dd') #");
            columns.Bound(e => e.IndVersionCournt).Width(110).Title(Layouts.IndVersionCournt);
            columns.Bound(e => e.LoadDts).Width(110).Title(Layouts.LoadDts).ClientTemplate("#= (LoadDts == null) ? '' : kendo.toString(LoadDts, 'yyyy-MM-dd') #");
            columns.Command(command => command.Destroy()).Title("Supprimer").Width(150);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save().SaveText("Sauvegarde").CancelText("Annuler");
            toolbar.Excel();
            toolbar.Create();
        })
        .Excel(excel => excel.FileName("PosteComptableTypeMontant.xlsx"))
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Groupable()
        .Sortable()
        .Pageable()
        .Scrollable()
        .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .StartsWith("Starts with")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
            ))
        )
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(WebConfigFile.PageSizeList)
            .Model(
                model =>
                {
                    model.Id(p => p.PosteComptbTypeMontantSqn);
                    model.Field(p => p.PosteComptbTypeMontantSqn).Editable(false);
                    model.Field(p => p.TypeMontant).DefaultValue(ViewData["TypeMontant"] as EDC.NAVComptable.WebUi.ViewModel.Core.TypeMontantViewModel);
                    model.Field(p => p.PosteComptbCd).DefaultValue(ViewData["PosteComptbCd"] as EDC.NAVComptable.Model.Core.PosteComptable);
                }
            )

            .Read(read => read.Action("PosteComptableTypeMontant", "Reference"))
            .Update("Editing_Update", "Grid")
            .Create(update => update.Action("EditingPopup_Create", "Reference"))
        )
)

 

here the Controller

 public ActionResult Index()
        {
            var dateComptable = _dateCalendrierRepository.GetdateComptable();
            InitDropDown();
            return View(new DateCalendrierViewModel {DtCalndr = dateComptable.DtCalndr});
        }

        public ActionResult TypeMontantDistinct()
        {
            return Json(_typeMontantRepository.GetDistinct().Select(e=>e.RefrncCibleCd), JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, PosteComptableTypeMontant model)
        {
            if (model != null && ModelState.IsValid)
            {
                _referenceRepository.Save(model);
            }

            return Json(new[] { model }.ToDataSourceResult(request, ModelState));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult PosteComptableTypeMontant([DataSourceRequest] DataSourceRequest request)
        {
            var posteComptableTypeMontant = _referenceRepository.GetAll().Select( x=> new PosteComptableTypeMontantViewModel
            {
                TypeMontant = new TypeMontantViewModel { RefrncCibleCd = x.TypeMontant},
                PosteComptbCd = x.PosteComptbCd,
                DtDebutVersion = x.DtDebutVersion,
                PosteComptbTypeMontantSqn = x.PosteComptbTypeMontantSqn,
                DtFinVersion = x.DtFinVersion,
                DtsSupprm = x.DtsSupprm,
                LoadCycleId = x.LoadCycleId,
                IndVersionCournt = x.IndVersionCournt,
                LoadDts = x.LoadDts
            }).ToList();

            var nouveauPosteComptable = _posteComptableRepository.GetNew().Select(x => new PosteComptableTypeMontantViewModel
            {
                PosteComptbCd = x.PosteComptbCd,
            }).ToList();

            foreach (var posteComptable in nouveauPosteComptable)
            {
                posteComptableTypeMontant.Add(new PosteComptableTypeMontantViewModel
                {
                    PosteComptbCd = posteComptable.PosteComptbCd,
                });
            }

            return Json(posteComptableTypeMontant.OrderBy(x => x.TypeMontant.RefrncCibleCd).ToDataSourceResult(request));
        }

        private void InitDropDown()
        {
            var typeMontant = _typeMontantRepository.GetDistinct()
                .Select(element => new TypeMontantViewModel{ RefrncCibleCd= element.RefrncCibleCd})
                .ToList();

            //var posteComptable = _posteComptableRepository.GetDistinct()
            //    .Select(element => new PosteComptable { PosteComptbCd = element.PosteComptbCd })
            //    .ToList();

            //ViewData["PosteComptbCd"] = posteComptable;
            //ViewData["DefaultPosteComptbCd"] = posteComptable.First();
            ViewData["TypeMontant"] = typeMontant;
            ViewData["DefaultTypeMontant"] = typeMontant.First();

        }

 

Here the model

public class PosteComptableTypeMontantViewModel
    {
        public PosteComptableTypeMontantViewModel()
        {
            TypeMontant = new TypeMontantViewModel();    
        }

        public int PosteComptbTypeMontantSqn { get; set; }
        public string PosteComptbCd { get; set; }
        public TypeMontantViewModel TypeMontant { get; set; }

        [UIHint("Date")]
        public DateTime DtDebutVersion { get; set; }
        [UIHint("Date")]
        public DateTime? DtFinVersion { get; set; }
        [UIHint("Date")]
        public DateTime? DtsSupprm { get; set; }
        public bool IndVersionCournt { get; set; }
        [UIHint("Date")]
        public DateTime LoadDts { get; set; }
        public int LoadCycleId { get; set; }
    }

public class TypeMontantViewModel
    {
        public string RefrncCibleCd { get; set; }
    }

 

Thank for your help

Anthony

Konstantin Dikov
Telerik team
 answered on 08 Jun 2017
3 answers
143 views

Hello,

In the last version of Kendo Tab the Scrolling button position is under the tab and not on the left and right side - why?
(see attached picture)

regards robert

Ivan Danchev
Telerik team
 answered on 08 Jun 2017
3 answers
275 views

I have a Barcode that is within a partial view.  If I do not include a width and height at the beginning I get an error when rendering.

@Html.Kendo().Barcode().Name("barcode-" + Guid.NewGuid().ToString()).Value(@Model.WidgetTagValue).Encoding(Model.barcode_symbology).Width(150).Height(150)

I have a resize event that tries to change it to fit the size of the parent div on page init and on window resize.

function setBarcodeSize() {
        if ($('.k-barcode').length > 0) {
            $('.k-barcode').each(function () {
                var parentDivWidth = $(this).closest(".andon-widget-container").width() - 50;
                var parentDivHeight = $(this).closest(".andon-widget-container").height() - $(this).closest(".andon-widget-container").find(".andon-widget-title").height();
                $(this).css("width", $(this).width(parentDivWidth) + "px").css("height", $(this).height(parentDivHeight) + "px");
                $(this).data("kendoBarcode").redraw();
            });
        }
    }

The width and height of the k-barcode <div> are set appropriately but the size of the child <div> with the data-role="surface" remains at 150x150

 

Advice?

Stamo Gochev
Telerik team
 answered on 08 Jun 2017
2 answers
143 views

Hello,

 

I'm trying to put title on 2 lines but the layout is not so good.  See attachment.  This is the code used here :

 

steps[6] = 'Might well be expected at some time';
steps[5] = 'Quite possi. could happen';
steps[4] = 'Unusual but possible';
steps[3] = 'Remotely possible';
steps[2] = 'Conceivable but<br/>very unlik.';
steps[1] = 'Pratically impossible';
steps[0] = 'Choose value';
AdapterLegendes("#NoProbabilite", steps);
 
function AdapterLegendes(nomSlider, steps) {
    var slider = $(nomSlider).data("kendoSlider");
 
    var largeTickItems = slider.wrapper.find(".k-tick-large");
    $.each(largeTickItems, function (index) {
        var step = steps[index];
        var children;
        $(this).attr("title", step).children().html(step);
    });
}
Louis
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 07 Jun 2017
3 answers
99 views

We have a project that is half ASP using RAD, and the other half is ASP MVC. On our local development boxes that project compiles and works fine, but when we publish it to production the icons do not appear. Initially, it was a CSS problem that wasn't skinning any of the MVC portion of the web site but we tweaked the path and now the Kendo controls are rendering fine, with the exception of the icons. I know that the icons reside in the sprite.png file, and I think I need to move a copy of the ~/Contents/kendo folder to another path so that the MVC portion of the project can find the icons, but so far I can figure out where to put it.

Any suggestions?

Attached is a screenshot of the folder structure of the project. The MVC portion of the project is in Areas/MvcArea.

Marion
Top achievements
Rank 1
 answered on 07 Jun 2017
7 answers
833 views

Hi,

 

I have a grid with inline editing and a date field. Model:

        [DataType(DataType.Date)]
        public DateTime RelevantDate { get; set; }

Grid:

cols.Bound(p => p.RelevantDate).Format("{0:yyyy-MM-dd}").EditorTemplateName("DatePicker").Title("Date of change").Width(120);

 

The DatePicker template is in the Views\Shared\EditorTemplates folder.

 

My problem is that when I select a date in the grid and hit Submit the parameter model.RelevantDate in the controller method has the selected date and the current time i.e. 2016-04-01 08:19:41. What I would like to have is the date only: 2016-04-01 00:00:00. Is this possible?

 

Best regards,

Henrik

Henrik
Top achievements
Rank 1
 answered on 07 Jun 2017
1 answer
2.1K+ views

I have a 3 part question.

1) Can you set the value of a text in the same row, based on a selection from a dropdownlist. When a user chooses a Field, I would like to update the DisplayName column to a value based on the Field they chose.

2) How do you set the default value of a ClientTemplate checkbox to true

3) How do you set the default value of a textbox, I want to set the Ordering textbox to count + 1.

Following his my grid definition and relevant OnEdit function.

@(Html.Kendo().Grid<SOCKETWorx.Core.Data.GridViewProjection>()
                                            .Name("grid_ViewProjections")
                                            .Columns(columns =>
                                            {
                                                columns.ForeignKey(m => m.FieldId, (System.Collections.IEnumerable)ViewData["AvailableFields"], "Id", "Value")
                                                    .Title("Field").EditorTemplateName("FieldsEditor")
                                                    .HeaderHtmlAttributes(new { style = "text-align:center" })
                                                    .Width(175);
                                                columns.Bound(m => m.Display)
                                                    .Title("Display")
                                                    .ClientTemplate("<input type='checkbox' #=Display ? checked='checked' : '' # />")
                                                    .HeaderHtmlAttributes(new { style = "text-align:center" })
                                                    .Width(65).HtmlAttributes(new { style = "text-align: center" });
                                                columns.Bound(m => m.DisplayName)
                                                    .Title("Display Name")
                                                    .HeaderHtmlAttributes(new { style = "text-align:center" })
                                                    .Width(250);
                                                columns.Bound(m => m.Ordering).Title("Order")
                                                    .HeaderHtmlAttributes(new { style = "text-align:center" })
                                                    .Width(50)
                                                    .HtmlAttributes(new { style = "text-align: center" });
                                                columns.Command(command => { command.Destroy(); }).Width(100);
                                            })
                                            .ToolBar(toolbar => {
                                                toolbar.Create().Text("Add");
                                                toolbar.Save().SaveText("Save").CancelText("Cancel");
                                                toolbar.Custom().Text("Custom View").Action("List", "Data", new { moduleId = Model.ModuleId, viewId = Model.Id });
                                            })
                                            .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                                            .Filterable()
                                            .Navigatable()
                                            .Sortable(sortable =>
                                            {
                                                sortable.SortMode(GridSortMode.SingleColumn);
                                            })
                                            .Scrollable()
                                            .Events(e => e.Edit("OnEdit"))
                                            .HtmlAttributes(new { style = "height:575px" })
                                            .DataSource(dataSource => dataSource
                                                .Ajax()
                                                .Batch(true)
                                                .Model(model => model.Id(p => p.Id))
                                                .ServerOperation(false)
                                                .Events(events => events.Error("OnError"))
                                                .Read(read => read.Action("ViewProjectons_Read", "ViewManager").Data("OnData"))
                                                .Create(create => create.Action("ViewProjectons_Create", "ViewManager").Data("OnData"))
                                                .Update(update => update.Action("ViewProjectons_Update", "ViewManager").Data("OnData"))
                                                .Destroy(destroy => destroy.Action("ViewProjectons_Destroy", "ViewManager"))
                                            )
                                        )
function OnEdit(e) {
        if (e.model.isNew()) {
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetGridViewColumnCount", "ViewManager")',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ viewId: @Model.Id }),
                dataType: "json",
                success: function (result) {
                    if (result.status != "Success") {
                        var order = e.container.find("input[name=Ordering]");
                        if (order) {
                            order.val(result.message);
                        }                       
                    }
                },
                error: function () {
                    $(".validation-summary-valid").text(result.message);
                }
            });
            e.container.find("input[name=Display]").prop('checked', true);
        }
    }
Stefan
Telerik team
 answered on 06 Jun 2017
3 answers
277 views
We have all our date fields in our Oracle DB defined as "Timestamp with Timezone". We use EF and LINQ to hydrate our VM from the DB. The VM gets populated correctly however when I try to bind a DateTimeOffset attribute to DateTimePicker component it fails.

Can you tell me what could I be doing incorrectly. If this is not supported does someone else have any suggestions that I can try.

Here is what I have so far 

VM
[DisplayName("Inactivate Date")]
public DateTimeOffset? inactivateDate { get; set; }

[DisplayName("Inactivate Date")]public DateTimeOffset? inactivateDate { get; set; }  
public DateTimeOffset? activateDate { get; set; }

[DisplayName("Energizing Date")]
public DateTimeOffset? energizingDate { get; set; }

View Template
<div class="form-group">
    @Html.LabelFor(model => model.energizingDate, new { @class = "control-label col-xs-2" })
    <div class="col-xs-2">
        @Html.EditorFor(model => model.energizingDate)
        @Html.ValidationMessageFor(model => model.energizingDate)
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            @Html.LabelFor(model => model.activateDate, new { @class = "control-label col-xs-4" })
            <div class="col-xs-7">
                @Html.EditorFor(model => model.activateDate)
                @Html.ValidationMessageFor(model => model.activateDate)
            </div>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            @Html.LabelFor(model => model.inactivateDate, new { @class = "control-label col-xs-4" })
            <div class="col-xs-7">
                @Html.EditorFor(model => model.inactivateDate)
                @Html.ValidationMessageFor(model => model.inactivateDate)
            </div>
        </div>
    </div>
</div>


DAO
var x = dao.CONNECTIVITY_UNIT
                        .Join(dao.OP_AREA_ORG, cu => cu.OP_AREA_CODE, oa => oa.OP_AREA_CODE, (cu, oa) => new { CONNECTIVITY_UNIT = cu, OP_AREA_ORG = oa })
                        .Where(w => w.CONNECTIVITY_UNIT.UNIT_TYPE.Equals("SUBSTATION"))
                        .Where(w => w.CONNECTIVITY_UNIT.IS_ACTIVE_FLAG.ToUpper().Equals("Y"))
                        .Where(w => w.CONNECTIVITY_UNIT.ABBR.ToUpper().Equals("BRA"))
                        .Select(c => new SubstationVM
                        {
                            connectivityUnitID = c.CONNECTIVITY_UNIT.CONNECTIVITY_UNIT_ID,
                            energizingDate = c.CONNECTIVITY_UNIT.ENERGIZING_DATE.Value.DateTime,
                            activateDate = c.CONNECTIVITY_UNIT.ACTIVATE_DATE.Value.DateTime,
                            //inactivateDate = c.CONNECTIVITY_UNIT.INACTIVATE_DATE.Value.DateTime,
                            updateTime = c.CONNECTIVITY_UNIT.UPDATE_TMSTMP
                        })
                        .OrderBy(o => o.substationABBR)
                        .ToList();


This fails when it has to find to the DateTimePicker component. I tried to bind it to plain old TextBox and it works fine.

What am I missing.
Stefan
Telerik team
 answered on 06 Jun 2017
5 answers
491 views

Hello,

If I have a grid which fills more than the heigth of the screen, (if the grid doesn´t fill the whole height it works fine) for some reason when I click on the grids buttons it makes an annoying scroll to the top. It only happens in google chrome.

I attach a picture

 

Thank you

Stefan
Telerik team
 answered on 06 Jun 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
Window
ListView
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
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
AICodingAssistant
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
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Bronze
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
Bronze
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?