Telerik Forums
Kendo UI for jQuery Forum
1 answer
523 views

Hi- I came across knowledge base article (https://docs.telerik.com/kendo-ui/knowledge-base/grid-different-editor-based-on-column-value). I'm looking for same functionality to implement in my project. I have master Detail grid with Inline Add, Edit and delete functionality. I'm looking for different editor base column in detail section of grid. User will select AttributeName  and depending upon type of AttributeName, value column editor will get change run time. User can also ADD, EDIT and DELETE rows. Attach Screen Shot

Any sample code, ideas and/or thoughts would be great and most appreciated!

Functionality :-

1) Master Detail Grid

2) Inline editable (Add, Edit and delete)

3) different editor base column in detail section of grid

Data Example:-

var Data = [
    {
        "LR_Name": 'Long Term',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'Y',
        "LPVR_Active": 'Y',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "ABR Duration",
                    "Value": "2",
                    "Type": 'dropdown'

                },
                {
                    
                    "Name": "EBR Duration",
                    "Value": "2",
                    "Type": 'Number'
                    
                }
            ]

        }
    },
    {
        "LR_Name": 'LTCR',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                    "Name": "LTCR Supp Date",
                    "Value": "01-01-2018",
                    "Type": 'date'

                },
                {
                    
                    "Name": "LTCR Supp Amount",
                    "Value": "2500",
                    "Type": 'Currency'
                }
            ]

        }
    },
    {
        "LR_Name": 'Extended Benefit',
        "LRVR_Opt_To_Decline": 'Y',
        "LRVR_Required": 'N',
        "LPVR_Active": 'N',
        "Attributes": {
            "Attribute": [
                {
                   
                    "Name": "Benefit Type",
                    "Value": "5% Simple",
                    "Type": 'String'

                },
                {
                    
                    "Name": "Benefit",
                    "Value": "10% Simple",
                    "Type": 'String'
                }
            ]

        }
    }
];

Alex Hajigeorgieva
Telerik team
 answered on 11 Dec 2018
1 answer
130 views

I read several post, but I can't find the way to correctly use french/english string in my template without crashing the templete with the # caracter.

see this part of a template:

<div class="Stats">
 <span class="LikeCount">#=Html.Kendo().TemplateEncode(@Resources.PortailGES.Aime)#<span id="LikeCount_#: Id #">#: LikeCount #</span></span>
  <span class="DislikeCount">@*@Resources.PortailGES.AimePas*@ <span id="DislikeCount_#: Id #">#: DislikeCount #</span></span>
</div>

 

I try with #=Html.Kendo().TemplateEncode(@Resources.PortailGES.Aime)# but that not work

 

The string Ressource.PortailGES.Aime contain "J'aime" in french rendered in the template like: J&#39;aime the crash the template.

Thanks for your help.

Plamen
Telerik team
 answered on 11 Dec 2018
3 answers
364 views
Hi , 
I am facing an issue with the tooltip text not being displayed when the text contains any of these symbols "<" , ">"  , this is also occurs when i update the tiltle in this scenario within this example : https://dojo.telerik.com/eVazIyaf

could you plz give a solution to this issue to escape the fact that the text is being deducted as a HTML syntax or smtgh and display the whole text as simple string
Marin Bratanov
Telerik team
 answered on 11 Dec 2018
1 answer
332 views

I've looked at all the examples and all the code I could find on integrating the code into this page.  It's eluding me.

So, here’s the deal.  I’ve got a project that I’m pulling from the DB for data into a custom API.  Trying to load it.

I’ve set up, via the instructions found online, the jQuery HTML Editor in a textarea. 

I can’t get the text to update for anything. 

I do it as a text area without the Kendo controls, it updates all day long.  As soon as I update it with being a textarea that’s controlled by Kendo, it will not update.  I look at the object, and the html and the value are set properly on the object, but the screen shows nothing.  No update.

 

I'm trying to get it so that if we have an article for display having text data, I pre-load the data into the Editor.  

 

It is storing the data as raw HTML in the DB.  (Or at least that's my plan, but if it doesn't work, then let me know and I will adjust accordingly.)

 

In the admin-article.component.html file, I've got the following (the rest is irrelevant code above)

 

     </div>
    </div>
    <textarea kendo-editor id="editor" #editor aria-label="editor" rows="30" cols="168" style="height:640px;">121345</textarea>
  </div>
</div>

In the admin-article.component.ts file, I've got the following (again shortened for brevity)

 

  @ViewChild('editor') editorElement: ElementRef;

  ngAfterViewInit() {
    console.log("Editor", this.editorElement)
    kendo.jQuery(this.editorElement.nativeElement)
      .kendoEditor(
        {
          resizable: {
            content: true,
            toolbar: true
          },
          
      });
    console.log("Value", this.editorElement.nativeElement.value)
  }

  ngOnDestroy(): void {
    kendo.destroy(this.editorElement.nativeElement);
  }
  getSelectedSection(section: any): void {
    this.selectedSection = section;
    console.log("Section Selected", section);
    //turn on the selection for the articles as well as the editor and the text boxes and radio buttons for other fields.  Select "Create New Article" and clear all fields.
    this.loadArticles(); 
    
  }
  getSelectedArticle(article: any): void {
    console.log("Article Selected", article)
    this.service['article-id'].get({
      params: {
        article_id: article
      }
    }).subscribe(
      data => {
        (this.selectedArticle = data)

      },
      error => console.error(error),
      () => {
        console.log("Selected Article", this.selectedArticle)
        console.log("Editor", this.editorElement)
        
        this.articleTitle = this.selectedArticle["articleTitle"]
        this.articleSubheader = this.selectedArticle["subHeader"]
        this.articleUrl = this.selectedArticle["destinationURL"]
        this.articleImage = this.selectedArticle["imageInfo"]
        this.editorText = this.selectedArticle["articleText"]
        this.editorElement.nativeElement.innerHTML = this.editorText
        this.editorElement.nativeElement.value = this.editorText
        console.log("Article Text", this.editorText)
      })
    
  }

 

 

