Questions on UI for ASP.NET MVC Forum

3 answers

75 views

Anyone know how to set the drawer control to not activate on swipe? I can't seem to set the SwipeToOpen property to false... Is this how you are supposed to do it?

@(Html.Kendo().MobileDrawer()
.Name("my-drawer")
.SwipeToOpen(false)

...

Drawer (Mobile)

answered on 12 Oct 2015

1 answer

89 views

Performance issue with more then 40 tasks

What is the maximum of Tasks in the Gantt Chart?

I notice a performance drop when tasks count is above 40...

Gantt

answered on 12 Oct 2015

1 answer

3.4K+ views

Disable Grid Column (w/template) in edit mode only

I am trying to disable a column which uses a template in a grid. I would like to disable it ONLY if the grid is in Edit mode. I am trying the following as shown below. Can anyone shed some light as to why this does not work and what I need to to do to make this work? Thanks!

@(Html.Kendo().Grid<AMP.Security.Models.UserAccountDto>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Account).ClientTemplate("#=Account.Name#");

//columns.Bound(p => p.AccountRoleName);

columns.Bound(p => p.AccountClientName);

columns.Bound(p => p.AccountAdmin);

columns.Command(command => { command.Edit(); command.Destroy();

command.Custom("Configure").Click("configAccount");

}).Width(300);

})

.HtmlAttributes(new { style = "height: 400px;" })

.ToolBar(toolbar => { toolbar.Create().Text("Add Account"); })

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

.Events(events => events.Edit("onGridEdit"))

.Sortable()

.Scrollable()

.Selectable(a => a.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))

.DataSource(datasource => datasource

.Ajax()

.Events(events => events.Error("gridError"))

.ServerOperation(false)

.Model(model =>

{

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

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

model.Field(f => f.AccountClientName).Editable(false);

model.Field(f => f.UserId).DefaultValue(Model.UserId);

//model.Field(f => f.AccountRoleId).DefaultValue(ViewData["roledefault"] as int?);

model.Field(f => f.Account).DefaultValue(ViewData["accountdefault"] as AMP.Security.Models.AccountDto);

})

.Read(read => read.Action("UserAccountsRead", "UserProfile", new { userid = Model.UserId }))

.Create(update => update.Action("UserAccountsCreate", "UserProfile"))

.Update(update => update.Action("UserAccountsUpdate", "UserProfile"))

.Destroy(update => update.Action("UserAccountsDestroy", "UserProfile"))

.Sort(sort => sort.Add("AccountName").Ascending())

.PageSize(50)

)

The template for the Account column is defined as:

@using Kendo.Mvc.UI

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

.Name("Account") // Name of the widget should be the same as the name of the property

.DataValueField("AccountId") // The value of the dropdown is taken from the EmployeeID property

.DataTextField("Name") // The text of the items is taken from the EmployeeName property

.BindTo((System.Collections.IEnumerable)ViewData["accounts"])

)

The onGridEdit function is:

function onGridEdit(e)

{

if (e.model.isNew() == false) {

var cell = $('[name="account"]');

cell.attr("readonly", true);

cell.attr("enabled", false)

}

}

Grid

answered on 09 Oct 2015

5 answers

215 views

How to create ActionLink in Title column

I have this little test with the Gantt Control. The chart always contains 4 levels. How can I make the last level to be a ActionLink?

