Questions on UI for ASP.NET MVC Forum

1 answer

139 views

Upgrade to 2014.2.903 is making invalid template error for hierarchical grid

after upgrading to latest version of kendo asp.net mvc 2014.2.903, it is making javascript error "Invalid Template".
It is observed that error occurs if hierarchical grid is filterable, for testing here is the sample code take from the example, i have changed this code to make sub grid as Filterable

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(110);
columns.Bound(e => e.LastName).Width(110);
columns.Bound(e => e.Country).Width(110);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);

})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
.Events(events => events.DataBound("dataBound"))
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("grid_#=EmployeeID#")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(70);
columns.Bound(o => o.ShipCountry).Width(110);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.ShipName).Width(200);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable()
.Filterable()
.ToClientTemplate()
)
</script>
<script>
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>

Grid

answered on 16 Sep 2014

6 answers

823 views

[Solved] How to use Aggregate(ChartSeriesAggregate.Sum) Kendo Chart?

I am trying to calculate days interval(finish date - start date) and draw it with Kendo Chart.

My categories are like that:0-5 days; 6-10 days; 11-15 days; 16-20 days;...; Bigger than 30I

n my model, I have timespan day values, and string category names(0-5 days; 6-10 days; 11-15 days; 16-20 days).

model => model.zerotofivevalues = 3, 2 , 4 , 1
model => model.zerotofive = "0-5, "0-5", "0-5"

How can i remove blue prints at my attached picture and "null" ? I think, i have a problem with categorisation but i can't solve this problem.Here is my code:

