Questions on UI for ASP.NET MVC Forum

1 answer

163 views

Preventing ajaxStart() from firing when using endless scrolling

My site has a spinner that shows on ajaxStart(). I want to disable this when having the ajax call coming from an endless scrolling grid. When using jquery natively and making an $.ajax() call there is a property called "global" that can be set to prevent your ajaxStart function from calling. Is there anyway to prevent the ajaxStart from calling using Kendo UI with ajax and mvc? Sample code is below.

Thanks,

Jim

.DataSource(d => d.Ajax().Read(r =>
r.Action("Get", "Controller")
.Type(HttpVerbs.Post)
).Filter(filters =>
{
filters.Add(a => a.Status).IsNotEqualTo("Test");
})
.Sort(sort =>
{
sort.Add(a => a.DisplyName).Ascending();
}
)
.PageSize(30)
.ServerOperation(true)
)
.Scrollable(s => s.Virtual(true))
.Sortable()
.Filterable()

Grid

answered on 16 Jul 2014

1 answer

180 views

How should I use server side validation with ListView editor template

I have a listview that has an editor template. I want to do server side validation (I check for uniqueness in my database) on create/update. Here is my code. Please tell me what to do to get this working.

01.public JsonResult CreateWatch([DataSourceRequest] DataSourceRequest request, HomeWatchListItem hw) {

02. try {

03. var result = uow.HomeWatchesRepository.FindBy(w => w.SerialNo == hw.SerialNo).FirstOrDefault();

04. if (result != null) {

05. ModelState.AddModelError("SerialNo", "Serial number already exists");

06. }

07. if (ModelState.IsValid) {

08. uow.HomeWatchesRepository.Add(new HomeWatch {

09. HomeServerId = hw.IdHomeServer,

10. PatientId = hw.IdPatient,

11. SerialNo = hw.SerialNo

12. });

13. uow.Commit();

14. }

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

16. }

17. catch (Exception ex) {

18. //TODO: what to return here

19. return Json(new DataSourceResult {Errors = ex.Message});

20. }

21.}

When create the listView I add an error handler function that doesn't get called no matter what I do.

01.@(Html.Kendo().ListView<HomeWatchListItem>().Name("watchesListView")

02. .DataSource(ds => {

03. ds.Read(r => {

04. r.Action("GetWatches", "Watches").Type(HttpVerbs.Post);

05. }).Create(c => {

06. c.Action("CreateWatch", "Watches").Type(HttpVerbs.Post);

07. }).Update(u => {

08. u.Action("EditWatch", "Watches").Type(HttpVerbs.Post);

09. }).Destroy(d => {

10. d.Action("DeleteWatch", "Watches").Type(HttpVerbs.Post);

11. })

12. .Events(e => {

13. e.Error("alert('a')");

14. })

15. .ServerOperation(true)

16. .PageSize(4)

17. .Model(m => {

18. m.Id("Id");

19. m.Field<int>("IdPatient");

20. m.Field<int>("IdHomeServer");

21. m.Field<string>("PatientName");

22. m.Field<string>("HomeServerName");

23. });

24. })

25. .ClientTemplateId("watch-template")

26. .Editable(e => {

27. e.TemplateName("edit-watch-template");

28. })

29. .TagName("div")

30. .HtmlAttributes(new { @class = "k-widget k-listview" })

31. .Pageable()

32. .Deferred()

33.)

ListView

answered on 16 Jul 2014

1 answer

70 views

Show just the event editor view of the scheduler

Hi

Is it possible to put only the Event editor on a page and not show the calendar part of the Scheduler? For my requirements I just need the ability to set the recurrence values of a single event, so going through the calendar part of the scheduler isn't necessary.

Is this possible?

Many thanks,
Bill

Scheduler

answered on 16 Jul 2014

2 answers

118 views

Formatting issues

Hi,

This is my first time using the grid and I'm having some issues with the formatting. I followed and double checked the setup for MVC4. Here is my razor code:

@(Html.Kendo().Grid((IEnumerable<TS.Models.ConnectionManagement.ConnectionManagementSystemTelerik>)Model)

.Name("grid")

.Columns(columns =>

{

columns.Bound(System => System.SystemId);

columns.Bound(System => System.SystemType);

columns.Bound(System => System.SiteId);

columns.Bound(System => System.SiteName);

columns.Bound(System => System.SiteAddress);

columns.Bound(System => System.IsSecured);

})

.Pageable() // Enable paging

.Sortable() // Enable sorting

)

If you look at the attached file, the grid functions properly, but it does not look correct. Can you think of anything for me to look for?

Thanks
Alex

Grid

answered on 16 Jul 2014

2 answers

220 views

Add Kendo Calendar in Window

