Questions on UI for ASP.NET MVC Forum

3 answers

515 views

How to retain the new row on top in grid

I am attempting to create a new, inline editable row on the first page of
our kendo grid. On sort and filter we would like the row to remain on the top
of the grid. It is currently getting shuffled into the table. The code which
created the new row is included below. Full cshtml attached.

//add the new record row if we are on page 1
        dataSource.bind("requestEnd", function(e) {

            setTimeout(function() {
                var grid = $("#grid").data("kendoGrid");
                console.log("requestEnd - " + grid.dataSource.hasChanges());
                if (grid.dataSource.page() == 1) {

                    //has an empty row already been added
                    if(grid.dataSource.hasChanges()) {

                        grid.dataSource.cancelChanges();

                    }

                    newGuy = grid.dataSource.insert(0, { });
                    grid.editRow($("tr:nth(0)", grid.tbody));
                }
            });
        });

Grid

answered on 04 Nov 2013

1 answer

95 views

grid hover and virtual scrolling

CSS

<style>

#grid,

#splitter { border-width: 0; height: 100%; }

html,

body { margin: 0; padding: 0; height: 100%; }

html { overflow: hidden; }

.k-grid-content > table > tbody > tr:hover { background-image: url("textures/brushed-metal.png"), linear-gradient(to bottom, rgb(238, 159, 5) 0px, rgb(244, 175, 3) 100%); }

.k-grid-content > table > tbody > tr .k-button { visibility: hidden; }

.k-grid-content > table > tbody > tr:hover .k-button { visibility: visible; }

</style>

view

.Scrollable(c=>c.Virtual(true))

Grid

answered on 04 Nov 2013

3 answers

166 views

initial values never populated

I'm having issues getting my initial values to be populated in the multiselect widget. The ajax request works for filtering just fine, however i can never get the initial values to populate even if i hard code them as below:

Im using v 2013.2.918.340 of Kendo.Mvc.dll

<div class="container-div grid-tab-content-pane">

@(Html.Kendo().MultiSelect()
.Name(AMultiName)
.DataTextField("PrettyText")
.DataValueField("MapAbbreviation")
.Placeholder("Edit EMR maps...")
.Filter(FilterType.Contains)
.MinLength(3)
.AutoBind(false)
.HighlightFirst(true)
.DataSource(ds => ds.Read(r=>r.Action("ReadMapOptions","EmrMappingKendo", new {Area="Messaging"})).ServerFiltering(true))
.Value(new List<EmrMapping>()
{
new EmrMapping(){PrettyText = "Abcdef",MapAbbreviation = "s01"},
new EmrMapping(){PrettyText = "2nde obn", MapAbbreviation = "asdf012"}
})
)

</div>

What am i doing wrong?

Edit:

I even tried hardcoding the value as a dynamic type like the example shows but I get the same result. No js errors on the page and the widget appears to work except the initial values aren't displayed..

<div class="container-div grid-tab-content-pane">

@(Html.Kendo().MultiSelect()

.Name(AMultiName)

.DataTextField("PrettyText")

.DataValueField("MapAbbreviation")

.Placeholder("Edit EMR maps...")

.Filter(FilterType.Contains)

.MinLength(3)

.AutoBind(false)

.HighlightFirst(true)

.Value(new []

{

new {PrettyText = "Abcdef",MapAbbreviation = "s01"},

new {PrettyText = "2nde obn", MapAbbreviation = "asdf012"}

})

.DataSource(ds => ds.Read(r=>r.Action("ReadMapOptions","EmrMappingKendo", new {Area="Messaging"})).ServerFiltering(true)).MinLength(3)

)

</div>

MultiSelect

answered on 04 Nov 2013

1 answer

357 views

how do I make chart responsive to screen resize like grids are?

Chart

answered on 04 Nov 2013

2 answers

308 views

Validation event handler e.errors is undefined

I have a kendo grid with two sub grids. The last subgrid has inline edit. (See code below for grids)

I have the following error method. The first error message displays: "In the error handler method." The second alert says "object [Object]" and the third message says "undefined." Since its undefined the
if(e.errors) statement is not run and no errors are displayed.

