Hi !

I've recently downloaded trial version of Kendo UI with wrappers for MVC. I'm developing simple application to test Kendo out and I'm stuck. What I want is for user to get text from Kendo Autocomplete, and when he clicks save button that text is added to database (so value is sent back to server - mvc controller ; I'm using EF 5.0 as ORM) and also that text is automatically showed on page without reloading it ! 
I've done the first part, but I'm stuck at showing text without reloading webpage.  I'm new in Javascript and jQuery but I believe this could be done using MVVM pattern. So my question is can I accomplish this using Kendo MVVM, and if I can, how ?

Hi My code below works fine in IE 10 , however it doesn't appear to work on page load event when using IE 8 or IE9. In brief I have a ListView that I bind manually upon page load and everytime something changes in the AutoComplete control. In IE9 and 8 the only thing that's's not working is being able to populating the ListView upon page load. I'm attempting to read the datasource of ListView to populate it. Look at my comment below in the Java Script section. As soon as I type something  in the AutoComplete text. then the listview populates and everything else works just fine. Maybe the sequence of where I have the .read() command should be moved to somewhere else to be able to refresh the ListView. But I'm not sure where. Any Ideas?

@model IEnumerable<HeatSeekerWeb.Models.Document>

<script type="text/x-kendo-tmpl" id="template">
    <div class="Document" id="template">
        <h3>#:Title#</h3>
        <a href="@Url.Content("~/Document/Download?url=#:Path#&fileName=#:FileName#")"><small>#:FileName#</small></a>        
        <p>#:Description#</p>
        <hr />
    </div>
</script>
<div id="divSearchDoc">
            @(Html.Kendo().AutoComplete()
        .Name("acDocuments")
        .Filter("startswith")
        .HtmlAttributes(new { style = "width:500px" })
        .Placeholder("Search Title...")
        .DataTextField("Title")
        .DataSource(source =>
                    {
                        source.Read(
                            read =>
                            {
                                read.Action("Get_Documents", "Document")
                                    .Data("onAdditionalData");
                            }
                            )
                            .ServerFiltering(true);
                    })
        .Events(events => events.DataBound("onDataBound").Select("onSelect").Change("onChange"))
        )
        @Html.ActionLink("Upload Document", "Create", "Document")
</div>
<div class="documents-sections">
    @(Html.Kendo().ListView<HeatSeekerWeb.Models.Document>()
    .Name("listView")
    .TagName("div")
    .ClientTemplateId("template")
    .DataSource(dataSource =>
    {
        dataSource.Read(read => read.Action("Documents_Read", "Document").Data("getSelectedItems"));
        dataSource.PageSize(4);
    })
    .AutoBind(false)
    .Pageable()
)
</div>
<script>
    $(function () {
        // THIS LINE DOESN'T WORK on IE 8 and IE 9. No Problem in IE10
        $("#listView").data("kendoListView").dataSource.read();
    });

    function onAdditionalData() {
        return {
            text: $("#acDocuments").val()
        };
    }

    function getSelectedItems(e) {
        return { text: $("#acDocuments").val() };
    }

    function onDataBound(e) {
        $("#listView").data("kendoListView").dataSource.read();
    };
    function onChange() {
        $("#listView").data("kendoListView").dataSource.read();
    }

    function onSelect(e) {
        //var dataItem = this.dataItem(e.item.index());
        $("#listView").data("kendoListView").dataSource.read();
    }

</script>

Drop down list is continously showing the loading sign

I have the following model deliverable type

public partial class t_deliverable_type_mst
    {
        public t_deliverable_type_mst()
        {
            this.t_deliverable_item_mst = new HashSet<t_deliverable_item_mst>();
        }
    
        public int pk_d_type_id { get; set; }
        public string type { get; set; }
        public string logo { get; set; }
    
        public virtual ICollection<t_deliverable_item_mst> t_deliverable_item_mst { get; set; }
    }
I have create a kendo drop downlist as
@(Html.Kendo().DropDownList()
               .Name("dtype")
              .HtmlAttributes(new { style = "width: 200px" })
              
              .OptionLabel("Not working")
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetTypes", "deliverable");
                  })
                  .ServerFiltering(true);
                  
              })
             .DataTextField("type")
             .DataValueField("pk_d_type_id")
             .SelectedIndex(0)
             .Template("<img src=\"" + Url.Content("~/images/dtype_logo/") + "${data.logo}\" alt=\"${data.type}\" />" +
                         "<dl>" +
                          "<dt>Type:</dt><dd>${data.type}</dd>" +
                         "</dl>")
            )

this is the method in my controller
 public JsonResult GetTypes()
        {
            deliverableEntities deliv_ent = new deliverableEntities();
            JsonResult types = new JsonResult();

            var type_list = deliv_ent.t_deliverable_type_mst.ToList();

            types= Json(type_list, JsonRequestBehavior.AllowGet);
           
            return types;
        }

I have an ajax multiselect with autobind of false.  When returning to the page I would like my selected value(s) to display when the page loads, but they currently do not display until I click in the mulitselect.

Is there anything I can do to make this happen? 

