How do I debug a source binding that isn't working?

I know i have an ObservableArray that I know exists and has data because if I for loop over it then data shows up

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

 # for(var i=0; i < Waypoints.length; i++){ #
            <div style="color:#:Waypoints[i].FontColor #;margin-bottom:10px;background-color:#:Waypoints[i].BackgroundColor #">
                <div>
                    <div>#= Waypoints[i].description #</div>
                </div>
            </div>
            # } #

//But if I try to use a template for the array then it doesn't work

<script id="tripEventTemplate" type="text/x-kendo-template">
            <div data-template="tripWaypointCalendarTemplate"
                 data-bind="source: Waypoints">
            </div>

<script id="tripWaypointCalendarTemplate" type="text/x-kendo-template">
        <div style="color:#:FontColor #;margin-bottom:10px;background-color:#:BackgroundColor #">
            <div>
                <div>#:description #</div>
            </div>
        </div>
    </script>

Hi.

I have a problem: tooltip's background color in charts was missing. I tried to fix this but one color for all tooltip bg does not suit. It is necessary that backgorund color coincides with the color of the graphic

Can you tell me please how to fix this?

Hello All,

I have a Kendo Grid that has a Kendo upload inside of a column. I am currently getting the byte array of an image uploaded thru the Kendo Upload control but having difficulty passing that back to the Kendo Gird so it can add it to its model and  call then .Update method from its controller once the update button from the Kendo Grid is pressed.

My Editor template is returning a byte array I am having trouble getting the Kendo grid to recieve this data and add it to its model before it calls the .Update Method from my controller... Currently the grid calls .Update but the field where the byte[] should be set to is null. 

Please let me know if I should attach more code and how I can resolve this issue, Thanks In advance!

Grid 

EditorTemplate:

SaveImageFunction:

Hi there,

I'm having trouble with a Kendo grid resizing.  Basically, the content is extending beyond the width of my table, when the content should be wrapping instead.  I've added a screenshot to try and display the issue - the 'Description' column should be wrapping but instead isn't and the table content therefore is going beyond the width of the div the table sits in.  Furthermore, using the debug tools in Chrome shows that the table itself is positioned correctly, but it's the th and td cells which are displaying outside of the table area (hopefully the screenshot demonstrates that too).  The code I am using in my view is fairly basic :-

Html.Kendo().Grid((IEnumerable<TEAMSPortalV2.Models.SampleComputedDataViewModel>)ViewData["samples"]) // Bind the grid to the Model property of the view
            .Name("ItemsByRiskSamples")
            .Sortable()
            .Columns(columns =>
            {
                columns.Bound(s => s.BuildingDesignation).Title("Building");
                columns.Bound(s => s.FloorNoConverted).Title("Floor");
                columns.Bound(s => s.RoomDescription).Title("Room");
                columns.Bound(s => s.RegisterItemNo).Title("Item No.");
                columns.Bound(s => s.SampleRef).Title("Sample Ref.").Width(40);
                columns.Bound(s => s.SourceDescription).Title("Description");
                columns.Bound(s => s.AsbestosType);
                columns.Bound(s => s.MaterialAssessmentScoreString).Title("MA Score").Width(40);
                columns.Bound(s => s.PriorityAssessmentScore).Title("PA Score").Width(40);
                columns.Bound(s => s.RiskScore).ClientTemplate("<span bgcol='#= RiskScoreGroupColour#'>#= RiskScoreString#</span>").Width(40);
                columns.Bound(s => s.RecommendedAction).Title("Rec. Action").ClientTemplate("<span bgcol='#= RecommendedActionColour#'>#= RecommendedAction#</span>");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
            )
            .Events(e => e.DataBound("itemBackColours"))

I've played around with it and by adding a width property to other columns sometimes rectifies the problem (but not always at smaller resolutions) seemingly randomly.  That said, I don't want to specify column widths - I'd rather let the browser display the content as efficiently as possible as per normal HTML table behaviour.  I also noticed that at wider resolutions it often seems to snap into the correct widths - which seems to suggest thast Bootstrap is involved somehow (my site has got Bootstrap installed).

Please could you assist and give me some suggestions of what I can try to rectify this issue.

Thanks, Mark

Hello,

I'm looking for a way to change the text of a toolbar button. I was hoping the following would work:

Unfortunately, that also replaces the ImageUrl. Can you please tell me a supported way of changing the text?

Hello,

I am having issues trying to get a validation to fire off on one of the fields of my data grid. This is the JSFiddle that is essentially what I've got so far:

https://jsfiddle.net/qct05yvy/24/

The title column has a validation that it is < 50 characters. This is correctly firing if I add that amount of characters.
The Start Date/End Date column have an on change function that gets the time (in days) between the two using momentjs and then it updates the Duration column. The issue is that it allows a negative duration (meaning you set the end date to a date before the start date) and causes some issues with the calculation I do on the backend.

I can prevent the user from submitting it to the backend by changing the update method in the datasource, but then I can't throw an error message like the one that happens when you add > 50 characters in the Title field (no, a Javascript alert will not work in my case unfortunately).

I need to be able to either make this validation actually fire correctly and correctly display the message or be able to prevent the user from selecting a date before the startDate DatePicker (which I spent several hours researching and found no way to do this programatically. I know I can set the Min, but how do I re-set the Min whenever they select a new startDate?).

Can anyone help me out? Thank you for your time!

-Ken

Hello,

   I am having three issues with a modal pop up window.  The first is the most annoying one, periodically I will get the following message when I hit a button to open the window. 

Line: 82
Error: Unable to get property 'center' of undefined or null reference

    Now if I switch the center to after open it then gives me the same error with open instead of center.  Then if I switch them back it works perfectly fine.  Here is the code from the page to show you what I mean:

<br />
@(Html.Kendo().Window()
.Name("SelectD")
.Title("Select a Charcter")
.Content("Loading information.....")
.LoadContentFrom("Index", "Characters")
.Modal(true)
.Visible(false)
.Width(500)
.AutoFocus(true))
<span id="selD" class="btn btn-default">Delete Character</span>
<script>
$(document).ready(function () {
$("#selD")
.bind("click", function () {
$("#SelectD").data("kendoWindow").center().open();
});
});
</script>

  I have the above in two places with only the id and name being different between the two, they both reference the same partialview.  It is annoying because I do not know when it will break on me.

The second issue is closing this modal window.  I have a select and a cancel button defined in the partialview.  The code is as follows:

<script>
$('#SelChar').click(function (e)
{
e.preventDefault();
window.top.location.replace = '@Url.Action("Edit", "Characters")' + '?id=' + $('#Char_ID').val();
window.close();
});
</script>
<a id="SelClose" class="btn btn-danger">Cancel</a>
<script>
$('#SelClose').click(function ()
{
window.close();
});
</script>

    Now the SelChar script works perfectly fine, it closes the modal window and navigates to the proper page.  The SelClose does not, it closes out all windows.  How do I get it to close only the modal window?

   The last issue is without using iframes, how do I get the background of the modal window to be the color I am looking for?  In my partialview the body tag has a style of background-color:grey, but all I get is a white background.  When I had iframes I would get the background color, but I was also getting the navbar which I did not want.