Questions on UI for ASP.NET MVC Forum

8 answers

318 views

[Solved] kendo ui web application vs telerik mvc 3/mvc 4 application

Hello again,
I have installed on my computer in Visual Studio 2010 more templates:Kendo UI for MVC Web application,Telerik MVC 3 Web Application(Razor),Telerik MVC 4 Web application(RAzor)
we would like to start a project using web controls with mvc(razor),which one is the latest or appropiate to use .
Or what template in Visual Studio corespond to Kendo UI Complete for MVC as a part of DevCraft Tools ?

Regards,
Daniel

General Discussions

answered on 27 Feb 2013

6 answers

634 views

Basic functions of Grid not working

Hello,

I am new to MVC and I am attempting to use the GRID to perform functions as I have in the past with the ASP.NET AJAX controls. I am using Entity Framework for my model and I have a controller in place. I have the grid in my view and I have it successfully pulling the data from the model to display but the Add, Edit, Delete functions are not firing properly. Whenever I hit any of those buttons it tries to go to the URL that I believe would be associated if I were not using the grid.

For example when I hit the edit button instead of opening the popup form it goes to: /Grid/Index/2?gvBeamlines-mode=edit which of course throws a 404 error. The add button goes here: /Grid?gvBeamlines-mode=insert and the delete button goes here: /Grid/Delete/2

The URL of the initial view with the grid is /Beamlines so why is it going to /Grid instead? None of the methods in the controller seem to be firing. I feel like I am missing some basic piece to make this work. My code looks very similar to the demo code so I'm not sure what is wrong. Any help would be appreciated. The view and controller code is below.

View:

@model IEnumerable<MyLibrary.Beamline>

@{

ViewBag.Title = "Beamlines";

}

<h2>Beamlines</h2>

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

.Name("gvBeamlines")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); }).Width(50);

columns.Bound(o => o.Description).Width(100);

columns.Bound(o => o.Insertion_Device).Title("Insertion Device");

columns.Bound(o => o.Status);

columns.Bound(o => o.Energy_Range).Title("Energy Range");

columns.Command(command => { command.Destroy(); }).Width(50);

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(o => o.ID))

.Create(create => create.Action("Create", "Grid"))

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

.Update(update => update.Action("Edit", "Grid"))

.Destroy(destroy => destroy.Action("Delete", "Grid"))

)

Controller: (only some methods are in place so far)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MyLibrary;

namespace MyProject.Controllers

