Telerik Forums
Kendo UI for jQuery Forum
2 answers
446 views

     Hi,

      I have a requirement to scroll horizontally to the task when its clicked from the left side tree. This when when i select a task,  its chart will come into view.

 

I have seen a similar post which does similar job by manipulating the range. But my requirement is just to scroll the task into viewport without changing the range. 

 

Does this feature exist in current gantt chart or is there any available workaround ?

Bhabani
Top achievements
Rank 1
 answered on 05 Sep 2018
1 answer
4.5K+ views

I have designed one page where i am showing some actions using command. But i want to change the icons based on condition suppose based on status,

As mentioned in attached picture for OnHold the icons are displaying as edit, Cancel and OnHold but for approved we need to show only edit and cancel.

How we can achieve that? Also  ,the command actions is taking a square block instead of that i need to show only font awesome  icons like in second attached picture

Please help.

 

Thanks & Regards

Manish Tiwari     

Dimitar
Telerik team
 answered on 05 Sep 2018
2 answers
223 views

Hi, 

In some of my listviews I'd like to alternate item color and find myself using almost identical templates in the template and altTemplate properties.

template:

<script id="template" type="text/x-kendo-template">
<div class="regular-color">#:value#</div>
</script>

altTemplate

<script id="template-alt" type="text/x-kendo-template">

<div class="alt-color">#:value#</div>

</script>

How can I do this smarter?

Thanks in advance.

/Morten

Morten
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 05 Sep 2018
3 answers
979 views

I have a page that requests a partial view via AJAX and inserts it into the page. The view contains several kendo DatePickers. When I leave some of the required DatePickers empty and try to submit the form, I'm noticing my validation summary (created by @Html.ValidationSummary(false)) is not displaying anything, though submission is prevented. 

Yesterday I was receiving errors in the validation summary. I had one about a required DatePicker, that is in a hidden kendo Window being empty, and when I re-opened the window to address it, the validation error for the DatePicker was visible, but the DatePicker itself was gone. 

So these specific problems aside for the moment, my question is: I know for the standard jQuery validation and unobtrusive scripts, I have to remove the validator data from the form and then re-parse the form after inserting content dynamically. Is something similar required for kendo validation? Do I need to call kendoValidator() again?

 

What I do for the standard asp.net MVC validation:

//Remove validators and re-add them to include the new fields
var $form = $(form)
    .removeData("validator")
    .removeData("unobtrusiveValidation");
 
$.validator.unobtrusive.parse($form);
Joana
Telerik team
 answered on 05 Sep 2018
2 answers
1.5K+ views

I'm trying to add a bullet point to my dropdown entries and while it works when it displays in the dropdown, when I try to edit it it reverts back to the character code.

Here is the code I'm using for my dropdown and it's in a grid with inline editing.

 $('<input required name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Details",
            dataValueField: "Id",
            dataSource: dataSource,
            optionsLabel: {
                Details: "Choose an item...",
                Id: -1
            },
            template: "#= data.Details #"
        });

Any help would be appreciated.

 

Dimitar
Telerik team
 answered on 04 Sep 2018
3 answers
336 views

Hi,

I'm trying to change the background of the "k-event-drag-hint" div when the user is moving an event on top of another.

 

function onEventMoved(e) {
    if (roomIsOccupied(e.start, e.end, e.event, e.resources)) {
        $(".k-event-drag-hint").find('div').css('background', 'blue');
        e.preventDefault();
        return;
    }
    $(".k-event-drag-hint").find('div').css('background', 'red');
}

 

When I randomly move an event I can see the green background BUT when roomIsOccupied returns true, my code seems to have no effect (background is not red).

>> If i remove the e.preventDefault() then the background turns to blue. 

 

Any idea on how i can fix this issue? 

 

Thx

Seb

Veselin Tsvetanov
Telerik team
 answered on 04 Sep 2018
7 answers
2.5K+ views
Hi,