@(Html.Kendo()
.Gantt<TaskViewModel,
DependencyViewModel>((IEnumerable<TaskViewModel>)ViewBag.Tasks,
(IEnumerable<DependencyViewModel>)ViewBag.Dependencies)
.Name("gantt")
.Columns(columns =>
{
columns.Bound(c => c.TaskID).Title("ID").Width(50);
columns.Bound(Html.GetResourceString("Gantt.Title")+"title").Editable(false).Sortable(true);
columns.Bound(Html.GetResourceString("Gantt.Start") + "start").Title(Html.GetResourceString("Gantt.StartTime") + "Start Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:MM/dd/yyyy}").Width(100).Editable(false).Sortable(true);
columns.Bound(Html.GetResourceString("Gantt.End") + "end").Title(Html.GetResourceString("Gantt.EndTime") + "End Time").Format(Html.GetResourceString("Gantt.DateFormat") + "{0:MM/dd/yyyy}").Width(100).Editable(false).Sortable(true);
})

Gantt

answered on 09 Oct 2015

3 answers

559 views

NumericTextBox display:inline-block in html

I have a test page set up for my issue. http://http://www.ipapilot.org/test/zurbkendo.aspx

I know that this is because I am using the zurb foundation framework. When I take out the foundation css the numeric text box displays correctly. With Zurb it is 2 rows high if you will.

I wanted to fix this so I began looking at the css to fix it. Finally I what I have realized is that I believe the kendo javascript is updating the html of the numeric text box element. This overrides ANY css I would want to throw at it to correct the display.

With foundation css the element has display:block in the html

Without foundation css the element has display:inline-block in the html.

What part of the javascript does this? How do I get it to use display:inline-block? I've tried a formreset.css kind of approach where I reset the css for input elements and such but I can't find the secret sauce.

Maybe my analysis is flawed as well. I would appreciate any help in correcting this.

Thanks,

Trevor

NumericTextBox

answered on 08 Oct 2015

1 answer

128 views

Operators for filter

Hello again. What operators are available for the filters? so far i know of eq and neq. Are there any other?

var filter = {

logic: logic1,

filters: $.map(selectedObj, function (value) {

return {

operator: "eq",

field: "RoomId",

value: value

};

})

};

Scheduler

answered on 08 Oct 2015

1 answer

951 views

Grid within a razor foreach loop

Here is my dilema,

I have a foreach loop over a simple model like this

Model

fund list

fundint int,

fundname varchar

etc.

i am looping through a list of funds above and would like to have a Kendo grid populated with data from the controller for each fundint in the foreach.

<table>

@foreach (var item in Model)

{

<tr>

<td>@Html.DisplayFor(modelItem => item.FUND_INT_ID)

</td>

<tr>

<td>

@(Html.Kendo().Grid<BetaSMTRApp.Models.Private_Report_Card_Companies_Single_Result>()

.Name("AjaxGrid")

  .AutoBind(true)

.Columns(columns =>

{

columns.Bound(c => c.CompanyName).Title("Company Name").Width(150);

})

.ColumnMenu()

.HtmlAttributes(new { style = "height:600px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetPortfolioCompanies", "PrivateReportCard").Data("additionalInfo"))

)

</td>

<script>

function additionalInfo() {

var frominfo = $("#asofdate").val();

var fundinfo = $("#fundint").val();

return { AsOfDate: frominfo, FundInt: fundinfo};

}

</script>

How do i pass the FUND_INT_ID in the foreach loop to the GetPortfolioCompanies function in the controller?

Grid

answered on 08 Oct 2015

4 answers

94 views

Trying to get Grid to work using WebAPI

Hello,

I've been struggling to get my grid to work with an Web API...I know the WebAPI works when I call it via web browser, I get a properly formatted json response, however I can't seem to get it to work when calling it with the datasource for the grid. I've tried using .Ajax() and .WebApi() and neither seems to work.

I also created a Action in my controller that returns the same information as the WebAPI just to see if I could get it to work using the Controller / Action and it worked just fine there, but I really wanted to use the Web API. Here's the code I'm trying to use...can anyone see anything obviously wrong?

@(Html.Kendo().Grid<DefectFeature>()

.Columns(column =>

{

column.Bound(df => df.Name)

.Title("Name");

column.Bound(df => df.LastUpdate)

.Title("Last Update");

})

.DataSource(dataSource => dataSource

.WebApi()

.Read(read => read.Url("http://cmd-roswell.redmond.corp.microsoft.com/api/DataMaintenance/GetDefectFeatures").Type(HttpVerbs.Get)))

.HtmlAttributes(new { style = "height:300px;" })

.Name("LKGBuildsGrid")

.Scrollable()

.Selectable()

.Sortable())

Grid

answered on 08 Oct 2015

6 answers

1.8K+ views

CDN and http://cdn.kendostatic.com/2013.2.918/styles/kendo.common-bootstrap.min.css

Hello can you give me the exact link to get kendo.common-bootstrap.min.css via CDN?

This one is not working

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common-bootstrap.min.css" />

Your link http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-5 seem show incorrect information about that :

Using Kendo UI CDN

To include the Kendo UI JavaScript and CSS files from CDN follow these steps. Important! Don't forget to replace "kendo ui version" from the code snippets below with the current version of Kendo UI e.g. "2013.2.918".

1.Open the layout of the application. By default it is Views/Shared/_Layout.cshtml (or Site.master if using ASPX).

2.Include kendo.common-bootstrap.min.css and kendo.bootstrap.min.css. Add a link tag within the head tag of the layout.

<link rel="stylesheet" href="http://cdn.kendostatic.com/<;kendo ui version>/styles/kendo.common-bootstrap.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/<;kendo ui version>/styles/kendo.bootstrap.min.css" />

General Discussions

answered on 08 Oct 2015

5 answers

907 views

Trying to get a Grid to load within a Tab

Hello,

I'm trying to get a kendo Grid to load using Ajax from within a Tabstrip using Ajax. The UI for the grid seems to load just fine, however the Action for filling the grid never seems to get called. Before moving it to be loaded from within the Tabstrip, the grid worked just fine...so it's gotta be some sort of syntax thing about how I'm loading it.

I'm using the same controller for actions to load the Tabstrip view (DataMaintenanceView), the grid view (DefectFeatureView), and the action for returning the results to the grid (GetDefectFeatures).

Please take a look at my controller and views and let me know if there's anything I'm doing wrong...thx in advance! :)

DataMaintenanceController:

public class DataMaintenanceController : Controller

{

#region View Actions

[HttpGet]

public ActionResult DataMaintenanceView()

{

return View();

}

/// <summary>

/// default view for the DataMaintenance controller

/// </summary>

/// <returns>the default DataMaintenanceView</returns>

[HttpGet]

public ActionResult DefectFeatureView()

{

return View("DefectFeatureView");

}

#endregion

#region Actions for adding data

/// <summary>

/// adds a new DefectFeature into the database

/// POST: api/ServerToSwitch/AddDefectFeature?name=[nameValue]

/// </summary>

/// <param name="name">name of DefectFeature to add</param>

[HttpPost]

public ActionResult AddDefectFeature(string name)

{

DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

dataMaintenance.AddDefectFeature(name);

return RedirectToAction("DataMaintenanceView");

}

#endregion

#region Actions for retrieving data

/// <summary>

/// retrieves all DefectFeature objects from the database

/// GET: /DataMaintenance/GetDefectFeatures

/// </summary>

/// <returns>a collection of DefectFeature objects</returns>

[HttpGet]

public ActionResult GetDefectFeatures([DataSourceRequest] DataSourceRequest request)

{

DataMaintenance dataMaintenance = new DataMaintenance(WebConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);

var defectFeaturesPayload = dataMaintenance.GetDefectFeatures().Payload;

DataSourceResult result = defectFeaturesPayload.ToDataSourceResult(request);

return Json(result);

}

#endregion

}

DataMaintenanceView

@using TPOReporting

@model DataMaintenance

@{

ViewBag.Title = "3rd Party Optics Reports - Data Maintenance";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<script>

function Sleep(milliSeconds)

{

var startTime = new Date().getTime();

while (new Date().getTime() < startTime + milliSeconds);

}

</script>

<div>

<br />

<h2>3rd Party Optics Reports - Data Maintenance</h2>

</div>

<div>

<br />

<div>

@(Html.Kendo().TabStrip()

.Name("DataMaintenanceTabStrip")

.Items(i =>

{

i.Add().Text("Defect Feature Maintenance")

.LoadContentFrom("DefectFeatureView", "DataMaintenance")

.Selected(true);

})

)

</div>

DefectFeatureView

@using TPOReporting

@model DataMaintenance

@{

ViewBag.Title = "Defect Feature Maintenance";

}

<script>

function NewDefectFeatureSubmitButtonClick(e)

{

var defectFeatureGrid = $("#DefectFeatureGrid").data("kendoGrid");

var newDefectFeatureTextBox = $("#NewDefectFeatureNameTextBox");

var newDefectFeatureName = newDefectFeatureTextBox.val();

var dummyUrl = '@Url.Action("AddDefectFeature", "DataMaintenance", new { name = "V1" })';

var url = dummyUrl.replace("V1", newDefectFeatureName);

$.ajax(

{

type: "POST",

url: url,

dataType: "json"

});

Sleep(1000);

defectFeatureGrid.dataSource.read();

newDefectFeatureTextBox.val("");

}

</script>

<div>

<table>

<tr>

<td>

<label>New Defect Name:</label>

</td>

<td>

@(Html.Kendo().TextBox()

.Name("NewDefectFeatureNameTextBox"))

</td>

<td>

@(Html.Kendo().Button()

.Name("NewDefectFeatureSubmitButton")

.Content("Submit")

.Events(e => e.Click("NewDefectFeatureSubmitButtonClick")))

</td>

</tr>

</table>

</div>

<div id="defectFeatureDiv">

@(Html.Kendo().Grid<DefectFeature>()

.Columns(column =>

{

column.Bound(df => df.Name)

.Title("Name");

column.Bound(df => df.LastUpdate)

.Title("Last Update");

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetDefectFeatures", "DataMaintenance")))

.HtmlAttributes(new { style = "height:300px;" })

.Name("DefectFeatureGrid")

.Scrollable()

.Selectable()

.Sortable())

</div>

TabStrip

answered on 07 Oct 2015