Telerik Forums
UI for ASP.NET MVC Forum
1 answer
110 views
Hi, I am using the Filter Row.  In the date filter, the filter will only work if user puts in full four digit year and not just the last two ("1/1/2014" works, "1/1/14" doesn't).  In the Telerik RadGrid for WebForms, the two-digit format works.  Is there anyway to enable this in Kendo?

Additionally, the demo below doesn't appear to work for the date filter when tabbing off the date input with a valid date input.
http://demos.telerik.com/aspnet-mvc/grid/filter-row
Steps to reproduce: type in 7/3/1996 for "Order Date", tab off field, all rows disappear even though many have that date
Alexander Popov
Telerik team
 answered on 13 Feb 2015
2 answers
457 views
So Here is the situation:

I am currently initializing a grid with details on the client side.  Then I am using a row template on both the regular grid and detail grid to allow check boxes.  I have it where a user checks the top grid check box, it will "select" that detail row.  The issue that I am having is getting the data of that row, if that makes sense.  It doesn't appear this works:
var grid = $("#copyHierarchyGrid").data('kendoGrid');
var allSelected = grid.select();


Here is the code:

Grid:

var element = $("#copyHierarchyGrid").kendoGrid({
                        dataSource: {
                            type: "jsonp",
                            transport: {
                                read: '/AdministerRates/GetCombinedRatesToCopy?collection=' + sCollection
                            },
                            pageSize: 6,
                            serverPaging: false,
                            serverSorting: false
                        },
                        scrollable: false,
                        height: 'auto',
                        sortable: false,
                        pageable: false,
                        detailInit: detailInit,
                        selectable: "multiple",
                        dataBound: function () {
                            this.expandRow(this.tbody.find("tr.k-master-row"));
                        },
                        columns: [
                            {
                                field: "",
                                title: "Select All",
                                width: "75px"
                            },
                            {
                                field: "ProductTypeName",
                                title: "Product Type",
                                width: "auto"
                            }
                        ]
                       , rowTemplate: kendo.template($("#rowTemplate").html())
                    }).data('kendoGrid');


Row Templates:
<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr data-uid="#: uid #" class="assignment-table-row1 k-master-row">
        <td class="k-hierarchy-cell"><a class="k-icon k-plus" href="\\#" tabindex="-1"></a></td>
        <td class="photo">
            <input type="checkbox" class="checkParent" onchange="javascript:testing('#: ProductTypeName#', this)" />
        </td>
        <td>#:ProductTypeName#</td>
 
    </tr>
</script>
<script id="detailRowTemplate" type="text/x-kendo-tmpl">
 
    <tr data-uid="#: uid #" id="#: uid #">
        <td>
            <input type="checkbox" class="checkChild" onchange="javascript:testing('#: SourceProductId#')" />
        </td>
        <td>#:SourceProductName#</td>
        <td>#:SourceStartDate#</td>
        <td>#:SourceEndDate#</td>
        <td>#:TargetProductName#</td>
        <td>#:TargetStartDate#</td>
        <td>#:TargetEndDate#</td>
 
    </tr>
</script>



function detailInit(e) {
       debugger
       $("<div/>").appendTo(e.detailCell).kendoGrid({
           dataSource: e.data.ProductDetails,
               scrollable: true,
               sortable: false,
               pageable: false,
               columns: [
                   
                   { field: "SourceProductId", title: "Select Rate", },
                   { field: "SourceProductName" },
                   { field: "SourceStartDate" },
                   { field: "SourceEndDate" },
                   { field: "TargetProductName" },
                   { field: "TargetStartDate" },
                   { field: "TargetEndDate" }
               ],
               selectable: "multiple",
               rowTemplate: kendo.template($("#detailRowTemplate").html()),
               editable: true
       });
   }











Dimiter Madjarov
Telerik team
 answered on 13 Feb 2015
1 answer
196 views
Hi there,

We are using Kendo Charts in our application. We can successfully export the charts using the following jQuery.

 var chart = $("#" + idChart).getKendoChart();
        chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
            kendo.saveAs({
                dataURI: data,
                fileName: "chart.pdf",
                proxyURL: "@Url.Action("Export_Save", "Home")"
            });
        });

