Telerik Forums
Kendo UI for jQuery Forum
2 answers
578 views
Let's say I have two row templates, normal and urgent, and which template is to be applied to the row will depend on the value in the row's {status} field. How and where would the desired template be applied to the row such that when the user groups the grid, the template will travel with the row?

<script id="urgentRowTemplate" type="text/x-kendo-tmpl">
    <tr class="urgent">
         <td> ${name} </td>
        <td>  ${reasonForCall} </td>
        <td>  ${status} </td>
    </tr>
</script>
 
 <script id="normalRowTemplate" type="text/x-kendo-tmpl">
    <tr class="normal">
         <td> ${name} </td>
        <td>  ${reasonForCall} </td>
        <td>  ${status} </td>
    </tr>
</script>



Tim R
Top achievements
Rank 1
 answered on 14 Jun 2013
3 answers
214 views
I have an kendo.Grid that is using initializing from JSON (MVVM paradigm). It all works fine until made it editable and added a toolbar. The destroy functions are working just fine.

But the SaveChanges in the toolbar does not seem to do anything. Why do I say that? Because if I hit [Cancel Changes] button in the toolbar, all rows are deleted, and I am left with an empty Grid (only headers).
<div id="layerTable"
    class="Part"
    data-role="grid"
    data-column-menu="true"
    data-filterable="true"
    data-sortable="true"
    data-scrollable="false"
    data-resizable="true"
    data-reorderable="true"
    data-groupable="true"
    data-editable="{confirmation: false}"
    data-bind="source: LayerTable"
    data-toolbar='["save","cancel"]'
    data-columns='[
        "Class",
        "Type",
        "FileCount",
        {field: "Size",
         format: "{0:n3} MB",
        },
        {field: "Date",
         format: "{0:F}" },
        "Path",
        {command: "destroy"},
    ]'>
</div>
Dr.YSG
Top achievements
Rank 2
 answered on 14 Jun 2013
2 answers
132 views
I noticed that the login page for this site does not respond to pressing the Login button when using Chrome. I logged in with Firefox to post this.

The reason seems to be due to a failure to load script resources from https://ajax.microsoft.com/ajax/4.0/2/... (screenshot attached).

When testing by loading https://ajax.microsoft.com/ajax/4.0/2/WebUIValidation.js directly, it returns error 324 (net:: ERR_EMPTY_RESPONSE) in Chrome, but loads fine in FireFox. Odd.

You may want to consider using local resources to avoid the dependency on the Microsoft server.

Regards,
Gary
Richardsonke
Top achievements
Rank 1
 answered on 14 Jun 2013
5 answers
112 views
Running the shipped example on Firefox 21 on MaxOS 10.8.3, the height seems off and the layout is generally non-optimal. This is with the kendoui.complete.2013.1.319.commercial.zip.

See attached screenshot.

Petur Subev
Telerik team
 answered on 14 Jun 2013
1 answer
104 views
I have the following div on my page:
<div data-role="modalview" id="MessageBeforeEnteringWebRes" style="padding:0.25em 1em 1em 1em;min-height:5em;max-height:20em;height:auto;">
        <div data-role="header" style="border-bottom:1px solid #ccc" class="marginbottom1"><span>@Model.CurrentContext.Club.ClubName</span></div>
        <div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1">
            @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes)
        </div>
         
        @if (Model.CurrentContext.Club.MessagesSettings.AllowUserToDisableMessagesBeforeEnteringWebRes.ToString().ToLower() == "true")
        {
            <div id="UserEditDisableMessage" style="padding-left:0.5em;" class="marginbottom1">
                <label for="DoNotDisplayMessage"><input type="checkbox" id="DoNotDisplayMessage" style="padding-right: 0.5em"/>Disable messages for future visits.</label>
            </div>
        }
         
        <div class="center marginbottom1"><input value="OK" id="btnDoNotDisplayMessage" onclick="onOKDoNotDisplayMessage()" class="button button1" type="button" style="width:5em"/></div>
    </div>
Everything works fine except this scrolling piece (the created string contains paragraph tags but a generic string causes the same problem to occur):
<div style="overflow:scroll; -webkit-overflow-scrolling:touch; max-height:8em;" class="marginbottom1">
            @MvcHtmlString.Create(Model.CurrentContext.Club.MessagesSettings.MessageBeforeEnteringWebRes)
</div>


The weird part is that I use similar code on a different page but in a template and that works fine. Is there something that the modalview does to prevent scrolling in this matter? I notice if I remove the max-height part on the scrolling div the whole modalview will scroll.
Kelly
Top achievements
Rank 1
 answered on 14 Jun 2013
1 answer
294 views
I am binding a grid to a datasource. The datasource is configured with a model. I use the transport configuration to read/write data. There is a dropdown column bound to another static datasource.
When I make an edit to a field and click the Update command button, the row disappears, but the space for it is still there. If I then update another field, the row collapses completely. 
The data does save and it will show up on a page refresh (in my real real project, not the attached demo).
Attached is a VS2012 project showing the problem. It is not my working project that actually connects to the database, etc, but it does still demonstrate the issue.
Also attached is a screenshot.
Vladimir Iliev
Telerik team
 answered on 14 Jun 2013
5 answers
433 views
I have 2 questions.


Question1) Is it possible to initialize/widgetify kendo window content

eg 
var mywindow = $("<div/>").kendoWindow({
    width: "300px",
        height: "200px",
        title: "Some title",
        modal: true
});

var kendoWindow = mywindow.data("kendoWindow");
var mycombo = "<input id="comboBox"/>";
var windowcontent = kendoWindow.content(_mycombo);

//can i make mycombo into widget ...code below doesnt work gives a jquery error
$(windowcontent).kendoComboBox({
   dataTextField: "text",
   dataValueField: "value",
   dataSource: [
       { text: "Item1", value: "1" },
       { text: "Item2", value: "2"}]
});


