Hi,

I have editable grid which opens a popup when editing, this is opening a template page.

In this template page I have a kendo datepicker


<div class="editor-label">
    @Html.LabelFor(model => model.DateInvoiced)
</div>
<div class="editor-field">
    @(Html.Kendo().DatePickerFor(model => model.DateInvoiced))
    @Html.ValidationMessageFor(model => model.DateInvoiced)
</div>

It is binding to a viewmodel where the DateInvoiced is a nullable datetime.
When we add a record we don't want to provide this value yet, but when we hit the save button, the kendo datepicker is asking us to provide the value and is making this required.

The model is nullable and does not have required attribute.

        [Display(Name = "Received")]
        public Nullable<DateTime> DateInvoiced { get; set; }

How do we make the datepicker allow blank value?

Hi Experts,
  I had downloaded the KendoGridWithCascadingCombo boxes example posted by admin and used the same concept in my code. I need help with the following

1. I need to show the dropdown text instead of the value on the grid after editing.   The client template does not seem to work for InLineEditing



Here is the code on my razor file 

@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@model ModelSelectionViewModel

@section Head {
    <script type="text/javascript">
        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }

        function rowindex(dataItem) {
            var data = $("#ModelSelectionSearchCriteriaList").data("kendoGrid").dataSource.data()
            return data.indexOf(dataItem);
        }



        function filterCategory() {
            return {
                media: $("#Media").data("kendoDropDownList").value()
                            };
        }


        function filterSubCategory() {
            return {
                categoryId: $("#Category").data("kendoDropDownList").value()
            };
        }

    </script>
}

   
<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <ul class="breadcrumb">
                @Html.MvcSiteMap().SiteMapPath()
            </ul>
        </div>
        <!--/span-->
    </div>
    <!--/row-fluid-->
    <div class="row">
        <div class="span12">
            <div class="widget">
                <div class="widget-header">
                    <i class="icon-star"></i>
                    <h3>
                        Model Selection Criteria Panel</h3>
                </div>
                <div class="widget-content">
                    @using (Html.BeginForm("GetData", "ModelSelection"))
                    { 
                        @(Html.Kendo().Grid(Model.ModelSelectionCriteriaList)
                                        .Name("ModelSelectionSearchCriteriaList")
                                    .HtmlAttributes(new { style = "width:100%;" })
                            .Columns(columns =>
                            {
                                columns.Bound(c => c.Media).HeaderHtmlAttributes(new { @title = "Media" }).Width(300).ClientTemplate("#=Media#"  +
                      // "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Media' value='#= Media #' />"
                      //);
                                columns.Bound(c => c.Category).Title("Category").HeaderHtmlAttributes(new { @title = "Category" }).Width(300);
                      //          .ClientTemplate("#=Category #" + 
                      //  "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Category' value='#= Category #' />"
                      //);

                                columns.Bound(c => c.SubCategory).Title("SubCategory").HeaderHtmlAttributes(new { @title = "SubCategory" }).Width(300);
                      //          .ClientTemplate("#=SubCategory#" +
                      //  "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].SubCategory' value='#= SubCategory #' />"
                      //);
                                
                              columns.Command( command => { command.Edit(); command.Destroy(); }).Width(200);
                                 })
                            .ToolBar(toolbar =>
                            {
                                toolbar.Create().Text("Add New Criteria");
                            })
                            .Editable(editable => editable
                                .Mode(GridEditMode.InLine)
                                .DisplayDeleteConfirmation(false)
                                )
                            .Scrollable()
                            .DataSource(datasource => datasource
                                .Ajax()
                                .ServerOperation(false)
                                .Events(events => events.Error("error_handler"))
                                .Model(model => model.Id(c => c.Id))
                                    .Create(update => update.Action("EditingInline_Create", "ModelSelection").Type(HttpVerbs.Post))
                                    .Destroy(update => update.Action("EditingInline_Destroy", "ModelSelection").Type(HttpVerbs.Post))
                                    .Update(update => update.Action("EditingInline_Update", "ModelSelection").Type(HttpVerbs.Post))
                                       // .Read(read => read.Action("EditingInline_Read", "ModelSelection").Type(HttpVerbs.Post))
                                    )
                                    )
                                    
                        <input id="save" type="submit" class="btn btn-primary" name="button" value="Search" />
                        @:&nbsp; &nbsp;
                     @Html.ActionLink("Reset Criteria", "Index", "ModelSelection", new { }, new { id = "btnReset", @class = "btn" })
                    }
                </div>
            </div>
        </div>
    </div>
------------------------------------
1. category.cshtml

@model long
 
    
 @(Html.Kendo().DropDownListFor(m => m)
          .OptionLabel("Select Category...")
          .DataTextField("CategoryText")
          .DataValueField("CategoryId")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetModelCategory", "ModelSelection")
                      .Data("filterCategory");
              })
              .ServerFiltering(true);
          })
          .AutoBind(false)
          .CascadeFrom("Media")
    )
     @Html.ValidationMessageFor(m => m)


