Questions on UI for ASP.NET MVC Forum

1 answer

180 views

How to make Splitter Collapses only to left

Hi,

I am using kendo splitter in an mvc application.

I have a small requirement here and unfortunately I cannot find a solution for that.

In splitter I have enabled collapse property to true and I can collapse the splitter now.

What I want is I don't want the splitter to collapse to right.

ie . splitter should collapse only to left.

Please help me.

Splitter

answered on 10 Jun 2013

1 answer

851 views

Binding contentEditable div

I have some divs in my page that have the contentEditable attribute. How can I update the viewmodel when the user changes the text of any of these editable divs.

For example:

<div data-bind="text: viewModel.Person.FirstName" contentEditable="true">John</div>

Assume a user edits the name and changes it to Jack. In an event handler, I need to set viewModel.Person.FirstName to "Jack" (the innerHtml of the element is now "Jack"), and I need to fire a change event on the viewmodel so that any other elements on the page that refer to viewModel.Person.FirstName are updated.

Seems I can't use this.bindinds["text"] because that is valid in the viewmodel itself, not in an event handler for the element.

I could parse the data-bind attribute and get the value of it's "text" binding, but that seems kind of silly.

This is probably simple, but being new to this stuff I'm kind of flummoxed.

Thanks for any help :o).

General Discussions

answered on 10 Jun 2013

9 answers

133 views

'Normal' scenario: populating a local grid with remote loaded data