But spanish accents are not rendering properly in the output PDF. Is there any configuration to be set?

Thank you.
Iliana Dyankova
Telerik team
 answered on 12 Feb 2015
4 answers
172 views
I was using ASP.NET AJAX but switched to MVC for device and windowing reasons.  I wrote a tool to create forms using ASP Rad controls that works very nice. I need to be able to the create all the controls in C# code and then feed them into the page for the user to use.  I can find nothing that shows me how I would create controls in C# with Kendo.  My guess at the moment is to create Kendo ui in server code using strings.  That does not work with Rad, it requires objects to be created and added to collections which is a much better coding practice then creating strings (which does save memory and processing verses objects).

My preference, since I already have working Rad generating code, is to get Rad controls working in my ASP MVC 5 project, Visual Studio 2013.  

I have an asax file that is loaded in a cshtml file using RenderPartial

@model SignupList.Models.FormGroupViewModel
@{
    ViewBag.Title = "FormGroup";
}
<h2>Group Form </h2>
    <div>
        @{
        Html.RenderPartial("GroupForm");
        }
    </div>
 which loads
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GroupForm.ascx.cs" Inherits="SignupList.Views.Group.GroupForm" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI.ComboBox" tagprefix="cc1" %>
<h2>Join Form</h2>
<p>Create the membership form.</p>
<form id="form1" runat="server">
    <telerik:RadTextBox ID="InputDateTimeWidth" InputType="Number" EmptyMessage="Pixels" Columns="12" MaxLength="10" RunAt="server"></telerik:RadTextBox>
</form>

 This gives an error page from authentication providing an HTTP Exception caused by an unhandled exception
{"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerWrapper'."}


Instead trying to put a RadTextBox in a form in a cshtml page without a runat results in nothing showing with no errors - just blank.

So, Rad does not seem to work at all and seems to be discouraged anyway.  Browsing the forums seem to show Rad working in MVC, I do wonder what I need to do.  Every time the question is asked the answer is don't use Rad even though there are clearly people using Rad controls.

I could use Kendo if I could create controls in server code AND if the Kendo editor was as good as the Rad one.  The Rad ones seems to keep getting better while Kendo promises may be happening but are not shown in the demos.  HTML View was promised several versions ago but is still not in any demo.

The Rad Editor has two very important features I require.  An edit HTML view and the ability to download images and pick them for the document. Interesting that the Kendo controls are being pushed so much when the Rad ones are so much better.  If you give me a way to do the HTML view, please provide actual instructions rather than a reference that does not really show how to do it.  It is amazing how often code is given in partial solutions without instructions on where to put it.

Thanks,
George
George
Top achievements
Rank 2
 answered on 12 Feb 2015
1 answer
154 views
I've been using this script to get around errors with the grid saving Australian dates. In the latest release this file has disappeared and the problems are back.


<script src="@Url.Content("~/Scripts/kendo/2014.3.1411/cultures/kendo.culture.en-AU.min.js")"></script>
    
    <script>
        @{
            var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
        }
    kendo.culture("@culture");
    var culture = kendo.culture();
    culture.calendar.patterns.F = "dd MMM yyyy";
    </script>
Informed Sources
Top achievements
Rank 1
 answered on 12 Feb 2015
6 answers
646 views
Hi there,
I've got the content of my kendo window not rendered correctly the first time after a reload of the usercontrol where the window is defined.
When I open this window a second time ( only from the client without any ajax call!) the content is rendered correctly.

So let me explain the structure of my software:

