Hi , 

In one of my project I have to let the user pickup on item from a dropdown list and then Add the corresponding Item from my model to a Grid datasource.
The Dropdown list is bind to a property of my ViewModel which is filled by the controller. The grid datasource is also bind to another ViewModel property which is empty and should be passed to controller upon From submit. Both properties are of the same type (TempPp)

My viewmodel contains 2 DateTime properties and after calling the values of those two properties are not displayed properly in the grid

The value sent by the controller is {01/11/2012 00:00:00} and the displayed value is /Date(1351724400000)/
or  {31/12/2013 00:00:00} and /Date(1388444400000)/

Here is myViewmodel

Here is a simplified version of my Razor view:

@model Customer.Asam.Presentation.Supplier.ViewModels.ARRViewmodel

@using Customer.Asam.Resources

@using Customer.Asam.Presentation.Supplier.Common

 

@using (Html.BeginForm("Create_Step3", "", FormMethod.Get, new { @id = "FORM_ARR_3" }))

{

    <div>

        <h2>@Asam_Strings.TITLE_CREATE_ARR_STEP 3 @Asam_Strings.TITLE_CREATE_ARR_PREVENTION_PLAN</h2>

 

        @Asam_Strings.LABEL_PP_REFERENCE

 

        @(Html.Kendo().DropDownList()

            .HtmlAttributes(new { style = "width: 250px" })

            .BindTo(Model.tempPP)

            .Name("tempPP") //The name of the combobox is mandatory. It specifies the "id" attribute of the widget.

            .DataTextField("PPREF") //Specifies which property of the Product to be used by the combobox as a text.

            .DataValueField("ID") //Specifies which property of the Product to be used by the combobox as a value.

            .Events(e => e

            .Select(@<text>

                function(e) {

                    e.preventDefault();

                    var dataItem = this.dataItem(e.item.index());

                 

                    if (e.item.index() > 0)

                    {

                        var grid = $("#RefPP").data("kendoGrid");

                        grid.dataSource.add(dataItem);                 

                    }

                }  </text>))

         )

 

        <script>

            function indexPP(dataItem) {

                var data = $("#RefPP").data("kendoGrid").dataSource.data();

                return data.indexOf(dataItem);

            }

        </script>

         

        @(Html.Kendo().Grid(Model.RefPP)

            .Name("RefPP")

            .DataSource(dataSource => dataSource

                .Ajax()

                .PageSize(1)

                .ServerOperation(false)

             )

 

            .Columns(column =>

                {

                    column.Bound(c => c.PPREF)

                        .ClientTemplate("#= PPREF # " +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPREF' value='#= PPREF #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPSRCAPPLICATION' value='#= PPSRCAPPLICATION #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].PPSITE' value='#= PPSITE #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DESCRIPTION' value='#= DESCRIPTION #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATEFROM' value='#= DATEFROM #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATEFROM' value='#= DATEFROM #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].DATETO' value='#= DATETO #' />" +

                        "<input type='hidden' name='RefPP[#= indexPP(data)#].QUOTA' value='#= QUOTA #' />");

                     

                    column.Bound(c => c.PPSITE);

                    column.Bound(c => c.DESCRIPTION);

                    column.Bound(c => c.DATEFROM)

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

                    column.Bound(c => c.DATETO)

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

                    column.Bound(c => c.QUOTA);

                }

            )

        )

 

    </div>

}

I've read through the API and was wondering if there is a way to only allow dates to be selected from the calendar OR a real date typed in.  Currently someone could type in "Bill" or "I want to type an alphanumeric sentence"...  I'd like to prevent someone from even entering anything except for a valid date.

I am currently validating this value after the fact and then alerting the user they have entered an invalid date, but just want to be able to cut out that step (or at least part of it) if possible.

Thanks
Jason

This means my model is not binding and the operations are not working.

The read method works just fine, but that is it....  For Example, my Destroy Method:

CONTROLLER:
     public ActionResult Memo_Delete(MemoModel memo)
        {
            using (var context = new eEntities.eWJB())
            {
                Note _note = context.Notes.First(i => i.nMemoID == memo.memoID);
                context.Notes.Remove(_note);
                context.SaveChanges();
            }
            return Json(new[] { memo }.ToDataSourceResult(request, ModelState));
        }

The JS Below sends the following malformed JSON to the Controller:  It looks like Query Parameters / Not JSON:  

Any Suggestions?  I have tried the parameter mapping with no luck.

clientID=8&memoID=2&memoTime=Sat+May+08+2004+13%3A05%3A00+GMT-0700+(Pacific+Daylight+Time)&subject=General+Notes&memo=%24200+Appraisal+%230403053&initials=MM&code=4&eyesOnly=false&sticky=false

JS for the GRID:

    jQuery("#grid2").kendoGrid(
         {
             columns: [
               { "title": "Pin", "width": "30px", "field": "sticky", "filterable": {}, "encoded": true, "editor": null },
               { "title": "Private", "width": "30px", "field": "eyesOnly", "filterable": {}, "encoded": true, "editor": null },
               { "title": "Date", "width": "90px", "field": "memoTime", "format": "{0:dd/MM/yyyy}", "filterable": {}, "encoded": true, "editor": null },
               { "title": "Subject", "width": "125px", "field": "subject", "filterable": {}, "encoded": true, "editor": null },
               { "title": "Note", "width": "250px", "encoded": false, "field": "memo", "filterable": {}, "editor": null },
               { "title": "Initials", "width": "30px", "field": "initials", "filterable": {}, "encoded": true, "editor": null },
               {
                   "width": "172px", "command": [
                     { "name": "edit", "buttonType": "ImageAndText", "text": "Edit" }, { "name": "destroy", "buttonType": "ImageAndText", "text": "Delete" }]
               }],
             pageable: { "refresh": true, "pageSizes": [5, 10, 20], "buttonCount": 5 },
             sortable: true,
             selectable: "Single, Row",
             resizable: true,
             scrollable: false,
             editable: { "confirmation": "Are you sure you want to delete this record?", "mode": "popup", "template": "\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"clientID\"\u003eclientID\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field clientID must be a number.\" data-val-required=\"The clientID field is required.\" id=\"clientID\" name=\"clientID\" type=\"number\" value=\"0\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"clientID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"memoID\"\u003ememoID\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"text-box single-line\" data-val=\"true\" data-val-number=\"The field memoID must be a number.\" data-val-required=\"The memoID field is required.\" id=\"memoID\" name=\"memoID\" type=\"number\" value=\"0\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"memoID\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"memoTime\"\u003ememoTime\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput data-val=\"true\" data-val-date=\"The field memoTime must be a date.\" id=\"memoTime\" name=\"memoTime\" type=\"datetime\" /\u003e\u003cscript\u003e\tjQuery(function(){jQuery(\"\\\\\\#memoTime\").kendoDateTimePicker({\"format\":\"M/d/yyyy h:mm tt\",\"min\":new Date(1900,0,1,0,0,0,0),\"max\":new Date(2099,11,31,0,0,0,0),\"interval\":30});});\u003c\\/script\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"memoTime\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"subject\"\u003esubject\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The subject field is required.\" id=\"subject\" name=\"subject\" placeholder=\"\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"subject\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"memo\"\u003ememo\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The memo field is required.\" id=\"memo\" name=\"memo\" placeholder=\"\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"memo\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"initials\"\u003einitials\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" id=\"initials\" name=\"initials\" placeholder=\"\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"initials\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"code\"\u003ecode\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-number=\"The field code must be a number.\" id=\"code\" name=\"code\" placeholder=\"\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"code\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"eyesOnly\"\u003eeyesOnly\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" id=\"eyesOnly\" name=\"eyesOnly\" placeholder=\"\" type=\"text\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"eyesOnly\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"sticky\"\u003esticky\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cselect class=\"list-box tri-state\" id=\"sticky\" name=\"sticky\"\u003e\u003coption selected=\"selected\" value=\"\"\u003eNot Set\u003c/option\u003e\u003coption value=\"true\"\u003eTrue\u003c/option\u003e\u003coption value=\"false\"\u003eFalse\u003c/option\u003e\u003c/select\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"sticky\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e", "window": { "title": "Edit", "modal": true, "draggable": true, "resizable": false }, "create": true, "update": true, "destroy": true }, "toolbar": { "command": [{ "name": null, "buttonType": "ImageAndText", "text": "Add new record" }] },
             dataSource: {
                 transport: {
                     prefix: "",
                     read: { url: "/Memo/Memos_Read"},
                     update: { url: "/Memo/Memo_Update", dataType: "json", contentType: "application/json", type: "POST" },
                     create: { url: "/Memo/Memo_Add", dataType: "json", contentType: "application/json", type: "POST" },
                     destroy: { url: "/Memo/Memo_Delete", dataType: "json", contentType: "application/json", type: "POST" }
                 },
                 parameterMap: function (options, operation) {
                     if (operation !== "read" && options.models) {
                         return {models: kendo.stringify(options.models)};
                     }
                     return options; // <-- added this line

                 
             },
                 pageSize: 10, "page": 1, "total": 0, "type": "aspnetmvc-ajax", "error": error_handler,
                 schema: {
                     data: "Data", "total": "Total", "errors": "Errors",
                     model: {
                         "id": "memoID", "fields":
                             {
                                 "clientID": { "type": "number" },
                                 "memoID": { "type": "number" },
                                 "memoTime": { "type": "date", "defaultValue": null },
                                 "subject": { "type": "string" },
                                 "memo": { "type": "string" },
                                 "initials": { "type": "string" },
                                 "code": { "type": "number", "defaultValue": null },
                                 "eyesOnly": { "type": "boolean", "defaultValue": null },
                                 "sticky": { "type": "boolean", "defaultValue": null }
                             }
                     }
                 }
             }
         });
   });

