Questions on UI for ASP.NET MVC Forum

1 answer

372 views

Hierarchical Grid - How to get and item value from the parent grid in server side variable?

Hi,

I have a simple master-detail implementation in a hierarchical grid. Everything works as expected if I pass the parent ID in following fashion

@(Html.T4Grid<NTL.Target.BusinessEntities.Customer>("Grid", allColumns,"Customer")
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<NTL.Target.BusinessEntities.Order>()
.Name("Grid_#=CustomerID#")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetList", "Order", new { customerID = "#=CustomerID#" }))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>

I intend to abstract binding of the grid completely, as shown above in the code that the data binding has been done in the extension method (T4Grid). Now when I try following it ends up in an error saying 'invalid template'. It throws that error because #=CustomerID# wasn't replaced.

@(Html.T4Grid<NTL.Target.BusinessEntities.Customer>("Grid", allColumns,"Customer")
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
)
<script id="template" type="text/kendo-tmpl">
@{
name="#=CustomerID#";
gname = "Grid_#=CustomerID#";
}
@(Html.T4Grid<NTL.Target.BusinessEntities.Order>(gname, allColumns, "Order", new { customerID = name }))
.ToClientTemplate()
)

What's the way of getting a field's value (server side) from the data source of the Parent Grid?

Extension Method

public static Kendo.Mvc.UI.Fluent.GridBuilder<T> T4Grid<T>(this HtmlHelper helper, string name, string allColumns, string controllerName, params object[] parameters)
where T : class
{
List<ColumnAttributes> columns = BuildColumns(allColumns);

return helper.Kendo().Grid<T>()
.Name(name)
.Columns(cols =>
{
if (columns != null)
foreach (ColumnAttributes ca in columns)
cols.Bound(ca.Name).Width(ca.Width).Title(ca.Title).Groupable(ca.Groupable);
}
)
.Sortable()
.Pageable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetList", "Order",parameters))
);

}

Grid

answered on 09 Apr 2013

1 answer

282 views

Multi-line column headers on row-templated grid / MVC

Is there any way to display column headers multi-line on row-templated grid with MVC ?

I'm using server side templating for displaying custom rows in kendo gird and it works really so cool. But I need to display so many column headers to get filter and order my data. So I want to display column headers in multi-lines with their ordering and filtering functionalties. Is there any way to do this?

I've attached an image that shows what I want to do. I used a littile bit javascirpt to get the output but may be better ways allready exist.

Grid

answered on 09 Apr 2013

1 answer

610 views

Tabstrip not reloading after onclick

Hi,

I had a popup window, which opens from the button inside tabstrip "Regime sequence" and i want my tabstrip to reload once the window is closed. But it is not reloading from my below script. Why??

Below is my code:

<script type="text/javascript">
$(document).ready(function () {
$(".k-window-action.k-link").click(function () {

var tabStrip = $("#abc").data("kendoTabStrip"); //finding tabstrip
var tabContent = $("#abc").data("kendoTabStrip").contentHolder(1); //selecting particular tab
tabStrip.reload(tabContent); //reloading the tab
});
});
</script>

@(Html.Kendo().TabStrip()
.Name("workshopServiceRegime_#=REGIME_ID#")
.HtmlAttributes(new { @style = "margin-left:-40px", @id="abc" })
.SelectedIndex(0)
.Items(items =>
{
items.Add()
.Text("Regime detail")
.LoadContentFrom("ServiceRegimeDetail", "ServiceRegimeDetail");
items.Add()
.Text("Regime sequence")
.LoadContentFrom("ServiceRegimeSequenceList", "ServiceRegimeSequenceList");
items.Add()
.Text("Regime MMSB")
.LoadContentFrom("MMSBServiceRegimeList", "MMSBServiceRegimeList");
})
)

TabStrip

answered on 08 Apr 2013

2 answers

1.0K+ views

[Solved] Kendo UI Grid - ClientTemplate calling MVC Url.Action calls (incorrectly) two different actions

Hi,

1.  I have some data that loads into a Kendo grid via the Ajax binding.

2.   Within one of the columns there's a ClientTemplate that calls a javascript method (showAll).

3.   This method will call an action and get the details of the data, putting it into a json response, and
then open a jquery-ui dialog to show the details.

