Questions on UI for ASP.NET MVC Forum

1 answer

89 views

Hello,

I have a problem. I have three Kendo components that have the same code, but only one of them is clickable.

Here is the code :

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.Collections.Generic.List<System.Collections.Generic.List<IntranetMVC.Models.Vehicule>>>" %>

<script src="<%= Url.Content("~/Scripts/Entrees_Sorties/VehiculesEnAttente.js") %>" type="text/javascript"></script>

<br />
<div class="tabKendo" style="text-align:center">

<table style="font-size:80%; border-collapse : collapse; border-spacing : 2px; ">
<tr>
<td>
<h3>Hier</h3>
</td>
<td>
<h3>Aujourd'hui</h3>
</td>
<td>
<h3>Demain</h3>
</td>
</tr>
<tr>
<td>

<% Html.Kendo()
.Grid<IntranetMVC.Models.Vehicule>()
.Name("Gd_Hier")
.BindTo(Model[0])
.Events(e => e
.Change("OnVehiculeArrive_va"))
.Columns(columns =>
{
columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");
columns.Bound(c => c.NomTransporteurPrevu)
.Width(100)
.ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
.Title("Transporteur");
})
.HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Sort(sort => sort.Add("sHeurePrevue").Ascending()))
.Render();

%>
</td>
<td>


<% Html.Kendo()
.Grid<IntranetMVC.Models.Vehicule>()
.Name("Gd_Today")
.BindTo(Model[1])
.Events(e => e
.Change("OnVehiculeArrive_va"))
.Columns(columns =>
{
columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");
columns.Bound(c => c.NomTransporteurPrevu)
.Width(100)
.ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
.Title("Transporteur");
})
.HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Sort(sort => sort.Add("sHeurePrevue").Ascending()))
.Render();
%>
</td>
<td>

<% Html.Kendo()
.Grid<IntranetMVC.Models.Vehicule>()
.Name("Gd_Demain")
.BindTo(Model[2])
.Events(e => e
.Change("OnVehiculeArrive_va"))
.Columns(columns =>
{
columns.Bound(c => c.sHeurePrevue).Width(50).Title("Heure");
columns.Bound(c => c.NomTransporteurPrevu)
.ClientTemplate("#= data.NomTransporteur.substring(0,14) #")
.Width(100)
.Title("Transporteur");
})
.HtmlAttributes(new { style = "height: 464px; width: 180px; margin:5px; font-size:130%" })
.Sortable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Sort(sort => sort.Add("sHeurePrevue").Ascending()))
.Render();
%>
</td>
</tr>
</table>
</div>

I don't have any idea why, but only the first component is clickable (the one under "hier" on the screenshot I joined).

General Discussions

answered on 17 Feb 2016

4 answers

1.4K+ views

ambiguous bindto

Hi,

I'm trying to create a dropdown into a gridview, and I have tried lots op things.
the thing I'm stuck with now is this error

"The call is ambiguous between the following methods or properties: 'Kendo.Mvc.UI.Fluent.DropDownListBuilder.BindTo(System.Collections.Generic.IEnumerable<Kendo.Mvc.UI.DropDownListItem>)' and 'Kendo.Mvc.UI.Fluent.DropDownListBuilder.BindTo(System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>)'"

in the Bindto I have a list of items which I load from the viewbag.

But I can't get pass this error.
do U need to unreference something?
thank you.

DropDownList

answered on 16 Feb 2016

1 answer

115 views

How to prevent editor from closing - dynamically prevent

I'm using telerik grid popup edit mode. when error occurs I want to prevent closing editor.

Here is the code; it works fine

var grid = $("#popupGrid").data("kendoGrid");

But I want to call dynamically find the grid.

I found the below the code. But It's not working:

<p>var gridId = e.sender.options.table.parent('div')[0].id;<br> var grid = $("#" + gridId).data("kendoGrid");</p><p></p>

e.sender.options.table =null.

how can I do this?

Grid

answered on 16 Feb 2016

6 answers

764 views

impossible to display the color choosen by color picker in kendo grid

Hello,

I have a grid with a colorpicker, when i choose the color from the palette I have the hex color code displayed instead of the color.

here is my TemplateEditor that i called QTPStatusEditor:

@model string

