Telerik Forums
Kendo UI for jQuery Forum
1 answer
138 views
hello I'm looking for a simple mvc example of crud ( insert update delete )
example image :

 http://i.hizliresim.com/eQW5p3.png

and How can I add them to the ComboBox TextBox image? ( kendo css style )
or

this

kendo 
sample form
https://www.telerik.com/login.aspx?ReturnUrl=http%3a%2f%2fwww.telerik.com%2faccount%3f

thank you

Petur Subev
Telerik team
 answered on 27 Jan 2014
1 answer
133 views
We have a grid with a single row that allows the user to select an investment type by entering text in a Kendo AutoComplete control in the row. Once the options come back the user selects an option which then auto populates other columns in the grid and creates a new empty row for the user to use. 

We noticed that at about 15 rows the browser becomes sluggish and almost unusable. On closer inspection using Chrome's profiling tools we noticed that there are thousands of additional HTML elements being added to the DOM and never being removed. These additional elements belong to the AutoComplete kendo widget. 

After the user has selected a valid option, is there a way for us to clear the associated DIVS and ULs from the DOM? I only see a destroy method, which isn't what we're looking for and it doesn't seem to get rid of those additional elements anyway. 

ADDITIONAL INFORMATION JUST DISCOVERED
I'm in the process of uploading a video to screencast which shows how HTML elements are being appended to the document. The max number of rows allowed in this grid is 15, yet for each row added the AutoComplete seems to add more and more HTML to the bottom of the document.
AND, during or after each character is entered by the user into the AutoComplete widget Kendo seems to be updating attributes of each of those elements somehow (you'll see what I mean in the screencast video. It's as if it's running through each and every one of them, updating attributes as it goes). 
See the screencast here: http://screencast.com/t/QJ4McJm3eB

By the time we hit 15 rows this process is so slow that the browser becomes unusable. As I'm typing this update I flick back to Firebug every now and then and can see that it's still trying to update those elements. 

To give an idea of how many elements we're talking about, when the page loads there are: 
907 HTML elements
I added 15 rows but could never get to the point of seeing how many elements there were because the update process was so slow. So instead I'm adding the element count after adding each row:
Row 1 - 1280
Row 2 - 2323
Row 3 - 3875
Row 4 - 5934
Row 5 - 8501
Row 6 - 11576
Row 7 - 15159 
Row 8 - 19250
Row 9 - 23849
Row 10 - 28956
Row 11 - 34571
And so on...

NOTE: Each row added makes use of a template, as shown below, which means it's reusing a single dataSource. I'm not sure if that makes any difference to the troubleshooting process?: 
<script id="investment-fund-row-template" type="text/x-kendo-template">
    <tr>
        <td data-bind="text: BenchmarkCode"></td>
        <td><input data-role="autocomplete" data-min-length="3" data-value-primitive="true" value="#=BenchmarkName#" data-text-field="Name" data-placeholder="Search funds..." data-value-field="Gid" data-bind="source: benchmarksDataSouce, events: { select: onInvestmentSelect, dataBound: onInvestmentDataBound, change: onInvestmentChange }" /></td>
        <td class="text-right"><input class="editable" data-role="numerictextbox" data-format="\\#\\#\\#.00 \\%" data-bind="{value: Allocation, disabled: toggleAllocation}" data-min="0" data-max="100" /></td>
        <td class="text-right">#: get("Ytd") #</td>
        <td class="text-right">#: get("Year1") #</td>
        <td class="text-right">#: get("Year3") #</td>
        <td class="text-right">#: get("Year5") #</td>
    </tr>
</script>









Daniel
Telerik team
 answered on 27 Jan 2014
3 answers
628 views
Hi,

I'm having trouble adding a dynamic node in treeview using append.
I added html controls concatenated input text, but when I do the serialization to json using "toJSON" and move to the C # gives error.

How do I use editable template or template and regatando value of input along with the serialization of my treeview?

tried using "template:", but always shows "undefined"...

how do use?????

Ex:
treeview.append(
  {
           IdNo: objItem.IdNo,
           NomeNo: '<input type=\"text\" pattern=\"^[\+\-]{0,1}([ 0-9]+\.){0,1}[ 0-9]+$\" title=\"' + objItem.NomeNo + '\" maxlength=\"30\" class=\"input-medium\" id=\"txtMontante' + objItem.IdNo + '\" name=\"txtMt' + objItem.IdNo + '\" />'
  }, treeNodeText);
Kiril Nikolov
Telerik team
 answered on 27 Jan 2014
2 answers
141 views
We have forms that are rendered in 'read mode' which means the text for a field like First Name or Last Name is simply rendered inside a Span HTML element. When the user clicks Edit, we want the form to switch to 'edit mode' which means the Spans should be replaced with TextBoxes or whichever HTML element is most appropriate. 

Can Kendo help in the automation of this? Or is there another best practice approach? 

Regards,
Jacques
Jacques
Top achievements
Rank 2
 answered on 27 Jan 2014
2 answers
268 views
If possible, I'd like a tabstrip layout with a drawer that slides out from the left when you select one of the tabs.  Kind of have it working with something like the code below.   Before I go much further, is this possible with KendoUI?  I'm starting to see some apps do this (like Lowes Hardware app).  It's really nice.

<div data-role="layout" data-id="drawer-layout">
    <header data-role="header">
        <div data-role="navbar">
            <span data-role="view-title"></span>
        </div>
    </header>

    <div data-role="footer">
        <div data-role="tabstrip" data-selected-index="1" data-select="onSelect">
            <a data-icon="contacts">foo</a>
            <a data-icon="contacts">bar</a>
            <a data-icon="info">baz</a>
            <a data-icon="info">baz2</a>
            <a data-icon="info">baz4</a>
        </div>
    </div>    
</div>

<script>
  
   function onSelect(e) {
    
       if (e.item.index()==0)
       {
           $("#my-drawer").data("kendoMobileDrawer").show();
           e.preventDefault(); //prevent the tab selection
       }
   }
</script>
Gary
Top achievements
Rank 2
 answered on 27 Jan 2014
4 answers
211 views
Hi there

The customer is asking for date/time formats such as 01 Jun 2014 10:20

So I specify this in the view:

@(Html.Kendo().DateTimePickerFor(m => m.Baby.DateOfBirth).Format("dd MMM yyyy HH:mm").TimeFormat("HH:mm").HtmlAttributes(new { style = "width:170px"}).Max(DateTime.Now)))

