Questions on UI for ASP.NET MVC Forum

2 answers

637 views

requestEnd e.Type undefined following update

Hi, below please see my view I'm having issues with. I'm trying to check for a successful save (my items are being saved out to the database correctly, so I have no reason to believe there's an issue with the save) but as you can see in the "wasSaveSuccessful" function, I'm alerting out the e.type. The initial read alerts out "read" as expected, but after changes (done with a template column with radio buttons) it alerts out "undefined". Not sure why, but is there another way to check for success? I want to pop down a notification to the users when their changes have been successful.

<div class="col-lg-12 column">

<div class="row page-header">

<h1>

Metric Threshold Maintenance <small>Edit Metric Threshold Values</small>

</h1>

</div>

<div class="col-lg-3">

@(Html.Kendo().TreeView()

.Name("ProgramTree")

.DataTextField("Name")

.Events(e => e.Change("programSelected"))

.DataSource(dataSource => dataSource.

Read(read => read.Action("Traceables_Read", "ProgramView"))

)

.Animation(true)

)

</div>

<div class="col-lg-9">

@(Html.Kendo().Grid<HVMS.BusinessLayer.Models.Metric>()

.Name("MetricGrid")

.Events(e =>

{

e.DataBound("onDataBound");

})

.Columns(columns =>

{

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

columns.Bound(c => c.ThresholdAssignment).ClientTemplate(

"#=dirtyField(data,'ThresholdAssignment')#<div onClick='stopEditing(event,this)'><input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Unassigned' # if (ThresholdAssignment == 0) { # checked = 'checked' # } # /> <span>Unassigned</span>" +

" <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Weekly' # if (ThresholdAssignment == 1) { # checked = 'checked' # } # /> <span>Weekly</span>" +

" <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' value='Monthly' # if (ThresholdAssignment == 2) { # checked = 'checked' # } # /> <span>Monthly</span></div>"

);

})

.ToolBar(toolbar =>

{

toolbar.Save();

toolbar.Excel();

toolbar.Pdf();

})

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

.Navigatable()

.Scrollable(s => s.Height("auto"))

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.Name).Editable(false);

})

.Read(read => read.Action("Metrics_Read", "MetricThreshold").Data("additionalData"))

.Update(update => update.Action("Metrics_Update", "MetricThreshold"))

.Events(e =>

{

e.Change("gridChanged");

e.RequestEnd("wasSaveSuccessful");

})

)

</div>

<script>

function programSelected(e) {

var grid = $('#MetricGrid');

var gridSource = grid.data('kendoGrid').dataSource;

gridSource.read();

}

function additionalData() {

var pt = $('#ProgramTree').data('kendoTreeView'),

selected = pt.select(),

item = pt.dataItem(selected);

return {

id: item.id

};

}

function index(dataItem) {

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

return data.indexOf(dataItem);

}

//This is necessary to stop some strange behavior on the ThresholdAssignment

//column where if the user clicked outside of the radio buttons

//a default standard string editor would appear.

