Questions on UI for ASP.NET MVC Forum

1 answer

337 views

Is it possible to have a checkbox treeview within a listbox and have it so that when a parent item is checked, the parent and all of its children can be moved to a selected side of the listbox?

TreeView

answered on 06 Feb 2019

1 answer

5.2K+ views

[Solved] Need example of code that handles change event for dropdown

I'm starting to worry a little that I paid a lot of money for something that may not work. The comments on this forum about MVC are scaring me.
What I want to do is to post to my controller when someone changes the selected item on a kendo dropdown list. All of the examples show this as how to process the change event:

function change(e) {
// handle change event
};

I've got this in my view:

@(Html.Kendo().DropDownList()

.Name("StatesDDL")

.DataTextField("StateName")

.DataValueField("StateID")

.DataSource(s =>

{

s.Read(r =>

{

r.Action("GetStates", "Donation");

});

})

.SelectedIndex(selectedState)

.Height(300)

//.HtmlAttributes(new { id = "StateDDL" })

.Events(e =>

{

e.Change("change")/*.Select("select")*/;

})

)

The control gets populated with all the items and when I click on an item the value in the control changes. The event fires - I can hit the breakpoint that I set in my event handler but I've tried everything I can think of to find out what the new selected value is, but everything shows up as undefined.

Here are just some of the things I've tried:

function change(e) {

var x = $('StatesDDL option:selected').text();

var y = $('StateDDL option:selected').val();

var z = $("StatesDDL").val("DataTextField").val("StateName");

var z1 = $("StatesDDL").data("DataTextField", "StateName").val();

var z2 = $("StatesDDL").data("DataValueField", "StateID").val();

var z3 = $('StatesDDL').data();

var z4 = $(this).text();

alert("Changed");

// how to get value that was selected?

// how to get the changed value?

// I want to then use ajax to sent that up to my controller

};

Nothing works. I just don't seem to be able to get the selected value and I can't find any example of how to "handle" the event. I cannot believe that it isn't something really stupid that I'm doing.

General Discussions

answered on 05 Feb 2019

4 answers

350 views

[Solved] In-place Edit Grid with Read-only Programmatic fields

Kendo UI Version: 2018.3.1017

Jquery: 2.2.0

Hi there,

I have managed to solve this issue but the solution was a bit of a mess. So I needed to have some columns in an in-place batch edit grid to be calculated as the user changed each column. These columns are non-editable i.e. with .Editable(false) in the Model.

I ended up using the change event to subscribe my Javascript method as below

.Events(events => events.Change("calculateJSMethod"))

Then in that function had :

