Questions on UI for ASP.NET MVC Forum

3 answers

313 views

Telerik ASP.NET MVC Application doesn't show up in VS2017

Hi,

Please look at the screenshot of the Progress Control Panel and Visual Studio 2017 and let me know why Telerik ASP.NET MVC Application is not showing up in Visual Studio? Do I need to download anything else in the control panel for it to show up?

Thank you.

General Discussions

answered on 30 Apr 2018

2 answers

1.3K+ views

Clear ComboBox programmatically

Is it possible to trigger the clear button on a ComboBox?

I'm using $("#ComboBox").data("kendoComboBox").text(''); and $("#ComboBox").data("kendoComboBox").select(-1); to "clear" the input, but the X button is still present when you hover over the input.

Thanks

ComboBox

answered on 27 Apr 2018

5 answers

666 views

Can't get Server-Side Paging to work with AJAX Binding

I am attempting to enable server-side filtering for my ASP.NET MVC Grid. I have tried every tutorial, walkthrough, and blog post I could find, but with no success.

I would like to, on page load, call out to my data source and return just the first 25 records, but alert the grid of the total record count so that it can display the appropriate number of pages. Here is my Grid Razor code:

@(Html.Kendo().Grid<ViewModel>().Name("MyGrid").EnableCustomBinding(true).Columns(columns =>

{

columns.Bound(c => c.FieldA);

columns.Bound(c => c.FieldB);

columns.Bound(c => c.FieldC);

columns.Bound(c => c.FieldD);

}).ClientDetailTemplateId("DetailsTemplate").HtmlAttributes(new {@class = "myClass"}).DataSource(dataSource => dataSource

.Ajax()

.Read(read => read

.Action("Data_Read", "MyController"))

).AutoBind(false).Events(events =>

{

events.DetailCollapse("setDetailIndicatorToExpand");

events.DetailExpand("setDetailIndicatorToCollapse");

events.DataBound("replaceDetailTemplateIndicatorStyle");

}).Pageable().Deferred())

This was done by following this article: http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/binding/custom-binding#configuration-Apply

I have tried many variations of this, including removing AutoBind(). As far as I can tell, part of my issue is that I am not defining what the PageSizes are; whenever I set the PageSizes value I get an error of "Uncaught TypeError: r._query is not a function".

No matter what I try, the page count is always 0.

From the server-side, I am using the PageSize and Page number from the DataSourceRequest object to pass in as parameters to my data source. I am then returning the following:

var result = new DataSourceResult

{

Data = myData,

Total = 300 // this is dynamic, just hardcoded here as an example

};

return Json(result);

Can someone please assist?

Thank you.

Grid

answered on 26 Apr 2018

1 answer

147 views

How can i have multiple date time picker for each employee while creating event

Hi

i am new in Kendo Scheduler.

I am wondering how to have multiple date time picker for startdate and enddate for each employee while adding event.

currently in kendo schedule there is one start and end date for event, but i want to relate it with individual employee to note timing of each employee in one go,

e.g

while adding an event of type "Staf Meeting"

i want to select timing for each employee. timing could be different for each employee.

can any one help me ?

Scheduler

answered on 26 Apr 2018

1 answer

139 views

Razor to render as image

I am using the Razor wrappers for creating a Gantt chart. I have it displaying without issues, and people are happy. However, I also need to convert it into an image to save locally on the server. I see a lot of places where the JQuery works to save it as an image, but is there a way to render it as an image directly from Razor?

Gantt

answered on 25 Apr 2018

9 answers

1.8K+ views

Adding Custom button to open a partial view in a pop-up window

I haven't found any good examples on this that used the ASP.NET MVC. The button will open up a partial view in a pop-up window. The id field from the grid row needs to be used to pull data for the pop-up window. Does anyone have an example of this using the ASP.NET MVC controls?

So far, I haven't been able to execute the "OpenContractRate" method that I mention in the javascript function below.

Here is what I've tried so far...

Kendo Grid:

@(Html.Kendo().Grid<TMS.Domain.Operations.TIMS.CoreObjects.ContractOrderEvent>()

.Name("ContractDetailOrderEventGrid")

.Columns(columns =>

{

columns.Command(o =>

{

o.Destroy();

o.Edit();

}).Width(100);

columns.Bound(o => o.ContractTypeName).Width(100);

columns.Bound(o => o.OrderLevelFlag).Width(50);

columns.Command(command => command.Custom("Update").Click("ShowRates")).Width(75);

columns.Bound(o => o.InvoiceDescription).Width(100);

columns.Bound(o => o.SourceContainerOwner).Width(100);

columns.Bound(o => o.DestContainerOwner).Width(100);

columns.Bound(o => o.SourceContainerTypeName).Width(100).Title("Src Container Type");

columns.Bound(o => o.DestContainerTypeName).Width(100);

})

.Scrollable(scrolling => scrolling.Enabled(true).Height("250px"))

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

.Sortable(sorting => sorting.Enabled(true))

.Pageable(paging => paging.Enabled(false))

.Resizable(resizing => resizing.Columns(true))

.Filterable(filtering => filtering.Enabled(true))

.Groupable(grouping => grouping.Enabled(true))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.ContractOrderEventId))

.Read(read => read.Action("ReadContractOrderEvent", "ContractGrid", new { contractId = Model.DetailModel.ContractId } ))

.Update(update => update.Action("UpdateContractOrderEvent", "ContractGrid"))

.Destroy(update => update.Action("DestroyContractOrderEvent", "ContractGrid"))

)

Kendo Window:

@(Html.Kendo().Window()

.Name("Rates")

.Title("Rates")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(500)

.Height(500)

)

