Questions on UI for ASP.NET MVC Forum

2 answers

552 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

253 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

139 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

524 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

358 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

130 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

181 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

113 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

4 answers

1.1K+ views

DropDownList - change ServerFiltering based on initial call to load data

Hi

I am using the @Html.Kendo.DropDownList in a MVC application (.NET Core). The code works perfectly. I have a weird request though. I get my data from a backend system which cannot filter any fields that are less than 1001 entries long (long story but unfortunately true) - so this is what happens: the page loads and then calls source.read to get the first 1001 entries - this works perfectly each time. If the user then does as typeahead search in a field that is < 1001 entries the search does not work i.e. the DB returns all the entries again. If there are more that 1001 entries all is well. My question is this: is there a way for me to change the

.ServerFiltering(true);

to

.ServerFiltering(false);

at runtime?

My idea is that once the initial data has been loaded I check how many entries have been received and then set the .ServerFiltering flag appropriately.

Alternatively I could load all the dropdown first (before showing the page) and then have an if statement on the .cshtml file => this would/has worked but it experience is worse for the users - using ServerFiltering (true) loads the page and the users see the spinning blue thingy and know that data is being loaded (I can have up to 100 dropdown on the page (the users decide how many per page themselves)), otherwise, once they have pressed open they need to wait while the dropdown are being loaded.

Thank you in advance for any help given.

Ursus

@(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
   });
   })
   .ServerFiltering(true);
   })
)

DropDownList

answered on 29 Oct 2019