Hi!

When the user updates a field of a new (create action) or existing (update action) data record, a litte red flag is shown to indicate that the changes haven't been sent to the server yet.

How can I make these flags keep staying after the user clicked on "Save changes" in case a server side error (e.g. validation) occurred, and therefore to signal the user that he/she has to correct its changes and click on "Save changes" again?

(I am working with DataTables)

Best,
Kaan

During testing of our application, user feedback has requested that when using a grid with numeric text-boxes with in-line editing, the values are selected when the user enters a field, or tabs to the next one.

With other text controls this is default behaviour, but not with the numeric text box. (a huge failing of this control).

I have tried the 'solution' proposed in the documentation (shown below)

However, the page is very complex, and this doesn't work. It looks as though the data is selected for a split second, but then becomes unselected again.

The Grid is in a template, defined as:-

The DecimalMinus is defined in the editorTemplates folder as:-

How can I achieve the desired behaviour?

Thanks

Hi,

When I add the option ".Selectable()" to my grid it does not render.  Any ideas?  Here is the code I am using to define the grid:

And here is the error I get from the Chrome console:

kendo.custom.min.js:4  - Uncaught TypeError: Cannot read property 'parseOptions' of undefined

We are using version 2015.1.429 of the kendo tools.

Thanks,

Mark.

I have an MVC project that implements a database-driven questionnaire for legal contracts using Kendo MVC for ASP.NET version 2016.2.714. I am running into an odd rendering problem with the Tab Strip when I mix programmatic tab selection with manual tab selection.

The questionnaire is arranged into sections, sub-sections, and questions with answers. The user is expected to read a contract presented on the page and answer all of the “required” questions. Because there are about 100 questions on this thing (lawyers!), we allow the user to save a partially-entered questionnaire and return to it later. Because there are so many questions, there is a lot of vertical scrolling going on.

My page uses a vertically-arranged Kendo Splitter to separate the questionnaire from the contract document. Inside the Splitter, a Kendo Tab Strip organizes the questionnaire’s sections, which contain varying numbers of questions. Many partial views are used to render the questionnaire’s overall structure and content. A Kendo Progress Bar is used to display the user’s progress in answering all required questions, and we also prompt the user when they submit to remind them when the questionnaire isn’t 100% entered. If the user cancels that prompt, they can continue answering questions.

During testing, our customer observed that when “required” questions haven’t been answered, the user didn’t know where to look for a missing answer in the sea of questions. So I am implementing a mechanism to display the first unanswered question. I do this by scrolling the Kendo Tab’s DIV that is containing my questionnaire’s section content. So far, so good.

It’s all working perfectly except for one strange thing… the Tab Strip control. I knew that if the first unanswered question was on a different section (i.e. another Kendo Tab) than the one being viewed, that I would have to programmatically select that tab before scrolling its contents. Unfortunately, I have encountered a dramatic sizing anomaly in Kendo.

Out of the three questionnaire sections, one is very tall and the other two are short. I have discovered that if I am viewing either of the two short sections, then initiate the code to bring me to the first unanswered question (which is in the tallest section), the tall section shows just fine. But if I then click the Tab Strip to view the short section I just came from, it’s totally empty! The remaining short section is unaffected until I perform the same sequence of steps on that section. When I do, both short sections become zero pixels tall.

What I observed by using Internet Explorer’s DOM explorer was something strange happening to the “k-content” DIV in the Tab Strip when I use its “select()” method in JavaScript. For the tab I am currently viewing when my scripts runs, it gets a “height: auto” attribute added to it (where none existed before). The Tab Strip then switches to the desired tab as expected. But if I then manually click back to that original tab, its “height: auto” attribute is replaced with a “height: 0px” attribute and I see no content under that tab.

If I use the DOM explorer to remove the height attribute altogether, the content under that tab is restored to its normal appearance. But if I continue to click on tabs, the “height” attribute is immediately re-introduced.

None of this “height” attribute stuff happens if I click on the tabs manually. Only if I programmatically select one with script does the problem begin.
The Razor for my Tab Strip looks like this (see below). This code actually lives in a partial view that the Kendo Splitter presents, so basically the Tab is surrounded by the Splitter. I experimented with using no tab animation, to no avail.

        @(Html.Kendo().TabStrip()
            .Name("uxSections")
            .SelectedIndex(0)
            .Animation(a => a.Open(e => e.Fade(FadeDirection.In).Duration(AnimationDuration.Fast)))
            .Items(t =>
            {
                foreach (SectionViewModel sectionViewModel in Model.QuestionnaireRevision.Sections.OrderBy(s => s.SortOrder))
                {
                    t.Add()
                        .Text(sectionViewModel.Description)
                        .HtmlAttributes(new
                        {
                            id = $"uxSectionTab{sectionViewModel.SectionId}"
                        })
                        .Content(Html.Partial("_QuestionnaireSection", sectionViewModel).ToHtmlString());
                }
            })
        )

I tried stripping my JavaScript code down to the barest essentials (and hard-coded stuff just in case), and what I was left with consists of the following JavaScript statements. Section 2 is the tall section I am switching to. I removed all the code that tries scrolling.

        var sectionId = 2;
        var tabStrip = $("#uxSections").kendoTabStrip().data("kendoTabStrip");
        var item = tabStrip.tabGroup.find("#uxSectionTab" + sectionId);
        tabStrip.select(item.index());

If I click on one of the short sections and trigger this code (which takes me to the tall section), then when I manually click back on the short section’s tab, its contents are zero pixels tall.

I have a function that takes an id of a node, and expands the treeview so the node is showing. This is necessary as I need to refresh the treeview as items are added and edited.

I'm loading all the data in one go, from am AJAX call.

The code works when fired from a button, however I need it to be fired once the treeview data has finished loading. Unfortunately the onDataBound event seems to fire multiple times, depending on how many nodes the treeview contains. I did try using the datasource requestEnd event, however this seems to fire before the onDataBound events.

How can I detect that the treeview data has loaded, and the treeview is ready to have my expand function called?

The treeview definition is:-

Thanks

I have a map that a user will utilize in order to mark their position. I use geolocation and Bing layer to give them a good start. I want them to click on the map, have it recenter to the point they click, remove the existing marker, then create a new one where the map is centered.

function onClick(e) {
            var resultArray = e.location.toString().split(',');
            
            $('#map').data("kendoMap").center([parseFloat(resultArray[0]), parseFloat(resultArray[1])]);
            $('#map').data("kendoMap").markers.clear();
            $('#map').data("kendoMap").markers.add([parseFloat(resultArray[0]), parseFloat(resultArray[1])]);
        }

The function above centers the map, removes the previous marker, and does not give an error on the ADD.  However, the new marker doesn't show up.

Help please.

Hi,

 I have a grid with checkboxes in the last column.

I want the user to select the hours in the grid he wants to move.
After selecting all the hours he needs I want him to press a button and there should be an action against all selected lines.

See alse the attached screenshot.

How can I do this?

Hi,

ClientTemplate for the ID value is not working for me. Still outputs the ID to Service field. What am I missing?

Main .cshtml:

I have a five digit postal code and want to exclude zero as first character and only allow numeric values.

Html.Kendo().MaskedTextBoxFor(a => a.Postnummer)
                    .Rules(rules => { rules.Add('0', "/[1-9]/"); })
                    .Mask("00000"))

not working, cant type in 0 at all.