The existing project was initially developed with Telerik Asp.Net Ajax components. I follows an SPA approach where UserControls are loaded into an RADSplitter Pane.
Meanwhile we decided to replace RadControls with ASP.NET MVC Kendo UI controls. So we added ASP.NET MVC 5 to our project and defined an Area where all our new Pages/Controls are located.
The MVC code is injected into an Asp.Net ascx UserControl with this piece of code:
<telerik:RadScriptBlock ID="RadCodeBlockCompanyAdministrationPermissions" runat="server">
<script type="text/javascript">
    $telerik.$(document).ready(function () {
        var url = "/MVC/Permission/Index/<%=ParentObject.Id %>";
        $.ajax(
        {
            type: "GET",
            url: url,
            success: function (msg) {
                 $("#mvcpartial").html(msg);
            },
            error: function (state, err) {
                alert('ERROR: ' +state + ' - ' + err);
            }
        });
    });
</script>
 </telerik:RadScriptBlock>

This works just fine and for i.e. displaying data with kendo grid we don't have any problems.
In this case however, I want to open a kendo window from a custom command inside a kendo grid.

This is my grid :
@(Html.Kendo()
              .Grid(Model)
              .Name("grdPermissionGroup")
              .Columns(column =>
              {
                  column.Bound(p => p.Id).HtmlAttributes(new { @class = "permissionGroupId" }).Hidden(true);
                  column.Bound(p => p.CompanyId).HtmlAttributes(new { @class = "companyId" }).Hidden(true);
                  column.Bound(p => p.Name);
                  column.Command(cmd =>
                  {
                      cmd.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { title = ViewBag.Edit });
                      cmd.Destroy().Text(" ").HtmlAttributes(new { title = ViewBag.Delete });
                      cmd.Custom("ShowRoles").Text(" ").Click("addRole");
                  });
              })
              .ClientDetailTemplateId("roleDetails")
              .DataSource(ds => ds
                  .Ajax()
                  .Model(model =>
                  {
                      model.Id("Id");
                      model.Field(f => f.Id).DefaultValue(Guid.NewGuid());
                      model.Field(f => f.CompanyId).DefaultValue(@Model.First().CompanyId);
 
                  })
 
                  .Create(create => create.Action("PermissionGroupCreate", "Permission"))
                  .Update(update => update.Action("PermissionGroupUpdate", "Permission"))
                  .Read(read => read.Action("PermissionGroups", "Permission").Data("additionalData"))
                  .Destroy(destroy => destroy.Action("PermissionGroupDelete", "Permission"))
                  .Events(e =>
                  {
                      e.Error("permissionGroupGrid_errorHandler");
                       
                  })
              )
              .ToolBar(commands => commands.Create().Text("Neue Berechtigungsgruppe"))
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .Selectable()
              .Scrollable(builder => builder.Height(368))
              .Sortable()
              .Events(ev =>
              {
                  ev.DataBound("onPermissionGroupGridRowBound");
                  ev.Edit("pgEdit");
                  ev.Change("pgChange");
                  ev.Cancel("pgCancel");
                  ev.Remove("pgRemove");
                  ev.Save("pgSave");
              })
        )

My window is opend through javascript in function addRole:
function addRole(e) {
    var row = this.select();
    permissionGroupId = row.find('.permissionGroupId').html();
    var childGridName = 'grdRoleDetails_' + permissionGroupId;
 
    if (!permissionGroupId) {
        alert('Please select permissiongroup!');
        return;
    }
    var childGrid = $("#" + childGridName).data("kendoGrid");
   
    if (childGrid == null) {
        this.expandRow(row);
    }
    
    childGrid = $("#" + childGridName).data("kendoGrid");
    if (childGrid != null) {
        var window = $('#wndAddRole').data("kendoWindow");
        if (window == null) {
            window = $("#wndAddRole").kendoWindow({
                actions: ["Close"],
                content: '/MVC/Permission/GetRoleWindowContent/' + permissionGroupId,
                draggable: true,
                height: "240px",
                width: "425px",
                resizable: false,
                title: "AssignRole",
                close: onRoleWindowClose,
            }).data("kendoWindow");
        }
        window.center();
        window.open();
    } else {
        _pendingAddItem = true;
    }
}

