Telerik Forums
UI for ASP.NET MVC Forum
3 answers
884 views
Hi all,

I was wondering if it was possible to disable/hide the paging feature dynamically when only 1 page is shown, i.e. PageSize is set to 100, but the data only consists of 70 rows.

Thanks!

Lennart
Timothy
Top achievements
Rank 1
 answered on 26 Aug 2016
1 answer
509 views

Hi, I would like to scrolling a Kendo UI MVC Grid vertically but not horizontally.

.Scrollable(scroll => scroll.Height(80).Enabled(true))  make it scrolls  vertically and horizontally.

Konstantin Dikov
Telerik team
 answered on 26 Aug 2016
1 answer
441 views

Hi,

I'm using kendo ui scheduller custom editor template.

How can I change the popup title from defaut (event) to (My Task Name) ?

See attached file

Best regards

Nencho
Telerik team
 answered on 26 Aug 2016
1 answer
792 views

Hi, is it posible to have 

  (Html.Kendo().DatePickerFor(model => model.BeginDate)

with a masked input?

I want to have the option to write the date but with a mask like 00/00/0000

Thanks

Eyup
Telerik team
 answered on 26 Aug 2016
1 answer
389 views

Hi Guys recently i have been battling with adding a kendo grid with upload on a toolbar within a kendo ui window. I have a command button on the main grid which when clicked it shows the window that has a grid inside. Please see below the code, 

colums.Command(cmd =>
                  {
                      cmd.Edit();
                      cmd.Custom("Upload images").Click("UploadImages");
                       
                      //cmd.Custom("Upload images").SendDataKeys(true).Click("Upload images");
 
                  }).Title("Actions");
I have this code on the main grid, when clicked it shows the pop window

and the code for the window,

  @{Html.Kendo().Window().Name("AuditPic")
    .Title("AuditPictureResult Image")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(800).Height(800)
    .Content((Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>()
    .Name("Audit")
 
        .Columns(columns =>
        {
            columns.Bound(b => b.AuditResultPictureID);
            columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/Images/") + "\\#=FileName\\#'  height='62' width='62'/>");
            columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden; text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor");
            columns.Bound(b => b.ReplID);
            columns.Command(command => command.Destroy()).Width(100);
 
        })
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Selectable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
         {
             model.Id(m => m.AuditResultPictureID);
 
 
         })
         .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" }))
         .Destroy(update => update.Action("FilesDestroy", "Home"))
        )).ToHtmlString()
).Render();
              
             }
 
the function for the pop up and reading the data but it doesnt show any data on the grid
 
 function UploadImages(e) {
            e.preventDefault();
 
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var wnd = $("#AuditPic").data("kendoWindow");
 
          @*  wnd.refresh({
                url: '@Url.Action("ConfigurationItem_Read","Home")',
                data: { SiteAuditID: dataItem.SiteAuditID, QuestionID: dataItem.QuestionID }
 
                        });*@
          //  wnd.content(detailstemplate(dataItem));
            wnd.center().open();
 
            $.ajax({
                type: "POST",
                data: { SiteAuditID: JSON.parse(dataItem.SiteAuditID), QuestionID: JSON.parse(dataItem.QuestionID) }, //gets the value of the field "Department"
                url: '@Url.Action("ConfigurationItem_Read","Home")',
                    success: function (result) {
                    //    console.log(result);
                        // var DepartmentID = JSON.parse(model.DepartmentID);
                        //arg.model.set("field name as string", "value as appropriate data type");
                        //alert("success:" + DepartmentID);
                    }
            })
        }

Danail Vasilev
Telerik team
 answered on 25 Aug 2016
2 answers
80 views

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

Kaan
Top achievements
Rank 1
 answered on 25 Aug 2016
8 answers
431 views

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)

$(function () {
     
 
    //wire focus of all numerictextbox widgets on the page
    $("input[type=text]").bind("focus", function () {
        var input = $(this);
        clearTimeout(input.data("selectTimeId")); //stop started time out if any
 
        var selectTimeId = setTimeout(function () {
            input.select();
        });
 
        input.data("selectTimeId", selectTimeId);
    }).blur(function (e) {
        clearTimeout($(this).data("selectTimeId")); //stop started timeout
    });
})

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:-

<script id="KPITrackerTemplate" type="text/kendo-tmpl">
 
    <div style="font-size:x-small;">
 
 
        @(Html.Kendo().Grid<CIPAndRecovery.Models.vKPI_Tracker>()
                        .Name("Data_#=Id#")
                        .HtmlAttributes(new { style = "font-weight:normal" })
                        .Events(e => e.DataBound("expandAll"))
                        .Events(e => e.DataBound("onKPITracker_Databound"))
                        .Columns(c =>
                        {
                            c.Bound(o => o.Id).Title("Id").Hidden(true);
                            c.Bound(o => o.KPI_Id).Title("AccountDetail Id").Hidden(true);
                            c.Bound(o => o.TrackerType).Title("Type").Width(60);
                            c.Bound(o => o.M1).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M2).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M3).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M4).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M5).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M6).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M7).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M8).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M9).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M10).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M11).EditorTemplateName("DecimalMinus");
                            c.Bound(o => o.M12).EditorTemplateName("DecimalMinus");
                            c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90);
                        })
                        //.ToolBar(toolbar =>
                        //{
                        //    toolbar.Create();
                        //    //toolbar.Save().SaveText(" ").Text(" ").CancelText(" ");
                        //})
                        .Editable(editable => editable.Mode(GridEditMode.InLine))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .Events(e => e.RequestEnd("onKPITrackerChange(\"Data_#=Id#\")"))
                        //.Events(e => e.RequestStart("requestStartHandler(\"grid\")"))
                        //.Batch(true)
                        .PageSize(3)
 
                        .Sort(s=>s.Add(p=>p.SortOrder))
                        .Model(m =>
                        {
                            m.Id(p => p.Id);
                            m.Field(e => e.TrackerType).Editable(false);
                        })
                            .Read(read => read.Action("GetKPITrackerList", "PlanActions", new { KPIId = "#= Id #" }))
                            .Create(create => create.Action("InsertKPITracker", "PlanActions", new { KPIId = "#= Id #" }).Type(HttpVerbs.Post))
                            .Update(update => update.Action("UpdateKPITracker", "PlanActions").Type(HttpVerbs.Post))
                        //.Destroy(delete => delete.Action("DeleteKPITracker", "PlanActions"))
 
                        )
                        //.Pageable()
                        //.Groupable()
                        .ToClientTemplate()
        )
    </div>
