Telerik Forums
UI for ASP.NET MVC Forum
4 answers
1.2K+ views
When the date is displayed on the grid it is:
Fri Oct 25 2013 15:15:09 GMT-0400 (Eastern Daylight Time)

When I get it back on the controller method it is:
1/1/0001 12:00:00 AM

Why is it changing the date and time?
Ale
Top achievements
Rank 1
 answered on 17 Dec 2013
4 answers
246 views
I'm building a grid based off of the popup editing demo: 
http://demos.kendoui.com/web/grid/editing-popup.html

However, the input elements of my grid are not styled/themed.

The date input is just a textbox, not a datepicker, and all the textboxes are offset from their horizontal center.

Here is the code for the grid

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(100);
        columns.Bound(p => p.UnitsInStock).Width(100);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.LastSupply).Editable(true);

        })
        .Create(update => update.Action("EditingPopup_Create", "Grid"))
        .Read(read => read.Action("EditingPopup_Read", "Grid"))
        .Update(update => update.Action("EditingPopup_Update", "Grid"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
    )
)


It looks like the appropriate classes are not being added to the elements.  When I check out the rendered markup for the input elements, a textbox is rendered as such.

<input name="Company" class="text-box single-line" id="Company" type="text" value="" data-val-required="The Company Name field is required." data-val="true" data-bind="value:Company">

The classes are incorrect as they should be "k-input k-textbox".

Also, you can see from the screen shot that the datetime is rendered as a textbox and not a calendar picker.

Here is the model.

    public partial class Opportunity
    {
        [ScaffoldColumn(false)]
        public int ID { get; set; }

        [Required]
        [DisplayName("Company Name")]
        public string Company { get; set; }
        public int? StatusID { get; set; }

        [DataType(DataType.Date)]
        public DateTime DateAdded { get; set; }

        public string PotentialAmount { get; set; }
        public double? PercentComplete { get; set; }
        public string CreatedBy { get; set; }
        public DateTime? DateClosed { get; set; }
    }



Thanks


Jonathan Travis
Top achievements
Rank 1
 answered on 16 Dec 2013
3 answers
351 views
Hi there

I've tried accessing the information via the documentation (and a Google search) but can't find a concise answer.

What are the differences between using Ajax VS Server binding / editing.

It appears as though they pretty much support the same feature set. Is it just that server binding forces a page reload? I note that there are some client-side events that are not raised when server binding is used.

Can you please clarify the pros and cons of Ajax VS Server binding / editing?

Thanks,

Paul.
Leo Tohill
Top achievements
Rank 1
 answered on 16 Dec 2013
4 answers
271 views
This seems to work for me although Chrome and Firefox don't seem to scroll the grid to show the latest row when using virtual scrolling. IE10 on the other hand does work.

var ps_Fn = function () {
   var rIndex = 0,
      cIndex = 0,
      FOCUSED = "k-state-focused";
   return {
grid_key: function (gridId, AfterNewRow) {
   var grid = $(gridId).getKendoGrid();
   $(gridId).on('keydown', function (e) {
      if (e.keyCode == 9 || e.keyCode == 38 || e.keyCode == 40) {
         var curRow = grid.select();
         if (!curRow.length)
            return;
         var cell = grid.current()[0],
            newRow,
            model = grid._modelForContainer(cell),
            field = grid.columns[cIndex].field;
         cIndex = cell.cellIndex;
         if (e.keyCode == 9) {
            if (e.shiftKey) {
               if (cIndex == curRow[0].cells.length -1) {
                  newRow = curRow.prev();
               }
               else
                  return;
            }
            else {
               if (cIndex != 0)
                  return;
               newRow = curRow.next();
            }
         }
         else if (grid._editContainer && model.editable(field)) { //in edit mode don't want to muck around with combos, etc.
            return;
         }
         else if (e.keyCode == 38) {
            newRow = curRow.prev();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.prev();
            }
         }
         else if (e.keyCode == 40) {
            newRow = curRow.next();
            while (newRow && newRow.length && newRow[0].cells.length != curRow[0].cells.length) { //take care of grouping
               newRow = newRow.next();
            }
         }
         if (!newRow.length)
            return;
         rIndex = newRow[0].rowIndex,
         ps_Fn.grid_setcurrent(grid, AfterNewRow);
      }
   });
},
grid_savecurrent: function(grid) {
   var curRow = grid.select();
   if (!curRow.length)
      return;
   var cell = grid.current()[0];
   cIndex = cell.cellIndex,
   rIndex = curRow[0].rowIndex;
},
grid_setcurrent: function (grid, AfterNewRow) {
   var curRow = grid.tbody.find(">tr:eq(" + rIndex + ")");
   grid.select(curRow);
   var newCell = curRow.find(">td:eq(" + cIndex + ")");
   if (grid._editContainer) {
      grid.closeCell();
   }
   if (AfterNewRow) {
      var dataItem = grid.dataItem(curRow);
      if (dataItem)
         AfterNewRow(dataItem);
   }
   grid.current(newCell);
   newCell.focus();
   newCell.addClass(FOCUSED);
};
}();
Timothy
Top achievements
Rank 1
 answered on 15 Dec 2013
