Questions on UI for ASP.NET MVC Forum

4 answers

176 views

unable to get the ClientFooterTemplate to show

hi,

i cannot get the total sum to show in the ClientFooterTemplate, below is the code. please let me know what i need to change.

the ClientGroupFooterTemplate does show, but the ClientFooterTemplate does not.

thanks.

@(Html.Kendo().Grid<VolumeViewModel>
()
.Name("ReportGrid")
.Columns(columns =>
{
columns.Bound(o => o.Firm).Width(130).Locked(true);
columns.Bound(o => o.Collat).Width(70);
columns.Bound(o => o.UserName).Width(100).Title("User");
columns.Bound(o => o.Product).Title("Product Type").Width(110);
columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
.ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
.ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("RevenueReport.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
)
.Sortable()
.AllowCopy(true)
.ColumnMenu()
.Groupable(group => group.ShowFooter(true))
.Resizable(resize => resize.Columns(true))
.Scrollable(scrollable => scrollable.Virtual(true))
.Scrollable(s => s.Height("500px"))
.Filterable(filterable => filterable
.Extra(true)
.Operators(operators => operators
.ForNumber(n => n.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To")
)
.ForDate(d => d.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To"))
)
)
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row)
)
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(model =>
{
model.Id(p => p.Firm);
model.Field(p => p.Collat).Editable(false);
model.Field(p => p.UserName).Editable(false);
model.Field(p => p.Product).Editable(false);
model.Field(p => p.Symbol).Editable(false);
model.Field(p => p.Volume).Editable(false);
})
.Read(read => read.Action("Volume", "ReportGrid")
.Data("GetGridData"))
.Group(groups =>
{
groups.Add(model => model.Firm);
groups.Add(model => model.Collat);
groups.Add(model => model.UserName);
groups.Add(model => model.Product);
groups.Add(model => model.Symbol);
})
.Aggregates(aggregates =>
{
aggregates.Add(model => model.Volume).Sum();
})

.Events(events => events.Error("onError").Change("onChange"))
))

Grid

answered on 31 May 2016

1 answer

475 views

How to pass all "checkbox" rows to the controller

I am wanting to pass only the rows where the checkbox is checked to my controller but I can not seem to figure this out. I don't want to use selected but checked boxes.

Scenario: user is presented with a list of products, some of which are pre-checked. they will then select more products by checking the checkboxes. I want to send all those rows to the controller, and also have it work with paging. Is there a way to change the following from using "selected" to use the checked?

// gather the selected rows and send them to the controller