@(Html.Kendo().ColorPickerFor(m=>m)

.Name("Status")

.Palette(new[] { "rgba(255, 255, 255, 1)", "rgba(0, 204, 0, 1)", "rgba(255, 51, 51, 1)", "rgba(255, 201, 14, 1)" })

.Columns(4)

)

And here is My Grid:

@(Html.Kendo().Grid<Volvo.Qarma.MVCWebUIComponent.Models.Views.ProposedQToolViewModel>()

.Name("QTPGridItems_#=Id#")

.ToolBar(toolbar => toolbar.Template(@<text>

<div class="toolbar">

<input type="button" id="SaveProposedQTools" class="icon save k-grid-save-changes" value="@ScreeningResource.Screening_TreatmentPlan_SaveProposedQTools" />

</div>

</text>))

.Columns(columns =>

{

columns.Bound(o => o.RefQTool.Name).Title("Pro-active actions");

columns.Bound(o => o.Responsable).Title("Responsible");

columns.Bound(o => o.QtoolLeader).Title("Qtool Leader");

columns.Bound(o => o.Location.LongName).EditorTemplateName("LocationListEditor").Title("Location");

columns.Bound(o => o.Status).EditorTemplateName("QTPStatusEditor").Title("Status");

columns.Bound(o => o.PlannedStartDate).EditorTemplateName("PlannedStartDateEditor").Title("Planned start date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.PlannedEndDate).EditorTemplateName("PlannedEndDateEditor").Title("Planned End date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.LastUpdateDate).EditorTemplateName("LastUpdateDateEditor").Title("Last Update Date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.LinkToDocument).Title("Link To Document");

columns.Bound(o => o.Comment).Title("Comment");

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(10)

.Read(read => read.Action("QtpGridSelectedQtools", "QTP", new { itemId = "#=Id#" })

.Data("function() { return getCommodityID('QTPGridItems_#=Id#');}"))

.Create(create => create.Action("Create_TreatmentPlan", "Screening", new { itemId = "#=Id#" }))

.Update(update => update.Action("Update_TreatmentPlan", "Screening", new { itemId = "#=Id#" }))

.Model(model =>

{

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

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

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

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

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

model.Field(p => p.Location).Editable(true).DefaultValue(ViewData["defaultLocation"] as LocationsViewModel);

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

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

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

model.Field(p => p.Status);

})

)

.Selectable()

.Pageable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.ToClientTemplate()

)

I have seen in some examples that i need to add .ClientTemplate("<div style='background-color: #=Status#;padding:10px;'> </div>"); to :

columns.Bound(o => o.Status).EditorTemplateName("QTPStatusEditor").Title("Status").ClientTemplate("<div style='background-color: #=Status#;padding:10px;'> </div>");

But When I dothat I get a javascript error : Uncaught ReferenceError : Status is not defined that you can see also in attached files. and the line is no more displayed in the grid.

you can also see the result i get in attached files.

Thank you in advanced for your help

Regards,

ColorPicker

answered on 16 Feb 2016

1 answer

127 views

Continual high CPU utilisation with VS extensions

I run VS2015 and Kendo ASP.NET MVC on a Parallels VM (2 CPUs). I have found that my build times had increased from 1 minute to around 10 minutes and the CPU was running with 50% utilisation (i'm guessing one core at 100%) continuously even just in the IDE with no activity.

Disabling the VS extensions seems to solve the issue (but is not obviously what I'd like to do).

Is this behaviour to be expected?

Thanks

Richard

Installer and VS Extensions

answered on 16 Feb 2016

2 answers

426 views

Date pickers on nested DateTime in Grid : It doesn't change displaying date in grid

Hello,

I have a grid that use the following ViewModel :

public class TrackRowViewModel

{

public long Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public MilestoneModel ms1 { get; set; }

public MilestoneModel ms2 { get; set; }

public MilestoneModel ms3 { get; set; }

public TrackRowViewModel() { }

}

witch use a MilestoneModel :

public class MilestoneModel

{

public long Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public DateTime Date { get; set; }

}

I would like to display the date properly in the cells . And use datepicker to change it.

So i tried many way to do it, but the most revelant was Client template and EditorTemplate (ms1)

@(Html.Kendo().Grid<Volvo.Qarma.MVCWebUIComponent.Models.Views.TrackRowViewModel>()

.Name("gridproj")

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.Model(model =>

{

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

model.Field(o => o.ms1).DefaultValue(

ViewData["defaultms"] as MilestoneModel);

model.Field(o => o.ms2).DefaultValue(

ViewData["defaultms"] as MilestoneModel);

model.Field(o => o.ms3).DefaultValue(

ViewData["defaultms"] as MilestoneModel);

})

.Read(r => r.Action("GetProjectsAllTracksObjectFromProject", "Project"))

.Create(c => c.Action("Editing_Create", "TracksAndMilestones"))

.Update(u => u.Action("Editing_Update", "TracksAndMilestones"))

.Destroy(d => d.Action("Editing_Destroy", "TracksAndMilestones"))

)

.Columns(columns =>

{

columns.Bound(o => o.Name);

columns.Bound(o => o.Description);

columns.Bound(o => o.ms1).Title("PCI").HtmlAttributes(new { @class = "color-PCI" }).EditorTemplateName("MilestoneDateEditor").ClientTemplate("#= kendo.toString(kendo.parseDate(ms1.Date, 'yyyy-MM-dd HH:mm:ss'), 'MM/dd/yyyy') #");

columns.Bound(o => o.ms2).Title("FeG").HtmlAttributes(new { @class = "color-Feg" }).EditorTemplateName("MilestoneDateEditor").ClientTemplate("#= kendo.parseDate(ms2.Date, 'yyyy-MM-dd HH:mm:ss') #");

columns.Bound(o => o.ms3).Title("CSG").HtmlAttributes(new { @class = "color-CSG" }).EditorTemplateName("MilestoneDateEditor").ClientTemplate("#=ms3.Date#");

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Navigatable()

.Sortable()

.Scrollable()

)

--The default value of fields ViewData["defaultms"] is an empty MilestoneModel object--

and the Editor as :

@model MilestoneModel

@(Html.Kendo().DatePickerFor(m => m.Date)

.Name("MilestoneDate")

.Format("MM/dd/yyyy")

)

My Problem is when change the date with the timepicker editor, the date isn't displaying on the grid properly .

Do i miss something ?

Thank you in advanced for your help

Regards,

DatePicker

answered on 15 Feb 2016

1 answer

257 views

Using editor for plain text capture

Would like to use the editor to capture plain text. I cannot see a way to have the editor return plain text as opposed to HTML. I have turned off the toolbar but it still wants to return HTML.

Jim

Editor

answered on 15 Feb 2016

2 answers

3.8K+ views

Date formatting in Grid

Hi Everybody,

I have some questions about the way the ClientTemplates are working inside the Grid.
Today I have the following code.
Which are working fine.

@(Html.Kendo().Grid<Felix.DomainModel.BusinessEntities.ManuallyCreatedEntities.LandsforeningerModel>

().BindTo(Model.Countries).Name("Countries")

.ToolBar(configurator =>

{

configurator.Create();

})

.Editable(e => e.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

.Events(e => e.Edit("onEditItem")).Events(e => e.Save("onSaveItemLandsForening"))

.Columns(columns =>

{

columns.Bound(m => m.Name).Encoded(true).EditorTemplateName("RelatedCountries").ClientTemplate("#= Name #" +

"<input type='hidden' name='Countries[#= indexCountries(data)#].Name' value='#= Name#' />" +

"<input type='hidden' name='Countries[#= indexCountries(data)#].Id' value='#= Id #' />"

);

columns.Bound(m => m.Startdate).Width(150).Encoded(true).ClientTemplate("#= kendo.toString(kendo.parseDate(Startdate,'dd/MM/yyyy'), '" + "dd-MM-yyyy" + "') #" +

"<input type='hidden' name='Countries[#= indexCountries(data) #].Startdate' value='#= Convert2StringDate(Startdate) #' />").Format("{0: dd-MM-yyyy}");

columns.Command(m => m.Destroy()).Width(100);

})

.DataSource(dataSource => dataSource.Ajax()

.Model(model =>

{

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

})

))

My question: is it possible to allow more formats in the input field, like ddMMyy and ddMMYYYY and not only dd-MM-YYYY.

How should this be done?

Grid

answered on 15 Feb 2016

3 answers

717 views

KendoGrid column as dropdown

Hello,

I have been through all samples but non match the Scenario i have. My Kendo grid is inside a vertical splitter and the columns are dynamic. So in datagrid read Event the Controller picks a variable select stetement and then the columns and column Header names are stored in viewbag and in view the columns get bound to viewbag and datab\able returned from controlller method. One column should be editable as Dropdown and rest all not editable.

Attached is my view code and this is the column i am trying to use adropdown editortemplate and when i add this editable line i get crash

.Editable(editable => editable.Mode(GridEditMode.InCell))

Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.

if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
                       // columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);

                    }

My editortemplatelooks like

@(Html.Kendo().DropDownList().Name("Obj_AddressType")
            .DataTextField("Text")
                 .DataValueField("Value")
       .BindTo(new List<SelectListItem>
                   {
                        new SelectListItem {Text = "Kunde", Value = "0"},
                       new SelectListItem {Text = "Kunde", Value = "1"},
                       new SelectListItem {Text = "Rechnungsadresse", Value = "2"}
                   }))

and view code

rightverticalPanes.Add()
             .HtmlAttributes(new { id = "bottom-pane" })
             .Resizable(true)
             .Collapsible(false)
             .Content(@<text>
                        @(Html.Kendo().Grid(Model)
    .Name("Grid_ObjAdress")
     .DataSource(dataSource1 => dataSource1
                    .Ajax()
                    .PageSize(100)
                    .Model(model1 =>
                    {
                        if (Model != null)
                        {
                            foreach (System.Data.DataColumn ocolumn in Model.Columns)
                            {
                                if( ocolumn.ColumnName == "Obj_AddressType"){
                                    model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(true);
                                }else{
                                model1.Field(ocolumn.ColumnName, ocolumn.DataType).Editable(false);
                                }
                            }
                        }
                    })
                    .Read(read => read.Action("ObjectAdress_Read", "ObjektActivity"))
.ServerOperation(false)
                     )
                      .Resizable(resize => resize.Columns(true))
    .Columns(columns =>
    {
        if (ViewBag.ObjAdressHeader != null)
        {
            for (int k = 0; k < ViewBag.ObjAdressHeader.GetLength(0); k++)
            {
                if (ViewBag.AdrVisibleCols[k] == "0")
                {
                    columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Visible(false);
                }
                else
                {
                    if (ViewBag.ObjAdressHeader[k, 0] == "Obj_AddressType"){
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).EditorTemplateName("AvailableValues").Width(70);
                       // columns.ForeignKey("Obj_AddressType", (System.Collections.IEnumerable)ViewBag.AddressTypes, "Value", "Text").EditorTemplateName("AvailableValues").Title("Typ").Width(70);

                    }
                    else
                    {
                        columns.Bound(ViewBag.ObjAdressHeader[k, 0]).Title(ViewBag.ObjAdressHeader[k, 1]).Width(120);
                    }
                }
            }
        }
    })
         .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
                     .Sortable()
                     .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")
                                              ))
                                          )
                                      .Groupable()
                                      .Reorderable(r => r.Columns(true))
                            .Resizable(r => r.Columns(true))
                                      )

Thanks

Anamika

Grid

answered on 15 Feb 2016

6 answers

284 views

Get resource on single click

I am working on single click for ASP.NET MVC scheduler. But the problem is when the custom event editor pop ups, there is only startdate and endate. How can I get other resource such as TechName?

@(Html.Kendo().Scheduler<TaskViewModel>()

.Name("schedulerJob")

.Date(DateTime.Today)

.StartTime(7, 0, 0)

.Height(700)

.EventTemplate("#if(title == 'Reservation') {#" +

"<div class='reservationClass' style='float: left;'>" +

"<img src='http://www.alegoo.com/images05/newyear/calendar-b11/015/calendar-icon-15.png' style='width:22px;' />" +

"#= title #" +

"</div>" +

"#}" +

"else {#" +

"<div class='jobClass' style='float: left;'>" +

"<img src='http://www.gratispos.com/wp-content/uploads/2011/06/User-Group-Home.png' style='width:22px;' />" +

"#= title #" +

"</div>" +

"#}#")

.Views(views =>

{

views.TimelineView(v => v.Selected(true));

})

.Events(e =>

{

e.Edit("schedulerJob_edit");

e.Navigate("schedulerJob_navigate");

e.Remove("schedulerJob_remove");

e.Save("schedulerJob_save");

e.DataBinding("schedulerJob_dataBinding");

e.DataBound("schedulerJob_dataBound");

e.MoveEnd("schedulerJob_moveend");

e.ResizeEnd("schedulerJob_resizeend");

})

.Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical))

.Resources(resource =>

{

resource.Add(m => m.TechName)

.Title("Techs")

.Name("Techs")

.DataTextField("TechName")

.DataValueField("emm_code")

.DataSource(d => d.Read("Techs", "JOBS"));

})

.DataSource(d => d

.Model(m =>

{

m.Id(r => r.emm_code);

})

.ServerOperation(true)

.Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter"))

.Create("JobSchedule_Create", "JOBS")

.Update("JobSchedule_Update", "JOBS")

.Destroy("JobSchedule_Delete", "JOBS")

)

.Editable(e => {

e.TemplateId("schedulerJobEditor").Window(w => w.Title("Time Slot Reservation").Name("schedulerJobEditor"));

})

)