Question2) If I have this code

var myoptions = {a:"some text", b:"more text"};
var mywindow = $("<div/>").kendoWindow({
    width: "300px",
        height: "200px",
        modal: true,
        title: myoptions.a,
content:"test.html"
});

How do i pass 'myoptions' object into test.html?  (does it have to be a global variable?)

thanks
kashim
Kevin Babcock
Top achievements
Rank 1
 answered on 14 Jun 2013
2 answers
341 views
Hello,

I am not able to get background color in chart print in chrome.

Can you please try with below code snippet?

http://try.kendoui.com/dataviz/chart-basics/1

HTML
<a id="jayeshgoyani" class="MyCLass" >Click Here For print</a>
<div class="chart-wrapper">
                <div id="chart"></div>
            </div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
JS
  var blogComments = [ {
                        "blog": "My blog",
                        "day": "1",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "2",
                        "value": 7,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "3",
                        "value": 12,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "4",
                        "value": 15,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "5",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "6",
                        "value": 23,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "7",
                        "value": 12,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "8",
                        "value": 10,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "9",
                        "value": 17,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "10",
                        "value": 13,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "11",
                        "value": 14,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "12",
                        "value": 15,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "13",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "14",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "15",
                        "value": 23,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "16",
                        "value": 25,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "17",
                        "value": 21,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "18",
                        "value": 18,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "19",
                        "value": 17,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "20",
                        "value": 16,
                        "userColor": "#565656"
                    }, {
                        "blog": "My blog",
                        "day": "21",
                        "value": 11,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "22",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "23",
                        "value": 8,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "24",
                        "value": 5,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "25",
                        "value": 4,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "26",
                        "value": 1,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "27",
                        "value": 7,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "28",
                        "value": 6,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "29",
                        "value": 3,
                        "userColor": "#ffd600"
                    }, {
                        "blog": "My blog",
                        "day": "30",
                        "value": 6,
                        "userColor": "#ffd600"
                    } ];
 
                function createChart() {
                    $("#chart").kendoChart({
                        dataSource: {
                            data: blogComments
                        },
                        title: {
                            align: "left",
                            text: "Comments per day"
                        },
                        legend: {
                            visible: false
                        },
                        seriesDefaults: {
                            type: "column",
                            labels: {
                                visible: true,
                                background: "transparent"
                            }
                        },
                        series: [{
                            field: "value",
                            colorField: "userColor"
                        }],
                        valueAxis: {
                            max: 28,
                            majorGridLines: {
                                visible: false
                            },
                            visible: false
                        },
                        categoryAxis: {
                            field: "day",
                            majorGridLines: {
                                visible: false
                            },
                            line: {
                                visible: false
                            }
                        }
                    });
                }
 
                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();
 
                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                         
                         $("#jayeshgoyani").bind("click", function(e) {
                            PerviousDate();
                        });
                         
                    }, 400);
                });
function PerviousDate() {
    window.print();
}

CSS
.MyCLass
    {
        color:Red;
    }

Please check attached image for more information.

Thanks,
Jayesh Goyani
Jayesh Goyani
Top achievements
Rank 2
 answered on 14 Jun 2013
2 answers
590 views
Hi,

 I have an editable grid showing data from DataSource and updating the backend with autosync. So far everything has gone quite smoothly and I'm generally pleased with Kendo grid filtering capabilities. I, however, have an issue with autosync. I want to disable some columns from autosync.

The simplified model of the grid is two columns, “word1” and “word2”. In addition to that, I will have several boolean columns that I use for filtering. I have several such boolean columns. Some of them are generated on the backend and some of them I want to modify on-the-fly in client.

One such filter is to flag rows that have the same value in columns “word1” and “word2”.

I have tested iterating over data and setting the boolean column. The current test code is as follows:

01.$("#test").click(function() {
02.    for (var i=0; i<DS.data().length; i++) {
03.        var row = DS.at(i);
04.        if(row.word1==row.word2) {
05.            console.log("Words are the same: "+row.word1+"=="+row.word2)
06.            row.set("ok", true);
07.        } else {
08.            console.log("Words are not the same: "+row.word1+"!="+row.word2)
09.            row.set("ok", false);
10.        }
11.    }
12.});
When I run the function, it updates the column as I want it to. But, here's the issue; it
sometimes generates a lot of traffic for the backend because many values in the boolean column might change. This is not wanted, since the boolean columns are only temporary for the user to get a glance at the data. Autosync should only track columns word1 and word2. The changes in other columns should go unnoticed by autosync.

Finally, my two questions:

1) Is there a way to define which fields are monitored by autosync?

2) Is there a way to define which fields are sent to backend after editing? I do not need the contents of temporary boolean columns on the backend, so when user changes, say, word1, I am only interested in getting values of word1 and word2, not the other columns.
ICT
Top achievements
Rank 1
 answered on 14 Jun 2013
2 answers
225 views
I've customized the look of the splitter a bit to match some UI mockups I am designing against. I've avoided margin/border/padding on k-pane elements at all costs. However, I am revisiting the issue and am wondering if anyone has any tips to correct the current problem I'm facing.

Currently, I draw the borders and apply margin to an element within the k-pane. The best I can make things look is this: http://i.imgur.com/LUvaJff.png 

I want the border outside the scrollbar. But I also want the scrollbar to be generated by the splitter and not defined by an element nested inside of it. Like this: http://i.imgur.com/PkpyfMe.png

Help/tips are appreciated.
Dimo
Telerik team
 answered on 14 Jun 2013
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)
SPA
Filter
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
OrgChart
TextBox
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
Popover
DockManager
FloatingActionButton
TaskBoard
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
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
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?