$(function () {

$('#btnGenerate').click(function () {

var grid = $('#products').data('kendoGrid');

var selectedElements = grid.select();

for (var j = 0; j < selectedElements.length; j++) {

var item = grid.dataItem(selectedElements[j]);

items['products[' + j + '].ItemDescription'] = item.ItemDescription;

items['products[' + j + '].Quantity'] = item.Quantity;

}

$.ajax({

type: "POST",

data: items,

url: '@Url.Action("ProductsCart","Trial")',

success: function () {

window.location.href = "@Url.Action("ProductsCart", "Trial")";

},

error: function () {

alert("No products were selected.");

}

});

// POST: Add Trial Products to cart

[HttpPost]

public ActionResult ProductsCart(TrialProductViewModel[] products)

{

// do something with products

return Json(products);

}

Grid

answered on 31 May 2016

2 answers

138 views

Grid Filter Row Problem

Hi there I am trying to do http://demos.telerik.com/aspnet-mvc/grid/filter-row for my application. But there are some functionality I want to control but fails to do so and I can't find it anywhere on the documentation.

Since I have a lot more data than the demo here (15,000 people), loading all the auto complete from the filter the moment one character is typed in will result in a very slow and bad user experience, and often times it will pop up a window like the screenshot telling me "Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property."

How can I control when the auto complete shows up?

I did something like this in order to start auto complete after three characters, is this right? Any better way to control the whole project instead of just one column?

columns.Bound(i => i.LastName)
.Filterable(ftb =>
ftb.Cell(cell => cell.MinLength(3)
));

And when I clear the filter, it will load up a list with all the people here, which is not something I want and it will often stuck there for 10 seconds and then shows the error. How can I disable it?

Grid

answered on 31 May 2016

1 answer

507 views

Show pre uploaded files during edit mode of Grid

I have a grid which allows users to upload multiple files during the edit mode. Now during the edit mode, i am trying to figure out a way to show the preuploaded files and let user delete the files by clicking on 'x' icon.

Is there any example that shows how to populate prouploaded files during the edit mode inside the kendo grid in ASP Mvc?

Thanks

Avinash

Grid

answered on 31 May 2016

6 answers

380 views

Language translations

Can you translate the texts in the filters, like "Equals to" "Contains" etc. ?

if so. how ?

it would look a lot better if I can translate this to a different language.

Regards,

Emil

Grid

answered on 30 May 2016

3 answers

430 views

Progress Indicator on PopUp Window not displaying

I have a grid where I have a popup form defined to edit a row. Everything (finally) is working correctly *EXCEPT* the In-Progress spinner never displays upon submit.

Grid definition:

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

.Name("bom-prGrid-kendoGrid")

.HtmlAttributes(new {@class = "prGrid"})

.ClientRowTemplate("")

.Columns(columns =>

{

if (Model.StatusDisplay.Equals("Started")) { columns.Command(cmd => cmd.Edit()).Width(80); }

columns.Bound(g => g.BomId).Hidden();

columns.Bound(g => g.IsEditable).Hidden();

columns.Bound(g => g.Row).Width(75).Title("Row");

//... Some columns removed for brevity ...//

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => { model.Id(g => g.BomId); })

.PageSize(100)

.Read(r => r.Action("GetCloneAssembly", "AjaxProductReuse").Data("ProductReuseGridReadData"))

.Update(u => u.Action("UpdateBomItem", "AjaxProductReuse").Type(HttpVerbs.Post).Data("getUpdatedBomRowData"))

.Events(e => e.Error("ajax_error").Sync("dataSource_sync").Change("dataSource_change"))

)

.Events(e => e.DataBound("onDataBound").Edit("onEdit").Save("onSave"))

.Pageable(pager => pager

.Input(true)

.Numeric(true)

.Info(true)

.PreviousNext(true)

.Refresh(true)

.PageSizes(new int[] {100, 250, 500, 1000})

)

.ToolBar(toolbar =>

{

toolbar.Template(

@<text>

<div class="container-fluid otherElements" style="padding-top: 5px; padding-bottom: 5px;">

@Html.Partial("_CloneAssembly", Model)

</div>

</text>);

})

.Excel(excel => excel.FileName("ClonableBom.xlsx").Filterable(true).AllPages(true).ProxyURL(Url.Action("ExcelProxy", "AjaxProductReuse")))

.Sortable()

.Scrollable()

.Filterable()

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("BOMForm").Window(w => w.Title("Manage BOM Item").Name("BOMForm")))

.Resizable(resizing => resizing.Columns(true)).Reorderable(reorder => reorder.Columns(true))

)

Javascript:

// Events as defined by the grid's .Event(...) settings...

function onEdit(e) {

//Bind deactivate event to the Popup window to support conditional formatting

e.container.data("kendoWindow").bind("deactivate", function() { conditionalFormattingAll(); });

}

function onSave(e) {

debugger;

kendo.ui.progress(e.container, true);

}

// End events...

Maybe I misunderstood all the docs, forums and such but the onSave(e) event handler should display a progress gif while the ajax call is in progress. Am I completely off base here?

Grid

answered on 30 May 2016

1 answer

216 views

DisplayAttribute Prompt support

Hey,

maybe i missing something. But it seems there is no support vor the "prompt" property of the DisplayAttribute, isnt? Any plans to have full support for the DisplayAttribute out of the box? Would be awesome!

regards
Kai

General Discussions

answered on 30 May 2016

3 answers

2.7K+ views

Show or hide columns on databound

I'm trying to display a grid according to certain parameters obtained in the read function.

This is my grid:

@(Html.Kendo().Grid(Model)
.Name("ConciliacionesPendientesDetalle")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ConciliacionDetalle", "ConciliacionItem")
.Data("PasarParametros"))
.PageSize(12))
.Columns(columns =>
{
columns.Bound(foo => foo.Id).Title("Id").ClientFooterTemplate("#= count#");
columns.Bound(foo => foo.OrigenDescripcion).Title("Origen");
columns.Bound(foo => foo.Varchar1).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar2).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar14).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar15).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar16).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar17).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar18).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar19).HtmlAttributes(new { @class = "ocultarColumna" });
columns.Bound(foo => foo.Varchar20).HtmlAttributes(new { @class = "ocultarColumna" });
})
.Sortable()
.Events(e => e.DataBound("onDataBound"))
.Selectable()
.Scrollable(s => s.Height(320))
.AutoBind(false)
)

And whenever I force the grid to read data, I fire this js function:

And this is my css class:

ocultarColumna{
display:none !important;
visibility:hidden !important;
}

I put both properties just to see if anything works, but so far no luck. What can I do to hide the columns I don´t want to display dynamically?

Grid

answered on 27 May 2016

1 answer

159 views

How tomake ComboBox in Grid Mandatory

I am having issues with the code pasted below (after issues).I have few text fields and two kendo Grids on page. First Grid is Server Bound, Second Grid gets Selected rows of First Grid. I am having following issues

Issue 1. The second Grid has a ComboBox , How can make that Mandatory ?

Issue 2: When I select a row from First Grid ,it gets added to second. Now i select ComboBox value. If i select another row from First Grid it basically re-initialize ComboBoxes for all rows of Second Grid and I loose first rows Selected value. How can i avoid then and leave the selection intact

Issue 3: To check whether I have something in Second Grid (Which basically holds selected values of First Grid) I am doing following

var gridItems = $("#SelectedpupilGrid").data("kendoGrid").items();
// gridItems.length gives 1 even if there is nothing in the Grid (Is this a bug?)
// thats the reason i am doing
// var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total(); to check whether Grid has something or not