Hi.
I'm evaluating your beautiful instrument, but I'm arriving at places where I need some help to understand how things can be done.
I have this (I think normal enough) scenario: I have to populate a form to submit to the server, and one of the fields is a list of, say, customers. They can be hundreds, and I don't want to handle context problems when paginating them, and I already saw that the grid can handle a whole bunch of local items paginating them without going to the server. Ok.
What I now need is to let the user populate this grid (locally) searching data on the server, for example with the substring inserted, the ID, etc.
I would like the user to add a new row, insert some text, and then trigger the search on the server, exactly how it happens using for example the autocomplete widget.
I saw I can intercept 'Save' event (I'm using ASP.NET MVC), and insert code like this, to create a new record:

$("#grid").data("kendoGrid")
.dataSource
.insert(0, {
ID: 123,
Name: "John Smith"
});

But I see that the record being inserted is still there, and moreover I don't know how to show a search box like in the AutoComplete...
Please, can you help?
Thanks in advance.
Andrea Bioli

Grid

answered on 10 Jun 2013

8 answers

290 views

Expand single node onClick

Hi support,

I am using Kendo TreeView and i am trying to make only single node is expanded at a time i.e only the clicked node gets expanded and other is collapsed, but couldn't do so, could you please help me with this. I am using Expand event in treeview and below is my code.

<script type="text/javascript">
var procesing = false;
function Expand (e) {
if (!procesing) {
procesing = true;
var tree = $('#TreeView').data('kendoTreeView')
closeSib($(e.node), tree)
procesing = false;
}
}
function closeSib($element, tree) {
var $siblings = $element.siblings();
tree.collapse($siblings);
if ($element.parent('li').length > 0) {
closeSib($element.parent('li'), tree);
}
}
</script>

TreeView

answered on 10 Jun 2013

1 answer

281 views

Kendo Grid – Batch Incell – Save changes with single trigger for create/update/destroy

Currently I am using Kendo Grid in MVC 4 razor, with Batch InCell mode.

Let say my grid got 10 records, I added 2 records, updated 3records, and deleted 1 record.

If I am using kendo default command save changes function, it will trigger controller for 3 times (create function(2 records), update
function(3 records), destroy function(1 record))

Currently our problem is that we don’t know how to handle
SQL Transaction if it is triggered differently.

Can it be triggered once with all the changes records / or all records (including deleted record)?

Or can I create a button out of the grid with function to post the grid datasource to controller (this datasource should include deleted record with flag “delete”, updated record with flag “updated”)?

Or is there any other method that I can achieve this?

Thanks

Grid

answered on 10 Jun 2013

1 answer

102 views

Grid generating an HttpPost at document ready

Strange behaviour, really...
I have an ASP.NET MVC View with a form, and inside of it, a grid that I configure with code like:

@(Html.Kendo().Grid<Customer>()
            .Name("gridSecondaryCustomers")
            .Columns(columns =>
            {
...

and then I bind it to local data (JavaScript array) with code like:

        var grid = $("#gridSecondaryCustomers").data("kendoGrid");
        localDataSource = new kendo.data.DataSource({ data: secondaryCustomers });
        grid.setDataSource(localDataSource);

Last, I add items by code in the array, and refresh the grid with previous code.

Nothing is showing, so I suppose that the problem lies in the 'normal' configuration of the grid, that tries to go to the server, or something like that...
So I add this code:

...
  .DataSource(ds => { ds.Ajax().ServerOperation(false); })

and now, magically, when I add an item to the array, I can see the grid populated correctly.

What puzzles me is that with this single line in the grid configuration, loading the page generates an HttpPost to the controller, that I cannot really track down to where it comes... :-(
Could you please help me? Please ask me for more information, if needed...
Thanks as always,
Andrea

Grid

answered on 10 Jun 2013

1 answer

41 views

What happens with *a lot* of records in the back end?

I'm making tests, on selecting a customer from a database, and binding the combobox value to the model.
All is ok, but I'm wondering about the fact that I can open the combobox dropdown even without typing any text: what happens if I have, say, a million records? I would like to give the chance to the user to open the drop down only if I have, say, three chars typed in...
Thanks
Andrea

ComboBox

answered on 08 Jun 2013

4 answers

1.1K+ views

MVC unobtrusive validation doesn't work

Hi! We are using in project Jquery Unobtrusive validation, but with kendo Dropdownlist validation doesn't work on client.

@(Html.Kendo().ComboBoxFor(model => model.CountryId)

.Filter(FilterType.Contains)

.BindTo(ViewBag.Countries)

.HtmlAttributes(CommonHelpers.MergeHtmlAttributes(Html.GetUnobtrusiveValidationAttributes(

CommonHelpers.GetPropertyName(() => Model.CountryId)),

new Dictionary<string, object>(){

{ "class", "combobox-country" }})))

How to fix this issue? Is it possible to combine Kendo Combobox and client-side mvc unobtrusive jquery validation?
Thanks!

DropDownList

answered on 07 Jun 2013

1 answer

245 views

Is it possible to add a Sparkline inside a ClientRowTemplate in a Grid?

I'm trying to add a column of sparklines inside a grid, using a ClientRowTemplate that is based on a partial view. So far, this is what I've got;
Index view (holding grid):

<div>

@(Html.Kendo().Grid(Model.UnitDetails)

.Name("Grid")

.DataSource(ds => ds

.Ajax()

.Read(read => read.Action("Index", "Home"))

)

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

.Columns(columns =>

{

columns.Bound(p => p.UnitContract.Name).Title("Unit");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Location).Title("Site");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.WellContract.Name).Title("Well");

columns.Bound(p => p.UnitContract.CurrentRun.Id).Title("Run");

columns.Bound(p => p.UnitContract.CurrentRun.RunTask).Title("Task");

columns.Bound(p => p.UnitContract.CurrentRun.Operation.Description).Title("Operation");

columns.Bound(p => p.UnitContract.Status.StatusText).Title("Status");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");

columns.Bound(p => p.UnitContract.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");

columns.Bound(p => p.UnitContract.CurrentRun.Name);

columns.Template(p => { }).ClientTemplate(" ").Width(75);

})

.ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())

.Pageable()

.Scrollable(builder => builder.Height(250))

.Sortable())

</div>

Next, I added a partial view, looking like this:

<tr>

<td>#: UnitContract.Name#

</td>

<td>#: UnitContract.CurrentRun.Operation.WellContract.Location#

</td>

<td>#: UnitContract.CurrentRun.Operation.WellContract.Name#

</td>

<td>#: UnitContract.CurrentRun.Id#

</td>

<td>#: UnitContract.CurrentRun.RunTask#

</td>

<td>#: StatusMessage#

</td>

<td class='text-center'>

<span class='label label-#:StatusColor #' style='width: 25px;'> </span>

</td>

<td>

<div>

@(Html.Kendo().Sparkline()

.Name("depth")

.Data(#: UnitContract.CurrentRun.LatestWellLogEntry.Speed#)

.Type(SparklineType.Bar)

.Tooltip(false)

.ValueAxis(axis => axis.Numeric().Max(5000).Min(-5000).Visible(false))

.CategoryAxis(c =>

c.MajorTicks(ticks => ticks.Visible(false))

.Visible(true))

.ChartArea(ca => ca.Background("transparent"))

.HtmlAttributes(new { style = "width: 75px;" }))

</div>

</td>

<td>

<div>

</div>

</td>

<td>

<div>

</div>

</td>

<td>#: UnitContract.CurrentRun.Name#

</td>

<td>

<form method='POST' action='@Url.Content("~/UnitDetails/Index/")#: UnitContract.Id#'>

<input type='submit' class='k-button' value='Details' />

</form>

</td>

</tr>

I've tried several different approaches as far as the part with .Data(source) goes.
Is there another way to go that lets me utilize the Sparkline inside a Grid, or is this combination not possible?

Grid

answered on 07 Jun 2013

4 answers

329 views

Hierarchical grid example "Invalid template" error

I've been attempting to translate several Kendo UI Grid examples to VB.Net. I've been trying to get the hierarchical grid example to work.

Can someone tell me why the code below does not work? Removing or commenting out the sub-grid allows the primary grid to work. But as soon as the sub-grid source is added I get the "Invalid template" error in the "Kendo.all.min.js" code. If I tell the IDE to continue the primary grid will display but it is empty.

MVC 3 Razor project
Version: 2012.3.1114
IDE: Visual Studio 2012

View source:

@(Html.Kendo().Grid(Of KendoUIMvcApplication1.ViewModels.EmployeeViewModel).Name("Employees") _

.Columns(Sub(columns)

columns.Bound(Function(e) e.FirstName).Width(140)

columns.Bound(Function(e) e.LastName).Width(140)

columns.Bound(Function(e) e.Title).Width(200)

columns.Bound(Function(e) e.Country).Width(200)

columns.Bound(Function(e) e.City)

End Sub) _

.ClientDetailTemplateId("employeesTemplate") _

.Pageable() _

.DataSource(Sub(dataSource)

dataSource.Ajax().Read(Sub(read)

read.Action("HierarchyBinding_Employees", "Example")

End Sub)

dataSource.Ajax().PageSize(5)

End Sub) _

.Sortable() _

.Events(Sub(events)

events.DataBound("dataBound")

End Sub))

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

@(Html.Kendo().Grid(Of KendoUIMvcApplication1.ViewModels.OrderViewModel).Name("Orders_#=EmployeeID#") _

.Columns(Sub(columns)

columns.Bound(Function(o) o.OrderID).Width(101)

columns.Bound(Function(o) o.ShipCountry).Width(140)

columns.Bound(Function(o) o.ShipAddress).Width(200)

columns.Bound(Function(o) o.ShipName).Width(200)

End Sub) _

.DataSource(Sub(dataSource)

dataSource.Ajax().Read(Sub(read)

read.Action("HierarchyBinding_Orders", "Example", New With {.employeeID = "#=EmployeeID#"})

End Sub)

End Sub) _

.Pageable() _

.Sortable() _

.ToClientTemplate())

</script>

<script>

function dataBound() {

this.expandRow(this.tbody.find("tr.k-master-row").first());

}

</script>

Controller source:

Imports System.Web.Mvc

Imports System.Linq

Imports System.Data.Linq

Imports Kendo.Mvc.Extensions

Imports Kendo.Mvc.UI

Public Class ExampleController

Inherits System.Web.Mvc.Controller

Public Function Hierarchy() As ActionResult

Return View()

End Function

Public Function HierarchyBinding_Employees(<DataSourceRequest> request As DataSourceRequest) As ActionResult

Return Json(GetEmployees().ToDataSourceResult(request))

End Function

Public Function HierarchyBinding_Orders(employeeID As Integer, <DataSourceRequest> request As DataSourceRequest) As ActionResult

Return Json(GetOrders().Where(Function(order) order.EmployeeID = employeeID).ToDataSourceResult(request))

End Function

Private Shared Function GetOrders() As IEnumerable(Of ViewModels.OrderViewModel)

Dim northwind = New NorthwindDataContext()

Dim loadOptions = New DataLoadOptions()

loadOptions.LoadWith(Of Order)(Function(o) o.Customer)

northwind.LoadOptions = loadOptions

Return northwind.Orders.[Select](Function(order) New ViewModels.OrderViewModel() With { _

.ContactName = order.Customer.ContactName, _

.OrderDate = order.OrderDate, _

.OrderID = order.OrderID, _

.ShipAddress = order.ShipAddress, _

.ShipCountry = order.ShipCountry, _

.ShipName = order.ShipName, _

.EmployeeID = order.EmployeeID _

})

End Function

Private Shared Function GetProducts() As IEnumerable(Of ViewModels.ProductViewModel)

Dim northwind = New NorthwindDataContext()

Return northwind.Products.[Select](Function(product) New ViewModels.ProductViewModel() With { _

.ProductID = product.ProductID, _

.ProductName = product.ProductName, _

.UnitPrice = If(product.UnitPrice, 0), _

.UnitsInStock = If(product.UnitsInStock, 0), _

.UnitsOnOrder = If(product.UnitsOnOrder, 0), _

.Discontinued = product.Discontinued, _

.LastSupply = DateTime.Today _

})

End Function

Private Shared Function GetEmployees() As IEnumerable(Of ViewModels.EmployeeViewModel)

Dim northwind = New NorthwindDataContext()

Return northwind.Employees.[Select](Function(employee) New ViewModels.EmployeeViewModel() With { _

.EmployeeID = employee.EmployeeID, _

.FirstName = employee.FirstName, _

.LastName = employee.LastName, _

.Country = employee.Country, _

.City = employee.City, _

.Notes = employee.Notes, _

.Title = employee.Title, _

.Address = employee.Address, _

.HomePhone = employee.HomePhone _

})

End Function

End Class

Grid

answered on 06 Jun 2013