@(Html.Kendo().Chart(Model)
.Name("chart")
.Series(series =>
{
series
.Column(model => model.zerotofivevalues, categoryExpression: model => model.zerotofive)
.Aggregate(ChartSeriesAggregate.Sum);

series
.Column(model => model.fivetotenvalues, categoryExpression: model => model.fivetoten)
.Aggregate(ChartSeriesAggregate.Sum);

series
.Column(model => model.tentofifteenvalues, categoryExpression: model => model.tentofifteen)
.Aggregate(ChartSeriesAggregate.Sum);

etc, etc, etc,

.CategoryAxis(axis => axis
.Categories("0-5", "5-10", "10-15", "15-20", "20-25")
.MajorGridLines(lines => lines.Visible(false))

Chart

answered on 16 Sep 2014

1 answer

320 views

Cascaded typeahead textbox in grid

Can we have cascaded typeahead textbox instead of ordinary DropDownList in kendo grid? The reason is we want to choose BrandName(string) from database first, if it's not an existing BrandName, we want the ability to enter a new one. Then the choice of Model#(string) would be depending on BrandName. If there is some model# for that brand, we list all of them and let user make a choice. If not, we allow user to enter a new model#.

I tried combobox and autocomplete. Couldn't succeed.

Here is the code that I'm trying (just in case it would be helpful)
                @(Html.Kendo().Grid<mobiCore.Models.ReportDetailModel>()
                .Name("ReportDetail")
                .Columns(columns =>
                {
                    columns.Bound(p => p.BrandName).HeaderHtmlAttributes(new { @title = "Brand Name" }).ClientTemplate("#=BrandName.Name#");
                    columns.Bound(p => p.ModelNo).HeaderHtmlAttributes(new { @title = "Model Number" }).EditorTemplateName("ModelNo");
                    columns.ForeignKey(p => p.ProductID, (SelectList)ViewBag.Product).Title("Product");
                    columns.Bound(p => p.Units).Width(75);
                    columns.Command(command => { command.Destroy(); }).Width(85);
                })
                .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Pageable()
                .Sortable()
                .Navigatable()
                .Scrollable()
        // .HtmlAttributes(new { style = "maxwidth:1400px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .Events(events => events.Error("error_handler"))
                    .Model(model =>
                    {
                        model.Id(p => p.ReportDetailID);
                        model.Field(p => p.ReportID).Editable(false);
                        model.Field(p => p.Units).DefaultValue(0);
                        model.Field(p => p.ProductID).DefaultValue(0);

                    })
                    .ServerOperation(false)
                    .Read(read => read.Action("Detail_Read", "ReportDetail", new { id = Model.ReportID }))
                    .Create(create => create.Action("Detail_Create", "ReportDetail", new { id = Model.ReportID }))
                    .Update(update => update.Action("Detail_Update", "ReportDetail"))
                    .Destroy(delete => delete.Action("Detail_Destroy", "ReportDetail"))
                )
            )
<script type="text/javascript">

    function filterBrand() {
        return {
            CompanyID: '@Model.CompanyID'
        };
    }
    function filterModel() {
        return {
            CompanyID: '@Model.CompanyID',
            BrandName: $("#BrandName").data("AutoComplete").value()
        };
    }
</script>

Below is partial view under EditorTemplates: BrandName.schtml
@model string

@(Html.Kendo().AutoComplete()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
    .DataTextField("Name")
     .DataSource(dataSource => dataSource.Read(read => read.Action("GetBrand", "CustomerUnitReports").Data("filterBrand")).ServerFiltering(true))
    .HtmlAttributes(new { @class = "k-widget k-autocomplete k-input", style = string.Format("width:200px") })
    .Delay(500)
    .HighlightFirst(true)
)

Below is partial view under EditorTemplates: ModelNo.schtml
@model string

@(Html.Kendo().ComboBoxFor(m => m)
                  .AutoBind(false)
                          .Placeholder("Select Model#...")
                                  .DataTextField("ModelNumber")
                              .DataValueField("ModelNumber")
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetModelNo", "CustomerUnitReports").Data("filterModel"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("BrandName")
)

@Html.ValidationMessageFor(m => m)

Thanks a lot,

Grid

answered on 15 Sep 2014

1 answer

294 views

Change Kendo Grid column names based on Tab selection

Hi,

I am using below code to display Kendo Grid inside Kendo TabStrip. Here GetDetails is a JsonResult method in controller returning different data based on each tab selection.Each selected tab name is sent as parameter to Grid ,based on that , data is binded to Grid.According to our requirement , We have tabstrip where tabs are loaded dynamically . Inside of this tabstrip, we have Kendo grid. Based on tab selection we need to display different data in kendo grid present inside tabstip.Grid inside tabstrip may have different column names based on tab selection.Suppose if user click on First tab,then that value is sent to JsonResult method in controller to retrieve data and if obtained data has only 2 columns like Name,Title then only those 2 columns should be displayed in grid. If user click on Second tab,then that value is sent to JsonResult method in controller to retrieve data and if obtained data has only 5 columns like Name,Location,City,Address,Status then only those 5 columns should be displayed in grid.

With below code, i am getting same column names for all tab grids.For each tab selection , same column names are binded to all grids.How can i bind different column names to gird present in each tab.Column names in grid should change for each tab selection based on data obtained from GetDetails is a JsonResult method in controller.

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Items(tabstrip =>

{

foreach (var tab in @Model)

{

tabstrip.Add().Text(tab.ComponentTypes).Content(@<text>

@(Html.Kendo().Grid<Portal.Entity.ComponentProperty>().Name("grids" + tab.ComponentTypes)

//+ DateTime.Now.ToString().Replace(" ", ""))

.Columns(columns =>

{

}) .HtmlAttributes(new { style = "width: 980px;height: 800px" })

.Scrollable().Sortable().Pageable().DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetDetails", "ComponentProperties", new { PropertyName = tab.ComponentTypes } ))

.ServerOperation(false) ))

</text>

);

}

})

Grid

answered on 15 Sep 2014

2 answers

414 views

[Solved] Populate new row fields from grid popup

Hi

I'm having an issue with populating some fields in a Kendo Grid.

I have a page that displays details about a Team. On that page is a Kendo grid that displays a list of members in the current team that is being viewed. The grid has the following columns

Username
FirstName
LastName
EffectiveFromDate
EffectiveToDate

The page can be put into an edit state which allows you to then edit or delete team members in the grid using edit or delete buttons in each row of the grid. There is also top level option to add a new member to the team.

When i click on the new button to add a new member, a popup is displayed. On the popup is an autocomplete list for selecting who is to be added to the team, and two datetime pickers for the effective to and from dates.

When i select a user from the autocomplete, enter the effective to and from dates, and click Ok to close the popup, a new row is added to the grid as expected. But the Username, First Name and Last Name fields are not populated.

I have added hidden fields onto the popup view that are populated on an onUserAutoCompleteChanged event in the AutoComplete view. When i debug i can see these fields are being correctly populated with the correct data when i make a user selection with the autocomplete. The issue is that the data is not being re-bound to the grid when i close the popup.

I added a text field for FirstName to the popup so i could see that it was being populated when i made a selection in the autocomplete, which it definitely is.

If i make a user selection without making any changes to the First Name text field and close the popup, the data is not displayed in the grid although a new row is created. However, if i select a user from the autocomplete to populate the FirstName text field and then alter the text in that field, and then close the popup, the data is displayed in the grid for FirstName.

How do i go about firing whatever is causing the data to bind to the grid when i update the text field without having to update the text field?

TeamPage cshtml

<div class="row">

<div class="form-group col-md-6 ">

@Html.LabelFor(model => model.TeamCode)

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

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

</div>

<div class="row">

<div class="form-group col-md-6 ">

@Html.LabelFor(model => model.TeamName)

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

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

</div>

<div class="row">

<div class="form-group col-md-12 ">

@Html.LabelFor(model => model.TeamDesc)

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

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

</div>

<div class="row">

<div class="form-group col-md-12">

@Html.Partial("~/Areas/Teams/Views/TeamMember/_List.cshtml", this.Model.Members, null)

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

</div>

<script type="text/javascript">

function buildData() {

// Get the form values into simple key value array

var formData = getFormObj();

var gridData = $("#teamMemberGrid").data("kendoGrid").dataSource.data();

// Prepare the model

return {

TeamDetailId: formData["TeamDetailId"],

TeamCode: formData["TeamCode"],

TeamDesc: formData["TeamDesc"],

TeamName: formData["TeamName"],

Members: gridData,

Dto: formData["Dto"]

};

}

$(function () {

$("form").on("submit", function (event) {

event.preventDefault();

var request = buildData();

submitForm(request, this.action);

});

</script>

TeamMemberGrid cshtml

<div>

@(Html.AjaxGridFor<TeamMemberModel>("teamMemberGrid", "Teams", "TeamMember")

.ToolBar

(

toolbar =>

{

if (Html.ShowEditControls())

{

toolbar.Template("<a class='k-button k-button-icontext ' href='' id='customGridAdd'><span></span>New</a><span></span>");

}

)

.Columns

(

columns =>

{

if (Html.ShowEditControls())

{

columns.Command(commands =>

{

commands.Custom("Edit").Text("Edit").Click("onGridEdit");

commands.Custom("Delete").Text("Delete").Click("onGridDelete");

});

}

)

.BuildAjaxDataSource<TeamMemberModel>("TeamMember", updateAction: "UpdateMember", createAction: "AddMember", destroyAction: "RemoveMember")

)

<script type="text/javascript">

function onGridEditing(e) {

var id = $('#TeamDetailId').val();

if (e.model.isNew()) {

e.model.set("TeamDetailId", id);

e.model.set("TeamMemberId", kendo.guid());

}

setPopupTitle(e);

setGridPopupButtons(e);

}

//set username, first name, last name

function onGridSaving(e) {

var data = e.sender.dataSource.data();

for (var i = 0; i < data.length; i++) {

var item = data[i];

if (item.TeamMemberId === e.model.TeamMemberId) {

item.set('Username', $('Username').val());

}

function onGridDelete(e) {

var grid = $("#teamMemberGrid").data("kendoGrid");

var row = $(e.currentTarget).closest("tr");

grid.removeRow(row);

}

</script>

</div>

Popup View cshtml

<div class="form-group col-md-11">

@Html.LabelFor(model => model.UserDetailId)

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

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

</div>

<div class="form-group col-md-11">

@Html.LabelFor(model => model.EffectiveFromDate)

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

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

</div>

<div class="form-group col-md-11">

@Html.LabelFor(model => model.EffectiveToDate)

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

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

</div>

<div class="form-group col-md-11">

@Html.LabelFor(model => model.FirstName)

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

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

</div>

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

@Html.KendoScripts()

<input id="Username" name="Username" data-val="true" data-bind="value:Username" type="hidden" value="">

<input id="FirstName" name="FirstName" data-val="true" data-bind="value:FirstName" type="hidden" value="">

<input id="LastName" name="LastName" data-val="true" data-bind="value:LastName" type="hidden" value="">

AutoComplete cshtml

function onUserAutoCompleteChange(e) {

var dataItem = $("#@this.ViewData.ModelMetadata.PropertyName").data("kendoDropDownList").dataItem();

$("#Username").val(dataItem.Username);

$("#FirstName").val(dataItem.FirstName);

$("#LastName").val(dataItem.LastName);

}

</script>

TeamMemberController

/// <summary>

/// For use with Kendo Grid ajax binding

/// Creates new models by inserting the data posted by the Kendo Grid into the grid datasource.

/// </summary>

/// <param name="products">The model created by the user.</param>

/// <returns>The inserted model so the Kendo Grid is aware of the newly generated model</returns>

[HttpPost]

public virtual ActionResult AddMember([DataSourceRequest]DataSourceRequest request, TeamMemberModel model)

{

return Json(new[] { model }.ToDataSourceResult(request, ModelState));

}

Thanks in advance

Grid

answered on 15 Sep 2014

1 answer

210 views

Unique Date Formatting Issue

I wish I could get as far as all the other users having issues with formatting dates, but I'm stuck right here. The Format method isn't working. My grid is still displaying a Json date looking like this /Date(1364927400000)/. My date field is actually a DateTimeOffset field and I really would rather use a format string like yyyy-MM-dd hh:mm:ss tt K or yyyy-MM-dd hh:mm:ss tt zzz, but /Date(1364927400000)/ is completely unacceptable.

@(Html.Kendo().Grid<UtiliPoleOfficeWeb.Models.JobPriorityModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.Description).Width(150);
columns.Bound(p => p.Priority).Width(100);
columns.Bound(p => p.Owner).Width(100);
columns.Bound(p => p.Started).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.Inspector).Width(150);
columns.Bound(p => p.Completed).Width(425).Format("{0:dd/MM/yyyy}");
columns.Bound(p => p.FRInspector).Width(140).Title("Field Review Inspector");
columns.Bound(p => p.FRCompleted).Width(425).Title("Field Review Completed");
columns.Command(command => { command.Edit(); }).Width(100);
}) . . .

Please help.

Grid

answered on 15 Sep 2014

3 answers

166 views

[Solved] Query on using the ClientTemplate on Grid with Ajax Binding

Hi,

I am trying to call a Html extension helper method 'GetUserFormattedId' from the client template of a ajax bound grid column. I am trying the format a value of the column.

I am unable to get it working. Is it allowed to call extension methods in this way? Please advise.

@{

Html.Kendo().Grid<InvoiceSummaryDto>()

.Name("invoiceAccountingGrid")

.Columns(columns =>

{

columns.Bound(l => l.Id).ClientTemplate("<a href='" + @Url.Action("Details", "Invoice", new { area = "Accounting" }) + "/#= Id #'" + ">" + @Html.GetUserFormattedId(@"#= Id #") + "</a>").Title("ID");

columns.Bound(l => l.ItemsDescription).Title("Description");

})

I

Grid

answered on 15 Sep 2014

3 answers

538 views

[Solved] How to determine if Window is initialized

Hello, I need to check if the Window is already init, if possible.

Do you know if there is a good way to know this ? Without use a parameter in my controller would be best.

Thanks

Window

answered on 15 Sep 2014

5 answers

572 views

Inline editing doesn't work with Date fields, get a validation error

I would like to use inline editing with KendoUI grids in an MVC context, but can't at the moment for any data containing Date fields, because whenever I click the Update button (whether after creating a new record, or editing an existing one), even if I haven't changed the date field, I get a validation error (e.g. if the field is DateOfBirth)

"The field Date of Birth must be a date". (please see attached screenshot)

The date format I am setting for the Grid is dd MMM yyyy (because this is unambigous, whereas e.g 04 06 2012 is ambiguous and could mean either 4 June 2012 or 6 April 2012) and my pc (Windows 8, running Visual Studio 2012) is set up with UK regional settings.

(I have a support ticket set up for this, but no solution yet after 10 days), so am posting it here in case anyone else can help.

NB It has been suggested that I set the culture to "en-GB" (which I have never had to do before, including lots of other [non inline editing] use of KendoUI grids), but it didn't resolve the problem.

Thanks in advance for your help

Grid

answered on 12 Sep 2014

9 answers

205 views

Add Color Picker as a resource instead of a dropdownlist

How can I add a Color Picker to the event dialog using resources? I even looked at a custom editor but recreating the stock event dialog seems like it will be complex just to add a Color Picker.

Is there a demo for this?

.Resources(resource =>

{

resource.Add(m => m.Color) // Need this to be a color picker

.Title("Color")

.DataTextField("Name")

.DataValueField("ColorID")

Scheduler

answered on 12 Sep 2014