Questions on UI for ASP.NET MVC Forum

1 answer

76 views

How to style web app with consistent Kendo look/feel

How can I style my web application to have a consistent look and feel?

Most places I used the kendo controls (Kendo helpers) however there are some places in my application where I've had to use the standard html helpers or just the regular markup.

In those cases I would the appearance of the Kendo style. (Checkboxes, textboxes, etc).

How can I accomplish this?

General Discussions

answered on 29 Aug 2016

3 answers

616 views

grid.saveRow(); does not call the controller to update

Hi,

I have a where i need to display data and have a button in each row, on click of the button need to toggle the record with selected property as 0 or 1.

I have used a custom command as i do not need to edit the records. and have used a click on the command, below is the code in the javascript method called in the click. But this makes the row editable and then updates the record but there is no post done to the controller, i have set the Update and Create event both. Please can you help and let me know if this is the current way of doing it.

columns.Command(command =>

{

command.Custom("Set").Click("onSetActive").HtmlAttributes(new { @className = "k-icon k-update", @title = "Set" });

command.Custom("Unset").Click("onUnsetActive").HtmlAttributes(new { @className = "k-icon k-cancel", @title = "Unset" });

}).Width(145);

......

.Create(update => update.Action("Update", "My"))
.Read(read => read.Action("Read", "My"))
.Update(update => update.Action("Update", "My"))

function onSetActive(e)

{

e.preventDefault();

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

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

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

grid.editRow(row);

dataItem.Selected = 1;

setTimeout(function () {

grid.saveRow();

});

}

Grid

answered on 29 Aug 2016

1 answer

135 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

DatePicker

answered on 26 Aug 2016

4 answers

571 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

181 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

899 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

518 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

455 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

840 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

DatePicker

answered on 26 Aug 2016

1 answer

406 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