Hi,
I have a kendo-template which i put my Calendar widget in it. I tried to open the Window and load the template into my calendar end up having error and below are the error:

 Error: Invalid template:'

    <div id="details-container">

        <div class="k-widget k-calendar" id="test"></div><script>

    jQuery(function(){jQuery("#test").kendoCalendar({});});

' Generated code:'var o,e=kendo.htmlEncode;with(data){o='\n    <div id="details-container">\n        <div class="k-widget k-calendar" id="test"></div><script>\n\tjQuery(function(){jQuery("';test").kendoCalendar({});});

;o+=;}return o;'

Here is my Code:

@(Html.Kendo().Window().Name("Details").Title("Customer Details")

.Visible(false).Modal(true).Draggable(true).Width(900).Height(400))

My template

<script type="text/x-kendo-template" id="CopyProjectTemplate">

<div id="details-container">

@(Html.Kendo().Calendar().Name("test"))

</div>

</script>

Here is my Javascript that execute the code:

$(document).ready(function () {

$("#grdTimelogDetail_btnSaveTemplate_onclick").click(function (e) {

e.preventDefault();

try {

         var detailsTemplate = kendo.template($("#CopyProjectTemplate").html());
                            kendo.init($("#details-container"));
                                  var wnd = $("#Details").data("kendoWindow");
                  wnd.content(detailsTemplate);
                                  wnd.center().open();

return false;

}

catch (err) { alert(err); }

});

});

Any Idea how to get working?

thanks.

Regards,

Window

answered on 15 Jul 2014

1 answer

107 views

How to create grid at runtime using pure MVC

I am new to Kendo and want to know whether is it possible to create dynamic grid at run time say on a button click with using only pure MVC like create the grid control on server side and render it on client side

Grid

answered on 15 Jul 2014

2 answers

187 views

Loading single items from a grid model

Hi Guys,

So I have this grid, and when the user selects an item from the grid i would like to bind that data item to a detail view outside the grid.
The idea is that the user could then decide to remove the grid from the page but keep the detail view if they so choose but ultimately they are the same object so a grid row and the detail view share that object.
If either the table or the detail view are updated in any way then both are updated, but also my data source is a SignalR source so both need to be able to accept an update from the hub.

I put together a "broken" jsfiddle showing how far I have gotten so far.

http://jsfiddle.net/g2wYX/

I have noticed there are options like this ... http://www.telerik.com/forums/row-selected-event ... but that assumes I want to go back to the server.
In my case the grid model already locally contains the full detail I need I just want to take a single item and bind that within a simple MVVM detail view.

Also, when a different item from the grid is selected I want that to then rebind the detail view to that item.

Any ideas?

Grid

answered on 15 Jul 2014

3 answers

288 views

Bind combobox selected-id when inside a template

Hello, I searched for this for several hours in the documentations and couldn't find anything, so here it is. I have a template and inside it there are 2 comboboxes (Patients and HomeServers). This template is used when a listview is in edit or create mode. The problem is that when I make an edit and select a different value from the combobox it is not posted to the server. The problem is probably that it is not bound to the id-columns (IdPatient and IdHomeServer). Please tell me how can I bind the selected ID of the combobox to the model.

Here is the template that is used by the listview. It has 2 combobox controls inside:

01.<script type="text/x-kendo-tmpl" id="edit-watch-template">

02. <div class="watch-view k-widget">

03. <div class="edit-buttons">

04. <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

05. <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

06. </div>

07. <dl>

08. <dt>Serial number</dt>

09. <dd>

10. <input type="text" class="k-textbox" data-bind="value:SerialNo" name="SerialNo" required="required" validationMessage="required" />

11. <span data-for="SerialNo" class="k-invalid-msg"></span>

12. </dd>

13. <dt>Patient</dt>

14. <dd>

15. @*<input type="text" class="k-textbox" data-bind="value:IdPatient" name="IdPatient" required="required" min="1" validationMessage="required" />*@

16. @(Html.Kendo().ComboBox()

17. .DataSource(source => {

18. source.Read(read => {

19. read.Action("GetPatients", "Watches");

20. })

21. .ServerFiltering(true);

22. })

23. .Name("IdPatient")

24. .TemplateId("patient-template")

25. .DataTextField("DisplayName").DataValueField("Id")

26. .Filter(FilterType.Contains)

27. .HtmlAttributes(new Dictionary<string,object>{

28. {"data-bind","value:IdPatient"}

29. })

30. .ToClientTemplate()

31.

32. )

33. <span data-for="IdPatient" class="k-invalid-msg"></span>

34. </dd>

35. <dt>Home server</dt>

36. <dd>