Javascript function:

<script>

function ShowRates(e) {

var direction = "ContractRateAdmin/OpenContractRate";

var wnd = $("#Rates").data("kendoWindow");

if (!wnd) {

// first click of the button - will automatically fetch the contentUrl

wnd = $("#Rates").kendoWindow({

title: "Rates",

actions: [ "Close"],

content: direction,

width: "800px",

height: "600px",

visible: false,

modal: true

}).data("kendoWindow");

}

wnd.refresh(direction);

wnd.center();

wnd.open();

}

</script>

Controller Action:

[HttpGet, ImportModelStateFromTempData, HttpParamAction]

public ActionResult OpenContractRate()

{

ContractAdminRateModel model = new ContractAdminRateModel();

model.EffectiveDate = DateTime.Now;

// Return the view

return PartialView(Url.Content("~/Views/Admin/Contracts/AdminContractsDetailRates.cshtml"), model);

}

Partial View to show in pop-up window:

@model TMS.MVC.TIMS.Models.Admin.Contract.ContractAdminRateModel

@{

var htmlWidthDefault = "width: 250px;";

}

@using (Html.BeginForm(HttpParamActionAttribute.TIMSActionName, "ContractRateAdmin"))

{

<table>

<tr>

<td><span class="FieldLabel">Effective Date:</span></td>

<td>

@Html.Partial(Url.Content("~/Views/Admin/Contracts/FieldTemplates/ContractDetailRate_EffectiveDate.cshtml"))

</td>

</table>

}

Grid

answered on 24 Apr 2018

1 answer

186 views

Kendo editor values not shownig in pdf

Hi, i have the try version of kendo R1 2018 , when i export to pdf using kendo dom drawing , all elements with its values show, except the kendo editor, it show without values , is there a way to solve this issue ? , i need to show the kendo editor with it values in the pdf.

Editor

answered on 23 Apr 2018

2 answers

103 views

Selecting first item, if initial value does not exist

Here we have my combobox:

@(Html.Kendo().ComboBox()

.Name("depots")

.DataTextField("Text")

.DataValueField("Value")

.Height(500)

.Filter(FilterType.Contains)

.Events(ev =>

{

ev.Change("onDepotsChangeEvent");

ev.DataBound("onDepotsDataBoundEvent");

ev.Select("onDepotsSelectEvent");

})

.HighlightFirst(true)

.Suggest(true)

.Value(SOME INITIAL VALUE)

.HtmlAttributes(new { style = "width:550px; max-width:100%;" })

.DataSource(source => source.Custom()

.Group(group => group.Add("Group", typeof(string)))

.Transport(transport => transport

.Read(read =>

{

// Censored ;)

})

)

As you can see, I am setting an initial value with the ".Value(something something". This means that when the combobox loads, the item on the list corresponding to the value, is selected. It works fine as intended.

The problem is when there is not an item with a value corresponding to the initial set value. If that happens, the initial value is shown in the input field of the combobox. After searching around, this is apparently by design and not an error.

What I want to do is, if an item does not exist in the combobox, with the same value as the initial set value, the first item on the list should be selected.

I have searched and searched for days now, with no solution, so any help would be greatly appreciated.

In case it matters, here are the three event methods:

function onDepotsSelectEvent(e) {

if (e.item) {

var dataItem = this.dataItem(e.item.index());

$.post("@Url.Action("SetSelectedDepotSession", "PartialView")", { id: dataItem.Value });

}

function onDepotsChangeEvent(e)

{

if (this.value() && this.selectedIndex === -1) {

this._filterSource({

value: "",

field: this.options.dataTextField,

operator: "contains"

});

this.select(1);

}

function onDepotsDataBoundEvent(e)

{

var widget = e.sender;

if (widget.dataSource.view().length === 0) {

widget.text("");

widget.enable(false);

}

ComboBox

answered on 23 Apr 2018

2 answers

364 views

Popup Grid Edit Mode with timepicker

I'm trying to use GridEditMode.PopUp to enter times. I currently get the full date in a text box (see pic)

I originally used InLineEditing and was able to use the following:

columns.Bound(c => c.Arrival).Format("{0: HH:mm}").EditorTemplateName("TimeEdit");

This however does not work for PopUp editing. I found out that in order to make the "Name" column not editable in PopUp editing I had to create the following function in the view:

function EditGrid(e) {
if (!e.model.isNew()) {
$('#Name').attr('readonly', 'readonly');
}
}

I am guessing in this function is where I may be able to set the Arrive box to a time picker, but I can't find anything to work.

Grid

answered on 23 Apr 2018

1 answer

2.0K+ views

EmailAddress data annotation validation

Hi there

I have a model with a property marked up like this.

[Required]

[EmailAddress]

[Display(Name = "Username", ResourceType = typeof(MyResource))]

public string Username { get; set; }

The display name of the username property maps to a string "Email".

When i leave the field in the grid blank and update the row, a validation message is shown that correctly says "Email is required."
If i provide an invalid email address and update the row, a validation message is shown that incorrectly says "Username is not valid email"

I have tried applying my own validation message to the Username property with the following modifications to the model.

[Required]

[EmailAddress(ErrorMessageResourceName = "InvalidEmail", ErrorMessageResourceType = typeof(MyResource))]

[Display(Name = "Username", ResourceType = typeof(MyReouce))]

public string Username {get;set;}

Both of the above scenarios produce the same results with the above modifications.

What should the expected behavior be for the email validation message? (e.g use property name or display name attribute)

How do i provide a custom message for the email validation?

Grid

answered on 20 Apr 2018