4.   When the user clicks on the link in the grid the HttpGet is triggered for the GetDetails action BUT,
the problem is, it is also triggered for the entire page's action (Index).

The question, I guess, is what is causing the Index action to be triggered? Because, the dialog will show, the detailed data will populate, but once I close the dialog all the filter textboxes will be reset and the grid will reload and the data within it.

Shouldn't the only action called be the GetDetails?

Any hints will be greatly appreciated!

Code:
@(Html.Kendo().Grid<LogViewModel>()
    .Name("LogGrid")
    .Columns(column =>
    {
column.Bound(x => x.StuffCount).Title("Stuff").Width(70)
            .ClientTemplate("<a onclick=\"showAll('" + "#= Id #')\"" + " href=''>#= StuffCount
#</a>");
    })

    .DataSource(dataBinding => dataBinding
                .Ajax()
                .PageSize(50)
                .Read(read => read.Action("GetData", "Summary")
                    .Data("getSearchFilters"))
                .Model(model => model.Id(o => o.Id)))
            .Events(e => e
                .DataBound("onGridItemsDatabound"))
            .Pageable(paging => paging.Refresh(true))
)}

<div id="dialog-message" title="" style="display: none">
    <p id="msg"></p>
</div>

<script type="text/javascript">
    var showAll= function (id) {
        var url = '@Url.Action("GetDetails",
"Summary")' + "/" + id;
        var sTitle = 'title text';
        $.getJSON(url, null,

            function (data) {
                $("#dialog-message").dialog({ title: sTitle });
                $("#msg").text(data.details);
                showMessage();
            });
    };

    var showMessage = function () {
        $("#dialog-message").dialog({
            modal: true,
            draggable: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
        });
    };
</script>