</script>

The DecimalMinus is defined in the editorTemplates folder as:-

@model decimal?
 
@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new { style = "width:100%" })
      .Spinners(false)
      .Decimals(2)
       
)

How can I achieve the desired behaviour?

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 25 Aug 2016
1 answer
186 views

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:

 

@(Html.Kendo().Grid<TEAMSV2.Models.NotYetInvoicedGridDTO>()
    .Name(Section + TabName + "Grid")
    .HtmlAttributes(new { style = "border-width: 0px;" })
    .DataSource(datasource => datasource
        .Ajax()
        .Read(read =>
        {
            read.Action("GetGridData", "TeamsV2", new { grid = Section + "_" + TabName }).Type(HttpVerbs.Post);
        })
        .Sort(sort => sort.Add("Created").Descending())
        .PageSize(120)
        .ServerOperation(false)
    )
    .Columns(columns =>
    {
        columns.Template(e => { }).Width(57).ClientTemplate(Html.Partial(ColumnTemplatePath + "IconsTemplate").ToHtmlString());
        columns.Bound(entry => entry.QuoteType).Title("Type").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "QuoteTypeTemplate").ToHtmlString());
        columns.Bound(entry => entry.Client).Title("Client").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ClientTemplate").ToHtmlString());
        columns.Bound(entry => entry.Address).Title("Site").Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "SiteTemplate").ToHtmlString());
        columns.Bound(entry => entry.Postcode).Title("Postcode").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "PostcodeTemplate").ToHtmlString());
        columns.Bound(entry => entry.Project).Title("Project").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ProjectTemplate").ToHtmlString());
        columns.Bound(entry => entry.JobNoFormatted).Title("Job No.").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "JobNoTemplate").ToHtmlString());
        columns.Bound(entry => entry.ClientOrderNo).Title("Client Order No.").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ClientOrderNoTemplate").ToHtmlString());
        columns.Bound(entry => entry.Value).Title("Value").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ValueTemplate").ToHtmlString());
        columns.Bound(entry => entry.Created).Title("Date").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "CreatedTemplate").ToHtmlString());
        columns.Template(e => { }).Title(" ").Width(35).ClientTemplate(Html.Partial(ColumnTemplatePath + "SelectorTemplate").ToHtmlString());
    })
    .ClientDetailTemplateId(Section + TabName + "DetailTemplate")
    .Sortable()
    .ToolBar(t => t
        .Template(Html.Partial(ColumnTemplatePath + "ToolsTemplate").ToHtmlString()))
    .Pageable(p => p
        .Refresh(true)
        .PageSizes(new[] { 15, 30, 60, 120 })
        .ButtonCount(5))
    .Events(e => e
        .ExcelExport("excelExport")
        .DataBound(Section + TabName + "Databound"))
    .Excel(ex => ex
        .FileName(Section + TabName + ".xlsx")
        .AllPages(true))
    .Selectable()
)

 

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.

Konstantin Dikov
Telerik team
 answered on 24 Aug 2016
2 answers
330 views

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.

Jonathan
Top achievements
Rank 1
 answered on 23 Aug 2016
5 answers
1.0K+ views

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:-

@(Html.Kendo().TreeView()
                   .Name("Treeview")
                   .ExpandAll(false)
                   .LoadOnDemand(false)
                   .HtmlAttributes(new { style = "display: inline-block;" })
                   .DataTextField("Text")
 
                   .Events(e =>
                       {
 
                           e.DragStart("menuDragStart");
                           e.DataBound("onDataBound");
                       })
                   .DragAndDrop(true)
                            .DataImageUrlField("ImageUrl")
                   .DataSource(ds => ds
                       .Model(m => m
                           .Id("Id")
                           .HasChildren("HasChildren")
                           .Children("Items")
                           )
                           .Events(e=>e.RequestEnd("requestEnd"))
 
                   .Read(r => r.Action("GetMenuTreeItems", "Menu")
 
                           )
                           )
                           .HtmlAttributes(new { style = "width:480px;height:600px;" })
 
                   )

Thanks

 

Ivan Danchev
Telerik team
 answered on 23 Aug 2016
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
Upload
ComboBox
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
ListView (Mobile)
Pager
Accessibility
ColorPicker
DateRangePicker
Wizard
Security
Styling
Chat
MediaPlayer
TileLayout
DateInput
Drawer
SplitView
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Template
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Licensing
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?