Questions on UI for ASP.NET MVC Forum

4 answers

2.2K+ views

Im having problems getting the multi select change event to fire.

Initially i thought it could be something to do with my functions so i've tried copying all the event functions exactly as shown on the demo page.

Using the multi select box, i can see all the events are firing EXCEPT for the change event. (e.g. open, selected, closed, databound works)

Is there any reason why only the change function is not firing? I need the change function as theres logic to be done when an item is selected or deleted from the list.

This is what my multi select looks like:

01.@(Html.Kendo().MultiSelectFor(m => m.Ids)

02. .DataTextField("Description")

03. .DataValueField("Id")

04. .Filter("contains")

05. .Placeholder("Please select an item...")

06.

.Events(e => e.Change("onChange").Select("onSelect").Open("onOpen").Close("onClose").DataBound("onDataBound").Filtering("onFiltering"))

07. .DataSource(source =>

08. {

09. source.Custom()

10. .ServerFiltering(true)

11. .ServerPaging(true)

12. .PageSize(80)

13. .Type("aspnetmvc-ajax")

14. .Transport(transport =>

15. {

16. transport.Read("GetItems", "Items");

17. })

18. .Schema(schema =>

19. {

20. schema.Data("Data").Total("Total");

21. });

22. })

23. .Virtual(v => v.ItemHeight(26).ValueMapper("itemsValueMapper"))

24. .Value(Model.Items)

25.)

And javascript is just your basic event functions

01.function onOpen() {

02. console.log("event: open");

03.}

04.

05.function onClose() {

06. console.log("event: close");

07.}

08.

09.function onChange() {

10. console.log("event: change");

11.}

12.

13.function onDataBound() {

14. console.log("event: dataBound");

15.}

16.

17.function onFiltering() {

18. console.log("event: filtering");

19.}

20.

21.function onSelect(e) {

22. var dataItem = this.dataSource.view()[e.item.index()];

23. console.log("event :: select (" + dataItem.Text + " : " + dataItem.Value + ")");

24.}

Thanks

MultiSelect

answered on 12 Jan 2016

3 answers

665 views

Update button works for Edit but not for Create

This grid works for Read, Update (of existing record only) and Delete, but when Creating a new row, the Update button doesn't work. (When creating a new row, the Cancel button does work).

e.g.

After Reading data from server:

- Click Edit button on existing row. Make changes. Click Update. Success!

- Click Delete button on existing row. Success!

- Click Add new record button. New row appears. Click Cancel. Success!

- Click Add new record button. New row appears. Click Update. Nothing happens. Controller method is not called.

What is wrong?

Thanks

Grid:

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

.Name("publicUserMunicipalitiesGrid")

.Columns(columns =>

{

columns.Bound(u => u.Id).Hidden();

columns.Bound(u => u.PublicUserId).Hidden();

columns.Bound(u => u.UserId).Hidden();

columns.Bound(u => u.muni_code).Hidden();

columns.Bound(u => u.Municipality).ClientTemplate("#=Municipality.MuniCombo#");

columns.Bound(u => u.RequestedDate).Hidden();

columns.Bound(u => u.Granted).Hidden();

columns.Bound(u => u.CanSubmitForms).ClientTemplate("<input type='checkbox' disabled='disabled' #= CanSubmitForms ? checked='checked' : '' # ></input>");

columns.Bound(u => u.SuperUser).ClientTemplate("<input type='checkbox' disabled='disabled' #= SuperUser ? checked='checked' : '' # ></input>");

columns.Bound(u => u.IsCurrent).Hidden();

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

})

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

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

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

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

model.Field(p => p.PublicUserId);

model.Field(p => p.UserId);

model.Field(p => p.muni_code);

model.Field(p => p.Municipality).DefaultValue(ViewData["defaultMunicipality"] as MunicipalityViewModel);

model.Field(p => p.RequestedDate);

model.Field(p => p.Granted);

model.Field(p => p.CanSubmitForms);

model.Field(p => p.SuperUser);

model.Field(p => p.IsCurrent);

})

.Read(read => read.Action("PublicUserMunicipalityViewModelsRead", "PublicUserMunicipalityViewModels")

.Data("getSelectedPublicUserId"))

.Create(create => create.Action("PublicUserMunicipalityViewModelsCreate", "PublicUserMunicipalityViewModels")

.Data("getSelectedPublicUserId"))

.Update(update => update.Action("PublicUserMunicipalityViewModelsUpdate", "PublicUserMunicipalityViewModels"))

.Destroy(destroy => destroy.Action("PublicUserMunicipalityViewModelsDestroy", "PublicUserMunicipalityViewModels"))

)

Controller Method:

public ActionResult PublicUserMunicipalityViewModelsCreate([DataSourceRequest]DataSourceRequest request, PublicUserMunicipalityViewModel publicUserMunicipalityViewModel, int publicUserId)

{

// Set UserId and PublicUserId

publicUserMunicipalityViewModel.PublicUserId = publicUserId;

var publicUser = db.PublicUsers.FirstOrDefault(pu => pu.Id == publicUserId);

publicUserMunicipalityViewModel.UserId = publicUser.UserId;

// Clear the ModelState errors these two required fields had as they were passed in null.

ModelState["PublicUserID"].Errors.Clear();

ModelState["UserID"].Errors.Clear();

if (ModelState.IsValid)

{

// Create a new PublicUserMunicipality entity and set its properties from the posted PublicUserMunicipalityViewModel

var entity = this.BuildPublicUserMunicipalityEntity(publicUserMunicipalityViewModel);

// Add the entity

db.PublicUserMunicipalities.Add(entity);

// Delete the entity in the database

db.SaveChanges();

// Get the Id generated by the database

publicUserMunicipalityViewModel.Id = entity.Id;

}

// Return the inserted contract. Also return any validation errors.

return Json(new[] { publicUserMunicipalityViewModel }.ToDataSourceResult(request, ModelState));

}