I've attached a sample project.

Here is our scenario:
We have a tree view control on the left with the list of document types and a grid control on the right that will list the documents (based on document type selection) with both inside a splitter control.When the users clicks on the document type, we want to recreate the grid because based on the document type the columns will change. 

For Example:
Document Type A will have columns Name, Type, Create Date, Attribute1, Attribute 2
Document Type B will have columns Name, Type, Create Date, Attribute6, Attribute 7, Attribute 8, Attribute 9
Document Type C will have columns Name, Type, Create Date, Attribute5

Problem:
When we click on the document type, the old column still exists and the new columns are not created but the data gets refreshed.

Questions:
1) What is the best option for our scenario?
2) Is there a way to destroy and recreate grid on demand?
3) If we have to destroy and recreate every time the users click on the document type, will that impact performance?

Here is  the code to create grid:
@model System.Data.DataTable

@(Html.Kendo().Grid(Model)
    .Name("DocumentGrid")
    .Columns(columns =>
    {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.ColumnName).Groupable(column.ColumnName != "Id").Title(column.Caption).Hidden(column.ColumnName == "Id");
        }
    })
    .Pageable()
    .Sortable()
    .Navigatable()
    //.Scrollable()
    .Filterable()
    .Groupable()
    .ColumnMenu()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                foreach (System.Data.DataColumn column in Model.Columns)
                {
                    model.Field(column.ColumnName, column.DataType);
                }                
            })
        .Read(read => read.Action("GetDocuments", "Controller"))
        .PageSize(20)
    )
)

Here is the code the create the tree view:
@helper RenderTreeView()
{
    @(Html.Kendo()
          .TreeView()
          .ExpandAll(true)
          .Name("treeview")
          .DataTextField("Text")
          .Events(events => events
                                  .Select("onChange"))
          .BindTo(Model, mappings =>
          {
              mappings.For<Test.Models.AllDocumentType>(binding => binding
                                                                                     .ItemDataBound((item, AllDocumentType) =>
                                                                                     {
                                                                                         item.Id = AllDocumentType.Id;                                                     
                                                                                         item.Text = AllDocumentType.Text;                        
                                                                                     })
                                                                                     .Children(AllDocumentType => AllDocumentType.DocumentTypes));
              mappings.For<Test.Models.DocumentType>(binding => binding
                                                                                  .ItemDataBound((item, DocumentType) =>
                                                                                  {
                                                                                      item.Id = DocumentType.Id.ToString();
                                                                                      item.Text = DocumentType.Name;
                                                                                  }));
          })                     
    )
}

Here is the onchange event:
function onChange(e) {
        var data = treeview.dataItem(e.node);
        
        $.post('@Url.Action("DocumentGrid", "Collector")', {
            id: data.id
        }, function (data) {
            var grid = $("#DocumentGrid").data("kendoGrid");
            grid.dataSource.read();            
        });
    }; 

Thanks,

Im trying to use a time picker without any luck.

My problem is the picker is not getting bound to the value. The value is returned, I have check by 

adding the span and the value is correct. Do I need to do something else to get the time picker working?

Thank you!

I have a kendo window and button in my asp.net mvc 3 application view.

on click of a button I am opening the above declared window using below javascript code.
var windowobj = window.data("kendoWindow");
           windowobj.open();
           windowobj.center();
hen in the window i enter value in the textbox. the opened window has Ok button, on click of that button, we use java-script code.
windowobj.close();
Now again clicking on parent button I open the window and expect that the text box in window will have no values. but it retains those values. Is there a function like refresh which will clear the previous contents.

Hello!
I use Tabstrip!
I have 2 items (Tabstrip_1 & Tabstrip_2)
inside Tabstrip_1: 
<div> with <div> and ....
inside Tabstrip_2:
<div> inside this div <div> with <img>
And I have <script> for zoom img

!!!!!!!
If I use SelectIndex(0), all bad and please see SelectIndex(0).png
If I use SelectIndex(1), all good and please see SelectIndex(1).png

Why this is occurs?
How I can use SelectIndex(0),so that get good img in second tabstrip item

+ I attached my project
http://www.sendspace.com/file/452c8a

Hi,

can anyone show me how to use a template for the labels in a chart legend in Kendo for MVC? The fluent api allows for controlling font, color, position, etc, but the labels template is nowhere to be found.

Below is a piece of code taken from the DataViz demo, to illustrate what I mean.


Any help is greatly appreciated.

Regards,
Erwin

Hi

I'm generating the graph dynamically based on loaded description and data.
The (simplified) code as follows:
Is there a better (dynamic) way to set chart type without having the if/switch block?
Besides Aggregate I have a lot of options to set for most (but not all) series. So I wouldn't need to copy the lines for every possible chart type. Is it possible in current solution to catch each series (created by e.g. .Area()) in a variable and conditionally set properties on it?
Would the current approach to build a "very dynamic" chart in a View recommended? Is it possible build it completely in an Action instead?
Yes, the question might be related to razor/htmlhelpers in general, still interested in recommended Kendo approach. Thanks.
 Raido