3 answers
366 views
I am using a ColorPicker as part of a new user form. The selected colour is intended to be used later in a Scheduler.
I have tried setting the Value to Model.Colour directly and, using a scrip via a hidden textbox but cannot get it to work; the Model.Colour field always returns null.
My views and script are shown below .

I would appreciate any ideas about what I am doing wrong.

The View;  some fields have been stripped out for clarity
@model ServiceUserViewModel<BR>@{<BR>    ViewBag.Title = "New User";<BR>}<BR><BR>@using (Html.BeginForm())<BR>{<BR>    @Html.AntiForgeryToken()<BR>    @Html.ValidationSummary(true)<BR>    <fieldset><BR>        <legend>Registration Form</legend><BR>        <table><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.UserName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.UserName)<BR>                    @Html.ValidationMessageFor(m => m.UserName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.Password)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.PasswordFor(m => m.Password)<BR>                    @Html.ValidationMessageFor(m => m.Password)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.ConfirmPassword)<BR>                </td><BR>                <td class="editor-field k-password"><BR>                    @Html.PasswordFor(m => m.ConfirmPassword)<BR>                    @Html.ValidationMessageFor(m => m.ConfirmPassword)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.FirstName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.FirstName)<BR>                    @Html.ValidationMessageFor(m => m.FirstName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.LastName)<BR>                </td><BR>                <td class="editor-field"><BR>                    @Html.EditorFor(m => m.LastName)<BR>                    @Html.ValidationMessageFor(m => m.LastName)<BR>                </td><BR>            </tr><BR>            <tr><BR>                <td class="editor-label"><BR>                    @Html.LabelFor(m => m.Colour)<BR>                </td><BR>                <td class="editor-field"><BR>                    @(Html.Kendo().ColorPicker()<BR>                        .Name("colourPicker")<BR>                        .Palette(ColorPickerPalette.WebSafe)<BR>                        //.Value(Model.Colour)<BR>                        .Events(events => events<BR>                                  .Change("pickerSelect")<BR>                          )<BR>                    )<BR><BR>                    @Html.HiddenFor(m => m.Colour)<BR>                    @Html.ValidationMessageFor(m => m.Colour)<BR>                </td><BR>            </tr><BR>        </table><BR>    </fieldset><BR>}<BR><BR>@section Scripts {<BR>    @Scripts.Render("~/bundles/jqueryval")<BR>}
The view is called from this grid
@(Html.Kendo().Grid<ServiceUserViewModel>()<BR>    .Name("ServiceUsersGrid")<BR>    .AutoBind(true)<BR>    .Columns(columns =><BR>    {<BR>        columns.Bound(p => p.ServiceUserId).Hidden();<BR>        columns.Bound(p => p.FirstName).Title("First Name");<BR>        columns.Bound(p => p.LastName).Title("Last Name");<BR>        columns.Command(command => command.Edit().UpdateText("Save")).Hidden();<BR>        columns.Command(command => command.Destroy()).Width(100);<BR>    })<BR>    .ToolBar(toolbar => <BR>        {<BR>                toolbar.Create().Text("Add User");<BR>        })<BR>    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NewPerson"))<BR>    .Sortable(sortable => sortable<BR>            .AllowUnsort(true)<BR>            .SortMode(GridSortMode.MultipleColumn))<BR>    .Scrollable()<BR>    .Events(e=>e.Edit("RenameNewUserWindow").DataBound("onDataBound").Change("onDataBound"))<BR>    .DataSource(dataSource => dataSource<BR>        .Ajax()<BR>        .ServerOperation(false)<BR>            .Events(events => events.Error("error_handler"))<BR>        .Model(model =><BR>            {<BR>                model.Id(p => p.Id);<BR>                model.Field(f => f.FirstName);<BR>                model.Field(f => f.LastName);<BR>                model.Field(f => f.Password);<BR>                model.Field(f => f.ConfirmPassword);<BR>                model.Field(f => f.Colour);<BR>            })<BR>        .Read(read => read.Action("ServiceUser_Read", "Services"))<BR>        .Create(create => create.Action("ServiceUser_Create", "Services"))<BR>        .Update(update => update.Action("ServiceUser_Create", "Services"))<BR>        .Destroy(destroy => destroy.Action("ServiceUser_Destroy", "Services"))<BR>     )
As stated, I have tried populating the model directly from the .Value field without success so I am now updating the HiddenFor<> text field using the following script:
function pickerSelect(e) {<BR>    $("#Colour").val(e.value);<BR>}
After selection I can see that the text field has been updated with the colour as expected but when clicking submit the returned colour is always null.

Thanks in anticipation of your help
Alan
Top achievements
Rank 2
 answered on 15 Dec 2013
2 answers
285 views
Lets say I have a grid, in which I reference ClientDetailTemplateId("historyTemplate").
Then in my script template I have another grid. In that grid I have
columns.Bound(t => t.Id)
                .Title(Jengo.Resources.Master.OperationsMsg)
                .Width(100)
                .ClientTemplate(
                    Html
                    .Kendo()
                    .Menu()
                    .Name("themenu\\#=Id\\#")
                    .Items(menu => menu.Add()
                        .Text("sometext")
                        .Items(sub =>
                        {
                            sub.Add()
                                .Url(Url.Action("Show", "Damage") + "/#= data.Id #")
                                .Text("anothertext");
                          })
                            )
                      .Orientation(MenuOrientation.Horizontal)
                            .HighlightPath(true)
                            .OpenOnClick(true)
                            .ToClientTemplate()
                            .ToHtmlString()
                        )
             .HeaderHtmlAttributes(new { style = "text-align:center;width:100px;" });
        }
Error I get on Chrome Console is 'Uncaught SyntaxError: Unexpected token ILLEGAL' Problem dissapears when I remove content of ClientTemplate (Html.Kendo.Menu...).

My question is - how can I make menu inside ClientTemplate inside Detail Template work? Did I miss some escape character?
Petur Subev
Telerik team
 answered on 14 Dec 2013
1 answer
88 views
Description: Setting an event to recur every x (days, months etc.) AND having a, "end after y occurrences" fails.

Expected behaviour: I set an event to occur every 3 days, for 5 occurrences. I see 5 occurrences and then it stops.

Actual behaviour: The recurrence will occur until 5 days have passed, not 5 events, then stop. (So in the case above, I would see 2 events, not 5). If I set every 2 weeks for 10 occurrences, They'll stop after 10 weeks instead of after 10 events.

Steps to reproduce: Add a new event, set the recurrence to every 3 days, and the event to end after 3 occurrences.



Secondly, is it possible to set an event to occur every x WORK days?
e.g. I want to set up a rolling shift with every 6 work days a day off. (Monday the first week then Tuesday, etc until Friday, then Monday again).

Thanks.

Sean.
Georgi Krustev
Telerik team
 answered on 14 Dec 2013
2 answers
249 views
@(Html.Kendo().Grid<SearchViewModel>()
    .Name("searchGrid")
    .Columns(columns =>
    {
      columns.Bound(x => x.ProductId);
      columns.Bound(x => x.ProductName);
    })
    .AutoBind(false)
    .DataSource(ds => ds
      .Ajax()
      .Read(read => read.Action("Search", "Product").Data("getSearchCriteria"))
      )
    )
)
function getSearchCriteria() {
  var product = $("#ProductName").data("kendoAutoComplete").value();
  var productType = $("#ProductType").data("kendoDropDownList").select();
 
  if (product || productType) {
    return { ProductName: product, ProductType: productType };
  } else {
    // TODO: Figure out how to cancel this request.
    alert("You must provide at least one search parameter.");
    return false;
  }
}
I have a Kendo grid that I'm using to display search results on an MVC page. I'm using a function called "getSearchCriteria" to gather the search criteria from the page so it can all be sent to the controller's search method.