The controller methods
(content removed for brevity

public ActionResult Index(...)
{
    ...
}

public ActionResult GetDetails(Guid id)
{
    ... (get data from repository)
    return Json(data, JsonRequestBehavior.AllowGet);
}

Grid

answered on 08 Apr 2013

1 answer

153 views

Request URL is not in Odata format

Hi,

We have been struggling to implement a kendo-ui grid for several days consuming data from a WCF service proxy. All of our data tests in Fiddler work correctly and if we hard code a request in our Get action in the controller we can see the service is working and our dataset it retrieved. We think the issue is that the URL is request is not an Odata request. I have looked through to see if there is an Html helper to specify Odata in the index.chtml grid builder but have not found anything. We are pretty close to giving up on Kendo-ui completely I feel like this should be much easier to implement.

index.chtml

@model IEnumerable<Application.ServiceProxy.CustomerDTO>

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

.Name("grid")

.Columns(columns => {

columns.Bound(c => c.customerID).Width(100);

columns.Bound(c => c.name1).Width(100);

columns.Bound(c => c.matchcode).Width(100);

columns.Bound(c => c.city).Width(100);

columns.Bound(c => c.postalCode).Width(100);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Get", "Customer")

)

Customer Controller

using System;

using System.Collections.Generic;

using System.Net.Http;

using System.Web.Mvc;

using Kendo.Mvc.UI;

using Kendo.Mvc.Extensions;

using BusinessLogic.Models;

using System.Web;

using System.Linq;

using Newtonsoft.Json;

using Application.ServiceProxy;

using System.Web.Http;

using System.Web.Http.OData.Query;

using System.Web.Http.OData;

namespace Application.Controllers

{

public class CustomerController : Controller

{

[Queryable(AllowedQueryOptions = AllowedQueryOptions.All)]

public IEnumerable<ServiceProxy.CustomerDTO> Get()

{

var odataService = new Container(new Uri("http://localhost:8089/odata/"));

var customer = odataService.Customer.Take(10);

return customer.AsEnumerable();

}

public ActionResult Index() {

return View() ;

}

BusinessLogic customer controller (providing OData)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Web;

using System.Net.Http;

using System.Web.Http;

using BusinessLogic.Models;

using System.Web.Http.OData.Query;

using System.Web.Http.OData;

namespace BusinessLogic.Controllers

{

//public class CustomerController : CPSGlobalAPIController

public class CustomerController : EntitySetController<CustomerDTO, int>

{

protected cpsGlobalEntities entity = new cpsGlobalEntities();

#region mapper

private IQueryable<CustomerDTO> mapCustomer()

{

return

from c in entity.customer

select new CustomerDTO()

{

customerID = c.customerID,

matchcode = c.matchcode,

salesOrganizationCompanyCode = c.salesOrganization.companyCode,

salesOrganizationID = c.salesOrganizationID,

salesOrganizationName = c.salesOrganization.name,

statusID = c.statusID,

statusPrefix = c.status.prefix,

statusTranslationKey = c.status.translationKey,

serviceLevelStatusID = c.serviceLevelStatusID,

serviceLevelPrefix = c.status1.prefix,

serviceLevelTranslationKey = c.status1.translationKey,

systemID = c.systemID,

dunsNumber = c.dunsNumber,

mediaIDLogo = c.mediaIDLogo,

salesOrganization = c.salesOrganization.companyCode,

inventoryManagerID = c.inventoryManager.inventoryManagerID,

inventoryManagerAddressID = c.inventoryManager.addressID,

customerExternalSystemID = c.customerExternalSystemID,

internationalGroup = c.internationalGroup,

division = c.division,

corporateID = c.corporateID,

#region duplicated items for improved list view

name1 = c.customerExternalSystem.address.name1,

postalCode = c.customerExternalSystem.address.postalCode,

city = c.customerExternalSystem.address.city,

stateCode = c.customerExternalSystem.address.state.stateCode,

countryCode = c.customerExternalSystem.address.country.countryCode

#endregion

};

}

#endregion

#region GET

#region GET all

[Queryable]

public override IQueryable<CustomerDTO> Get()

{

return mapCustomer().AsQueryable();

}

#endregion

#region GET by ID

protected override CustomerDTO GetEntityByKey(int key)

{

//return mapCustomer().FirstOrDefault(p => p.customerID == key);

var cust = (from c in mapCustomer() where c.customerID == key select c).FirstOrDefault();

if (cust.inventoryManagerAddressID != null)

{

AddressController adC = new AddressController();

cust.inventoryManagerAddressDTO = adC.Get((int)cust.inventoryManagerAddressID);

}

if (cust.customerExternalSystemID != null)

{

CustomerExternalSystemController cesC = new CustomerExternalSystemController();

cust.customerExternalSystemDTO = cesC.Get((int)cust.customerExternalSystemID);

}

if (cust == null)

throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));

return cust;

}

#endregion

#region POST

protected override CustomerDTO CreateEntity(CustomerDTO customerDTO)

{

var customer = new customer()

{

matchcode = customerDTO.matchcode,

salesOrganizationID = customerDTO.salesOrganizationID,

statusID = customerDTO.statusID,

serviceLevelStatusID = customerDTO.serviceLevelStatusID,

mediaIDLogo = customerDTO.mediaIDLogo,

systemID = customerDTO.systemID,

customerExternalSystemID = customerDTO.customerExternalSystemID,

internationalGroup = customerDTO.internationalGroup,

division = customerDTO.division,

corporateID = customerDTO.corporateID,

inventoryManagerID = customerDTO.inventoryManagerID,

dunsNumber = customerDTO.dunsNumber

};

entity.customer.Add(customer);

entity.SaveChanges();

return GetEntityByKey(customer.customerID);

}

protected override int GetKey(CustomerDTO customer)

{

return customer.customerID;

}

#endregion

#region Put

protected override CustomerDTO UpdateEntity(int key, CustomerDTO customerDTO)

{

var originalCustomer = entity.customer.Find(key);

originalCustomer.matchcode = customerDTO.matchcode;

originalCustomer.salesOrganizationID = customerDTO.salesOrganizationID;

originalCustomer.statusID = customerDTO.statusID;

originalCustomer.serviceLevelStatusID = customerDTO.serviceLevelStatusID;

originalCustomer.mediaIDLogo = customerDTO.mediaIDLogo;

originalCustomer.systemID = customerDTO.systemID;

originalCustomer.customerExternalSystemID = customerDTO.customerExternalSystemID;

originalCustomer.inventoryManagerID = customerDTO.inventoryManagerID;

originalCustomer.dunsNumber = customerDTO.dunsNumber;

originalCustomer.internationalGroup = customerDTO.internationalGroup;

originalCustomer.division = customerDTO.division;

originalCustomer.corporateID = customerDTO.corporateID;

entity.SaveChanges();

return GetEntityByKey(key);

}

#endregion

#region PATCH

#endregion

#region DELETE

public override void Delete([FromODataUri] int key)

{

var customer = entity.customer.Find(key);

if (customer == null)

{

throw new HttpResponseException(HttpStatusCode.NotFound);

}

entity.customer.Remove(customer);

entity.SaveChanges();

}

#endregion

}

Grid

answered on 08 Apr 2013

5 answers

226 views

Internal Build 2013.1.327 Availaility....

As per:

http://www.kendoui.com/forums/mvc/general-discussions/update-destroy-operations-trigger-the-error-event-of-the-datasource-after-updating-to-q1-2013-(v-2013-1-319).aspx

Where can we get internal build 2013.1.327 ?

It's not listed when I'm logged into my account as an available internal build.

Rene.

Grid

answered on 08 Apr 2013

3 answers

300 views

RowTemplates?

Hi,

I am just wondering how i can use Kendo.UI MVC Grid to create a custom row template. I can see that it is possible in the Telerik.MVC Grid (http://demos.telerik.com/aspnet-mvc/razor/grid/clientrowtemplate), but can only see column template support in Kendo.

Am i missing something, or is feature possible?

Thanks.

Grid

answered on 08 Apr 2013

3 answers

190 views

Grid Popup Edit Window with Child Grid and Child Popup Edit Window - error on close of parent popup edit window. (2013.1.401)

I have managed to further pinpoint the issue I'm having with 2013.1.401.

It seems to only occur when I have nested grids (grid with popup edit with child grid):

a) parent grid with popup edit window (A)
b) popup edit window (A) from a contains a child grid (child grid also has popup edit window(B)).
c) upon closing the popup edit window A - not matter if I edited/updated/created or just closed the window - it faults out in kendo.all.js in the grid destroy for the child grid. The first error occurs at the that.resizable.destroy(); below: ( I have verified the error occurs on the child grid destroy).

Basically - this is reproducible for all grids with popup edit windows with child grids on those popup edit windows.

destroy: function() {
            //alert('destroying grid?');
            var that = this,
                element;

            Widget.fn.destroy.call(that);

            if (that.pager) {
                that.pager.destroy();
            }

            if (that.groupable) {
                that.groupable.destroy();
            }

            if (that.options.reorderable) {
                that.wrapper.data("kendoReorderable").destroy();
            }

            if (that.resizable) {
              that.resizable.destroy();
            }

Grid

answered on 08 Apr 2013

5 answers

1.4K+ views

Issue Using Grid with ViewModel

I am still new to MVC and still trying to get a grasp on the best way to do things. I realize at some point I'll probably need to switch to using Repositories or something but for now I have my EF Models and I am trying to use ViewModels in my Controllers.

I am trying to display a Grid and perform basic CRUD operations. I am using an EditorTemplate for the popup mode. Basically the Grid is supposed to display a set of items (Beamlines). One of the fields within a Beamline is an AllocationPanelID. The Beamline stores the AllocationPanelID but the full list of AllocationPanels is in a separate model. So my understanding of ViewModels is that I can combine data from multiple models into one View Model. This is where I am having trouble. I define that AllocationPanel IEnumerable<SelectListItem> in the View Model and connect it in the Controller but when it gets to it in the
View it has NULL as if it is never really getting hooked up to the data.

View Model: (shortened for breviety)

public class BeamlineViewModel

{

public decimal ID { get; set; }

public string Description { get; set; }

public Nullable<decimal> SortOrder { get; set; }

public string InsertionDevice { get; set; }

public Nullable<decimal> AllocationPanelID { get; set; }

public string Status { get; set; }

public IEnumerable<SelectListItem> AllocationPanels { get; set; }

public IEnumerable<SelectListItem> StatusTypes = new List<SelectListItem>

{

new SelectListItem {Value = "A", Text = "Available"},

new SelectListItem {Value = "C", Text = "Construction and Commissioning"},

new SelectListItem {Value = "D", Text = "Diagnostic and Instrumentation"},

new SelectListItem {Value = "O", Text = "Operational"},

new SelectListItem {Value = "U", Text = "Unused Port"}

};

}

Controller: (only showing Index, Edit, and related methods)

public ActionResult Index()

{

return View(GetBeamlines());

}

public ActionResult Edit(int id)

{

using (MyEntities context = new MyEntities())

{

return View(context.Beamlines.Find(id));

}

private static IEnumerable<BeamlineViewModel> GetBeamlines()

{

var context = new MyEntities();

return context.Beamlines.Select(b => new BeamlineViewModel

{

ID = b.ID,

Description = b.Description,

SortOrder = b.Sort_Order,

InsertionDevice = b.Insertion_Device,

AllocationPanelID = b.Allocation_Panel_ID,

Status = b.Status

});

}

public ActionResult GetAllocationPanels()

{

using (MyEntities context = new MyEntities())

{

var allocationPanels = context.Allocation_Panels.ToList();

var model = new BeamlineViewModel

{

AllocationPanels = allocationPanels.Select(m => new SelectListItem { Value = m.ID.ToString(), Text = m.Description })

};

return View(model);

}

View:

@model IEnumerable<MyProject.ViewModels.BeamlineViewModel>

@{

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.InsertionDevice).Title("Insertion Device");

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

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

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

})

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

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Beamline").Window(window => window.HtmlAttributes(new { @style = "width:700px;" })))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Server()

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

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

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

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

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

)

Editor Template: (shortened for breviety)

@model MyProject.ViewModels.BeamlineViewModel

@Html.HiddenFor(model => model.ID)

<div class="editor-label">

@Html.Label("Beamline")

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Description)

@Html.ValidationMessageFor(model => model.Description)

</div>

<div class="editor-label">

@Html.Label("Status")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.Status, new SelectList(Model.StatusTypes, "Value", "Text"), "(Select One)")

@Html.ValidationMessageFor(model => model.Status)

</div>

<div class="editor-label">

@Html.Label("Sort Order")

</div>

<div class="editor-field">

@Html.EditorFor(model => model.SortOrder)

@Html.ValidationMessageFor(model => model.SortOrder)

</div>

<div class="editor-label">

@Html.Label("Insertion Device Beamline")

</div>

<div class="editor-field">

@Html.RadioButtonFor(model => model.InsertionDevice, "Y")

@Html.Label("Yes")

@Html.RadioButtonFor(model => model.InsertionDevice, "N")

@Html.Label("No")

@Html.ValidationMessageFor(model => model.InsertionDevice)

</div>

<div class="editor-label">

@Html.Label("Allocation Panel")

</div>

<div class="editor-field">

@Html.DropDownListFor(model => model.AllocationPanelID, new SelectList(Model.AllocationPanels, "Value", "Text"), "(Select One)")

@Html.ValidationMessageFor(model => model.AllocationPanelID)

</div>

A lot of this code I got from different places and have manipulated to get it working. The GetAllocationPanels() method seems to hook the AllocationPanels IEnumerable that is defined in the View Model but I never actually call the GetAllocationPanels() method or see where to call it.

As the code currently exists, the Grid loads and when I try to edit a Beamline I get an error on the second to last line of the Editor Template, the DropDownListFor for the AllocationPanels. It gives me a ArgumentNullException. Value cannot be null. Parameter name: items.

I have also read that it might be better to have a View Model for the Beamline which would just contain the fields making up a Beamline, and then a second View Model for the Beamline listing which would have an instantiation for the first View Model and then also the other items like the AllocationPanels. I have tried that but could never seem to figure out how to type the View and Editor Template and also what should go in the Controller methods.

Any help is greatly appreciated.

The trouble is.

Grid

answered on 05 Apr 2013

1 answer

281 views

Clientrowtemplate Mvc - Looping collection of entity

Is it possible to create a clientrowtemplate with an entity model that includes a complex type of list to display some fields? I've created a server side rowtemplate but when I switch ajax on datasource, it doesn't work. I think it's expected. But how to create a complex template to display collections with ajax as a custom template?

Grid

answered on 05 Apr 2013