Telerik Forums
Kendo UI for jQuery Forum
1 answer
624 views

The sample code is available in:
http://dojo.telerik.com/IZumO/4

Requirement:
The child checkbox element should be disabled and should displayed in the treeview as checked.

Scenario/ Issue description:
For the first load when the tree view is loaded the child element was disabled and checked.
When the parent element is checked/ unchecked the disabled child node is varying as per the parent checkbox.
Note : we are setting the “checked” property of the child checkbox at all check events, but still the UI of the child check box is still not getting updated as checked.

 

Veselin Tsvetanov
Telerik team
 answered on 21 Feb 2017
2 answers
515 views

I have multiple pages in a scroll view.

To wrap the text with in each page I have used the following :

<div data-role="scrollview" data-content-height="100%" data-pager-overlay="true">
                <div data-role="page" style="white-space : normal;">
                    <span style="text-align:center;">Privilege Club: Mouawad</span>

I have used style="white-space : normal;" to wrap the text.

I saw this as a solution mentioned in one of the very old posts in this forum.

Please let me know if there is any other or better solution now.

This works fine but when I try to center align a text with in the span element it is still aligned left

How can I make it aligned center ?

I also used width:100% for the span element but invain.

Could you please help me with this simple task ?

Magdalena
Telerik team
 answered on 21 Feb 2017
1 answer
109 views

Very odd conditions, but I have a list of columns which should be hidden initially. I use the following to hide them:

_.forEach(columnsConfig, function (c, idx) {
if (c.hdn === true) {
spreadSheet.activeSheet().hideColumn(idx);
}
});

However, this seems to cause the header row's (row 1) height to multiply. See screenshot, thanks.

 

Misho
Telerik team
 answered on 21 Feb 2017
2 answers
327 views

We are having a problem when the kendo grid turns into edit mode. We are currently using dropdowns inside the kendoGridEditTemplate. They are not showing the value that was already selected, even though behind the scenes we can see that it is still there. After adding a item into the kendo grid through the normal add process, it saves and shows up correctly with the names showing for each of the columns. But when selecting the edit button for a row, all the values in the dropdowns become blank to the user, but behind the scenes the value is still there. Below is the code. 

 

 

 

The information comes down as    

         locations: Observable<Location[]>; in our typescript

 

 

 

The infomation model :

export class Location {
    Id?: number;

    Name?: string;
    
}

 

The HTML Code

 