Any assistance would be absolutely appreciated.  I've tried to get this working.  Our UI guy quit 4 weeks ago, and I'm doing double-duty.

 

 

 

Dimiter Topalov
Telerik team
 answered on 11 Dec 2018
3 answers
1.5K+ views

I am using editor and template to display column as text.  But the actual values of the column is integer.  When doing filter on this column, I want to use text.

I am using the Grid Filtering with Dynamic Default Values to achieve that.  But I want the operators only show "Starts with", not "equal to" and only 1 operator (no need for "AND".  How can I achieve that?

var divData = [{ "value": 1, "text": "Owned" }, { "value": 2, "text": "Managed" }];

{ field: "DivisionID", title: "Division", values: divData, attributes: { style: "text-align:left" }, width: "150px", editor: divDropDownEditor, template: "#=getDivName(DivisionID)#" },

Thanks.

Eyup
Telerik team
 answered on 10 Dec 2018
3 answers
354 views

Does anyone know where I can find info about the licensing of Kendo.DynamicLinq - https://github.com/kendo-labs/dlinq-helpers ?

There is nothing in the repo about the license. I found a few posts that mention it is an open-source community contributed component, but for auditing purposes I need something a bit more official.

Some of the Kendo-Labs projects do have licencing details, eg. https://github.com/kendo-labs/kendo-ui-forms, but not dlinq-helpers :(

 

Alex Hajigeorgieva
Telerik team
 answered on 10 Dec 2018
5 answers
125 views

I am using a set of nested grids, using the detail system, and using one object. 

Object example:

{

Property 1

Property 2

Children{

     object{

          property 1

 

     }

      }

}

Viktor Tachev
Telerik team
 answered on 07 Dec 2018
1 answer
500 views

I have issue that sortable compare is not being run during first load, even if I have defined sort column.

This is the example:

https://dojo.telerik.com/oFoWIcAt

 

It is not using my comparable function and using alphabetical ordering.

Viktor Tachev
Telerik team
 answered on 07 Dec 2018
3 answers
1.1K+ views

We have a Priority boolean flag column

We want a grid filter that only returns rows that only have that flag

Can you please give a quick snippet of how to accomplish this:

a) Show two radio buttons for "Priority" "Not Priority"

b) Only show a radio button for "Priority" (with the radio button pre-selected since it's the only choice)

c) Use a drop-down with a preloaded value ... This is what I have at the moment - replacing the text input with a drop down list with only one value ... BUT for the lift of me I cannot pre-select that value - the user has to expand the drop-down and select the value

        $(param.element).kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                {
                    text: "Priority",
                    value: 0
                }
            ],
            index: 0
        });

d) using a custom UI ... the filter UI is just a form with some controls and form buttons, correct? - for the future I would really love to be able to create my own UI with my own inputs, and decide myself what value I want bound when the form is submitted

I tried switching the type on the text input (not shown) and I tried creating a cloned input element and switching the type (shown below) ... and it looks perfect, except on submit it's not recognized as a filter

$(param.element[0]).clone().attr('type', 'radio').attr('checked', true).addClass('avoPriorityFilterRadio').insertAfter(param.element[0]).prev().remove();
        $(".avoPriorityFilterRadio").after("<span>Priority</span>");

 

Appreciate any help - I've struck out with all of these options

Daniel

 

Eyup
Telerik team
 answered on 07 Dec 2018
8 answers
768 views
I am using Durandaljs to create a single page applications. I am using Kendo UI Grid to display data. All my bindings are working and I am able to see the data in the grid. I am not sure on how to bind command events for Edit. I tried it based on MVVM example on Telerik website bit its not working for me.

Below is my code.

My View Model:

define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
    return {
        displayName: 'My Applications',
        applications: ko.observableArray([])
 
        editApp: function (e) {
            e.preventDefault();
            alert("test");
        },
 
        activate: function () {
            var that = this;
 
            return http.get('http://localhost/api/App').then(function (response) {
                that.applications(response);
            });
        }     
    }
});

My View:

<section>
    <h2 data-bind="html: displayName"></h2>
    <div id="gridContainer">
        <div data-kendo-role="grid"
             data-kendo-scrollable="false"
             data-kendo-sortable="true"
             data-kendo-bind="source: applications"
             data-kendo-columns="[
                                {'field':'Id','hidden':true},
                                {'field': 'Name'},
                                {'command':[{'text':'Edit Application','click':'this.editApp','name':'Edit-App'}],'title':'','width':'50px'}
                             ]"
             style="height:100%;">
        </div>
    </div>
        <div style="float:left;">
            <a href="#addapp">Register Application</a>
    </div>
</section>

if I click on the Edit button it is not reaching editApp function.
Even tried placing the editApp function in normal js file rather than viewmodel. i am getting a jquery error saying "Object doesn't support property or method 'Apply'".

Please help.
Alex Hajigeorgieva
Telerik team
 answered on 07 Dec 2018
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
ScrollView
Switch
TextArea
BulletChart
Licensing
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
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
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
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?