Telerik Forums
Kendo UI for jQuery Forum
1 answer
121 views

Is it possible to access the data of a column/field in a template like a row template in a razor template?
for instance : <li><label>Parent Test :</label>&nbsp; <strong>#= ParentTest #</strong></li>   

@{

    // How would I get the value of this var?

   var parentTest = ?

}

 

Thanks

 

Dimiter Topalov
Telerik team
 answered on 25 Jan 2017
1 answer
455 views

First of all, someone should review the code in these forums so that if a user hits the backspace key when creating a new post the page does not navigate back!  So this is my second attempt to post this question because my first 95% complete post was vaporized when I hit the backspace key.  [arg!]

I am basing the code from this documentation:
http://docs.telerik.com/kendo-ui/controls/editors/editor/overview

I have a razor form with two editors on them and am formatting them as in the link above but they are showing up as read only.  Also the data from the model is not populating the control.  I tried using a standard input control as well with the same results.

Here is the code:

<p>
  @Html.TextAreaFor(m => m.Test.IntroText, new {style = "width:591px", id = "introtext"})
</p>

I tried removing the style attribute above with no change.

Here is the JavaScript:

$("#thankyoutext").kendoEditor({
    resizable: {
        content: true,
        toolbar: true,
        editable : true  <<-- Just tried that does not change anything
    },
    tools: [
        "bold",
        "italic",
        "underline",
        "strikethrough",
        "justifyLeft",
        "justifyCenter",
        "justifyRight",
        "justifyFull",
        "insertUnorderedList",
        "insertOrderedList",
        "indent",
        "outdent",
        "createLink",
        "unlink",
        "insertImage",
        "insertFile",
        "subscript",
        "superscript",
        "createTable",
        "addRowAbove",
        "addRowBelow",
        "addColumnLeft",
        "addColumnRight",
        "deleteRow",
        "deleteColumn",
        "viewHtml",
        "formatting",
        "cleanFormatting",
        "fontName",
        "fontSize",
        "foreColor",
        "backColor",
        "print"
    ]
 
});
 
var editor = $("#thankyoutext").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", true).find("a").off("click.readonly");

 

Can someone help explain why it is greyed, read-only and does not contain data from the model?

 

Reid




 

Marin Bratanov
Telerik team
 answered on 25 Jan 2017
2 answers
490 views

I am looking for a way to hide either the toolbar or the buttons with in it.  I am using angular with the batch editing and when I disenable the grid I want to be able to  be able to either hid or disable the batch toolbar.

 

I have found example like this that work for MVC or JS approaches, using the databound function,

http://www.telerik.com/forums/how-do-you-remove-toolbar-separators

I have also tried doing it this way, while it does find the element, there are no valid methods or properties

var elements = document.getElementsByClassName("k-grid-toolbar");
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
steve
Top achievements
Rank 1
 answered on 25 Jan 2017
8 answers
607 views
Hi,
We have a angularJS project and we work also with Kendo UI (Grid)
We want to bind the Grid dataSource with $http Service.
All the official examples of AngularJS & Kendo are binding to local dataSource or WCF(.svc) links:
http://demos.telerik.com/kendo-ui/grid/angular (attached src1) 

Can you show me or send a reference for best practice way to bind kendo with $http Service.  

thanks in advance. 
Kiril Nikolov
Telerik team
 answered on 25 Jan 2017
1 answer
808 views

I have a grid showing a set of records with a configuration of "editable: "popup" that is working to display the records.  The popup shows the row data but when I click the "update" button the popup goes away but the associated controller action does not get called. 

I am following along with these links:
http://demos.telerik.com/kendo-ui/grid/editing-popup
http://docs.telerik.com/kendo-ui/controls/data-management/grid/editing

My code is the same :

$(document)
  .ready(function() {  
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/Test/TestsAnswerTypesRead",
                dataType: "jsonp"
            },
            update: {
                url: "/Test/UpdateTestAnswerType",
                dataType: "jsonp"
            },
            destroy: {
                url: "/Test/DestroyTestAnswerType",
                            dataType: "jsonp"
            },
            create: {
                url: "/Test/CreateTestAnswerType",
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
            }
        },
        batch: true,
        pageSize: 20,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: {},
                    Instruction: {}
                }
            }
        }
    });
 
    $("#grid")
    .kendoGrid({
        dataSource: dataSource,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 8
        },
        groupable: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        resizable: true,
        reorderable: true,
        height: 550,
        toolbar: ["create", "excel"],
        excel: {
            fileName: "TestsExport.xlsx",
            proxyURL: "/ExportTestDomain",
            filterable: true
        },
        columns: [
            { field: "Name", title: "Name", width: "150px" },
            { field: "Description", title: "Description", width: "150px" },
            { field: "Instruction", title: "Instruction", width: "150px" },
            { command: ["edit", "destroy"], title: " ", width: "150px" }
        ],
        editable: "popup"
    });
});

 