I have a requirement to update all selected rows with given value.  The grid is using the multi select mode and the column I am updating has a name of "status" e.g.

<td name="status" role="gridcell" id="SubmissionsGrid_active_cell" class="">Active</td>

The status column is a drop down list which I have been able to get working using the example in this article.

I am trying to change the value for each selected row and flag the cell as dirty using the following code:

$('#myButton').click(function() {
    var grid = $("#SubmissionsGrid").data("kendoGrid");
 
    $.each(grid.select(), function (index, row) {
        var cell = $(row).find('[name="status"]');
        cell.addClass("k-dirty-cell").prepend("<span class='k-dirty' />");
 
        var data = grid.dataItem(row);
        data.set('Status.Id', '3');
        data.set('Status.Description', 'Rejected');
    });
});

The problem I have is that I cannot get the dirty flag to work in conjunction with the change.  If I comment out the code that changes the value the k-dirty-cell class is added successfully and the web form shows the cell is dirty however when both code blocks are used the value is chanced but the cell does not show as begin dirty.

I am using the MVC version of the grid.

Thanks
Paul
Markus
Top achievements
Rank 1
 answered on 04 Sep 2018
1 answer
580 views

Clicking grid remove row fire grid datasource change event, but firing paramatermap and no remote transport is running. I can fire parameterMap by call .sync method in change event but this not passing removed data there, but only remaining rows data.

 

allUsersDataSource.fetch(function() {
   allUsers = allUsersDataSource.data();
 })
 
 var assignedUsersDataSource = new kendo.data.DataSource({
   // autoSync: true,
   transport: {
     read:{
       url: API_URL+"frank/getassignedusers/"+documentId,
       dataType: "json"
     },
     create: {
       type: "POST",
       url: API_URL+"frank/addusertodocument",
       dataType: "json"
     },
     update: {
       type: "POST",
       url: API_URL+"frank/editusertodocument",
       dataType: "json"
     },
     destroy:{
       type: "POST",
       url: API_URL+"frank/removeuserdocument",
       dataType: "json"
     },
     batch: true,
     parameterMap: function(data, operation) {
       console.log ("assignedUsersDataSource.parameterMap.!! data:", data);
       console.log ("assignedUsersDataSource.parameterMap.!! operation:", operation);
       if (operation === "destroy" ) {
         //..
       }
       if (operation === "create" && data.UserID) {
       //..
       }
     }
   },
   change: function(e) {
       console.log("assignedUsersDataSource.change: e.items  :: ", e.items  );
     if(e.action === "remove"){
       // assignedUsersDataSource.sync();
     }
     //edycja i wstawianie
     if(e.action === "itemchange"){
       // assignedUsersDataSource.sync();
     }
     // itemchange to zawiera
     if(e.action === "add"){
     //   assignedUsersDataSource.sync();
     }
   },
   pageSize: 4,
   schema: {
     model: {
       fields: {
         UserName: { editable: false, nullable: true },
         Surname: { editable: false, nullable: true },
         UserID: { field: "UserID", defaultValue: 1 },
         GroupName: { editable: false, nullable: true },
       }
     }
   }
 });
 
 var _grid = $("\#grid-single-user-groups").kendoGrid({
   dataSource: assignedUsersDataSource,
   filterable: true,
   scrollable: false,
   // toolbar: ["create", "save"],
   toolbar: ["create"],
   pageable: true,
   columns: [
     {
       field: "UserID", width: "100%",
       editor: userDropDownEditor,
       title: "Agent",
       template: function(userID) {
           for (var idx = 0, length = allUsers.length; idx < length; idx++) {
             if (allUsers[idx].UserNameID == userID.UserID) {
               return allUsers[idx].Login;
             }
           }
       }
     },
     { command: [ "destroy"], title: " ", width: "250px" }
   ],
   editable: {mode: "incell"},
 });
 
 function userDropDownEditor(container, options) {
   $('<input data-bind="value:' + options.field + '"/>')
   .appendTo(container)
   .kendoDropDownList({
     dataTextField: "Login",
     dataValueField: "UserNameID",
     filter: "contains",
     dataSource: allUsersDataSource,
     valuePrimitive:true,
   })
 }
