Questions on UI for ASP.NET MVC Forum

2 answers

343 views

Need help posting grid selections to server controller

Hello,

I am new to using the Grid and need a little help.

I have a ViewModel for my page, for brevity's sake, say the model has an EventName for display, and a List of EventRegistrations, and a couple of text boxes to capture data. Using Razor on the view.

I am populating the grid in an Ajax call - but I am not updating any of the grid records. Can I populate it from the ViewModel when the page loads?

Secondly... I am using the grid to add a checkbox to each row. I want to be able to access these selected values server-side and I do not know how to do this so that I can HttpPost to my controller all of the grid rows with the selected rows along with the couple of other textbox values I'll be using. I have seen the .Columns.Select() approach and the ClientTemplate javascript approach.

I usually depend on the ViewModel to be there in the post -- but I am not sure how to get values from the View's ViewModel and the KendoGrid.

I just need a little assistance getting in the right direction.

Thank you for assistance in advance,

Therese

Grid

answered on 07 Nov 2019

2 answers

575 views

Numeric text box format in custom editor

The new filter is what I have been waiting for - thank you. However, I have created a custom editor as I want to search for a number in an id field, i.e. 922 instead of "922". I am using the following:

function RiskIdEditor(container, options) {
  $('<input data-bind="value: value" name="' + options.field + '"/>')
   .appendTo(container)
   .kendoNumericTextBox();
}

but this defaults to include 2 decimal places, e.g. 922.00. How do I force the numeric text box to display whole numbers only?

Thanks,

Jonathan

Filter

answered on 04 Nov 2019

3 answers

267 views

firefox navigates when using <a href="javascript:$('#window').data('kendoWindow').open()

I have a number of projects that have anchor tags that use code similar to <a href="javascript:$('#window').data('kendoWindow').open()">open</a> to open kendo windows. I have recently gotten reports that users are getting an error using that link in firefox. It appears to try to navigate to $('#window').data('kendoWindow').open().

If i change this to put $('#window').data('kendoWindow').open() into a separate function and call that from the Javascript function it appears to work. The problem is that i have followed this paradigm in many projects over the year.

You can see am example at https://dojo.telerik.com/IWAKIjom/2

Window

answered on 04 Nov 2019

1 answer

150 views

ListView undo drag and drop

In the attached below, I don't want an Empty to be dragged to another Empty. But anything else is allowed.

Is there an undo event?

Thanks

Sortable

answered on 04 Nov 2019

1 answer

533 views

Copy DropDownList copied but not working

I have multiple dropdown fields on a form.The form might start off with 3 fields, I want the user to be able to add extra dropdown fields (see the attached screenshot). Lets say the customer currently has 3 machines but has just bought a fourth one. I display the company document showing the three machines, the user presses the + button to create a new entry and then selects the correct machine from the dropdown. I have the copying of the field working, the problem is that the DropDownList ist not getting populated i.e. the .read of the datasource is not being called (at least that is what I think is happening). I assume I need to call the init (.kendoAutoComplete) function somehow, cannot figure out how though. Any pointers would be great!

Here the DropDownField I am trying to copy:

@(Html.Kendo().DropDownList()

.Name(kendoFieldName)

.MinLength(3)

.Value(Model.Fields[i].Values[j])

.HtmlAttributes(new {style = "width: 100%"})

.Filter(FilterType.Contains)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("TypeAhead", "Document", new

{

docId = Model.DocId,

docType = Model.DocType,

fieldNumber = Model.Fields[i].FieldIndex,

row = j,

currentValue = Model.Fields[i].Values[j]

});

})

.ServerFiltering(true);

})

)

The clone button is:

<button id="plusButton" type="button" class="btn" onclick="addRow(@i, @j, @Model.Fields[i].Values.Count);">

<i class="fa fa-plus fa-lg"></i>

</button>

And finally the addRow function:

//

// Add a new div to the page

//

var newRowNumber = 0;

function addRow(field, value, numberOfValues) {

var rowId = `row_field_${field}_value_${value}`;

var fieldId = `field_${field}_value_${value}`;

var originalFieldId = `original_field_${field}_value_${value}`;

var newRowId = `row_field_${field}_value_${numberOfValues + newRowNumber}`;

var newFieldId = `field_${field}_value_${numberOfValues + newRowNumber}`;

var newFieldName = `Fields[${field}].Values[${numberOfValues + newRowNumber}]`;

var addFunction = `addRow(${field}, ${numberOfValues + newRowNumber}, ${numberOfValues})`;

var removeFunction = `removeRow('${newRowId}')`;

// get the current row

const currentRow = $(`#${rowId}`);

if (!currentRow.length) return;

newRowNumber++;

// clone the row

var newRow = currentRow.clone();

newRow.attr("id", newRowId);

// update the value field

var newField = newRow.find(`#${fieldId}`);

newField.val("");

newRow.find(`#${fieldId}`).attr({ name: newFieldName });

newRow.find(`#${fieldId}`).attr({ id: newFieldId });

newRow.find(`#${fieldId}`).attr({ value: "" });

// remove the stuff you don't need

newRow.find(`#${originalFieldId}`).remove();

newRow.find("#minusButton").remove();

newRow.find("#plusButton").remove();

newRow.find("#labelForField").remove();

// add minus button

var plusButton = `<button id="plusButton" type="button" class="btn" onclick="${addFunction};"><i class="fa fa-plus fa-lg"></i></button>`;

var minusButton = `<button id="minusButton" type="button" class="btn" onclick="${removeFunction};"><i class="fa fa-minus fa-lg"></i></button>`;

newRow.find("#buttons").append(plusButton);

newRow.find("#buttons").append(minusButton);

// add the new row

$(currentRow).after(newRow);

}