and this in the model:

public DateTime? DateOfBirth { get; set; }

Now when I select a date and time from the datepicker I see the value: "09 Jan 2014 02:00" which seems fine, but when I tab off I get the error " The field Date of Birth must be a date."

Any idea why?
Glenn
Top achievements
Rank 1
 answered on 25 Jan 2014
2 answers
215 views
I initially posted this bug report in the 'kendo-ui-complete-for-asp-net-mvc' but no one answered.  
Perhaps I will have a better success in this forum?

The Kendo DatePicker has a bug it seems when you place it in a popup editor.  
This widget does not bind to a DateTime model property when you place it in a popup editor.
In the attached sample project I changed the culture in the web.config to 'auto' which on my workstation is set to 'en-AU.'
In this sample the 'PostedOn' property is a nullable DateTime though it makes no difference to this bug.
Adding ParseFormats strings makes no difference either.

This project is a modified sample that you have provided previously (see http://www.kendoui.com/forums/kendo-ui-web/date-time-pickers/datetimepicker-format-doesn-t-work-with-initial-default-value.aspx)
As you can see from the attached screenshot kendo datepicker reports on erroneous date even though it is a valid date.
Outside the popup editor, this same datepicker works perfectly good.
Any workaround?

Regards,
Menashay
Menashay
Top achievements
Rank 1
 answered on 24 Jan 2014
2 answers
580 views
Hello Telerik-Team,

i have a problem with my Grid implementation.

My grid has 0-n rows, and i always want to add one empty row to the grid (so that the user can add a new record). I use this code snippet to add this empty row
var grid = $("#grid").data("kendoGrid");
grid.addRow();
$(".k-grid-edit-row").appendTo("#grid tbody");
 
My problem is, that the new row is very thin. When i click into the emty row, it gets bigger. Is there any possibility to set the row height to that size
as when i click into it?

Thank you
Andrew
Top achievements
Rank 1
 answered on 24 Jan 2014
1 answer
89 views
Hi all

I have a problem after upgrading kendo UI from 2013.2.918 to 2013.3.1316. I have a grid where I pass additional data with a separate javascript function. In the old version the data was correctly submitted in the POST but in the new version this data isn't appended anymore.
Please see the example below (look for the javascript-method "getShowDeleted"):
<script type="text/javascript">
    $(document).ready(
        function () {
            $("#ShowDeleted").click(function () {
                var grid = $('#grid').data('kendoGrid');
                grid.dataSource.read();
                grid.refresh();
            });
        }
    );
    function getShowDeleted() {
        var showDeleted = { "showDeleted": $("#ShowDeleted").is(':checked') };
        return showDeleted;
    }
    /* when all data is loaded into the grid,
     * we are able to select either a predefined entry or
     * the first one
     */
    function dataBound(e) {
        var selectedId = '@(this.Model.SelectedId)';
        var dataItem, row;
        var el = $("#grid");
        var grid = el.data("kendoGrid");
 
        $(".deleted").parent('td').parent('tr').addClass("deleted-row");
 
        if (selectedId > 0) {
            dataItem = grid.dataSource.get(selectedId);
            if (dataItem) {
                row = el.find("tbody>tr[data-uid=" + dataItem.uid + "]");
 
                grid.select(row);
            }
        } else {
            row = el.find("tbody>tr:first");
            grid.select(row);
        }
 
        @if (Model.Operation != OperationType.Read)
        {
            <text>
            $("#grid table").removeClass("k-selectable");
            </text>
        }
    }
    /* we have to do this script on THIS page,
     * as the snippet relies on this.select() method
     */
    function gridChange(e) {
        var data = this.dataItem(this.select());
        if (!data) {
            return;
        }
        var propId = data.Id;
        var url = kendo.format('@(Server.UrlDecode(Url.Action("DetailsRead", "Address", new { id = "{0}", showDeleted = "{1}" })))',
            propId, $("#ShowDeleted").is(':checked'));
        $.ajax({
            type: 'GET',
            url: url,
            success: function (response) {
                // Update the content div
                $('#details').html(response);
            }
        });
    }
</script>
 
@(Html.Kendo().Grid<AddressViewModel>()
      .Name("grid")
      .Events(evt =>
          {
              // enable grid changing only when in read-mode
              if (Model.Operation == OperationType.Read)
              {
                  evt.Change("gridChange");
              }
 
              evt.DataBound("dataBound");
          })
      .DataSource(datasource =>
          datasource.Ajax().Read(builder =>
          {
              builder.Action("Read", "Address", new { id = Model.PersonId });                                    
              builder.Data("getShowDeleted");
          }).Model(m => m.Id(id => id.Id)))
      .Columns(columns =>
          {
              columns.Bound(result => result.IsDeleted).Hidden().ClientTemplate(
                  "<span class=" +
                  "# if (IsDeleted) { #" +
                  "'deleted'" +
                  "# } else { #" +
                  "'not-deleted'" +
                  "# } #" +
                  "/>");
              columns.Bound(result => result.NameEstablishment);
              columns.Bound(result => result.Street);
              columns.Bound(result => result.Zip);
              columns.Bound(result => result.Place);
          })
      .Pageable(pager => pager.Messages(msg =>
          {
              msg.Display(@Shared.PagerDisplay);
              msg.Empty(@Shared.PagerEmpty);
              msg.Page(@Shared.PagerPage);
              msg.Of(@Shared.PagerOf);
              msg.ItemsPerPage(@Shared.PagerItemsPerPage);
              msg.First(@Shared.PagerFirst);
              msg.Previous(@Shared.PagerPrevious);
              msg.Next(@Shared.PagerNext);
              msg.Last(@Shared.PagerLast);
              msg.Previous(@Shared.PagerPrevious);
              msg.Refresh(@Shared.PagerRefresh);
          }))
      .Selectable(selectable => selectable.Enabled(true))
      .Sortable(x => x.SortMode(GridSortMode.SingleColumn)))
The element $("#ShowDeleted") is a checkbox on the same page.

As this was working in the previous version, I wonder if this is a known issue and if there is a workaround until the (potential) bug is fixed?

Greetings,
Daniel
Daniel
Top achievements
Rank 1
 answered on 24 Jan 2014
2 answers
241 views
I'm trying to implement grid state saving/loading (i.e remembering sorting/filtering/page size/etc) but I've run into issues with regard to a grid that implements a ClientFooterTemplate.

The grid is defined as follows:
@(Html.Kendo().Grid<TrendModel>()
        .Name("TrendGrid")
            .Columns(columns =>
                {
                    columns.Bound(o => o.Number).Title("Number")
                        .Width(100)
                        .ClientTemplate("#= NumberTemplate(Number, Id)#");
                    columns.Bound(o => o.Currency).Width(100);
                    columns.Bound(o => o.Estimate).Title("Estimate").Width(105)
                           .Format("{0:n0}")
                           .HtmlAttributes(new { @class = "numeric" })
                            .ClientFooterTemplate("<strong>#= sum #</strong>")
                            .FooterHtmlAttributes(new {@class = "numeric", style = "white-space:nowrap;"});
                })
                .ColumnMenu()
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.SingleColumn))
            .Pageable(builder => builder
                                    .Input(true)
                                    .Numeric(false)
                                    .PageSizes(new[] {10, 20, 50, 100 }))
        .Pageable()
        .Navigatable()
        .Filterable(f => f
                        .Extra(false)
                        .Operators(o => o
                            .ForString(s => s
                                .Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .StartsWith("Starts With")
                                .EndsWith("Ends with")
                                .IsEqualTo("Is Equal To")
                                .IsNotEqualTo("Is Not Equal To")
                    )))
        .Resizable(col => col.Columns(true))
        .Reorderable(x => x.Columns(true))
        .Scrollable(scrollable => scrollable.Enabled(true))
        .HtmlAttributes(new { style = "height:700px; width:calc(100% - 20px);", @class = "report-grid" })
        .DataSource(dataSource => dataSource
           .Ajax()
           .Batch(true)
           .ServerOperation(false)
           .PageSize(20)
           .Read(read => read.Action(@ViewBag.ActionName, "Trend", new { area = "Foo" }).Type(HttpVerbs.Post))
           .Sort(sort => sort.Add("Number").Ascending())
           .Aggregates(agg => {
                agg.Add(est => est.Estimate).Sum();
           })
           .Model(model => model.Id(p => p.Id))
           .Events(events => events.RequestEnd("highlightFiltered")))
        )
And the code that sets the state is:
$(document).ready(function () {
    var grid = $("#TrendGrid").data("kendoGrid");
    var data = { "pageSize": 20, "sort": [{ "field": "Currency", "dir": "asc", "compare": null }], "group": [] };
    grid.dataSource.query(data);
    grid.dataSource.page(1); //if you don't explicitly set to page one the paging is messed up
}

However, when that runs I get an error "0x800a138f - Microsoft JScript runtime error: Object expected" on the because data.Estimate is undefined on the following anonymous block:
function anonymous(data) {
var o,e=kendo.htmlEncode;with(data.Estimate){o=''+( sum )+'</strong>';}return o;
}

I was having a similar issue with another grid that had a ClientGroupFooterTemplate with "sum" being undefined but I was able to wrap a check around that to handle the error.  I'm guessing the problem is caused by the data binding not being done before the template is rendered, but that's just a guess.

Any ideas what I'm missing here?
Brian
Top achievements
Rank 1
 answered on 24 Jan 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?