Viktor Tachev
Telerik team
 answered on 04 Sep 2018
13 answers
474 views

I am trying to achieve the following :

1. Hide the header & footer on home page or home view but display on other views
2. Customize the header for each view
3. Navigating to views using href tags was not showing the layout


---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------                             
I am using the following code for lay-out initialization in home view i.e. index.html:

<body>
    <div data-role="view" data-title="Home View" id="index-en">
<div data-role="layout" data-id="main-layout">
    <div data-role="header">             
        <div data-role="navbar">               
            <span  data-role="view-title"></span>      
        </div>
    </div>
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#index-en" data-icon="home">Home</a>  
            <a href="views/view1.html" data-icon="organize">Agenda</a>
            <a href="views/view2.html" data-icon="favorites">Registration</a
            <a href="views/view3.html" data-icon="globe">Gallery</a
            <a href="views/view4.html" data-icon="contacts">Speakers</a>             
        </div>
    </div>
</div>
 
 <script>
    var app = new kendo.mobile.Application(document.body,
        {
            platform:'ios7',
            layout: "main-layout"
               
        });
</scirpt>
 
</div>
</body>

How can I hide the header and footer on the home page.
Currently I used the following custom css to hide the header

#index-en div.km-header {
    display : none;
}

I probably need to do the same to hide the footer also.
Is there any other standard approach to do this ?

------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
Since I have the main-layout defined , the same layout will be copied to all views.
Let's say I want to change the header for a specific view to be 
<div data-role="header">              
        <div data-role="navbar">                
            <img  src="xyz/abc.jpg"></img>       
        </div> 
</div>

I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.

<div data-role="view" data-title="Second View" data-layout="custom-layout" id="view2">
</div>
<div data-role="layout" data-id="custom-layout">
    <div data-role="header">             
        <div data-role="navbar">               
            <img  src="xyz/abc.jpg"></img>     
        </div>
    </div>
    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="#index-en" data-icon="home">Home</a>  
            <a href="views/view1.html" data-icon="organize">Agenda</a>
            <a href="views/view2.html" data-icon="favorites">Registration</a
            <a href="views/view3.html" data-icon="globe">Gallery</a
            <a href="views/view4.html" data-icon="contacts">Speakers</a>             
        </div>
    </div>
</div>

But this was breaking the tabstrip navigation.
Could you please advise how can this be achieved ?

--------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------

In my home page, I have a gird of four images created using CSS flex-box.
I have added href on each image to link to a different view.
But when clicked on the image only the view's content is displayed , the layout is not shown.
The custom css styling applied to view's elements is also broken.

<div id="flex-grid-container1" class="flex-container-center-content">
            <div class="flex-item1">              
                <a href="views/view2.html"><img src="images/homeGrid/agenda.jpg"/></a>           
            </div>
            <div class="flex-item2">
                <a href="views/view2.html"><img src="images/homeGrid/speakers.jpg"/></a>
            </div>
             
 </div>

I have also tried using #idOfView in the href tags but same problem exists.

Could you please let me know how this can be resolved ?

Sorry for the very lengthy post , but these are the issues I am struck with now.
Thanks in advance.

Tsvetina
Telerik team
 answered on 03 Sep 2018
4 answers
1.8K+ views

Hello,

 

I have a Kendo Scheduler bound to datatable dynamically. The user will have this view open whole day and would like to refresh the data in current view updated every 5/10 minutes as set in some Settings. The user do not Need to interact or refresh the page. Is there some property which i can use or any idea how to achieve a Server read automatically every n minutes and refresh current view.

 

Thanks

 

Anamika

Ivan Danchev
Telerik team
 answered on 03 Sep 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?