Questions on Kendo UI for jQuery Forum

8 answers

272 views

I've been tasked w/ creating a wizard-like, information collection workflow using Kendo MVVM. It was suggested SPA might be a good fit for this project. The basic idea is asking the user at the beginning which options they'd like to include, and then based on those choices, allow the user to configure each in detail using a Next page, previous page "wizard like" workflow. Does this sound like a good use for Kendo SPA?

One of my concerns is my view model(s) getting too large. I might be able to mitigate this w/ proper object oriented Javascript class composition, but in general, should viewmodel size be a concern w/ SPA? The other concern is having to create a lot of new kendo.View instances to house all the different "content" areas of each pages. In total, there easily could be 40-50 different views for the different content.

I've seen the kendo music store SPA app as well as sushi, but these are very simple apps with only a small handful of different content views.
Surely I wouldn't want to keep those in memory, right? Any insight on if this is a good idea (and if so) would be the best way to architect the application, would be most helpful.

I'm sorry if this question seems elementary, I am new to both MVVM and SPA, not to mention modern OO Javascript. I come from ASP.NET MVC mainly.

Thanks in advance!

PS: I've read the three "A Day at the SPA" blog articles by Derick Bailey and the Getting Started SPA guide. I'm just looking for some guidance at this point.

SPA

answered on 07 Feb 2014

1 answer

210 views

router + template loader best practice

Hi, I created an index.html page with router and template loader as described here:
http://docs.telerik.com/kendo-ui/howto/load-templates-external-files

Now what I'm trying to do is to dynamically load the template data each time I navigate to a new url.

The first part of clicking on links and navigating with using the router works perfect. It even has a great caching mechanism so it won't load each template more than once. The question is what is the best practice to inject the server data into the template?

For example let's say that I'm looking at a homepage and I have a link to the customers page. Click on the link will switch view to the customers.html and will show the template page. Now I need to load all the customers. When and how do I do that? In the template page? I think that it would be better if the code that loads the customers will be in a separate js file that will load the data, populate the viewModel (am I right here?) and bind it to the page. Same questions when clicking on a specific user in order to edit it in a new popup - when and what is the best way to load the data?

SPA

answered on 07 Feb 2014

0 answers

90 views

Invalid whitespace generated by template

Can anyone explain the invalid white space generated by the template binding. It occurs in each <li> before the <table>
see http://jsfiddle.net/hSXL4/2/

Regards
Jaco

General Discussions

asked on 07 Feb 2014

6 answers

263 views

Grid Details not shown in proper place

I am trying to open a grid as the detail template inside a grid but it seems it is not opening is correct place. Please help. The detail steps with screenshot is the attached document.

The code to open the grid is as below

Grid Definition and related code

@(Html.Kendo().Grid().Name("grvInvSplit")

.TableHtmlAttributes(new { style = "table-layout: fixed;" })

.ClientDetailTemplateId("ViewGridItemDetails")

.DataSource(dataSource => dataSource.Ajax()

.Batch(false)

.ServerOperation(false)

.Read(...)

.Create(..)

.Update(..)

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

.Model(model => model.Field(p => p.GridRowNum).DefaultValue(-1))

.Events(events => events.RequestEnd("onGridRqstEnd")

.Error("onGridError"))

)

.Columns(cols =>

{

...

})

.EnableCustomBinding(false)

.Selectable()

.Pageable()

.Resizable(resizing => resizing.Columns(true))

.Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InLine)

.DisplayDeleteConfirmation(false)

)

.Events(events => events.DataBound("onGridDataBound")

.Save("onGridSave")

.Edit("onGridEdit")

.Change("onGridChange")

.DetailExpand("gridViewChrgDetailExpand")

)

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

<div id="ViewGridItemDetailsRow_#= GridRowNum #">

Loading ...

</div>

</script>

<script>

gridViewChrgDetailExpand: function (e) {

$("#ViewGridItemDetailsRow_" + selectedGridRow.GridRowNum).html(<html>);

}

</script>

Please help to solve the issue.

regards,
Sanjay

Grid

answered on 07 Feb 2014

1 answer

694 views

Get selected row column value, update modelview

Using Kendo Grid in an MVC application.

The primary model for the View (PlanViewModel) contains a property which is a foreign key to another entity (BuildingId) For instance,

public class PlanViewModel
{

public int PlanId { get; set; }
public string PlanName { get; set; }
public int BuildingId { get; set; }
...
}

The Building ID is to be populated by the selected row of a BuildingGrid on the View.

So with the BuildingGrid, I'm using the .Selectable setting to invoke an onChange event. How in the following event would I update the model.BuildingId

function onChange(arg) {
var selected = $.map(this.select(), function (item) {
return $(item).text();
});

/// UPDATE MODEL BuildingId here

}

Thanks!

Grid

answered on 06 Feb 2014

5 answers

348 views

Sorting and filtering on Viewmodel property that was flattened in api

I am trying to understand how can provide sorting & filtering on a column of view model that was flattened.

VMAddress
addressid
street1
street2
countryid
CountryName
stateid
StateName
cityid
CityName

The Coulumns CountryName,StateName and CityName as flattened fro their respective table ( i.e Country.CountryName, State.StateName,City.CityName).

If i filter or sort on this columns nothing happens. since i don' have those fileds as column in the database.

How can shift the filter on the server to other columns ?

Grid

answered on 06 Feb 2014

