Telerik Forums
Kendo UI for jQuery Forum
3 answers
210 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
129 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
289 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
429 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
336 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
581 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
218 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
1 answer
141 views
I am attempting to load a file with ajax. Once the content is loaded, I want to impose the kendoComboBox() function to all items that are classed as "drop-list" 
Just with this code (I can supply more if necessary) are there any errors you see?
Below is the javascript that pull the .htm (below the first block of code)
Grid and Chart are able to activate.
The combo box doesn't, nor does date-range,
if ($(e.target).parent().hasClass('hb-hasView') ){
            hb.addTab({text:$(e.target).text(),content:'<br>'});
            var view = 'views/'+$(e.target).parent().attr('hb-view')+".htm";
             
            $.ajax({url: view})
            .success(function(html){
                $('#tabSet div:last-child').append(html);
                $('#tabSet div:last-child').children().each(function(){
                    var $this = $(this);
                    if ( is('drop-list') ){
                        $this.kendoComboBox();
                    }
                    if ( is('date-range') ){
                        $this.kendoDateTimePicker();
                    }
                    if ( is('grid') ){
                        $this.kendoGrid();
                    }
                    if ( is('chart') ){
                        $this.kendoChart();
                    }
                    function is(DOMclass){
                        return $this.hasClass(DOMclass);
                    }
                });
            });
        }
<form>
    <div>
        Start Time<input class="start date-range" value="10/10/2011" hb-for="*"/>
        End Time<input class="end date-range" value="10/10/2011" hb-for="*"/>
    </div>
    <div class="search-button"><input type="submit" value="Search" hb-for="*"/></div>
    <div class="search-button"><input type="submit" value="Reset" hb-for="*"/></div>
    <details id="aopt-title">
        <summary>Advanced Options</summary>
        <div id="advanced-options">
            <label class="ddl1">
                <div>Purchase Type:</div>
                <select id="test1234" class="drop-list" hb-for="*">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2 ">
                <div>Channel:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl3">
                <div>Order Conf:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl1">
                <div>Skills:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2">
                <div>Contact Center:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl3">
                <div>Iconic/.com:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl1">
                <div>Operator:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl2">
                <div>Page Size:</div>
                <select class="drop-list" hb-for="">
                    <option>************</option>
                    <option>************</option>
                    <option>************</option>
                </select>
            </label>
            <label class="ddl4">
                <div>Survey Question:</div>
                <select class="drop-list" hb-for="">
                    <option>************************************************</option>
                    <option>************************************************</option>
                    <option>************************************************</option>
                </select>
            </label>
        </div>
    </details>
</form>
<div class="data-portion">
    <div id="grid" class="grid"></div>
    <div id="chart" class="chart"></div>
</div>
Alexander Valchev
Telerik team
 answered on 14 Jun 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?