Everything works great when search criteria is supplied. However, I can't find a way to cancel the request from the client side if no search criteria was supplied. Returning either "false" or "null" from the "getSearchCriteria" function has no effect.

Is there any way to tell the Kendo grid not to invoke the controller's action at this point in time?
ImNotTed
Top achievements
Rank 1
Iron
 answered on 13 Dec 2013
8 answers
344 views
I am using the MVC wrapper and I'm able to get all working except the Destroy option, it never fires the AJAX post like the example.  The only difference between my setup and the example  is that I am using Azure Blob as my image storage.  Read, Upload and Thumbnails work great.  Below is my current code.

Also, I am not able to have the 2 scripts listed below included on the same page.  This creates problem number 2 for me. I canot get the grid to sort and filter without the "kendo.aspnetmvc.min.js" script. When I do included this feature work for the grid but then it breaks my editor.

Please remember that this page is a test page only.  Thanks in advance for your help.  - Shawn


@using Kendo.Mvc.UI;
@{
    Layout = "";
    ViewBag.Title = "Test_KendoUI";
    AcctInfo acctInfo = (AcctInfo)Session["AcctInfo"];
}
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.common.min.css")" />
<link rel="stylesheet" href="@Url.AzureCdnContent("~/Content/KendoUI/2013.3.1119/kendo.default.min.css")" />

