Questions on UI for ASP.NET MVC Forum

0 answers

67 views

Applying event handlers after row creation in batch edit mode

We are working on an application in which the Grid control is being used to enter a number of line items which do not need to be stored in the database until the whole order is completed. We are using the batch editing mode and heavy client template use in order to get row data to fit the model of the page.

As part of the application, we want to automatically, via Ajax, populate item data when a user selects the item from a dropdown. Prior to moving to the batch edit mode, we were attempting to use the inline edit mode, and were able to attach our event handlers properly by calling a function off of the Grid's Edit() event handler, as it was called after the row was added to the DOM. We can bind the same function to the DataSource's Change() event, but this event fires before the new row is added to the DOM, so our event bindings fail.

What we would like is to be able to bind our events on row creation through the Grid or DataSource's initialization. If there is an alternate method to handle the controls in the row's event bindings, that is acceptable as well.

Kendo UI Version: 2015.2.902.545

OS: Windows 8 for development, Server 2008 R2 and up compatibility required

Browser: IE10+, Chrome (latest three)

jQuery: 2.1.4

Grid

asked on 12 Oct 2015

10 answers

530 views

Kendo MVC and WCF

Hi,

We are designing an application using ASP MVC , Entity Framework and Kendo UI.
The client now has a requirement to abstract the datalayer(Entity Framework) using plane WCF service(not WCF
Dataservice as we need tcp).

So basically now our MVC controller will internally call the WCF service to get the data.
But we are not clear how to apply filtering , paging etc for the grid using this structure as there are no server wrapper available for WCF.

Here i have 2 questions.

1. Is there anything similar to DataSourceResult in wcf. i saw an example http://www.kendoui.com/code-library/web/grid/grid-wcf---crud.aspx , but here the code is placed in AppCode. Is there any implementation example where I have a seprate wcf service and its methods taking a parameter DataSourceResult?

2. Or is there a way that I can pass the DataSourceResult from my MVC controller to a WCF plane service.?

Regards

Ramesh

Grid

answered on 12 Oct 2015

3 answers

82 views

Can't seem to set SwipeToOpen = False

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

96 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

224 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

575 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

136 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

990 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

106 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