--------------------------------------------------------------
2. media.cshtml
@model long

    @(Html.Kendo().DropDownListFor(m => m)
          .OptionLabel("Select Media..")
          .DataTextField("MediaText")
                  .DataValueField("MediaId")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetModelMedia", "ModelSelection");
               });
          })
    )
     @Html.ValidationMessageFor(m => m)

3. subcategory.cshtml
@model long
 @(Html.Kendo().DropDownListFor(m => m)
          .AutoBind(false)
          .OptionLabel("Select SubCategory...")
          .DataTextField("SubCategoryText")
               .DataValueField("SubCategoryId")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetModelSubCategory", "ModelSelection")
                      .Data("filterSubCategory");
              })
              .ServerFiltering(true);
          })
          .CascadeFrom("Category")
    )
     @Html.ValidationMessageFor(m => m)

-----------------------------------------------------------------------------
My Controller code is below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TIMS.Models;
using TIMS.Areas.Alberta.SearchCriteria;
using TIMS.Areas.Alberta.Services;
using TIMS.Services;
using TIMS.Areas.Alberta.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using TIMS.Controllers;

namespace TIMS.Areas.Alberta.Controllers
{
    public class ModelSelectionController : BaseController
    {
        #region Protected Members
        protected IAlbertaLookupService albertaLkService;
        protected IAlbertaUserSessionService albertaUserSessionService;
        
        
        #endregion

        #region Constructor
        public ModelSelectionController(IAlbertaLookupService albertaLkService, IAlbertaUserSessionService albertaUserSessionService)
        {
            this.albertaLkService = albertaLkService;
            this.albertaUserSessionService = albertaUserSessionService;
        }
#endregion