The content of the window is this:
@model CargoGuard.WebPortal.Neu.Areas.MVC.Models.RoleViewModel
@{
     var pgId = ViewBag.PermissionGroupId;
}
 
<div class="roleEditContainer">
    @Html.HiddenFor(m => m.Id)
 
    <div class="editor-row">
        <div class="editor-label">
            @Html.Label("Roles")
        </div>
 
        <div class="editor-field role-edit-field">
            @(Html.Kendo().DropDownList()
                  .Name("drpRoleSelection")
                  .AutoBind(true)
                  .HtmlAttributes(new { style = "width:230px;" })
                  .DataTextField("Name")
                  .DataValueField("Id")
                  .DataSource(ds => ds.Read(read => read.Action("GetAllRoles", "Permission", new{id=pgId})))
                  .OptionLabel(HttpContext.GetGlobalResourceObject("GlobalMVC", "OptionSelectRole"))
                  .SelectedIndex(0).Events(evt => evt.Change("onRoleDropDownChange"))
                  )
             
        </div>
    </div>
 
    <div class="editor-row">
        <div class="editor-label">
            @Html.LabelFor(m => m.Name)
        </div>
 
        <div class="editor-field role-edit-field">
            @Html.Kendo().TextBoxFor(m => m.Name).HtmlAttributes(new { style = "width:250px;" })
        </div>
    </div>
 
    <div class="editor-row">
        <div class="editor-label">
            @Html.LabelFor(m => m.Description)
        </div>
 
        <div class="editor-field role-edit-field">
            @Html.TextAreaFor(m => m.Description, new { @class = "k-textbox", style = "height:100px; width:200px;" })
        </div>
    </div>
</div>
<div class="k-edit-form-container">
    <div class="k-edit-buttons k-state-default">
 
        <a id="btnAssignRole" class="k-button k-button-icontext k-primary k-grid-update" href="#" title="Bearbeiten">
            <span class="k-icon k-update"></span>
        </a>
        <a id="btnCancleAssignRole" class="k-button k-button-icontext k-grid-cancel" href="#" title="Bearbeiten">
            <span class="k-icon k-cancel"></span>
        </a>
 
    </div>
</div>
<script>
    $(document).ready(function () {
 
        var dropDownList = $('#drpRoleSelection').data('kendoDropDownList');
        dropDownList.dataSource.read();
        dropDownList.refresh();
 
 
        $('#btnAssignRole').click(function() {
            var id = $('#Id').val();
            var name = $('#Name').val();
            if(name == null )
            
            var url = '/MVC/Permission/AssignRole?id=' + id + '&permissionGrpId=' + '@pgId';
            $.ajax(
               {
                   type: "POST",
                   url: url,
                   success: function (msg) {
                       alert(msg);
                       var gridGroup = $("#grdPermissionGroup").data("kendoGrid");
                       var selectedRow = gridGroup.select();
                       var dataItem = gridGroup.dataItem(selectedRow);
                       var Id = dataItem.Id;
 
                       var grdRoleDetails = $('#grdRoleDetails_' + Id).data("kendoGrid");
                       grdRoleDetails.dataSource.read();
 
                       var window = $("#wndAddRole").data("kendoWindow");
                       window.close();
                        
                   },
                   error: function (state, err) {
                       alert('ERROR: ' + state + ' - ' + err);
 
                   }
               });
        });
 
        $('#btnCancleAssignRole').click(function () {
            var window = $("#wndAddRole").data("kendoWindow");
            window.close();
        });
    })
</script>