How could I get the selected data of a kendo grid and send them to controller for being read? How could I get it with the corresponding ViewModel?

I have several filter options in a kendo grid and I need to get data from the controller after being filtered. How could I do that?

I’m trying to set a common value in the “Message” parameter of the “IsEqualTo” property in a kendo grid. My project is Multilanguage, so, when I select a language different than “English”, the shown message is different than “Es igual a”. What should I do to fix that? This is the piece of code:

        .Filterable(filterable => filterable

        .Extra(false)

         .Operators(operators => operators

            .ForString(str => str.Clear()              

               .IsEqualTo("Es igual a")

            ))

Hello,

We have problems with the Multiselect: the initial values ​​don’t bind the control on loading of the component.
RoutesSelected a list of type "DepotViewModel" defined in the datasource.
RouteGuids is a list of Guid type.

 @(Html.Kendo().MultiSelect()                            
.Name("RouteGuids")                             
.DataTextField("Code")                             
.DataValueField("Id")                             
.Placeholder("Select route...")
.AutoBind(true)                            
.Filter("startswith")
.MaxSelectedItems(8)
.Value(Model.RoutesSelected)
.DataSource(source => source.Read(read => read.Action("GetDepots", "Request")).ServerFiltering(false)               
)      
)

Any idea?

Thanks,
Mathieu

So I have figured out how to give a grid a default sort order and it works good...  I would like to also be able to give it a secondary sort order...  first sort is "Bill Date" and then within rows that have the same bill date, they would be sort by "CoordinationOfBenefit".

Also of note, I have enabled multisort in the .Sortable

Thanks,
Jason



@(Html.Kendo().Grid<AccountClaim>()
                        .Scrollable(s => s.Height("auto"))
                        .Name("AccountClaimsGrid")
                        .HtmlAttributes(new { @class = "cursorLink", style= "height: 200px;" })
                        .DataSource(ds => ds.Ajax()
                            .Sort(sort => sort.Add("BillDate").Descending())
                            .Read("AccountClaimsData", "Workdriver", new { ProductName = ViewBag.SelectedProduct.ProductName, AccountId = Model.Account.AccountId })
                            //.PageSize(5)
                            .Events(e => e.Change("ClaimDataSourceChanged")))
                        .Columns(c =>
                        {
                            c.Bound(f => f.AccountClaimId).Visible(false);
                            c.Bound(f => f.ClaimNumber).Title("Claim Number").Width(125);
                            c.Bound(f => f.InsuranceCode).Title("Ins Code").Width(75);
                            c.Bound(f => f.CoordinationOfBenefit).Title("COB").Width(55);
                            c.Bound(f => f.ServiceDate).Title("Service").Format("{0:d}").Width(85);
                            c.Bound(f => f.BillDate).Title("Bill").Format("{0:d}").Width(85);
                            c.Bound(f => f.ClaimStatusRollupName).Title("Status").Width(100);
                            c.Bound(f => f.ClaimAmount).Title("Claim Amount").ClientTemplate("<span style='float: right;'>#=kendo.toString(ClaimAmount,'c')#</span>").Width(115);
                            c.Bound(f => f.PaidAmount).Title("Paid Amount").ClientTemplate("<span style='float: right;'>#=kendo.toString(PaidAmount,'c')#</span>").Width(110);
                            c.Bound(f => f.AdjustmentAmount).Title("Adjustment Amount").ClientTemplate("<span style='float: right;'>#=kendo.toString(AdjustmentAmount,'c')#</span>").Width(135);
                            c.Bound(f => f.PaidAmount).Title("Patient Amount").ClientTemplate("<span style='float: right;'>#=kendo.toString(PaidAmount,'c')#</span>").Width(125);
                        })
                        .Selectable(s => s.Mode(GridSelectionMode.Single))
                        .Sortable(s => s.SortMode(GridSortMode.MultipleColumn))
                        .Groupable(g =>
                        {
                            g.Messages(m =>
                            {
                                m.Empty("Drag Column Header Here to Group");
                            }
                            );
                        }
                            )
                        .Filterable()
                        .ColumnMenu()
                        .Events(e => e.Change("ClaimSelectionChanged"))
                    )

When I try to add some table/tr/td tags, it is displaying some lines at the end of td tags.  Attaching a sample image of how it is appearing wtihin the Kendo Grid.

Sample Code :


<script id="DetailInfo" type="text/html">
<table class="DetailReport" cellspacing="10" >
<tbody>
<tr>
<td>Audit Key:</td>
<td><input Type="TextBox" width="10" class="data" ID="auditkey" readonly value="Test"/> </td>
<td><Label ID="label5">LPI Refund ID:</Label> </td>
<td><input Type="TextBox" class="data" ID="RID" readonly value="asdf"/> </td>
<td><Label ID="label12" class="label">Report Date:</Label></td>
<td><input type="TextBox" ID="ReportDate" class="data" readonly/></td>
<td><Label ID="label13" class="label">Rfund Amt:</Label> </td>
<td><input type="TextBox" ID="refundedamount" class="data" readonly /></td>

</tr>

</tbody>
</table>
</script>
THanks
Siva

What I'm trying to do is I have 2 ComboBoxes that are setup in a Cascading relationship.  What I am not able to get working is that when 1 option is selected in the first ComboBox the cascaded ComboBox should ONLY allow choices from the Items list it is populated with.  When a 2nd option is selected in the first ComboBox(i.e. Other) the cascaded ComboBox should allow ANY text to be entered.

How can I achieve this?  Below is my View and Controller in question. 

VIEW:
CONTROLLER: