Questions on UI for ASP.NET MVC Forum

1 answer

99 views

DatePicker masked for MVC

Hi, is it posible to have

@(Html.Kendo().DatePickerFor(model => model.BeginDate)

with a masked input?

I want to have the option to write the date but with a mask like 00/00/0000

Thanks

Date/Time Pickers

answered on 26 Aug 2016

4 answers

522 views

kendo ui grid batch edit - auto select cell on click

I am using the latest kendo Grid script client with batch edit. Here is my code:
$("#Contract").kendoGrid({
columns: [
{
field: "SomeField",
}],
editable: true,
scrollable: true,
navigatable: true,
selectable: "cell"

How do I make the cell selected when users click on a cell?
I saw a demo at http://demos.telerik.com/aspnet-mvc/razor/grid/editingbatch and wanted to do the same but I could not figure which setting is needed. For editable setting, I tried 0,1,and 2 but it does not seem to work like telerik grid.

Grid

answered on 26 Aug 2016

3 answers

143 views

Exchange Web Services API and Scheduler

Is there any information on using the Scheduler with the Microsoft Exchange Web Services API?

It seems like it would be a good fit to use calendar information from Exchange Services.

Scheduler

answered on 26 Aug 2016

3 answers

866 views

Disable paging when only 1 page

Hi all,

I was wondering if it was possible to disable/hide the paging feature dynamically when only 1 page is shown, i.e. PageSize is set to 100, but the data only consists of 70 rows.

Thanks!

Lennart

Grid

answered on 26 Aug 2016

1 answer

494 views

Scrolling Grid vertically but not horizontally

Hi, I would like to scrolling a Kendo UI MVC Grid vertically but not horizontally.

.Scrollable(scroll => scroll.Height(80).Enabled(true)) make it scrolls vertically and horizontally.

Grid

answered on 26 Aug 2016

1 answer

430 views

Change popup title

Hi,

I'm using kendo ui scheduller custom editor template.

How can I change the popup title from defaut (event) to (My Task Name) ?

See attached file

Best regards

Scheduler

answered on 26 Aug 2016

1 answer

783 views

DatePicker masked for MVC

Hi, is it posible to have

(Html.Kendo().DatePickerFor(model => model.BeginDate)

with a masked input?

I want to have the option to write the date but with a mask like 00/00/0000

Thanks

Date/Time Pickers

answered on 26 Aug 2016

1 answer

380 views

kendo ui Grid with upload on a toolbar within kendo pop up window

Hi Guys recently i have been battling with adding a kendo grid with upload on a toolbar within a kendo ui window. I have a command button on the main grid which when clicked it shows the window that has a grid inside. Please see below the code,

colums.Command(cmd =>

{

cmd.Edit();

cmd.Custom("Upload images").Click("UploadImages");

//cmd.Custom("Upload images").SendDataKeys(true).Click("Upload images");

}).Title("Actions");

I have this code on the main grid, when clicked it shows the pop window

and the code for the window,

@{Html.Kendo().Window().Name("AuditPic")

.Title("AuditPictureResult Image")

.Visible(false)

.Modal(true)

.Draggable(true)

.Width(800).Height(800)

.Content((Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()

.Name("Audit")

.Columns(columns =>

{

columns.Bound(b => b.AuditResultPictureID);

columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/Images/") + "\\#=FileName\\#' height='62' width='62'/>");

columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden; text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");

columns.Bound(b => b.ReplID);

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

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(m => m.AuditResultPictureID);

})

.Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))

.Destroy(update => update.Action("FilesDestroy", "Home"))

)).ToHtmlString()

).Render();

}

the function for the pop up and reading the data but it doesnt show any data on the grid

function UploadImages(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

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

@* wnd.refresh({

url: '@Url.Action("ConfigurationItem_Read","Home")',

data: { SiteAuditID: dataItem.SiteAuditID, QuestionID: dataItem.QuestionID }

});*@

// wnd.content(detailstemplate(dataItem));

wnd.center().open();

$.ajax({

type: "POST",

data: { SiteAuditID: JSON.parse(dataItem.SiteAuditID), QuestionID: JSON.parse(dataItem.QuestionID) }, //gets the value of the field "Department"

url: '@Url.Action("ConfigurationItem_Read","Home")',

success: function (result) {

// console.log(result);

// var DepartmentID = JSON.parse(model.DepartmentID);

//arg.model.set("field name as string", "value as appropriate data type");

//alert("success:" + DepartmentID);

}

})

}

Grid

answered on 25 Aug 2016

2 answers

74 views

Keep red dirty indicator when create or update action fails

Hi!

When the user updates a field of a new (create action) or existing (update action) data record, a litte red flag is shown to indicate that the changes haven't been sent to the server yet.

How can I make these flags keep staying after the user clicked on "Save changes" in case a server side error (e.g. validation) occurred, and therefore to signal the user that he/she has to correct its changes and click on "Save changes" again?

(I am working with DataTables)

Best,
Kaan

Grid

answered on 25 Aug 2016

8 answers

423 views

Select contents on field select / tab

During testing of our application, user feedback has requested that when using a grid with numeric text-boxes with in-line editing, the values are selected when the user enters a field, or tabs to the next one.

With other text controls this is default behaviour, but not with the numeric text box. (a huge failing of this control).

I have tried the 'solution' proposed in the documentation (shown below)

$(function () {

//wire focus of all numerictextbox widgets on the page

$("input[type=text]").bind("focus", function () {

var input = $(this);

clearTimeout(input.data("selectTimeId")); //stop started time out if any

var selectTimeId = setTimeout(function () {

input.select();

});

input.data("selectTimeId", selectTimeId);

}).blur(function (e) {

clearTimeout($(this).data("selectTimeId")); //stop started timeout

});

})

However, the page is very complex, and this doesn't work. It looks as though the data is selected for a split second, but then becomes unselected again.

The Grid is in a template, defined as:-

<script id="KPITrackerTemplate" type="text/kendo-tmpl">

<div style="font-size:x-small;">

@(Html.Kendo().Grid<CIPAndRecovery.Models.vKPI_Tracker>()

.Name("Data_#=Id#")

.HtmlAttributes(new { style = "font-weight:normal" })

.Events(e => e.DataBound("expandAll"))

.Events(e => e.DataBound("onKPITracker_Databound"))

.Columns(c =>

{

c.Bound(o => o.Id).Title("Id").Hidden(true);

c.Bound(o => o.KPI_Id).Title("AccountDetail Id").Hidden(true);

c.Bound(o => o.TrackerType).Title("Type").Width(60);

c.Bound(o => o.M1).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M2).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M3).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M4).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M5).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M6).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M7).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M8).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M9).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M10).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M11).EditorTemplateName("DecimalMinus");