function stopEditing(event, element) {

// Don't propogate the event to the document

if (event.stopPropagation) {

event.stopPropagation(); // W3C model

} else {

event.cancelBubble = true; // IE model

}

function onDataBound() {

var grid = this;

$("[name*='.ThresholdAssignment']").change(function (e) {

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

var dataItem = grid.dataItem(row);

grid.select(row);

var rowIndex = index(dataItem)

var newValue = 'Metrics[' + rowIndex + '].ThresholdAssignment:checked';

var radioGroup = $("input:radio[name ='" + 'Metrics[' + rowIndex + '].ThresholdAssignment' + "']:checked").val();

var radioGroupEnumVal;

//alert(radioGroup);

switch (radioGroup) {

case 'Unassigned':

radioGroupEnumVal = 0;

break;

case 'Weekly':

radioGroupEnumVal = 1;

break;

case 'Monthly':

radioGroupEnumVal = 2;

break;

default:

radioGroupEnumVal = 0;

break;

}

dataItem.set("ThresholdAssignment", radioGroupEnumVal);

});

}

function dirtyField(data, fieldName) {

if (data.dirty && data.dirtyFields[fieldName]) {

return "<span class='k-dirty'></span>"

}

else {

return "";

}

function gridChanged(e) {

if (e.action == "itemchange") {

e.items[0].dirtyFields = e.items[0].dirtyFields || {};

e.items[0].dirtyFields[e.field] = true;

}

function wasSaveSuccessful(e) {

alert(e.type);

}

</script>

Grid

answered on 19 May 2017

1 answer

181 views

Error in vb.net html helper grid

I think I just need another set of eyes on this. I had to translate a Kendo UI Html Helper Grid from C# into VB. This is what I have:

@(Html.Kendo().Grid(Of CustomerJob)() _
                    .Name("customerJobGrid") _
                    .DataSource(Function(x) x.Ajax() _
                        x.Sort(Function(s) s.Add("JobNo").Descending()) _
                        x.Read(Function(read) read.Action("Jobs_Active_Read", "DashBoard")) _
                        x.Model(Sub(m) m.Id(Function(i) i.JobNo))) _
                    .Columns(Sub(c) c.Bound(Function(p) p.CustomerName).Title("Account") _
                        c.Bound(Function(p) p.Nickname).Title("Name") _
                        c.Bound(Function(p) p.JobNo).Title("Job ID").Width(90).MinScreenWidth(768) _
                        c.Bound(Function(p) p.SiteAddress).Title("Street").MinScreenWidth(768) _
                        c.Bound(Function(p) p.SiteCity).Title("City").MinScreenWidth(768)) _
                    .Pageable() _
                    .Sortable() _
                    .Scrollable() _
                    .Filterable(Function(f) f.Extra(True) _
                        f.Operators(Function(o) o.ForString(Function(s) s.Clear() _
                            s.Contains("Contains") _
                            s.DoesNotContain("Does not contain") _
                            s.IsEqualTo("Is equal to") _
                            s.IsNotEqualTo("Is not equal to") _
                            s.StartsWith("Starts with") _
                            s.EndsWith("Ends with") _
                            s.IsEmpty("Is empty") _
                            s.IsNotEmpty("Is not empty") _
                            s.IsNull("Is null") _
                            s.IsNotNull("Is not null ")))) _
                    .Mobile(MobileMode.Disabled) _
                    .Selectable(Function(selectable) selectable.Mode(GridSelectionMode.Single) _
                        selectable.Type(GridSelectionType.Row)) _
                    .Events(Function(events) events.Change("onChange")) _
                    .HtmlAttributes(New With {Style = "height:400px;"}) _
                    .Render()
                )

At "x.Sort(Function(s)", visual studio is giving me this error: "Comma, ')', or a valid expression continuation expected."

I checked that I have the same total number of '(' and ')'. I have no idea why it is telling me this and why there.

Grid

answered on 18 May 2017

1 answer

188 views

UI Scaffolding - why no VS2017 support?

Evidently, there's no support for the Kendo UI scaffolder extension for VS 2017, even though this is the current version of Visual Studio. This is disappointing. When can we expect support?

Manually running the KenoScaffolderExtension.vsix file in the R2 2017 release, does permit targeting VS 2017 but warns that it's unsupported and could make it unstable. What sort of instability would be expected?

General Discussions

answered on 18 May 2017

1 answer

131 views

Grid pagesize combobox not styled

What can be a reason that the grid doesn't have a styled pagesize combobox?

As you can see in the screenshot everything else looks OK.

This is the CSHTML code:

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

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.ResponseCount);

columns.Bound(c => c.Description).HtmlAttributes(new { style = "color: green;" });

columns.Command(c =>

{

c.Custom("Preview").Click("goPreview");

c.Custom("Edit").Click("goEdit");

c.Custom("Manage").Click("goManage");

})

.Title("Design & Manage");

columns.Bound(c => c.OwnerFullName)

.Title("Owner");

columns.Bound(c => c.State);

columns.Bound(c => c.BuildDateString)

.Title("Created On");

columns.Bound(c => c.DeploymentDateString)

.Title("Last Modified");

})