Here is the Controller action for the Update :

public JsonResult UpdateTestAnswerType()
{
    var models = this.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>("models");
    if (models != null)
    {
        // Update Here
    }
    return this.Jsonp(models);
}

And I tried this format:

[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateTestAnswerType([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<NCC.Model.DTO.TestAnswerType> gridtestAnswerTypess)
{
    var models = this.DeserializeObject<IEnumerable<NCC.Model.DTO.TestAnswerType>>("models");
    if (models != null)
    {
        // Update Here
    }
    return this.Jsonp(models);
}

When I click the "add new record" button on the toolbar and post that it does the same, closes with no post to the controller.

Also, how can you make the popup dialog for an insert say, "Adding new record" instead of "Edit", and the dialog's update button say, "Save"?

 

Any help would be greatly appreciated.

 

Thanks,

Reid

 

 

 

 

 

 

 

Dimiter Madjarov
Telerik team
 answered on 25 Jan 2017
1 answer
147 views

 Hi,

I'm having trouble replicating the demo for the calendar in angular - Customizing Templates http://demos.telerik.com/kendo-ui/calendar/template 

I want to be able to pass it a list of dates from a scope variable and have the dates shown on the calendar with a different style from a template.

I would also like to be able to update the list of dates after the widget has been initialized. Is this possible with the calendar and angular?

I've tried setting the 'month' and 'dates' attributes in markup to my scope variable but it's not working.

 

 

 

Stefan
Telerik team
 answered on 25 Jan 2017
1 answer
143 views

I'm super excited that Telerik made the jump over to npm for Kendo UI Professional. It works wonderfully! But ...

Is there some particular reason why the *.min.js files were just removed? Those were very useful in optimizing the output. The way it is now, we've got to add minification to kendo to the entire process on top of everything else.

Alex Hajigeorgieva
Telerik team
 answered on 25 Jan 2017
1 answer
369 views

Is there a CSS definition file/page or a list of all CSS per element  or something along those lines?

I am attempting to figure out how hard/easy it is going to be to integrate a theme/styling into an app. But I am not even sure what the styles are I should use. Every thing on a page is not going to be a Kendo widget - but everything should look the same.

For instance, if I want to style a table to look like a grid would like using the widget, but without all the overhead - how do I do that?

If I want all links to match - do I really have to use k-link on all <a>s? That's a little crazy. 

A definition file would help me determine if it's doable and determine how easy to use the cascading part of CSS without have to add a class to every single element added to a page.

Iliana Dyankova
Telerik team
 answered on 25 Jan 2017
7 answers
915 views

Hi

I use a chart Kendo UI, (using typescript). I have a problem with the tooltip formatting and the same problem with the label (on series).

I have a formatted value (as string, but not the format type) and I want to replace the original value with that.
Is it possible to replace the value? then how?

*** Must say I have seen the example chartTooltip.html

another question , I’ve tried to replace the value with escape char “\”, Before any character I've “\\\\”, which is the result.


result : see (kendo chart.png)

------------------------------------------------------------------------

i tried to do that also 

namespace prefix.html.chart
{

    export class chart
    {

         public formatnewABC(v: any, vf: any): any
         {
             return (vf);
         }

         ...

         ... 

         // build chart source code 
         // this.ser - current series object properties

         var vf: string = this.data.getFormattedValue(i, j); // contains format value (string)
    
         this.ser["labels"] = {
                                visible: true,
                                template: "#= prefix.html.chart.PnChart.prototype.formatnewABC(dataItem," + "\"" + vf + "\"" + " ) #"

         };

    }

}

result : see (kendo chart2.png)

Thanks in advance for your help

Stefan
Telerik team
 answered on 25 Jan 2017
7 answers
206 views
I have several bubbles which are all very close to each other. One of the bubble is the "User", and is colored differently. It's currently overlapped by other bubbles. Is there a way to get this bubble in front of others?

Aaron
Pat
Top achievements
Rank 1
 answered on 25 Jan 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
Licensing
ScrollView
Switch
TextArea
BulletChart
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
TimePicker
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?