Custom editor code

<script id="schedulerJobEditor" type="text/x-kendo-template">

<div>

<table style="border-collapse: initial;">

<tr>

<td align="right">

<label for="Start">Job Date:</label>

</td>

<td>

<input type="text" id="jobDateTextbox" class="k-input k-textbox" name="start" data-bind="value: StartViewDate" style="border-width: 0px;" disabled="disabled">

</td>

<td align="right">

<label for="ReservedDate">Reserved On:</label>

</td>

<td>

<input type="text" id="reservedDateTextbox" class="k-input k-textbox" name="reservedDate" data-bind="value: ReservationViewDate" style="border-width: 0px;" disabled="disabled">

</td>

</tr>

<tr>

<td align="right" width="25%">

<label for="StartViewTime">Job Time:</label>

</td>

<td>

<input type="text" id="jobTimeTextbox" class="k-input k-textbox" name="start" oninput="JobTimeInput()" onblur="JobTimeBlur()" data-bind="value: StartViewTime">

<input type="hidden" id="keyFlagTextbox" class="k-input k-textbox" name="keyflag" data-bind="value: KeyFlag">

</td>

<td align="right" width="14%">

<label for="ReservedTime">Time:</label>

</td>

<td>

<input type="text" id="reservedTimeTextbox" class="k-input k-textbox" name="reservedTime" data-bind="value: ReservationViewTime" style="border-width: 0px;" disabled="disabled">