Even if there is nothing in Second Grid , gridItems.length gives me 1. How I can resolve this issue.

Code:

@using Kendo.Mvc.UI

@model CreateViewModel

@{

ViewBag.Title = "title";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div>

<h3>Enter your detail and then Select Pupil(s)</h3>

</div>

@* Adding <Form> just to trigger unobtrusive validation. Data will be Posted with Jquery Ajax *@

@using (Html.BeginForm("Index","Home",FormMethod.Post,new {@id="pupilDataForm"}))

{

<div>

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

@Html.TextBoxFor(model => model.FirstName,new{@id="FirstName"})

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

</div>

<br />

<div>

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

@Html.TextBoxFor(model => model.LastName, new { @id = "LastName" })

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

</div>

<br/>

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

.Name("pupilGrid")

.Columns(columns =>

{

columns.Bound(p => p.PupilId).Hidden(true);

columns.Bound(p => p.FirstName).Title("First Name");

columns.Bound(p => p.LastName).Title("Last Name");

columns.Command(command => command.Custom("Select").Click("addSelected")).Width(180);

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(read => read.Action("PupilData", "Home"))

)

<div>

<h3>Selected Pupil(s)</h3>

</div>

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

.Name("SelectedpupilGrid")

.Columns(columns =>

{

columns.Bound(p => p.PupilId).Hidden(true);

columns.Bound(p => p.FirstName).Title("First Name");

columns.Bound(p => p.LastName).Title("Last Name");

columns.Bound(p => p.Relationshiptype).Title("Relationship").Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(

Html.Kendo().ComboBox()

.Name("Relationshiptype" + "#=PupilId#")

.Placeholder("Select relationship...")

.DataTextField("Text")

.DataValueField("Value")

.HtmlAttributes(new { style = "width: 250px", required = "required" })

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Father", Value = "1"

},

new SelectListItem() {

Text = "Mother", Value = "2"

},

new SelectListItem() {

Text = "Other relative", Value = "3"

},

new SelectListItem() {

Text = "Other non relative ", Value = "4"

}

}).ToClientTemplate().ToString());

columns.Command(command => command.Custom("Deselect").Click("removePupil")).Width(180);

})

.Events(ev => ev.DataBound("initCombo"))

)

}

<div style="margin-top: 50px"><input id="postData" class="k-button" style="margin-left: 50" type="button" value="Post Data to Controller"/></div>

<script>

function initCombo(e) {

$(".templateCell").each(function () {

eval($(this).children("script").last().html());

});

}

function addSelected(e) {

e.preventDefault();

var isExist = false;

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

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

var data = grid.dataSource._data;

if (data.length === 0) {

grid.dataSource.add(dataItem);

window.scrollTo(0, document.body.scrollHeight);

} else if (data.length > 0) {

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

if (data[i].PupilId === dataItem.PupilId) {

isExist = true;

toastr.error('This Pupil has already been Selected');

}

if (isExist === false) {

grid.dataSource.add(dataItem);

window.scrollTo(0, document.body.scrollHeight);

}

function removePupil(e) {

e.preventDefault();

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

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

grid.dataSource.remove(dataItem);

}

$("#postData").click(function () {

if (!$('#pupilDataForm').valid())

return false;

var pupils = [];

var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total();

var gridItems = $("#SelectedpupilGrid").data("kendoGrid").items();

// gridItems.length gives 1 even if there is nothing in the Grid (Is this a bug?)

// thats the reason i am doing

// var gridCount = $("#SelectedpupilGrid").data("kendoGrid").dataSource.total(); to check whether Grid has something or not

if (gridItems.length > 0 & gridCount !== 0) {

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

var relationship = $(gridItems[i]).find("input[id*='Relationshiptype']").data("kendoComboBox");

var relationshipValue = relationship.value();

// Couldn't find any other way of getting Grid values than doing the followoing

// var pupilId = $(gridItems[i]).find('td:not(:empty):first').text();

var pupilId = $(gridItems[i]).find('td:not(:empty):first').text();

var pupil = { pupilId: pupilId, relationshiptypeId: relationshipValue }

pupils.push(pupil);

}

var firstName = $('#FirstName').val();

var lastName = $('#LastName').val();

var viewModel = { Pupils: pupils, FirstName: firstName, LastName: lastName };

$.ajax({

url: '/Home/Index',

data: JSON.stringify(viewModel),

contentType: 'application/json',

type: 'POST',

success: function (request, status, error) {

window.location = '/HomeUser/Index';

},

error: function (request, status, error) {

alert(error);

}

});

</script>

Grid

answered on 27 May 2016

5 answers

400 views

Localization of Calendar in Filter of Date Column

Hi,

I have set a grid as .Filterable(). The Filter dialogs of the columns are localized (german). In a date columnI can use a calender to set a data for filtering. But the calendar is shown in english. It is possible to show it in the language of the grid?

Peter

Grid

answered on 27 May 2016