c.Bound(o => o.M12).EditorTemplateName("DecimalMinus");

c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90);

})

//.ToolBar(toolbar =>

//{

// toolbar.Create();

// //toolbar.Save().SaveText(" ").Text(" ").CancelText(" ");

//})

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

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.RequestEnd("onKPITrackerChange(\"Data_#=Id#\")"))

//.Events(e => e.RequestStart("requestStartHandler(\"grid\")"))

//.Batch(true)

.PageSize(3)

.Sort(s=>s.Add(p=>p.SortOrder))

.Model(m =>

{

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

m.Field(e => e.TrackerType).Editable(false);

})

.Read(read => read.Action("GetKPITrackerList", "PlanActions", new { KPIId = "#= Id #" }))

.Create(create => create.Action("InsertKPITracker", "PlanActions", new { KPIId = "#= Id #" }).Type(HttpVerbs.Post))

.Update(update => update.Action("UpdateKPITracker", "PlanActions").Type(HttpVerbs.Post))

//.Destroy(delete => delete.Action("DeleteKPITracker", "PlanActions"))

)

//.Pageable()

//.Groupable()

.ToClientTemplate()

)

</div>

</script>

The DecimalMinus is defined in the editorTemplates folder as:-

@model decimal?

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

.HtmlAttributes(new { style = "width:100%" })

.Spinners(false)

.Decimals(2)

)

How can I achieve the desired behaviour?

Thanks

NumericTextBox

answered on 25 Aug 2016