        public ActionResult Index()
        {
            ModelSelectionViewModel modelSelectionViewModel = new ModelSelectionViewModel();

            List<ModelSelectionSearchCriteria> sessionCriteria = new List<ModelSelectionSearchCriteria>();
            albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriteria;
            return View(modelSelectionViewModel);
        }

       
        public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(albertaUserSessionService.ModelSelectionSearchCriteriaData.ToDataSourceResult(request));
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
        {
            
            if (criteria != null && ModelState.IsValid)
            {
                List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                if (sessionCriterias.Count != 0)
                        criteria.Id = sessionCriterias[sessionCriterias.Count -1].Id + 1;
                else
                    criteria.Id = 1;

                sessionCriterias.Add(criteria);
                albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
            }

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

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
        {
            if (criteria != null )
            {
                List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                int index = 0;
                for (int c = 0; c < sessionCriterias.Count; c++)
                    if (sessionCriterias[c].Id == criteria.Id)
                    {
                        index = c;
                        break;
                    }
                sessionCriterias.RemoveAt(index);
                albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
            }

            return Json(ModelState.ToDataSourceResult());  
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
        {
            if (criteria != null && ModelState.IsValid)
            {
                List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
                int index=0;
                for (int c=0; c < sessionCriterias.Count; c++)
                    if (sessionCriterias[c].Id == criteria.Id)
                    {
                        index = c;
                        break;
                    }

                sessionCriterias[index].Media = criteria.Media;
                sessionCriterias[index].Category = criteria.Category;
                sessionCriterias[index].SubCategory = criteria.SubCategory;

                albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
            }
                

            return Json(ModelState.ToDataSourceResult());
        }


        public JsonResult GetModelMedia()
        {
            SelectList medias = albertaLkService.GetModelMediaList();

            return Json(medias.Select( p => new { MediaId = p.Value, MediaText = p.Text}) , JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetModelCategory(long media)
        {
           
           SelectList categories = albertaLkService.GetModelMatrixCategoryList(media);

            return Json(categories.Select(p => new { CategoryId = p.Value, CategoryText = p.Text }), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetModelSubCategory(long categoryId)
        {
            SelectList subCategories = albertaLkService.GetModelMatrixSubCategoryList(categoryId);
           
            return Json(subCategories.Select(p => new { SubCategoryId = p.Value, SubCategoryText = p.Text }), JsonRequestBehavior.AllowGet);
        }

        public ActionResult GetData(ModelSelectionViewModel viewModel)
        {
          List<ModelSelectionSearchCriteria> sessionCriteria = albertaUserSessionService.ModelSelectionSearchCriteriaData;

          
         
            
          return View("result", viewModel);
        }


    }
}

First of all - I'm a newbie to kendo ui and web programming with .NET as a whole so this might be an easy question. With that in mind, here's my problem:

I have a DatePicker and a Grid on a page. Whenever a date is chosen from the DatePicker, it fires an event which queries data from the server and then populates the grid with it. The problem is - it doesn't. The grid stays empty with no errors client or server-side at all.

Here's how I set up the controls:
And here's the javascript function that does most of the work:
And here's a sample response that I get:
How must I set up the datasource of the grid for this to work?

When I try and use the mvc html helpers I get javascript errors when I try and use the image browser. When I use the jquery version, everything works just fine.

One of the errors occurs when you open the image browser, then try and close it. Firefox gives a "TypeError: e is null"


version 2012.3.1315

here is the important part of the razor file:

Hello, my problem is, that when the Window is open, I select the first Numeric textbox and type digits, it works. When Iselect the second textbox and try to type digits, it doesn't work. What can I do?

I am working on VS 2010 MVC4, HTML 5 with kendo ui demo version
I tried to bind a grid, corresponding to the data entered in a textbox, but the grid is not getting populated
Also there is no error displayed and if i put a dummy data in datasource it displays
 This is the code i used

$("#txtSearchCaller").keyup(function () { SearchCaller($(this)); });

function SearchCaller(txtSearchCaller) {
            SearchRequestProcess = $.ajax({
            type: "GET",
            url: baseURL + "Call/SearchCaller",
            data: "term=" + $(txtSearchCaller).val(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnGetCallerSuccess,
            error: function (request, status, error) { if (request.statusText != "abort") { alert("SearchCaller:: " + request.statusText); } }
                });
    }
}
function OnGetCallerSuccess(Jsondata, status) {
    $("#Grid").kendoGrid({ // create Grid from div HTML element Kendo
        dataSource: Jsondata,
        selectable: "row",
        scrollable: true,
        navigatable: true,
        resizable: true,
        groupable: false,
        columns: [
                    {
                        field: "category1",
                        title: "category1",
                        width: 80
                    },
                    {
                        field: "category2",
                        title: "Customer Name",
                        width: 80
                    },
                ]
    });
}

Hi,

In our application, we are loading a treeview where there is parent-child relationship
Structure is:
Node 1
    Node 1.1
        Node 1.1.1
            Node 1.1.1.1
            Node 1.1.1.2
            Node 1.1.1.3
    Node 1.2
    Node 1.3
        Node 1.3.1
        Node 1.3.2
Node 2
     Node 2.1
            Node 2.1.1
            Node 2.1.2
            Node 2.1.3
    Node 2.2
Node 3

We are using Load on Demand (Ajax binding) to load the children nodes on expanding a parent node.

Step 1: Expand a parent node, child nodes will be loaded
Step2: Check the parent node, all the child nodes will be checked
Step 3: Now Collapse the parent node (Keep it checked) and expand again to load the child nodes.

Expect:
Child nodes should be checked
Actual:
Child Nodes are not checked

The checkboxes state is not maintained after collapsing a parent node and then expanding the same.
This is one of the critical functionalities in our application.
Please help.

Thanks
Vidya

Hi all, 

Here is my kendo grid declaration in the cshtml

 columns: [
                    { field: "MemberFirstName", title: "Member<br/>First Name" },
                    { field: "MemberLastName", title: "Member<br/>Last Name" },
                    { field: "ClientMemberID", title: "Client<br/>Member ID" },
                    { field: "ProviderID", title: "Provider ID" },
                    { field: "ProviderFirstName", title: "Provider<br/>First Name" },
                    { field: "ProviderLastName", title: "Provider<br/>Last Name" },
                    { field: "AppointmentDate", title: "Appointment<br/>Date" }
                 ],
My last column is a date time column, i want to show only date value not the time. 

I can see the data that i am binding and its clearly a date time value, When i see it in the UI, i see it as /Date(1331166600000)/

any one had this issue before?

I tried the following ways

template: '#= kendo.toString(AppointmentDate,"dd MMMM yyyy") #' 
format: "{0:dd/MMMM/yyyy}"

None of the above two methods worked for me. 

Hello,
 a small question:
I keep seeing this object DataSourceRequest,
this is specific to kendo library when using with grid or filtering?is there a link about this too?

Regards,
Daniel

Hi,
I have a datepicker, textbox and one autocomplete box on my page. Textbox and autocomplete looks fine but the datepicker doesn't align correctly. Bug?
Looks the same in IE9 and FF17.



Regards,
Mattias