Telerik Forums
Kendo UI for jQuery Forum
2 answers
194 views
Hi,

I am new to Kendo and I am trying to load data in a grid from a data source specified in a ViewModel.  The grid is defined with the wrapper and I added a data-bind attribute to associate the data source defined in the ViewModel with the grid.  I would have expected the "read callback" to be invoked to load the grid but nothing of the kind happens.

To be more precise, here are the components involved:

The model on which it is base:

   public class LocalMarketViewModel
   {
      public string Contract { get; set; }
      public string Region { get; set; }
      public DateTime WhenSold { get; set; }
      public decimal Quantity { get; set; }
      public decimal BaseCadTm { get; set; }
      public decimal BaseCadBois { get; set; }
      public decimal BaseUsdBois { get; set; }
      public decimal Price { get; set; }
      public DateTime MonthCat { get; set; }
      public bool Selected { get; set; }
   }

The code in the cshtml file:

<div id="ViewModelScope">
@(Html.Kendo().Grid(Model)
     .HtmlAttributes(new { @class = "localMarketGrid", data_bind="source: contracts, visible: isVisible" })
     .Name("Grid")
     .Columns(c =>
     {
     c.Bound(p => p.Contract)
      .Title("Contrat")
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Region)
      .Title("Région UPA")
      .Width(150);
     c.Bound(p => p.WhenSold)
      .Title("Date de vente")
      .Width(150)
      .Format(dateFormat)
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Quantity)
      .Title("Qté TM")
      .Format("{0:#,0.000;(#,0.000)}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseCadTm)
      .Title("Base<br>CAD TM")
      .Format("{0:#,0.00' $';(#,0.00' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseCadBois)
      .Title("Base<br>CAD Bois.")
      .Format("{0:#,0.0000' $';(#,0.0000' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.BaseUsdBois)
      .Title("Base<br>USD Bois.")
      .Format("{0:#,0.0000' $';(#,0.0000' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.Price)
      .Title("Prix<br>CAD TM")
      .Format("{0:#,0.00' $';(#,0.00' $')}")
      .HtmlAttributes(new { style = "text-align: right" })
      .HeaderHtmlAttributes(new { style = "text-align: right" });
     c.Bound(p => p.MonthCat)
      .Title("Mois CAT")
      .Format("{0:MMM yyyy}")
      .HtmlAttributes(new { style = "text-align: center" })
      .HeaderHtmlAttributes(new { style = "text-align: center" });
     c.Bound(p => p.Selected)
      .ClientTemplate("<input name='Selected' type='checkbox' class='selection-checkbox' data-bind='checked: Selected' #= Selected ? checked='checked' : '' #/>")
      .HeaderHtmlAttributes(new { style = "text-align: center" })
      .HtmlAttributes(new { style = "text-align: center" });
     })
     .Pageable()
     .Sortable()
     .Scrollable()
     .Resizable(r => r.Columns(false))
     .Reorderable(r => r.Columns(false))
 )
</div>

<script type="text/javascript">
$(document).ready(function ()
{
var viewModel = kendo.observable(
{
isVisible: true,
contracts: new kendo.data.DataSource(
{
type: 'aspnetmvc-ajax',
transport:
{
read:
{
url: '@Url.Action("LoadContracts")',
dataType: 'json'
}
}
})
});
kendo.bind($('#ViewModelScope'), viewModel);
</script>

finally, here is the controller method, which is nver invoked (Chrome confirms there is no load error; it is simply never invoked):

       public ActionResult LoadContracts([DataSourceRequest] DataSourceRequest request)
       {
          return Json(new LocalMarketModel().GetContracts().ToDataSourceResult(request));
       }

Now, the ViewModel per se seems right because changing the state of the "isVisible" variable works perfectly well.  But I can never get it to call the "LoadContracts" method of the supervisor and, thus, no data is loaded in the grid.

Is there something wrong or is there another action I should do?

Thank you

Added Information:

I  made some progress since yesterday.  I now get grid to call back onto the controller but a javaScript error in the Kendo UI library happens upon return.  I attached a copy of the most recent version of the View.  Here is what the controller method currently looks like:

       public ActionResult LoadContracts([DataSourceRequest] DataSourceRequest request)
       {
          LocalMarketViewModel[] contracts = new LocalMarketModel().GetContracts().ToArray();
          return Json(contracts.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
       }

And here is a traceback, in Chrome, of the JavaScript error:

Uncaught TypeError: Object #<Object> has no method 'slice'   kendo.all.min.js:11
dt.extend.success   kendo.all.min.js:11
x.isFunction.i            jquery-1.10.2.js:827
n.success                  kendo.all.min.js:11    
c                                  jquery-1.10.2.js:3048
p.fireWith                 jquery-1.10.2.js:3160
k                                 jquery-1.10.2.js:8235
r                                 jquery-1.10.2.js:8778

Michel Corbin
Top achievements
Rank 1
 answered on 21 Nov 2013
2 answers
96 views
Show labels with total on top of the stacked bars in Kendo UI Chart
This example demonstrates how to place a label with the total sum of the stacked bars on top of the stack.
Kendo UI
Top achievements
Rank 1
 answered on 21 Nov 2013
0 answers
106 views
Hello,

A defect is preventing the shared tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

The recommended temporary workaround is to set series name:
    $("#chart").kendoChart({
      series: [{
        type: "area",
        name: "Series one",
        data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
      }, {
        type: "area",
        name: "Series two",
        data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
      }],
      tooltip: {
        format: "{0} %"
      }
    });

Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 21 Nov 2013
0 answers
122 views
Hello,

A defect is preventing the sparkline tooltips from showing in the official release (v. 2013.3.1119) .
This issue is fixed in internal build v. 2013.3.1121 and later.

Recommended temporary workarounds:
  • Disable shared tooltips. This will not negatively affect Sparklines with only one series.

    $("#hum-log").kendoSparkline({
        type: "area",
        data: [71, 70, 69],
        tooltip: {
            format: "{0} %",
            shared: false
        }
    });
  • Set series names on Sparklines with more than one series:

        $("#sparkline").kendoSparkline({
          type: "area",
          series: [{
            name: "Series one",
            data: [71, 70, 69, 68, 65, 60, 55, 55, 50, 52]
          }, {
            name: "Series two",
            data: [73, 72, 72, 71, 68, 63, 57, 58, 53, 55]
          }],
          tooltip: {
            format: "{0} %"
          }
        });
Apologies for the caused inconvenience.
Kendo UI
Top achievements
Rank 1
 asked on 21 Nov 2013
5 answers
186 views
http://www.kendoui.com/custom-download.aspx

Clicking on 2013.2.918 does nothing. No custom download fields display for me. The other options in the dropdown populate the screen, but not 2013.2.918. Is this version not available for custom downloads yet?

Thanks..
Tomislav Bronzin
Top achievements
Rank 1
 answered on 21 Nov 2013
3 answers
322 views
Hi,

I have a Kendo grid on which I apply batch editing on a column which represents a decimal. I have set the culture to "de-DE". If I set the format of the column explicitly as Format("{0:N}"), I see the decimal separator correctly as (,). But as soon as I go to the edit mode by clicking on the text, it changes to (.).
Strangely, if I edit the text and come out of the edit mode, A comma(,) is interpreted as a decimal separator. But an existing (.), if not replaced becomes a thousand's separator.

I've written a stand-alone application which I've attached. In this stand-alone I have an added problem. The "Save changes", "Cancel changes" & "x of y items" are not translated. In my actual application, this problem is not there. Am I doing something wrong in applying the culture ? The date widget (in sample) seems to be working fine.

Thanks & Regards

Achilles 
Daniel
Telerik team
 answered on 21 Nov 2013
9 answers
177 views
We are experiencing an issue in IE 10 that we do not experience in Chrome or FF.

We are trying to use virtualization with a page size of at least 100 (preferably 150), but there is a significant delay between when the user clicks on a row and when the row is actually highlighted. This presents a problem because we would like to open a kendoWindow when the user double-clicks on a grid row.

If we reduce the page size to around 30 or reduce the number of visible columns to 10, the delay between clicking on a row and the row responding to being clicked is reduced, but this is not optimal. How can we work around this?

The markup for the page is attached.
Petur Subev
Telerik team
 answered on 21 Nov 2013
1 answer
771 views
Hi 

I am a newbie to KendoUi. I am facing an issue with the data grid in setting up the filters for the columns with numeric values.
In my code I am getting  filters (startswith, contains .. - which are String filters ) instead  of numeric filters (less than, greater than.. ) .

Working demo of the porblem : http://jsfiddle.net/Sbb5Z/1125/

Regards
Arun
Alexander Valchev
Telerik team
 answered on 21 Nov 2013
1 answer
264 views
I am trying to display a simple chart from remote data, but I'm having trouble with aggregates.  For a table of people, I'd like to see a bar chart that shows the number of people in each role.  I think the bottom-line question is, "where are the aggregates calculated?"  Does the framework calculate them on the client side after the data has been returned from the server?  In my ASPNet MVC controller, I can see the expected Kendo.Mvc.GroupDescriptor list and the Kendo.Mvc.IFilterDescriptor list populated correctly, but the Kendo.Mvc.AggregateDescriptor list is empty.  Should it be?  Also, the AggregateFunctions collection in the GroupDescriptor is also empty.  Please advise.

var myDataSource = new kendo.data.DataSource({
        transport: {
            prefix: "",
            read: {
                url: "/Team/TeamMembers",
                type: "POST"
            }
        },
        group: {
            field: "personRole",
            aggregates: [{
                field: "personId",
                aggregate: "count"
            }]
        }
}
Petur Subev
Telerik team
 answered on 21 Nov 2013
4 answers
173 views
Hi, I have been in this problem for too long. The Foreign Key Column doesn't render a DropDownList, instead of that, it renders an <input>. I don't know why. I've been through many forums but without success. Please help me. I have the following structure.

The model and view:
public class ProcesoEvaluacionDTO
    {
        [ScaffoldColumn(false)]
        public int ID { get; set; }
 
        [Required]
        [MaxLength(200)]
        public string Nombre { get; set; }
 
        [DisplayName("Fecha de cierre a evaluadores")]
        [Required]
        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
        public string FechaCierre { get; set; }
 
        [Required]
        [UIHint("GridForeignKey")]
        [DisplayName("Autorizado por")]
        public int AutorizadorID { get; set; }
 
        public ProcesoEvaluacionDTO() { }
}
public class ColaboradorDTO
    {
        public string NombreCompleto { get; set; }
 
        public int ID { get; set; }
 
        public ColaboradorDTO() { }
 
    }
@{
    IList<ColaboradorDTO> colaboradores = ViewBag.colaboradores;
    SelectList lista = new SelectList(colaboradores, "ID", "NombreCompleto");
}
 
@(Html.Kendo().Grid<ProcesoEvaluacionDTO>()
            .Name("ProcesosDeEvaluacionGrid")
            .Columns(columns =>
                {
                    columns.ForeignKey((p => p.AutorizadorID), lista);
                    columns.Bound(p => p.Nombre);
                    columns.Bound(p => p.FechaCierre);
 
                    columns.Command(command => {
                        command.Edit();
                        command.Destroy();
                    }).Width(300);
                }
            )
            .ToolBar(toolbar => toolbar.Create())
            .Editable(editable => editable
                .Mode(GridEditMode.PopUp)
            )
            .Pageable(paper => paper.Refresh(true))
            .Filterable()
            .Sortable()
            .Scrollable(w => w.Height(330))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Model(model => { model.Id(p => p.ID); })
                .Create(update => update.Action("EditingInline_Create", "ProcesoEvaluacion"))
                .Read(read => read.Action("EditingInline_Read", "ProcesoEvaluacion"))
                .Update(update => update.Action("EditingInline_Update", "ProcesoEvaluacion"))
                .Destroy(update => update.Action("EditingInline_Destroy", "ProcesoEvaluacion"))
            )
        )
Also, GridForeignKey.cshtml is in the correct place ~/Views/Shadres/EditorTemplates. I really don't know why an <input> appears. I've even tried to write my own custom editor template but I've got the same error. Help please.
Vladimir Iliev
Telerik team
 answered on 21 Nov 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?