.Sortable()

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(new [] {"All", "10", "20", "50", "100" })

.ButtonCount(5))

)

This is the HTML code of the page size combobox that have copied from the browser:

<span class="k-pager-sizes k-label">

<select>

<option value="all">All</option>

<option value="10">10</option>

<option value="20">20</option>

<option value="50">50</option>

<option value="100">100</option>

</select>

items per page</span>

Grid

answered on 17 May 2017

2 answers

330 views

Bind To MVC Hierachial Data Model

Hi ,

the data model structure the following :

public class TreeMainItem

{

private IList<TreeSubItem> _SubItems;

private bool _hasChildren =true;

public TreeMainItem()

{

_SubItems = new List<TreeSubItem>();

}

public int ItemIndex { get; set; }

public string Title { get; set; }

public string CssClass { get; set; }

public string TargetUrl { get; set; }

public string IconUrl { get; set; }

public bool hasChildren

{

get { return this._hasChildren; }

set { this._hasChildren = value; }

}

public IList<TreeSubItem> SubItems

{

get { return this._SubItems; }

set { this._SubItems = value; }

}

public class TreeSubItem

{

private bool _hasChildren = false;

public int ItemIndex { get; set; }

public string Title { get; set; }

public string CssClass { get; set; }

public string TargetUrl { get; set; }

public string IconUrl { get; set; }

public bool hasChildren

{

get { return this._hasChildren; }

set { this._hasChildren = value; }

}

I use Html.Kendo().TreeView().DataSource() , but treeview can't render subitem ,

how could I fix or use other method ?

TreeView

answered on 17 May 2017

1 answer

159 views

auto open

Does Dialog have any attribute/method to control auto open behavior?

Dialog

answered on 17 May 2017

9 answers

1.9K+ views

[Solved] Getting rows from grid and subgrid

I am wanting to get the data from column 1 on the main grid and the template grid when a checkbox within the template grid is checked.

The grid will hold this type of data. Each row on the main grid will have 4 rows on the template grid. When a checkbox is checked I would like to get the \

data from the main grid row and the template grid row.

Currently I cannot work out what is the main grids row that has been selected and how to get the grid name of the template grid so I can get the data. The JS I have been playing with is below as well. This JS is not what I want but close. I just need to get the info from different grids on selection.

Thanks in advance

function selectColumn(e) {


        var grid = $("#siteCriteriaCriteria").data("kendoGrid");
        // Get selected rows
        var sel = $("input:checked", grid.tbody).closest("tr");
        // Get data item for each
        var items = [];
        $.each (sel, function(idx, row) {
            var item = grid.dataItem(row);
            var update = item.name;
            alert(update);
            items.push(item);
        });
        alert ("selected: " + JSON.stringify(items));

}

@(Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                     .Name("siteCriteriaCriteria")
                                     .HtmlAttributes(new { style = "height:60vh; " })
                                        .Scrollable()
                                     .Columns(columns =>
                                     {
                                         columns.Bound(p => p.siteId).Title("siteId").Width(50).Hidden();
                                         columns.Bound(p => p.areaId).Title("AreaId").Width(50).Hidden();
                                         columns.Bound(p => p.name).Title("Hazard Area").Width(150);
                                         columns.Template(p => "").HtmlAttributes(new { @class = "templateCell" }).Title("criteria").Width(200)
                                            .ClientTemplate(

                                             Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                                   .Name("areaCriteria_#=areaId#")

                                                   .Columns(c =>
                                                   {
                                                       c.Bound(e1 => e1.name).Title("Training").Width(150).HeaderHtmlAttributes(new { style = "display:none;" }).HtmlAttributes(new { style = "height: 15px" });
                                                       c.Bound(e1 => e1.areaId).Title("Area").Width(100).Hidden();

                                                       c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# '    onchange='requestStartHandler(\"grid\");' />")
                                                                                .HtmlAttributes(new { style = "height: 15px" }).HeaderHtmlAttributes(new { style = "display:none;" });
                                                   })
                                                   .Events(events => events.DataBound("siteCriteriaCriteria_onDataBound"))
                                                    .DataSource(source1 => source1
                                                   .Custom()
                                                                     .Transport(transport => transport
                                                   .Read(read =>
                                                   {
                                                       read.Url("/Api/SiteInfo/_getTrainingAreas/_si=" + Model.SiteId)
                                                           .DataType("json");
                                                   })

                                                    ))

                                                    .ToClientTemplate().ToHtmlString()

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

                                     })

                                       .Events(events => events.Save("onSaveCriteria").DataBound("hideEditCommand"))

                                       .NoRecords("No criteria exists.")
                                       .ToolBar(toolbar => toolbar.Create())
                                       .Editable(editable => editable.Mode(GridEditMode.InLine))
                                       .DataSource(source => source
                                       .Custom()
                                        .Schema(schema => schema
                                       .Model(m => m.Id(p => p.siteId)))
                                       .Transport(transport => transport
                                       .Read(read =>
                                       {
                                           read.Url("/Api/SiteInfo/_getPremiseArea/_si=" + Model.SiteId)
                                               .DataType("json");
                                       })
                                    ))
                        )

Grid

answered on 17 May 2017

1 answer

895 views

[Solved] RadioButtons in ClientTemplate using an enum

I have a grid in which one of the columns I would like to display/edit using RadioButtons. The underlying value is an enum. I'm still working on getting the column to display the correct choice. Right now, none of the radio buttons are checked. What am I doing wrong? Below please see the grid, and the enum declaration (in case that's an issue)

@(Html.Kendo().Grid<HVMS.BusinessLayer.Models.Metric>()

.Name("MetricGrid")

.Columns(columns =>

{

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

columns.Bound(c => c.ThresholdAssignment).ClientTemplate(

"<span>Unassigned</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Unassigned') { # checked = 'checked' # } # />" +

" <span>Weekly</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Weekly') { # checked = 'checked' # } # />" +

" <span>Monthly</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Monthly') { # checked = 'checked' # } # />"

);

})

.ToolBar(toolbar =>

{

toolbar.Save();

toolbar.Excel();

toolbar.Pdf();

})

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

.Navigatable()

.Scrollable(s => s.Height("auto"))

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.Model(model => model.Id(p => p.Id))

.Read(read => read.Action("Metrics_Read", "MetricThreshold").Data("additionalData"))

.Update(update => update.Action("Metrics_Update", "MetricThreshold"))

)

public enum ThresholdAssignment { Unassigned, Weekly, Monthly }

Grid

answered on 16 May 2017

1 answer

500 views

auto trim non-numeric pasted data

How can I let users paste '123456 ' into my numeric textbox and have it auto-strip the spaces? The spaces are usually at the end but are possibly at the beginning too.

Currently unless I copy/paste all digits nothing gets pasted. I can see it trying to paste but then it automatically disappears.

@(Html.Kendo().NumericTextBoxFor(model => model.DocumentId)
.Spinners(false).Decimals(0).Format("#")

)

Perhaps there's a property to help me do this or an event where I can reliably get the pasted value, strip all but the digits and replace the text before any validation occurs.

NumericTextBox

answered on 16 May 2017

8 answers

1.6K+ views

[Solved] Set an initial filter in a grid

Using the KendoUI ASP.NET MVC Grid, it is possible to create a filter in the DataSource property so that on the initial load of the grid, it only displays the filtered records. However, when using this method to create an initial filter on the data source, it does just that, actually filters the data source completely. it does not allow the end user to click the filter button, display the current filter criteria, click clear, and create a new filter to include some of the data that was not initially filtered out. This is because the data source is filtered.

In a grid, is there a way of setting an initial filter when the grid loads so that when the end user is clicks on the filter button, they will see the contents of the initial filter (for example "Hanari Carnes" - see step1...png), and can clear the filter to display all of the data (step2...png)?

Grid

answered on 16 May 2017