</td>

</tr>

<tr>

<td align="right">

<label for="Duration">Duration:</label>

</td>

<td>

<select name="duration" id="durationDropDownList" onchange="DurationChange()" data-bind="value: Duration">

@foreach (var dur in (List<ServicePROWeb.ServiceProWCFService.TypeMstr>)HttpContext.Current.Session["DurationList"])

{

<option value='@dur.ty_desc'>@dur.ty_desc</option>

}

</select>

</td>

<td align="right">

<label for="ReservationID">Reservation ID:</label>

</td>

<td>

<input type="text" id="reservationIDTextbox" class="k-input k-textbox" name="reservationID" data-bind="value: ReservationID" style="border-width: 0px;width:100%" disabled="disabled">

</td>

</tr>

<tr>

<td align="right">

<label for="TechName">Tech:</label>

</td>

<td colspan="3">

<input type="text" class="k-input k-textbox" name="techName" data-bind="value: TechName" disabled="disabled">

</td>

</tr>

<tr>

<td align="right">

<label for="Title">Reason for Reservation:</label>

</td>

<td colspan="3">

<input type="text" class="k-input k-textbox" name="title" data-bind="value: title" style="width: 60%;">

</td>

</tr>

<tr>

<td>

</td>

<td colspan="3">

<input type="checkbox" id="chkRecurring" data-bind="value: IsRecurring" onmouseup="toggleRecurringDiv()">Recurring Reservation

</td>

</tr>

</table>

<br />

<div id="divRecurring" style="width: 95%; margin-left: 5px; padding: 10px;display: none;">

<input type="radio" class="rdoTech" name="rdoTech" value="c" checked="checked">Current Tech

<input type="radio" class="rdoTech" name="rdoTech" value="a" style="margin-left: 15px;">All Techs

<span style="margin-left: 24px;">Every: </span><input type="text" id="everyTextbox" class="k-input k-textbox" name="recurrenceNumber" data-bind="value: Frequency">

<input type="radio" class="rdoRecurrenceFrequency" name="rdoRecurrenceFrequency" value="d" checked="checked" style="margin-left: 15px;">Day(s)