The first time this page is loaded and I click the button to open the window everything is rendered as expected: see Attachment CorrectWindow.png
When reloading the usercontrol from outside via an ajax call defined by RadAjaxManager, the window will be opened and centered, but the content  is not rendered the kendo way as you see in BrokenWindow.png. If I then close the window and click the button a second time without any reload (only client side actions) the content is rendered correctly again.
I have googled a long time and found some postings that this could come from jquery defined twice. So I checked my project for this issue and took care that jquery is loaded only once, but the problem still exists.
I suppose, that this may derive from a timing problem, but this is hard to find out.
Thanks in advance for your support!






Franz
Top achievements
Rank 1
 answered on 12 Feb 2015
1 answer
95 views
I would like to reload the grid without moving the scrollbar. Currently, if a user sorts the grid by clicking the columnheader, or hits the refresh button, the grid scrolls back to the start and the user needs to scroll back to see their data.
Nikolay Rusev
Telerik team
 answered on 12 Feb 2015
1 answer
143 views
I have a Grid that I want to edit in Batch mode. This all works as it should as in code below.


@(Html.Kendo().Grid<field>()
  .Name("myGrid")
  .HtmlAttributes(new { @class = "ignore" })
  .ToolBar(toolbar =>
  {
    if (pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)
    {
      toolbar.Create().HtmlAttributes(new { @class = "ignoreDirty" });
      toolbar.Save();
    }
  })
  .Editable(editable => editable.Mode(GridEditMode.InCell))
  .Scrollable(s => s.Height("auto"))
  .Columns(columns =>
  {
    columns.Bound(p => p.key).Title("Key");
    columns.Bound(p => p.label);
    columns.ForeignKey(p => p.fieldType, (System.Collections.IEnumerable)ViewData["FieldTypes"], "Value", "Text").Title("Field Type");
    columns.Bound(p => p.valueLength).Title("Field Length");
    columns.ForeignKey(p => p.searchable, (System.Collections.IEnumerable)ViewData["TrueFalse"], "Value", "Text").Title("Searchable");
    columns.ForeignKey(p => p.access, (System.Collections.IEnumerable)ViewData["Access"], "Value", "Text").Title("Access");
    columns.ForeignKey(p => p.active, (System.Collections.IEnumerable)ViewData["TrueFalse"], "Value", "Text").Title("Enabled");
    columns.Bound(p => p.order).Title("Order");
  })
  .DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
    .PageSize(40)
    .Model(model =>
    {
      model.Id(p => p.oid);
      model.Field(x => x.key).Editable(false);
      model.Field(x => x.active).DefaultValue(true);
      model.Field(x => x.searchable).DefaultValue(false);
      model.Field(x => x.access).DefaultValue(3);
    })
    .Events(e => e.Error("handleAjaxError"))
    .Update(update => update.Action("FieldDef_Update", "Forms"))
    .Create(update => update.Action("FieldDef_Create", "Forms"))
    .Read(read => read.Action("FieldDef_Read", "Forms", new { recordTypeOid = Model.Entity.Oid }))
  )
)

 

I then had a requirement to be able to 'order' and save the order of the rows. I decided to use the Sortable - again this was fine I could drag the rows and then on the onChange event of Sortable I updated the Grid datasource Order numbers. All good!
However when I attempt to edit a cell I run into problems which I'll detail below:

  1. String\Text cell:
    1. dosnt retain the updated value or have the 'dirty' graphi iin top left of cell
    2. wont allow me to mouse click the right of the cell text - i have to use the arrow keys to append to the text.
  2. Numeric cell: cant use the spinners to update the number


On the Sortable widget I tried different variations of .Filter(), .Handler() etc.. but couldnt get  it working properly. My Sortable code is below:

@(Html.Kendo().Sortable()
  .For("#myGrid")
  .ContainerSelector("#myGrid tbody")
  .Filter("table > tbody > tr")
  .Cursor("move")
  //.Handler(".isSortable")
  //.HintHandler("noHint")
  .PlaceholderHandler("myGrid_placeHolder")
  .Events(events => events.Change("myGrid_onChange"))
)





Alexander Valchev
Telerik team
 answered on 11 Feb 2015