8 answers

187 views

Creating a group chart

Hi,
I have a little problem when the data is shown.
I want a chart with the hours of service of a company, I have three fields, HOURS_SERVICE, TYPE_SERVICE, COMPANY.

The chart must show the hours of each type of service by company, I've tried this:
I attach two files: the first is the chart that I want and the second is the chart that's showing with Kendo

My View:

@model IEnumerable<SIS_CSC.ViewMoldels.HorasTrabajadasTecnicosViewModel>



<

div>

<h2 align="centre"> REPORTE DE SERVICIOS POR EMPRESA</h2>

@(Html.Kendo().Chart(Model)

.Name("Chart")

.Title("Gráfico de horas de servicio de los clientes por tipo de trabajo")

.DataSource(datasource => datasource

.Read(read => read.Action("LeerExt_GraficoServicio", "Consultas").Data("getParameter"))

.Group(group => group.Add(model => model.TIPO_SERVICIO))

)

.CategoryAxis(axis => axis

.Categories(model => model.EMPRESA)

.Title("Cliente")

.Labels(label => label.Rotation(-90))

.MajorGridLines(major => major.Visible(false))

)

.SeriesDefaults(

seriesDefaults => seriesDefaults.Column().Stack(true)

)

.Series(series => {

series.Column(model => model.TOTAL_HORAS)

.Name("");

})

.Legend(legend => legend

.Position(ChartLegendPosition.Right)

)

.ValueAxis(axis => axis.Numeric()

.Title("Horas de servicio")

.Labels(labels => labels

.Format("{0}")

.Skip(1)

.Step(1)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0,00}")

.Template("#= series.name #: #= value #")

)

</div

>



<script type="text/javascript">

    function getParameter() {

        return {

            txtFechaInicio: $("#txtFechaInicio").val(),

            txtFechaFin: $("#txtFechaFin").val(),

        };

    }



    function BindChart() {

        $("#Chart").data("kendoChart").dataSource.read();

        $("#Chart").data("kendoChart").redraw();

        //$("#Chart").data("kendoChart").refresh();

    }

</script>

My Controller:

public ActionResult LeerExt_GraficoServicio(string txtFechaInicio, string txtFechaFin)

{

return Json(GetServiciosByFecha(txtFechaInicio, txtFechaFin));

Charts

answered on 06 Feb 2014

1 answer

141 views

Custom Tabstrip Icon Background-size

Using the guide at http://docs.telerik.com/kendo-ui/getting-started/mobile/icons#restyle-only-the-custom-icon I've added a custom mask icon using the latest recommended way to do it. Unfortunately my icons (glyphish pack) seem to be just a tiny bit too large for my taste and the background-size is having no effect when i try to change it.

km-root .km-pane .km-view .km-home-new {

background-size: 90% 90%;

-webkit-background-clip: border-box;

background-color: white;

}

.km-home-new {

-webkit-mask-box-image: url("images/53-house@2x.png");

background-color: red;

}

I have tried as low as 10% 10% and it changes nothing.

TabStrip (Mobile)

answered on 06 Feb 2014

0 answers

39 views

Switch to edit button after customized save event

I've customized the save event ( do remote update), but I don't know how to switch to edit button after the data updated(still update button). thanks for any help。

Grid

asked on 06 Feb 2014

4 answers

557 views

Change grid dataSource and send object as a parameter

I am changing the url of a grid and then sending an object as a parameter. The grid is calling the new controller I want, but the view model is empty. What am I missing?

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3. });

New grid datasource:

01.var dataSource = new kendo.data.DataSource({

02. page: ds.page(),

03. pageSize: ds.pageSize(),

04. sort: ds.sort(),

05. type: "aspnetmvc-ajax",

06. transport: {

07. prefix:"",

08. read: {

09. url: "/AdvancedSearch/GetResults",

10. dataType: "json",

11. data: { criteria: data },

12. type: "POST",

13. traditional: true,

14. contentType: "application/json",

15. }

16. }

17.});

Replacing grid datasource:

1.self.bindings.controls.EquipmentListGrid.setDataSource(dataSource);

2.self.bindings.controls.EquipmentListGrid.rebind();

Controller:

1.[HttpPost]

2.public ActionResult GetResults([DataSourceRequest] DataSourceRequest request, AdvancedSearchViewModel criteria)

3.{

4.}

ViewModel:

01.[Serializable]

02.public class AdvancedSearchViewModel

03. {

04. [DisplayName("Include Junk Pool")]

05. public bool IncludeJunkPool { get; set; }

06. public List<string> Areas { get; set; }

07. public List<string> GeoMarkets { get; set; }

08. public bool ApplyBasket { get; set; }

09. public IList<int> Basket { get; set; }

10. public bool Export { get { return true; } }

11.

12. public string Page { get; set; }

13. public string Column { get; set; }

14. public string DisplayName { get; set; }

15. public string Operator { get; set; }

16. public string Value { get; set; }

17. public string DataType { get; set; }

18. public string Table { get; set; }

19.

20. public IList<AdvancedSearchListItem> Criteria { get; set; }

21.

22. public CurrentPage CurrentPage { get; set; }

23. public Sort Sort { get; set; }

24.}

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3.});

1.return mvvm.toJSON(self, function (data) {

2. data.Criteria = self._grid.dataSource.data();

3.});

Grid

answered on 06 Feb 2014