Grid

answered on 12 Jan 2016

3 answers

104 views

Time Picker usability issue

Hi ,

i have an issue with telerikTimePicker it is really random one . when the client try to select a time from the time picker it only show two selection 12:00 AM and 12:00 AM when he refresh the page it show the whole list from 12:00 Am till 11:45 PM . this only happen in mobile devices found in both android and apple devices

this is a screenshot

http://screencast.com/t/9kZW4V3IP98y

DatePicker

answered on 12 Jan 2016

5 answers

891 views

ASP.NET MVC AJAX PartialView Telerik UI not loading

I have a PartialView which is updated using AJAX. The HTML elements are loaded correctly when updating the Div using AJAX, but the Telerik chart is not loaded. The datasource in the chart is not calling the Action method:

.DataSource(ds => ds.Read(read => read.Action("Movies_Read", "Movies")))

When the PartialView is initially loaded, not using AJAX, the datasource is calling the action method and the chart is loaded correctly.
According to Telerik ASP.NET PartialView AJAX there needs to be this Javascript call for the OnSuccess event:

@using (Ajax.BeginForm("UpdateMoviesChart", "Movies", new AjaxOptions { UpdateTargetId = "MoviesDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "updatePlaceholder", }))

How do I load the Telerik Chart correctly when using AJAX?

General Discussions

answered on 12 Jan 2016

7 answers

1.7K+ views

Prevent initial request to get data

Hi,

according to what is written in this answer, binding a grid on initial page (or view) load using BindTo will prevent the Ajax request (if there is any data).
IMHO, even if the there is no data, if I explicitly bind the grid, it should not make any other attempt to get the data.

Anyway, how can I prevent the request even if there is no initial data?

Thank you.

Grid

answered on 12 Jan 2016

5 answers

958 views

Import Excel file in Kendo Grid

We are displaying kendo grid in bootstrap modal popup. The grid is editable and user can add/delete the data.Now, we have a need where the user needs to be able to upload the excel document and display excel data in the kendo grid.

Are there any code samples which shows how we can import excel document in Kendo grid?

Thanks.

Grid

answered on 12 Jan 2016

3 answers

230 views

Numeric textbox changing value automatically to 10 000 000 000 000 000, 00 when enter 9 999 999 999 999 999, 99

We are facing an issue with Kendo numeric textbox.

In numeric textbox, when user tries to enter the value as “9 999 999 999 999 999, 99”, it automatically converts to “10 000 000 000 000 000, 00”.
The converted value is passed to model also.
We have an requirement to restrict user to allow enter values up to “9 999 999 999 999 999, 99”.

Kindly check and provide your feedback.

NumericTextBox

answered on 11 Jan 2016

2 answers

553 views

Select first row javascript affects wrong grid

I have a View with a Kendo TabStrip containing multiple grids on multiple panels. On one grid, I need to select the first row after loading data. I'm trying to do this with:

function publicUsersGridDataBound() {

// Select the first row.

var grid = $('#publicUsersGrid').data('kendoGrid');

grid.select("tr:eq(1)");

};

This works when publicUsersGrid is the only grid on the View.

When I add more grids,

grid.select("tr:eq(1)");

results in the first row in the first grid getting selected, not the first row in publicUsersGridDataBound, even though when I debug the javascript function, the line

var grid = $('#publicUsersGrid').data('kendoGrid');

gets a reference to the correct grid.

I'm stumped.

TIA

Grid

answered on 08 Jan 2016

7 answers

303 views

DropDownList works in Edit mode but not in client mode

This grid is working. It has a DropDownList in the muni_code column's EditorTemplate, which also works.

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

.Name("publicUserMunicipalitiesGrid")

.Columns(columns =>

{

columns.Bound(u => u.muni_code).EditorTemplateName("muni_codesList");

columns.Bound(u => u.SuperUser).ClientTemplate("<input type='checkbox' #= SuperUser ? checked='checked' : '' # ></input>");

columns.Bound(u => u.CanSubmitForms).ClientTemplate("<input type='checkbox' #= CanSubmitForms ? checked='checked' : '' # ></input>");

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

})

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

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("PublicUserMunicipalitiesRead", "PublicUserMunicipalities")

.Data("getSelectedPublicUserId"))

.Create(create => create.Action("PublicUserMunicipalitiesCreate", "PublicUserMunicipalities"))

.Update(update => update.Action("PublicUserMunicipalitiesUpdate", "PublicUserMunicipalities"))

.Destroy(destroy => destroy.Action("PublicUserMunicipalitiesDestroy", "PublicUserMunicipalities"))

)

I want to use the same DropDownList in non-edit mode. i.e. Have the ClientTemplate the same as the EditorTemplate.

I don't see the utility of posting the various failed attempts I've made to the

columns.Bound(u => u.muni_code).EditorTemplateName("muni_codesList");

line so I'll stop here.

Thanks.

DropDownList

answered on 08 Jan 2016

1 answer

93 views

Boostrap and Kendo UI for MVC

Can boostrap.js and bootstrap.css be included on the page with kendo boostrap files? What order do they need to be included in?

General Discussions

answered on 08 Jan 2016