2 answers
1.3K+ views
We use the DateTimePicker for the DateTimePickerFor() method in our Asp.net MVC 5 web application. And it requires that the user can enter a date and time including seconds, however by default the Telerik UI only shows date and time until minutes. I cannot find a way for the text input box to show the seconds or allow the input of seconds. If I set TimeFormat to CultureInfo.CurrentUICulture.DateTimeFormat.LongTimePattern then I'll only show the seconds in the drop down, but the text input won't show it.

Is there a way to have this done?
Rolf
Top achievements
Rank 1
 answered on 11 Feb 2015
1 answer
269 views
Hello.
I use a grid. One of its columns is using client template which is building a DropDownList in the column. I have two problems:
1. When the user sorts the grid the grid is being reinitialized(refreshed) and therefore the client templates are being executed one more time. The input fields are shown, the js function attachDropDown() is executed but the DropDownList is not attached to the input fields. Have i made any mistake or there is more convenient way?
2. When the user selects something in some dropdowns and then he/she decides to sort the column the input data from these DropDownLists is lost because of the reinitialization of the grid.

This is the code for my view.

@{
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    string fundsJson = serializer.Serialize(Model.Funds);
}
<script id="dropdown-template" type="x-tmpl-mustache">
    <input type="hidden" name="[{{index}}].IndexInXml" value="{{indexInXml}}" />
 
    <input id="_{{index}}__FundId" name="[{{index}}].FundId" style="width: 300px" type="text" />
    {{attachComboBox}}
</script>
 
<script>
    var currentDropDownIndex = 0;
    var fundsJson =@Html.Raw(fundsJson)@(";")
 
        function attachDropDown(dropDownIndex) {
            jQuery("#_" + dropDownIndex + "__FundId").kendoDropDownList(
                    {
                        "dataSource": fundsJson,
                        "dataTextField": "FundName",
                        "height": 250,
                        "headerTemplate": "<div class=\"dropdown-header\"><span class=\"k-widget k-header\">Fund</span><span class=\"k-widget k-header\">Reg</span></div>",
                        "template": "<span class=\"k-state-default\">#: data.FundName #</span><span class=\"k-state-default\">#: data.Reg #</span>",
                        "valueTemplate": "<span>#:data.FundName#</span>",
                        "dataValueField": "FundId",
                    });
        }
 
    function getDropDown(indexInXml) {
        var view = {
            index: currentDropDownIndex, indexInXml: indexInXml,
            attachComboBox: function () {
                (function (currentDropDownIndex) {
                    jQuery(function () {
                        console.log(currentDropDownIndex);
                        attachDropDown(currentDropDownIndex);
                    });
                })(currentDropDownIndex);
            }
        };
 
        var template = $('#dropdown-template').html();
        Mustache.parse(template);
        var rendered = Mustache.render(template, view);
 
        currentDropDownIndex++;
 
        return rendered;
    }
 
    function init() {
        currentDropDownIndex = 0;
    }
 
</script>
@(Html.Kendo().Grid<Administration.ViewModels.UnmappedFundInfoViewModel>(Model.ImportedFundData)
               .Name("funds-mapping")
           .Sortable()
           .Columns(columns =>
           {
               columns.Bound(c => c.ImportedFundName)
               .Title("Imported fund name");
               columns.Bound(c => c.FundId).Title("Fund ID").Width(100);
               columns.Template(@<text> </text>).Title("Linked fund").ClientTemplate("#= getDropDown(data.IndexInXml)#");
           })
                           .Scrollable(x => x.Enabled(true).Height("250px"))
                           .DataSource(dataSource =>
                           dataSource.Ajax().ServerOperation(false)
                           )
                           .Resizable(resize => resize.Columns(true))
           )
<script>
    $(document).ready(function () {
        var grid = $("#funds-mapping").data("kendoGrid");
        grid.bind("dataBinding", function () {
            init();
        });
    });
</script>
Daniel
Telerik team
 answered on 11 Feb 2015
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?