{

public class BeamlinesController : Controller

{

//

// GET: /Beamlines/

public ActionResult Index()

{

using (MyEntities context = new MyEntities())

{

return View(context.Beamlines.ToList());

}

//

// GET: /Beamlines/Details/5

public ActionResult Details(int id)

{

return View();

}

//

// GET: /Beamlines/Create

public ActionResult Create()

{

return View();

}

//

// POST: /Beamlines/Create

[HttpPost]

public ActionResult Create(Beamline beamline)

{

try

{

// TODO: Add insert logic here

return RedirectToAction("Index");

}

catch

{

return View();

}

//

// GET: /Beamlines/Edit/5

public ActionResult Edit(int id)

{

using (MyEntities context = new MyEntities())

{

var beamline = context.Beamlines.Single(p => p.ID == id);

return View(beamline);

}

//

// POST: /Beamlines/Edit/5

[HttpPost]

public ActionResult Edit(int id, FormCollection collection)

{

using (MyEntities context = new MyEntities())

{

var beamline = context.Beamlines.Single(p => p.ID == id);

TryUpdateModel(beamline);

if (ModelState.IsValid)

{

context.SaveChanges();

return RedirectToAction("Index");

}

return View(beamline);

}

//

// GET: /Beamlines/Delete/5

public ActionResult Delete(int id)

{

return View();

}

//

// POST: /Beamlines/Delete/5

[HttpPost]

public ActionResult Delete(int id, FormCollection collection)

{

try

{

// TODO: Add delete logic here

return RedirectToAction("Index");

}

catch

{

return View();

}

Grid

answered on 27 Feb 2013

1 answer

171 views

Validation for Dropdown on click of submit is not working for IE9. Screenshot attached.

Hi ,

I have a problem with validation for dropdown on click of submit. The validation triggers in Chrome but IE9 doesnt support, so could any one suggest a work around for IE.

Here is the dropdown UI

<div id="ModalMaterialCodeMappingForm">
    <div class="editor-row" style="padding-bottom: 1em;">
        <div class="selector-type-column">
            @(Html.Kendo().DropDownList().Name("editMappingTerminalSearchTypeDropDownList")
                  .DataTextField("Text").DataValueField("Value").BindTo(Model.TerminalSearchType))
        </div>
        <div class="float-left editor-label" style="width: 80px;">
            @Html.LabelFor(model => model.TerminalName)
        </div>
        <div class="float-left">
            @Html.TextBoxFor(model => model.TerminalName, new {selectedValue = "0", @class = "selector"}) <span style="color:red">*</span><span class="k-invalid-msg" data-for="TerminalName"></span>
        </div>
        <div class="clear"></div>
    </div>

the dropdown is an autocomplete which has a placeholder, if i remove the place holder the validation triggers.

textBoxField.kendoAutoComplete({
        minLength: 1,
        dataTextField: "Value",
        dataValueField: "Key",
        filter: "contains",
        placeholder: placeHolderText
});

I have attached the screenshots.

DropDownList

answered on 26 Feb 2013

1 answer

99 views

First action called on grid

Am I correct in saying that the grid calls the Read operation on its datasource by default? I am looking at some examples and I can't see where there is an explicit call to read the data from the datasource. If I am right, is there a way to prevent that and wait for the user to initiate the load?

Thanks

Grid

answered on 26 Feb 2013

1 answer

147 views

Object properties / methods undefined with MVC

We are creating an MVC 4 application using the Kendo.Mvc helper assembly. The code is working well; however, we appear to be missing something when we try to obtain a reference to a kendo control.

Example:
Our application has an ActionLink on a toolbar. When the user clicks on the ActionLink, we call into a JS function to validate if the displayed grid has a row selected. Within the function we attempt to obtain a reference to the grid and get the selected row. Unfortunately, the select() function throws an error ("Value is undefined").

I have included the code below. Most of our logic will be based on controls having the ability to communicate with each other from events, etc. Are we able to receive the functionality using the MVC assembly, or are we only able to use the API when code in JS?

Any comments or assistance would be much appreciated.

Thanks,
Todd

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

.Name("grid")

.Columns(columns => {

columns.Bound(o => o.EntityId)

.Hidden().Visible(false);

columns.Bound(o => o.EntityName)

.Sortable(true)

.Title("Entity Name")

.ClientTemplate(@Html.ActionLink("#=EntityName#", "Details", "Entity", new { id = "entityId" }, null).ToHtmlString().Replace("entityId", "#=EntityId#"));

columns.Bound(o => o.TransactionType);

columns.Bound(o => o.Name)

.ClientTemplate(@Html.ActionLink("#=Name#", "Details", "Engagement", new { id = "engId" }, null).ToHtmlString().Replace("engId", "#=ID#"));

columns.Bound(o => o.TransactionStatus);

columns.Bound(o => o.Initiator);

columns.Bound(o => o.Reason);

})

.Pageable(p => p.PageSizes(true))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Navigatable()

.Resizable(resize => resize.Columns(true))

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.ID))

.Read(r => r.Action("Search", "Transaction")))

)

getSelectedRowId: function (gridId) {

var grid = jQuery(gridId).kendoGrid().data("kendoGrid");

var row = grid.select();

if (row.length > 0)

return grid.dataItem(row).id;

else

return null;

}

General Discussions

answered on 26 Feb 2013

1 answer

119 views

DataSource.sync() doesn't call create after adding a model to a dataSource generated by ASP.NET MVC ListView Helper

Hi Kendo,

I tried this on http://jsfiddle.net/rusev/E3vYH/ and it works fine. Now I have a listView generated by ListView Kendo Helper and I add a model by calling DataSource.add() method, but when I call DataSource.sync() it doesn't call create and I don't see any http activity on my browser's network tab. I copied the code generated by the kendo helper and pasted it into a test html file and it doesn't work neither. It did add the model to the listView but never calls create. Here is my test file:

<!DOCTYPE html>
<html>
<head>
<title>Testing Kendoui dataSource</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
<div data-id = ${CountryCode}>
<p>${CountryName}</p>
</div >
</script>
<script>
$(function () {
$("#target").kendoListView ({
"dataSource": {
"transport": {
"prefix": "",
"read": function () {
alert("reading...");
},
"create": function () {
alert("creating...");
},
"destroy": function () {
alert("destroying...");
},
"update": function () {
alert("updating...");
}
},
"type": "aspnetmvc-ajax",
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "SubaccountId",
"fields": {
"SubaccountId": {
"type": "number"
},
"CountryCode": {
"type": "string"
},
"CountryName": {
"type": "string"
}
}
}
}
},
"template": kendo.template($('#template').html()),
"selectable": "single"
});
$('#addButton').bind("click", function () {
var ds = $('#target').data('kendoListView').dataSource;
ds.add({

SubaccountId: 1,
CountryCode: 'US',
CountryName: 'United States'

});
ds.sync();
});
});
</script>
</head>
<body>
<div>
<button id="addButton">Add Country</button>
</div>
<div id="target"></div>
</body>
</html>

I tried with different jquery and kendo version too. No luck.

How do I make this work.

Thanks

D

General Discussions

answered on 26 Feb 2013

1 answer

266 views

Required validation not fireing client-side

Hi,
I have a box:

@(Html.Kendo().NumericTextBoxFor(m => m.FilterParticipants).Format("n0").Min(1).Decimals(0))

with a required attribute:

[Required(ErrorMessageResourceName = "ValidationRequired", ErrorMessageResourceType = typeof(Resources.Global))]



//[Min(1, ErrorMessageResourceName = "ValidationRequired", ErrorMessageResourceType = typeof(Resources.Global))]



public

int FilterParticipants { get; set; }

and if I clear the box I can still submit the form.
But: I also have a datepicker in the form and if I clear that control and tries to submit, then the validation fires (on both controls).

Regards,
Mattias

NumericTextBox

answered on 26 Feb 2013

9 answers

362 views

grid.hideColumn hides correct header but incorrect data

I have a grid that I toggle the visibility of a column on when a button is pushed.

It hides the column header just fine, but with the data it hides is one column to the left.

I'm hiding the column NMFC, and when that is hidden, the NMFC column header disappears.

However, the data under the Weight column ("lbs") is the data that is hidden and the value under NMFC ("test") is now visible underneath the Weight column.

Here's the code for the columns:

columns.Bound(i => i.WeightUOM)

.EditorTemplateName("ItemGrid_RefUOMListingWeight")

.Width(50);

columns.Bound(i => i.NMFC).Width(50);

Here's the script code:

var itemGrid = $("#QuoteItemGrid").data("kendoGrid");

itemGrid.hideColumn("NMFC");

I am using a detail template on this grid, so maybe it is throwing the index off by one? Not sure, but any tip would be helpful. I can provide more code if needed. I thought I would try and keep it simple for this first post and only put critical code in.

Thanks!

Grid

answered on 25 Feb 2013

1 answer

150 views

Hierarchy - Is it possible to have 2 tabs on hierarchy each refering to a separate table?

Hi Experts,
Can we display two sets of hierarchy on the same level on a tab strip? Something like Employee(Main Table) with Orders received (Hierarchy table 1) and orders fullfilled (Hierarchy table 2)?

Grid