Telerik Forums
Kendo UI for jQuery Forum
1 answer
759 views

I have a CallDate and a CallTime field and I want to display them both in the same column.

I have searched google and the documentation but I can't find an explanation of how to do this.

Please can you advise.

 

At the moment I have

 

.Columns(columns =>
        {
                  columns.Bound(u => u.CallDate);
                  columns.Bount(u => u.CallTime);
}

 

I want a column called Call Date with both of these values joined together.

Boyan Dimitrov
Telerik team
 answered on 21 Feb 2017
3 answers
204 views

I have a very simple grid that I am adding a runtime (e.g. user clicks a button to add this grid).  The OnConnected event of my hub never gets fired.  Interestingly when I move the same code to the $(document).ready(function() it works fine.  It appears the issue is with binding the client to the hub dynamically.

My code, the values of chat and hubStart are valid.

$('.controls').on('click', 'img', function (e) { 

  loadLiveEvents()

}

function loadLiveEvents() {    
    var connection = $.connection;
    var chat = connection.messageHub;
    // Start the connection.
    var hubStart = $.connection.hub.start().done(function() {});

    var dataSource = new kendo.data.DataSource({
        type: "signalr",
        autoSync: true,
        schema: {
            model: {
                id: "ID",
                fields: {
                    "ID": { type: "number" }
                }
            }
        },
        transport: {
            signalr: {
                promise: hubStart,
                hub: chat,
                server: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                },
                client: {
                    read: "readbasic",
                    update: "sendToGrid",
                    create: "sendToGrid"
                }
            }
        }
    });
    
    $("#myGrid").kendoGrid({
        columns: [
            { field: "ID" },
        ],
        dataSource: dataSource
    });
}

 

Stefan
Telerik team
 answered on 21 Feb 2017
1 answer
665 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
567 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
150 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
362 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
855 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
211 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
138 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
259 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
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
Drag and Drop
Application
Map
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
DropDownTree
ListBox
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
Styling
ColorPicker
Pager
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
Licensing
PivotGridV2
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
LLM Kit
+? more
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Shiori
Top achievements
Rank 2
Iron
Tien
Top achievements
Rank 1
Iron
Robert
Top achievements
Rank 1
Rob
Top achievements
Rank 4
Bronze
Bronze
Iron
Geoff
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?