<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/jquery.min.js")"></script>
@* Need below script for Editor ImageBrowser to work properly *@
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.web.min.js")"></script>    
@* Need below script for GRID to Work properly BUT CANNOT have both scripts. When the below script is included the imagebrowser loads "Undefined" folders as the images when opened.
<script src="@Url.AzureCdnContent("~/Scripts/KendoUI/2013.3.1119/kendo.aspnetmvc.min.js")"></script>
*@

<h2>Test_KendoUI</h2>


@(
    Html.Kendo().Editor()
        .Name("EmailMessage")
        .HtmlAttributes(new { style = "width: 740px;height:440px" })
        .Tools(tools => tools
            .Clear()
            .Bold().Italic().Underline().Strikethrough()
            .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
            .InsertUnorderedList().InsertOrderedList()
            .Outdent().Indent()
            .CreateLink().Unlink()
            .InsertImage()
            .SubScript()
            .SuperScript()
            .TableEditing()
            .ViewHtml()
            .Formatting()
            .FontName()
            .FontSize()
            .FontColor().BackColor()
        )
        .Value("")
        .ImageBrowser(imageBrowser => imageBrowser
        .Image("http://pas.blob.core.windows.net/users/" + @acctInfo.accountOwnerUserID + "/files/Images/{0}") // image location URL              
        .Read("_getImages", "Common") // get files
        .Create("_createDir", "Common") // create folder/directory
        .Destroy("_deleteImage", "Common") // delete file or folder
        .Upload("_uploadImage", "Common")  // add new file
        .Thumbnail("_getThumbnailImages", "Common")  
        .FileTypes("*.jpg,*.png,*.gif,*.jpeg,*.bmp")               
        )
)


Shawn
Top achievements
Rank 1
 answered on 13 Dec 2013
1 answer
103 views
Hello,
is it possible to align time horizontally?
Something like here in aspnet-ajax?
http://www.telerik.com/community/forums/aspnet-ajax/scheduler/align-time-horizontally-in-week-view.aspx
thanks it would help me a lot...
Dimo
Telerik team
 answered on 13 Dec 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?