function calculateJSMethod(e) {

e.preventDefault();

$("#myGridID").data("kendoGrid").refresh();

var item = e.items[0];

Grid

answered on 01 Feb 2019

3 answers

1.9K+ views

Reorder kendo ui Grid Columns programmatically

Hi

I have one requirement
i am displaying 12 months in grid, and i have one text box and button
when they type april and click button grid should reorder from april to march

Senthil

Grid

answered on 01 Feb 2019

2 answers

621 views

[Solved] Problems with nordic characters in CSV import, encoding related maybe?

When uploading a CSV file containing nordic characters such as Å,Ä,Ö the spreadsheet fails to accurately represent them.

This also does not work in your demo https://demos.telerik.com/aspnet-mvc/spreadsheet/server-side-import-export when uploading a file that looks like this:

1.Id,Namn,Förslag,Åtgärd

2.0,Åsä Löåfv,Lorem ipsum,Lörem ipsåm

Row #1 is the header of the CSV, Row #2 is example data. As you can see in your own demo, importing this file into the spreadsheet does not work, the ÅÄÖ characters get represented as ? which later breaks other stuff in my application (when parsing the spreadsheet). Any idea on how to maintain these characters?

Spreadsheet

answered on 01 Feb 2019

1 answer

200 views

[Solved] Hierarchical structure bound to complex dataset

Hey guys,

I really hope this makes sense, i want to give my users a quick way to view their organizations structure and additionally add items via a context menu in the tree view.

I have attached an image which shows what i want to achieve, i have manually built the attached structure but i need to achieve the same by binding to remote data and additionally implement lazy loading (If possible).

At the root level i only have companies (companies do not have sub companies).
When expanding on the company, you will see a list of branches (Branches can have an infinite number of sub branches).
When expanding on the Branch, you will always see a department list and sub branches (departments do not have sub departments).
When expanding on the sub branch, you will always see a department list and possibly more sub branches.

How do i bind the treeview to these 3 different lists?

I would also like to create a context menu for the treelist items.

When right clicking on the Company Node, i want to show a context menu to Add, Edit or Deactive Company as well as Add Branch.
When right clicking on a Branch i want to show a context menu the Add Sub Branch, Edit or Deactive Current Branch.
When right clicking on a Department i want to show a context menu to Add,Edit or deactivate the department.

The problem with the context menu is how do you know what type of node you are clicking on? (Company, Branch or Department)

TreeList

answered on 01 Feb 2019

1 answer

263 views

Google-like suggestion dropdownlist

Hello,

is there a way to achieve a google-like suggestion dropdown list in Grid?

I have a normal grid, with a "Create" function in its toolbar. The column accepts any strings, which are saved in the database.
I attached a screenshot of the grid.

Is it possible to have a dropdown list under the cell, where the cursor is active?
The cell got to accept any strings, in case a Company name is not saved earlier in the database.

What I'm trying to achieve is to suggest the user what strings were saved in the form in the past.

The grid is nothing fancy:

@Html.Label(WorkPermitLabels.NonContractedCompanyName, new { @class = "control-label" })

@Html.Hidden("NonContractedCompany", "")

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

.Name("nonContractedCompanies")

.Columns(col =>

{

col.Bound(v => v.Name);

col.Command(v =>

{

v.Edit();

v.Destroy();

});

})

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

.HtmlAttributes(new { @class = "control-label col-sm-12 col-md-6" })

.Sortable()

.ToolBar(toolbar => toolbar.Create())

.DataSource(datasource =>

datasource

.Custom().Schema(schema => schema

.Model(mod =>

{

mod.Id(v => v.NonContractedCompanyID);

mod.Field(v => v.Name);

})

)

))

@Html.ValidationMessageFor(m => m.NonContractedCompanies, "", new { @class = "text-danger" })

Thank you for your help.

Gábor

Grid

answered on 01 Feb 2019

4 answers

1.1K+ views

[Solved] Sort bound field on grid by different property

Hi there,

I am trying to get an MVC Kendo UI Grid on the sorting event of a particular column to sort by a different property in the bound model class. Is this possible - I've tried defining the Sortable comparer (http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.sortable.compare) but can't seem to get the syntax working. Below is my cshtml view code - for the SampleResultsOverview column I need the sort value to be bound to a different property on the site model instead - the property is called SampleResultsOverviewSortOrder.

Many thanks, Mark.

.Columns(columns =>
{
columns.Bound(site => site.UPRN).Title("UPRN");
columns.Bound(site => site.AddressWithPostcode).Title("Address");
columns.Bound(site => site.Contact).Title("Contact");
columns.Bound(site => site.Telephone).Title("Telephone");
columns.Bound(site => site.SampleResultsOverview).Title(@RecActionHeader).Encoded(false).Sortable(
compare: function (a, b) {
return numbers[a.name] - numbers[b.name];
);
columns.Template(site => { }).ClientTemplate(" ").Title("Site Documents");
})

Grid

answered on 31 Jan 2019

5 answers

4.1K+ views

Add icon to an existing textbox

I want to add a clickable icon to the end of a textbox, I'm using the razor so I don't want to create the textbox via normal html, I want to use the razor helpers. How can I add the icon to the end of the textbox programmatically with javascript or jquery?

General Discussions