Questions on UI for ASP.NET MVC Forum

8 answers

934 views

Persisting user selections in Kendo Grid

Hi I have seen a similar post however I would like some clarification.
Desi: we have MVC.NET application which binds grid to model via Ajax binding. When user submits the data and we refresh the page, we have a requirement to keep the user original selections (sorting, filtering, etc.). You already posted that you do not support scenario like this "out of the box". However I would like to know whether there is a way (some js method or control id or anything at all that would allow me to get to those selections before the page submitted via JavaScript.
Thanks.

Grid

answered on 30 May 2013

1 answer

349 views

Can I use MVC Entity framework(in .edmx format) with Kendo UI for web ?

Hi,

Kindly refer the below points and then suggest us to proceed further.

1. We have large database , our main criteria is to improve the performance of data binding in web.
2. As we have read about Kendo UI as client based, so we have doubts whether we can go for MVC Entity Framework with Kendo UI without using web service.

Thanks & Regards,
Vel.

Grid

answered on 29 May 2013

1 answer

198 views

Masked Textbox with Kendo MVC

Hi all.

Currently, I have the following code in my project:
@Html.TextBoxFor(model => model.CPF, new { alt = "cpf", style = "width: 150px;" })

Now, I would like to transform it in a Kendo control with a mask like that: "000.000.000-00". How can I do that with Kendo?

Thanks.

General Discussions

answered on 29 May 2013

2 answers

636 views

Listview not showing data

Hello,

I followed every step like the mvc examples to try to bind a list view.

My setup is as follows:

The Controller:

public ActionResult Scans_Read([DataSourceRequest] DataSourceRequest request)

{

return Json(GetScans().ToDataSourceResult(request));

}

private static IEnumerable<ScanModel> GetScans()

{

var ec = new entityContext();

return ec.tScan.Select(scanmodel => new ScanModel

{

scanId = scanmodel.scanId,

description = scanmodel.description,

directoryPath = scanmodel.directoryPath

});

}

The Model:

public class ScanModel

{

[ScaffoldColumn(false)]

public int scanId

{

get;

set;

}

[Required]

[DisplayName("description")]

public string description

{

get;

set;

}

[Required]

[DisplayName("directoryPath")]

public string directoryPath

{

get;

set;

}

The view:

@model IEnumerable<ns.Models.ScanModel>

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

<div class="scanmodel">

<h3>#:description#</h3>

</div>

</script>

@(Html.Kendo().ListView<ns.Models.ScanModel>(Model)

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(dataSource => {

dataSource.Read(read => read.Action("Scans_Read", "CustomerPortal"));

})

)

This is practically the same as in the example.

But it doesn't display data.

The resultset from "return Json(GetScans().ToDataSourceResult(request));" does contain the dataset.

What am I doing wrong here...!

Thanks,

ListView

answered on 28 May 2013

1 answer

551 views

[Solved] Space between toolbar buttons/custom buttons

Hi,

How to give space/set distance between toolbar buttons/custom buttons like in telerik's IsSeparator :

http://www.telerik.com/community/forums/aspnet-ajax/toolbar/add-a-space-between-two-toolbar-buttons.aspx

Thank you

Shabtai

Grid

answered on 28 May 2013

2 answers

362 views

[Solved] MVC4 + KendoUI + Grid + popup edit - not updating the database

Dear Wizards of the Realm,

New to MVC4 and to Kendo. So probably some misconceptions. Tried for a couple days. Need suggestions.

1. Started Visual Studio 2012 new project using Asp.net mvc 4 web app. Connected to existing database with edmx file. Put in a controller. All works great - retrieve, create, update, delete.
2. From Telerik menu, reconfigure to use KendoUI. Using 2012.2.710. (Separate note - if trying to upgrade to 2013.1.x.x - a breaking upgrade). Add an Admin and a Member area - routing seems to be working oK
3. Add Kendo Grid

@(Html.Kendo().Grid(Model).Name("KeysGrid")
.Columns(columns =>
{
columns.Bound(curkey => curkey.ID).Hidden();
columns.Bound(curkey => curkey.CreateStamp).Visible(false);
columns.Bound(curkey => curkey.OwnerAccountsID).Visible(false);
columns.Bound(curkey => curkey.ReplacedBy).Hidden();
columns.Bound(curkey => curkey.Name).Width("20%");
columns.Bound(curkey => curkey.Description).Width("60%");
columns.Command(cmd =>
{
cmd.Edit().HtmlAttributes(new { title = "edit this key" }).;
cmd.Destroy().HtmlAttributes(new { title = "delete this key" });
})
.Width("20%")
.Title("Commands")
.Width(75);
})
.ToolBar(toolBar => toolBar.Template(@"
<div>
<a onclick='createRow()' title='Create a new key' style='float:left;'> <img src='/Content/images/button_add_01.png' style='width:32px; height:32px; text-decoration:none; border:none;' /></a>
<a onclick='callHelp()' title='Help on keys' style='float:right;'><img src='/Content/images/button_info_01.png' style='width:32px; height:32px; text-decoration:none; border:none;' /></a>
</div>
"))
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("AddEditKey").Window(w => w.Title("Add / Edit Keys")))
.Pageable(pages => pages.PageSizes(new int[] { 10, 20, 50 }))
.Resizable(p => p.Columns(true))
.Sortable()
.Selectable()
.Filterable()
.Scrollable(p => p.Enabled(false))
.Groupable(p => p.Enabled(false))
.DataSource(datasource => datasource
.Ajax()
.Events(e => e.Error("error_handler")
)
.Create(c => c.Action("Create", "YFKey", new { area="Member", controller="YFKey", action="Create" }))
.Update(c => c.Action("Edit", "YFKey", new { area="Member", controller="YFKey", action="Edit" }))
.Destroy(c => c.Action("Delete", "YFKey", new { area="Member", controller="YFKey", action="Delete" }))
)
)
4. Now when go to index page, grid shows data from underlying database. I edit grid, popup comes up with proper fields, edit data, save - popup goes away and changed fields marked with little red triangle - changes to underlying DB not made.
5. In Chrome, hit F12, look at network, it's getting a 500 Internal Server Error. All data from edit form looks proper - just not happening. Any ideas?

Autogenerated controller from database methods include:
[Authorize]
public ActionResult Edit(long id = 0)
{
YFKey yfkey = db.YFKeys.Find(id);
if (yfkey == null)
{
return HttpNotFound();
}
return View(yfkey);
}

//
// POST: /Member/YFKey/Edit/5

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(YFKey yfkey)
{
if (ModelState.IsValid)
{
db.Entry(yfkey).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(yfkey);
}

Note that at the same time, the auto created forms from the database first edmx file still work, and even on the same form.

Maybe obvious to me someday, but not today.
Thanks.
Chris

Grid

answered on 27 May 2013

2 answers

330 views

[Solved] How to create a custom child grid column with ActionLinks containing IDs of the child model

Hi,

how do i add a custom column to a child grid containing a Action Link with the ID of the current child row entity?

here is a example of the hierarchical grid:

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Groupable(false).Width(50);

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

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

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

})

.Sortable()

.Pageable()

.Scrollable(scr=>scr.Height(500))

.ClientDetailTemplateId("template")

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("ParentModel_Read", "ControllerName"))

)

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

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