37. @(Html.Kendo().ComboBox()

38. .DataSource(source => {

39. source.Read(read => {

40. read.Action("GetHomeServers", "Watches");

41. })

42. .ServerFiltering(true);

43. })

44.

45. .Name("IdHomeServer")

46. .TemplateId("home-server-template")

47. .DataTextField("DisplayName").DataValueField("Id")

48. .Filter(FilterType.Contains)

49. .HtmlAttributes(new Dictionary<string,object>{

50. {"data-bind","value:IdHomeServer"}

51. })

52. .ToClientTemplate()

53. )

54. <span data-for="IdHomeServer" class="k-invalid-msg"></span>

55. </dd>

56. </dl>

57. </div>

58.</script>

In lines 27 and 49 I tried to do the bindind but it didn't work.

I also did this modification to the edit template, otherwise it doesn't show up correctly when pressing edit.

1.var listView = $("#watchesListView").data("kendoListView");

2.listView.editTemplate = kendo.template($("#edit-watch-template").html());

This is the code on the server that handles create for example. The same thing happens on update.

01.public JsonResult CreateWatch(HomeWatchListItem hw) {

02. try {

03. uow.HomeWatchesRepository.Add(new HomeWatch {

04. HomeServerId = hw.IdHomeServer,

05. PatientId = hw.IdPatient,

06. SerialNo = hw.SerialNo

07. });

08. uow.Commit();

09. return Json(hw);

10. }

11. catch (Exception) {

12. //TODO: what to return here

13. return Json(false);

14. }

15.}

In the code above hw.IdHomeServer and hw.IdPatient are supposed to be the id values from the 2 comboboxes but they are both 0. hw.SerialNo is OK.

Please help if you can.

ComboBox

answered on 15 Jul 2014

4 answers

605 views

Custom Button/HyperLink on Each Row in Telerik Grid

I have a search page for Cars where the results are put in a Telerik Grid. There is an ajax call made to my API controller which returns result. The success function of my ajax call is as shown:

success: function (result) {

CarSearchResultsToGrid(result, "carSearchGridResults");

}

The function CarSearchResultsToGrid is shown below:

function CarSearchResultsToGrid(result, gridId) {

var dataSource = new kendo.data.DataSource({

data: result,

pageSize: 10

});

$("#" + gridId).data("kendoGrid").setDataSource(dataSource);

}

I then have the following code in a PartialView

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

.Name("carSearchGridResults")

.Columns(columns =>

{

columns.Bound(c => c.CarNumber)

.Width(60);

columns.Bound(c => c.OwnerName)

.Width(100);

columns.Bound(c => c.Colour)

.Width(100);

columns.Bound(c => c.FuelType)

.Width(80);

columns.Bound(c => c.LastServiceDate)

.Format("{0:dd/MM/yyyy}")

.Width(50);

columns.Bound(c => c.ManufacturerName)

.Width(80);

columns.Command(command =>

{

command.Edit();

command.Custom("Create").Click("PropertyPage.DeleteProperty");

})

.Title("Create New Car Report")

.Width(166);

})

.Pageable(pageable => pageable

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(a => a.CarNumber))

.Update(update => update.Action("Create", "Property"))

)

What I am trying to achieve which is not working currently is to have a button or clickable link on each row in the final column with the Title of that column being Create New Car Report and the Button or Hyperlink in each row just saying 'Create'. I had tried to add the columns.Commad as shown above but it is not working. What I need is for the Button or Link to be added to each row - On clicking either the link or button the User will be Navigated to another page - so I would like to Hit an Action method in a controller - and to the action on the controller I want to pass some data from the row on which the button was clicked - so I would like to pass the CarNumber which will be unique on each row, I would like to pass the OwnerName and finally the ManaufacturerName - can anyone help as to achieve this?

Many Thanks

Grid

answered on 15 Jul 2014

2 answers

249 views

[Solved] Broken Razor syntax for Kendo WidgetFactory after update to ASP.NET MVC 5.2.0

After update to latest release of ASP.NET MVC stack:

<package id="Microsoft.AspNet.Mvc" version="5.2.0" targetFramework="net45" />
<package id="Microsoft.AspNet.Razor" version="3.2.0" targetFramework="net45" />
<package id="Microsoft.AspNet.WebPages" version="3.2.0" targetFramework="net45" />

WidgetFactory for HtmlHelper<T> Kendo() is broken (latest release of Kendo UI ASP.NET MVC)

Visual Studio 2013 (update 2) shows message: "Cannot convert instance argument type 'System.Web.Mvc.HtmlHelper<dynamic>' to 'System.Web.Mvc.HtmlHelper'"

For strong typed view message looks like: "Cannot convert instance argument type 'System.Web.Mvc.HtmlHelper<MyCustomType>' to 'System.Web.Mvc.HtmlHelper'"

All works. But Visual Studio displays an errors and does not work intellisens :(
How to fix it?

General Discussions

answered on 14 Jul 2014