//

// remove a div on the age

//

function removeRow(rowId) {

// get the current row

// need to add the trim here as using template strings above added a extra space to the literal? see removeFunctions(" values")

const currentRow = $(`#${rowId.trim()}`);

if (!currentRow.length) return;

// remove the row

currentRow.remove();

}

DropDownList

answered on 03 Nov 2019

6 answers

1.4K+ views

How can i show labels top of the columns kendo bar chart?

i'm trying to show value labels at top of the my chart's columns. I use Kendo UI.I find this example but i havent done it.

It's example:
http://jsfiddle.net/8YnKv/31/

How can i show 100 and 20 values like in the example chart?

I have tried this code but i failed.

.Labels(labels => labels
.Visible(true).Format("C").Position(ChartBarLabelsPosition.OutsideEnd)
)

Here is my chart code. What can i do?
How can i add this functionality?
Thanks for your help.

@(Html.Kendo().Chart(Model.TarihVM)
.Name("chart")
.Title(title => title
.Text("my chart title")
.Position(ChartTitlePosition.Top))
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Top))
.Series(series =>
{
series
.Column(model => model.deneme, categoryExpression: model => model.EvrakTarih).Name("deneme")
.Aggregate(ChartSeriesAggregate.Count);
series
.Column(model => model.digerdeneme, categoryExpression: model => model.EvrakTarih).Name("digerdeneme")
.Aggregate(ChartSeriesAggregate.Count);

series
.Column(model => model.deneme2, categoryExpression: model => model.EvrakTarih).Name("deneme2")
.Aggregate(ChartSeriesAggregate.Count);

})
.CategoryAxis(axis => axis
.Date()
.BaseUnit(ChartAxisBaseUnit.Months)

.MajorGridLines(lines => lines.Visible(true))
)
.Theme("metro")
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= series.name #: #= value #"))

Chart

answered on 31 Oct 2019

3 answers

382 views

Set treeview hierarchy from javascript

My requirements are such that on initial load, the tree is empty and a user can do a search which would then load the results into the treeview. Once the view is loaded, the user will navigate the tree with the expand functions. It's possible that the user searches for a result that is at an arbitrary depth in the tree (not a top-level node) so I query all nodes from the root down to the search result. I need help figuring out how to set this hierarchy of nodes into the tree correctly. Currently, only the top-level node displays with no expander.

The object to be displayed in tree:

public class LocationModel

{

public string Id { get; set; }

public string ParentId { get; set; }

public string Name { get; set; }

public List<LocationModel> Children { get; set; } = new List<LocationModel>();

public bool HasChildren => true;

}

The controller:

public JsonResult GetLocationHierarchy(string locationId)

{

if (string.IsNullOrEmpty(locationId))

return new JsonResult();

//string id;

var results = new List<LocationModel>();

using (var ctx = _docStore.OpenSession())

{

// recursively step up the tree, adding each node to the list

while (!string.IsNullOrWhiteSpace(locationId))

{

var thisNode = (from l in ctx.Query<Location>()

where l.Id.Equals(locationId)

select new LocationModel

{

Id = l.Id,

Name = l.FriendlyName,

ParentId = l.ParentId

}).SingleOrDefault();

if (thisNode != null)

{

results.Add(thisNode);

locationId = thisNode.ParentId;

}

else

locationId = string.Empty;

}

// set the children on the nodes

foreach (var node in results)

node.Children = results.Where(x => x.ParentId == node.Id).ToList();

//return only the top level node (hierachy is in place)

return Json(results.Where(x=> x.ParentId == string.Empty).ToList(), JsonRequestBehavior.AllowGet);

The tree view:

<div id="treeview">

<div class="demo-section k-content">

@(Html.Kendo().TreeView()

.Name("treeView")

.LoadOnDemand(true)

.DataTextField("Name")

.Events(events => events

.Select("onSelect")

.Expand("onExpand")

)

.DataSource(dataSource => dataSource

.Model(m =>

{

m.Id("Id");

m.Field("Name", typeof(string));

m.Children("Children");

m.HasChildren("HasChildren");

})

.Read(read => read

.Action("GetLocationChildren", "Home", new { locationId = Model.SelectedLocation.Id })

)

</div>

The search button method:

function onSearchButtonClick(e) {

if ($("#SelectedLocation_Name").val() == "") {

console.log("No SelectedLocation Name");

return;

}

var u = '@Url.Action("GetLocationHierarchy")';

$.post(u,

{

locationId: $("#SelectedLocation_Id").val()

},

function (data) {

console.log("onSearchButtonClick returned...");

var treeView = $("#treeView").data("kendoTreeView");

if (treeView == null) {

console.log("treeView is null!");

return;

}

console.log(e);

treeView.setDataSource(data);

});

}

TreeView

answered on 30 Oct 2019

1 answer

139 views

Limit columns

Is it possible to limits the columns in a list view? Or is that done purely with css height and width?

Thanks

ListView

answered on 29 Oct 2019

1 answer

205 views

Tri-state checkbox

I have developed a tri-state checkbox (supports indeterminate) and was wondering if there is any community interest in this functionality, help to improve the implementation, or support to have it incorporated into the UI.

General Discussions

answered on 29 Oct 2019

2 answers

125 views

ProductService.cs based on IDisposable

Looking at the example, it uses a model "ProductService.cs" based on IDisposable. Can you point me to documentation that talks about this and various other aspects like: why i would use it; when to call Dispose(); ect.

Grid

answered on 29 Oct 2019