I break on the controller and the ModelState.IsValid = false and I see two items that have Errors Count = 1. I have even hardcoded an error like: ModelState.AddModelError("From", "From is required");.

function error_handler(e) {

alert("In the error handler method.");

alert(e);

alert(e.errors);

if (e.errors) {

alert("Has errors.");

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

alert("Errors:" + key + value);

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

Here is the code for the grids:

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

.Name("grid")

.Columns(columns => columns.Bound(d => d.Name).Title("Divisions"))

.ClientDetailTemplateId("templateSub")

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

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Divisions", "Division", new { projectID = Model.ProjectID }))

)

.Scrollable()

)

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

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

.Name("grid_#=DivisionID#")

.Columns(columns =>

{

columns.Bound(s => s.Name).Title("SubDivisions");

})

.ClientDetailTemplateId("templateCat")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("SubDivisions", "SubDivision", new { projectID = Model.ProjectID, divisionID = "#=DivisionID#" }))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

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

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

.Name("grid_#=SubDivisionID#")

.Columns(columns =>

{

columns.Bound(pcr => pcr.From).Width(80);

columns.Bound(pcr => pcr.To).Width(80);

columns.ForeignKey(pcr => pcr.CategoryID, (System.Collections.IEnumerable)ViewData["categories"],

"CategoryID", "Name").EditorTemplateName("CategoriesDropDownList").Width(300);

columns.ForeignKey(pcr => pcr.CategoryValueID, (System.Collections.IEnumerable)ViewData["categoryValues"],

"CategoryValueID", "Name").EditorTemplateName("CategoryValueDropDownList").Width(300);

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

})

.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

model.Id(pcr => pcr.ProjectsCategoryResultsID);

model.Field(pcr => pcr.ProjectsCategoryResultsID).Editable(false);

})

.Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))

.Create(create => create.Action("CategoryResultsCreate", "Category"))

.Update(update => update.Action("CategoryResultsUpdate", "Category"))

.Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

Grid

answered on 04 Nov 2013

1 answer

156 views

Autocomplete - Horizonal scroll bar

Is there anyway to have autocomplete has a horizonal scroll bar if the text is longer than the width of the Autocomple so it can avoid text wrap.

Thanks!

AutoComplete

answered on 01 Nov 2013

1 answer

112 views

Display Distinct Values in Parent Node Of TreeView

Hello,

I have been having issues displaying distinct values for the parent nodes. I have attached some sample files to show you what it is doing.

Thanks

BT

TreeView

answered on 01 Nov 2013

1 answer

192 views

Automatically show centered loading image on Kendo Web ListView, as the Grid does?

Is there any setting for the ListView (Web / MVC) that would show the same loading image / spinner as the Grid does by default?

Why should it behave any differently when loading its content via ajax?

Thanks,
-Dave

ListView

answered on 01 Nov 2013

1 answer

209 views

Kendo Mobile ASP MVC Tutorial

Would anyone be able to point me in the direction of a tutorial on how to set up and configure a basic mobile website in Visual Studio using the Kendo UI? I can find examples for Kendo Mobile and examples for Kendo ASP MVC, but none that seem to combine the two. Other examples I've found relate more to how to package the apps for publishing to the app store which is not really what I'm looking for either. Even a pre-configured sample project that I could download and run in VS would be useful as a starting point.

Thanks for any help!

General Discussions

answered on 31 Oct 2013

1 answer

813 views

how to check checkeboxes based on a condition

Hello,

I've got a treeview which is bound client side and displays checkboxes.
On page load I need to check some of them based on a condition.

element.kendoTreeView({

dataSource: data,

checkboxes: {

name: "checkedData",

template: "<input type='checkbox' name='checkedData' value='#= item.text #' />"

}

});

data is created like this :
data.push({
text: item.someName, checked : checked
});

I can't add a "checked='#= item.checked#'" in the template because this will check everything regardless of what I have in item.checked - it's an html thing.
So how can I achieve this ?

TreeView

answered on 31 Oct 2013