.Name("Grid_#=Id#")

.Columns(columns =>

{

columns.Bound(o => o.PageNumber).Width(50);

columns.Bound(o => o.ChapterTitle).Width(150);

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

columns.Template(@<text>

@Html.ActionLink("edit", "ControllerAction", "ControllerName", new { id = @item.Id }, new {@class = "k-button" })

</text>)

.ClientTemplate(@Html.ActionLink("edit", "ControllerAction", "ControllerName", new { ID = "#=Id#" }, new { @class = "k-button" }).ToHtmlString());

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("ChildModel_Read", "ControllerName", new { parentModelId = "#=Id#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

The Question is: How can the Id of the ChildModelEntity be resolved and passed into the ActionLinkMethod? "#=Id#" returns the Id of the parent model.

Thanks in advance for answers!

Grid

answered on 27 May 2013

3 answers

367 views

Load a TreeView from a DropDownList onChange event

Morning folks!

What I'm trying to do is...when I change the item of the dropdownlist, I'll need to REload the TreeView with the selectedValue of the dropDownList.

In my case, as I'm a new kendoui user, I'm not going on the right track, for sure.

Any ideas?

Here's my JS dumb script...hope you can help me!

<script type="text/javascript">

function onChange(e) {

$.ajax({

url: "/Nav/MontaMenu/",

dataType: "json",

cache: false,

type: 'GET',

data: { nomePastaSelecionada: this.text(), caminhoPastaSelecionada: this.value() },

success: function (result) {

$('#treeview').kendoTreeView();

var tvProjeto = $('#treeview').getKendoTreeView();

tvProjeto.destroy();

var dataSource = new kendo.data.DataSource({

data: result

});

dataSource.fetch(function () {

tvProjeto.setDataSource({

data: dataSource

});

}

});

}

</script>

DropDownList

answered on 27 May 2013

1 answer

299 views

How to adjust size of grid within a splitter

I am using the ASP.NET MVC server side wrappers to create a page with a splitter control with 3 horizontal panes. Each pane includes a single <div> with header text, and a Kendo Grid.

How do I get the grid to resize appropriately within each pane?
I have tried the following, but the splitterPane.scrollHeight value does not seem correct when the pane gets smaller. For example, when the page starts all panes report a scrollHeight of 278, but if I move the top splitter up, the scrollheight of the top pane goes to up to 280 instead of being reduced..
I have tried to find another property/method other than scrollHeight and have been unsuccessful..
Any help is greatly appreciated!!!

function LayoutChange() {

UpdateGridSize("#PendingVessels", 0);

UpdateGridSize("#DueToSellVessels", 1);

UpdateGridSize("#DueToShiftVessele", 2);

}

function UpdateGridSize(gridName, indexPane) {

var splitter = $("#Main");

var splitterPane = splitter.find(".k-pane")[indexPane];

var splitterHeight = splitterPane.scrollHeight;

var gridElement = $(gridName),

dataArea = gridElement.find(".k-grid-content"),

//gridHeight = gridElement.innerHeight(),

otherElements = gridElement.children().not(".k-grid-content"),

otherElementsHeight = 0;

otherElements.each(function () {

otherElementsHeight += $(this).outerHeight();

});

gridElement.height(splitterHeight - 25); //-25 for the header item

dataArea.height(gridElement.innerHeight() - otherElementsHeight);

}

Splitter

answered on 27 May 2013

1 answer

223 views

Sending Multiple Models to the Grid via ActionResult

When Adding a model to my grid via a controller action, it is possible that there may be more than one model created as a result of the process.

Normally, when only one item is added, we are sending the created or updated Model back to the View by calling:

return this.Json((new Model[] { singleModelRecord }).ToDataSourceResult(request, this.ModelState));

Where "singleModelRecord" is a single model.

However, in this case, I would like to be able to send a List of Models back to the client, and have all the rows added to the grid, instead of having just one of them added, and needing to refresh the grid to see the rest. This is what I was trying, but only one new model was being shown in the grid:

return this.Json(arrayOfModels.ToDataSourceResult(request, this.ModelState));

where "arrayOfModels" is the array of Models that have just been created.

Is this functionality supported?

Grid