Questions on UI for ASP.NET MVC Forum

1 answer

212 views

ASP.NET MVC 4 mobile application Razor and Kendo UI

Hi all,
I bought two days full telerik controls.
But I made no example of a mobile application with ASP.NET MVC Razor could not find.
Please Please help me in this regard.
Tablet and Mobile applications to run in ASP.Net MVC Razor I want to do.
Do you have sample application in the hands of the

General Discussions

answered on 27 Feb 2013

5 answers

299 views

Big Troubles Binding Tree View to Anything Hierarchical!!!!!

I just burned up 10 hours of a 100 hour budget trying to get the tree view to bind to an XML file. None of your examples worked! So then I tried the remote binding, which did actually work, as long as I transformed the XML into a class for the JSON return. Well, I can deal with transforming the XML document into a class, but the hierarchical part does not work at all. The tree just repeats the original root items over and over again.

I am including code for the classes that I am trying to use, which includes the base class and a second class with would be the second tier (I won't actually need 2 classes in the end). I have also included the controller code and the view code.

Please, please help, my time is running low and I promised to get this done using your stuff!!!!!

Here is the tree result. As you can see the root items are just repeated over and over. The item that is a child of "you" never shows up

you

you
- you
  - you
    - you
      - you
        
        you
        
        me
      - me
    - me
  - me
- me
me

me

My Classes

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace MCFD.MobilePolicy.MVC.Models

{

public class SiteStructure

{

public SiteStructure()

{

}

private List<string> next;

private string myName = "N/A";

private List<InnerStructure> colHasChildren;

private int ID;

// Declare a Name property of type string:

public string Name

{

get

{

return myName;

}

set

{

myName = value;

}

public int id

{

get

{

return ID;

}

set

{

ID = value;

}

//public bool HasChildren

//{

// get

// {

// return hasChildren;

// }

// set

// {

// hasChildren = value;

// }

//}

public List<InnerStructure> hasChildren

{

get

{

return colHasChildren;

}

set

{

colHasChildren = value;

}

public class InnerStructure

{

public InnerStructure()

{

}

private List<string> next;

private string myName = "N/A";

private List<InnerStructure> colHasChildren;

private int ID;

// Declare a Name property of type string:

public string Name

{

get

{

return myName;

}

set

{

myName = value;

}

public int id

{

get

{

return ID;

}

set

{

ID = value;

}

//public bool HasChildren

//{

// get

// {

// return hasChildren;

// }

// set

// {

// hasChildren = value;

// }

//}

public List<InnerStructure> hasChildren

{

get

{

return colHasChildren;

}

set

{

colHasChildren = value;

}

My Controller

public JsonResult Employees(int? id)

{

//ulitimate goal is to transform this xml into a structure for the tree. I will deal with this later. Note that none of the bind to xml methods have worked for me.

XElement xml = XElement.Load(Server.MapPath("~/App_Data/books.xml"));

//Create 2 items for the tree

Models.SiteStructure sitemapitem = new Models.SiteStructure();

sitemapitem.Name = "you";

sitemapitem.id = 1;

Models.SiteStructure sitemapitem2 = new Models.SiteStructure();

sitemapitem2.Name = "me";

sitemapitem2.id = 2;

//Create hierarchy by adding a new list to the first item in the root of items

Models.InnerStructure sitemapitem3 = new Models.InnerStructure();

sitemapitem3.Name = "why does this not work?";

sitemapitem3.id = 3;

List<Models.InnerStructure> sitemap2 = new List<Models.InnerStructure>();

sitemap2.Add(sitemapitem3);

sitemapitem.hasChildren = sitemap2;

//Add the items to list of items to return

List<Models.SiteStructure> sitemap = new List<Models.SiteStructure>();

sitemap.Add(sitemapitem);

sitemap.Add(sitemapitem2);

return Json(sitemap, JsonRequestBehavior.AllowGet);

}

My View

<div class="demo-section">

@(Html.Kendo().TreeView()

.Name("treeview")

.DataTextField("Name")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("Employees", "SiteEditor")

)

</div

TreeView

answered on 27 Feb 2013

8 answers

331 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

660 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

178 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

102 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

151 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

124 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

285 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

380 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