<kendo-grid [data]="Information"
    (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
    (save)="saveHandler($event)" (remove)="removeHandler($event)"
    (add)="addHandler($event)" [height]="370">
   <kendo-grid-toolbar>
       <button kendoGridAddCommand class="k-primary" style="width: 200px;height: 40px;">Add</button>
   </kendo-grid-toolbar>
<kendo-grid-column field="Location" title="Location" width="100">
   <template kendoGridEditTemplate let-dataItem="dataItem">
       <select class="form-control" id="Location" [(ngModel)]="dataItem.Location">
           <option *ngFor="let location of locations | async" [selected]="dataItem.Location?.Id == Location.Id" [ngValue]="location">{{location.Name}}</option>
       </select>
   </template>
   <template kendoGridCellTemplate let-dataItem="dataItem">
       {{dataItem.Location ? dataItem.Location.Name : "" }}
   </template>
</kendo-grid-column>
</kendo-grid>

Dalton
Top achievements
Rank 1
 answered on 20 Feb 2017
2 answers
791 views

Apologize for the noobie question.

I am trying to populate both a grid and a chart with data from the same remote data source.  However, since the chart will need it's data grouped, but the grid will not, it looks like I need to have two separate data sources, each one making a call to the database.

In an attempt to have only a single call to the database, I am trying to create a LOCAL data source by reading data from the REMOTE data source once it has been returned.  I'm curious if this is even possible, and if so, how I would do this.  This is what I'm currently trying. "remoteDataSource is working fine, but "localDataSource" doesn't seem to be bringing back any data.

var remoteDataSource = new kendo.data.DataSource({
 transport: {
         read: {
         url: "connect.php",
         type: "get",
         dataType: "json"
         }
 },
     schema: {
  model: {
   fields: {
    WONUM: { type: "string" },
    RN: { type: "number" },
    DESCRIPTION: { type: "string" },
    STATUS: { type: "string" },
    STATUSDATE: { type: "datetime" },
    MONTH_DT: { type: "string" },
    YEAR_DT: { type: "string" },
    WORKTYPE: { type: "string" },
    ASSETNUM: { type: "string" },
    GMD_DEPT_CODE_ASSET: { type: "string" },
    LOCATION: { type: "string" },
    GMD_DEPT_CODE_LOC: { type: "string" }
   }
  }
 },
});
        
var localDataSource = new kendo.data.DataSource({
 data: remoteDataSource
});

Mark
Top achievements
Rank 1
 answered on 20 Feb 2017
2 answers
161 views

I have an editable kendo grid that submits to my API just fine.  The update is using a popup control.  When I click the update button, the update occurs and the API returns a status 200 with a location header and no content.

However, the popup control never goes away.  I can X out of the popup and then refresh the grid and it refreshes with the updated data.

I am using a RESTful API that submits updates using the PUT verb. I tried in multiple browsers and with multiple forms of editable grid (popup, inline) with similar results.

Please advise.

Below is my razor grid definition

 

<script>
    $(document).ready(function () {
        var controller = "ServicePrototypes/"
        var crudServiceBaseUrl = "http://localhost:3499/api/",
            dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: crudServiceBaseUrl + controller,
                        dataType: "json"
                    },
                    update: {
                        url: function (e) {
                            return crudServiceBaseUrl + controller + e.ServicePrototypeID
                        },
                        contentType:"application/json",
                        dataType: "json",
                        type: "PUT"
                    },
                    //destroy: {
                    //    url: crudServiceBaseUrl + controller + "/Destroy",
                    //    dataType: "json"
                    //},
                    create: {
                        url: function (e) {
                            return crudServiceBaseUrl + controller
                        },
                        dataType: "json",
                        contentType: "application/json",                        
                        type: "PUT"
                    },                    
                    parameterMap: function (options) {
                        return JSON.stringify(options);
                    }
                },
                pageSize: 20,
                schema: {
                    model: {
                        id: "ServicePrototypeID",
                        fields: {
                            ServicePrototypeID: { type :"string" },
                            ServiceID: { validation: { required: true } },
                            Service: { validation: { required: true } }                            
                        }
                    }
                }
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 550,
            toolbar: ["create"],
            columns: [                
                "Service",
                { field: "ServiceID", title: "Service ID" },                
                { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
            editable: "popup",
            sortable: true
        });
    });
</script>

PrimePay
Top achievements
Rank 1
 answered on 20 Feb 2017
1 answer
115 views

I tried putting it into the static title. No dice.

That just shows a 'square' symbol followed by 'F50D'.

I tried adding it dynamically.$("#ReportTopicGrid thead [data-field=SearchEnabled]").text("&#1F50D;");

I tried it with a double ampersand to escape it. Nope. It just shows '&&#1F50D;'.

The symbol is a magnifying glass. The column has checkboxes indicating a search is enabled for the row.

Has somebody tried this?

Thanks,

Rick

Rick
Top achievements
Rank 2
 answered on 20 Feb 2017
4 answers
222 views

Hi, we're using the Bootstrap theme throughout our site and I've noticed that the KendoCalendar doesn't seem to have consistent bootstrap styling?

(See attached image)

I would expect it to have Border Radius applied and also some drop shadow?

Am I missing something or is this the case for everyone?

Alanm
Top achievements
Rank 2
 answered on 20 Feb 2017
1 answer
75 views
We are currently evaluating Kendo UI. We understand how editing works, but one thing that was not clear from the documentation is whether it is possible to restrict what columns can be edited, per row, based on the row's data (for example, have an { edit: true } field in the row data that would control whether the row is editable. How would one build such a configuration? We are using the Angular version.
Viktor Tachev
Telerik team
 answered on 20 Feb 2017
3 answers
310 views

I am using Kendo angular maps with geojson layer for drawing maps in a tab. The map elements are visible in the developer html elements but are not rendered in the tab. The issue might be because of the svg viewbox having height 0 at the time of drawing. 

Is there any way to handle the issue.

 

Thanks!

Alex Hajigeorgieva
Telerik team
 answered on 20 Feb 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
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
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
+? 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?