Hi, Can anyone please let me know how can I define schema: total when I have the following JSON data coming from a web service: (want to implement server paging)

Hello,

I am using Kendo data viz diagram in MVC application.There i m getting some issues with its behavior in different browsers.

My dataviz diagram contains hierarchy till 7 levels.In Mozilla Its properly visible in "SVGROOT" container but on IE and chrome i am getting below issues :
1. In IE instead of using the whole container its getting shrink and displayed in the middle of the container.
2. In Chrome instead of using container with fixed height and width, its expanding the container vertically and horizontally and to view the chart we have to scroll till end of the page.

I guess its related to SVG but didn't get any workaround on this.

Another issue is with its performance.In Mozilla its taking 5-6 seconds but  its too slow to draw the chart in IE and chrome.

Please let us know if any solution is there . Its really urgent .

Thanks and Regards

For NumericTextBox configuration of "format",
 the total documentaton is:
"Specifies the format of the number. Any valid number format is allowed."
This is useless.

Hi I have my objects defined as below on server. I am just looking for how to define schema ,model and fields for below objects.





//getting error with unable to get value of property for below popup template for writer drop down .
//writer is Drop Down to select Writer and bind text and value fields as separate columns in agentwriter Grid


Please let me know any info required.

Thanks
Chatrapathi chennam

I got a grid calling a template and my problem is that make changes to the collection in my template and the view get update but I doesn't go the the database and update my changes, only update if I modify in the input tags. To Edit my collection and I'm calling another template. Please help

My Grid Code
~~~~~~~~~~~~~~~~~~~~~~~~~~
 @(Html.Kendo().Grid<Activity>().Name("grdAssistant").Columns(columns =>
      {
        
          columns.Bound(model => model.ActivityDescription).Title("Descripcion").Width(200);
          columns.Bound(model => model.ActivityDate).Title("Fecha").Format("{0:MM/dd/yyyy}");
          columns.Bound(model => model.ActivityHourFrom).Title("Entrada").Format("{0:hh:mm tt}").EditorTemplateName("Time");
          columns.Bound(model => model.ActivityHourTo).Title("Salida").Format("{0:hh:mm tt}").EditorTemplateName("Time");
          columns.Bound(model => model.ActivityPersons).Title("Personas").ClientTemplate("#=proPersons(ActivityPersons)#").Encoded(false);
          columns.Command(command => { command.Edit().Text("Editar").UpdateText("Guardar").CancelText("Cancelar"); command.Destroy().Text("Borrar"); }).Width(200);
      }).Pageable()
          .ToolBar(toolbar => toolbar.Create().Text("Añadir"))
          .Events(ev =>
          {
              ev.Edit("onEdit");
          }) 
          .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Activity").Window(t =>
          {
              t.Title("Actividad");
              t.Height(685);
              t.Width(630);
          })).DataSource(dataSource => dataSource.Ajax().Model(model =>
          {
              model.Id(p => p.ActivityId);
              model.Field(f => f.ActivityPersons).DefaultValue(new List<ActivityPerson>());
              model.Field(f => f.StatusId).DefaultValue("1");
          })
              .Events(ev =>
              {
                  ev.Change("onChange");
                  ev.RequestEnd("onRequestEnd");
              })
              .Read(read => read.Action("Activity_Read", "Registry"))
              .Update(update => update.Action("Activity_Update", "Registry"))
              .Destroy(update => update.Action("Activity_Destroy", "Registry"))
              .Create(create => create.Action("Activity_Create", "Registry")))
          )

</div>
<script>
    function onRequestEnd(ev) {
        
        if (ev.type == "update" || ev.type == "create") {

            $('#grdAssistant').data("kendoGrid").dataSource.read();
        };
    };
    function onChange(ev) {
        //debugger;
        
        //if (ev.action == "add") {
        //    var newItem = ev.items[0];


        //    viewModel.Activity = ko.mapping.fromJS(newItem);
        //    ko.applyBindings(viewModel);

        //}
    };
    function onEdit(e) {
        //$('#tblActivityPersons').data().kendoGrid.dataSource.data(e.model.ActivityPersons);
        
        e.container.data("kendoWindow").bind("close", function () {
            
        });
        e.container.data("kendoWindow").bind("activate", function () {
            //$('#grdActivityPersons').data("kendoGrid").dataSource.read();
        });
    }
    function proPersons(data) {
        var output = '<ul>';
        
        $(data).each(function() {
            output += "<li>" + this.ActivityPersonFirstName + " " + this.ActivityPersonLastName1 + " " + this.ActivityPersonLastName2 + "</li>";
        });
        output += '</ul>';
        var html = $(output).html();
        return output;
    }
</script>

My Template Code
~~~~~~~~~~~~

@model Activity

<div class="container">
    <div class="form-horizontal">
        @Html.HiddenFor(model => model.ActivityId)
        <h4>Informacion de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ProgramActivityId">Programa de Actividad </label>

            @Html.Kendo().DropDownListFor(model => model.ProgramActivityId).Name("ProgramActivityId").DataValueField("ProgramActivitiesId").DataTextField("ProgramActivitiesDescription").DataSource(
                dataSource => dataSource.Read(read => read.Action("ProgramActivity_Read", "Registry")))

        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ActivityDescription">Descripción </label>

            @Html.TextBoxFor(model => model.ActivityDescription, new { @class = "form-control k-textbox",style = "width: 300px;" })
        </div>
        <div class="form-group">
            <label class="control-label col-sm-4" for="StatusId">Estatus </label>
            @Html.Kendo().DropDownListFor(model => model.StatusId).Name("StatusId").DataValueField("StatusId").DataTextField("StatusDescription").DataSource(
                dataSource => dataSource.Read(read => read.Action("ActivityStatus_Read", "Registry"))
                )

        </div>
        <h4>Fecha de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-4" for="ActivityDate">Fecha </label>
            @Html.Kendo().DatePickerFor(model => model.ActivityDate).Name("ActivityDate")
        </div>
        <h4>Hora de la Actividad</h4>
        <div class="form-group">
            <label class="control-label col-sm-1" for="ActivityHourFrom">Desde </label>
            <div class="col-sm-3">
                @Html.Kendo().TimePickerFor(model => model.ActivityHourFrom).Name("ActivityHourFrom")
            </div>
            <label class="control-label col-sm-1" for="ActivityHourTo">Hasta </label>
            <div class="col-sm-4">
                @Html.Kendo().TimePickerFor(model => model.ActivityHourTo).Name("ActivityHourTo")
            </div>
        </div>
        <h4>Listado de Estudiantes</h4>

        @Html.Kendo().Window().Width(500).Height(275).Modal(true).Visible(false).Name("newPersonWin").Title("Estudiante")
        
        <script type="text/x-kendo-template" id="toolbarTemp">
            <a class="k-button" onclick="showPerson()">Añadir</a>
        </script>

            
        <div id="tblActivityPersons" data-bind="source: ActivityPersons"></div>
           
        <script id="row-template" type="text/x-kendo-template">
            <tr>
                <td>#= ActivityPersonFirstName # #= ActivityPersonLastName1# #= ActivityPersonLastName2#</td>
                <td data-bind="text: ActivityPersonPhone1"></td>
            </tr>
        </script>
            

    </div>


</div>

<script id="newPersonTemplate" type="text/x-kendo-template">
    <br />
    <div class="container" id="newPersonForm" >
        <div class="form-group">
            <input id="uid" data-bind="value: uid" hidden="hidden" type="text" />
            <input id="ActivityPersonId" data-bind="value: ActivityPersonId" hidden="hidden" type="text" />
            <input data-bind="value: ActivityPersonFirstName" class="k-textbox" id="ActivityPersonFirstName" name="ActivityPersonFirstName" placeholder="Nombre" required="required" style="text-transform:capitalize;" type="text" />
            <input data-bind="value: ActivityPersonInitName" class="k-textbox" id="ActivityPersonInitName" name="ActivityPersonInitName" placeholder="Inicial" style="text-transform:capitalize;" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value:ActivityPersonLastName1" class="k-textbox" id="ActivityPersonLastName1" name="ActivityPersonLastName1" placeholder="Apellido P" required="required" style="text-transform:capitalize;" type="text" value="" />
            <input data-bind="value:ActivityPersonLastName2" class="k-textbox" id="ActivityPersonLastName2" name="ActivityPersonLastName2" placeholder="Apellido M" required="required" style="text-transform:capitalize;" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value: ActivityPersonPhone1" class="k-textbox" id="ActivityPersonPhone1" name="ActivityPersonPhone1" placeholder="Telefono 1" required="required" type="text" value="" />
            <input data-bind="value: ActivityPersonPhone2 " class="k-textbox" id="ActivityPersonPhone2" name="ActivityPersonPhone2" placeholder="Telefono 2" type="text" value="" />
        </div>
        <div class="form-group">

            <input data-bind="value: ActivityPersonSocSec" class="k-textbox" id="ActivityPersonSocSec" name="ActivityPersonSocSec" placeholder="Seguro Social" required="required" type="text" value="" />
        </div>
        <div class="form-group">

            <a id="btnSometer" onclick="someter()" class="btn btn-primary">Someter</a>
            <a id="btnCancelar" onclick="cancelar()" class="btn btn-warning">Cancelar</a>
        </div>
    </div>


</script>
<script>

function getId() {
    var id = $("#ActivityId").val();
    return { id: id };
};


function showPerson() {

    var win = $("#newPersonWin").data("kendoWindow");
    var template = kendo.template($("#newPersonTemplate").html());
    $("#newPersonWin").data("kendoWindow").content(template({}));

    win.open().center();
}



function editarPersona(e) {
    e.preventDefault();

    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));



    var viewModel = kendo.observable(dataItem);
    var win = $("#newPersonWin").data("kendoWindow");
    var template = kendo.template($("#newPersonTemplate").html());
    $("#newPersonWin").data("kendoWindow").content(template({}));
    win.open().center();
    kendo.bind($("#newPersonForm"), viewModel);

};

$(function () {
    $("#tblActivityPersons").kendoGrid({
        pageable: {
            pageSize: 3
        },
        toolbar: [
            {
                template: $("#toolbarTemp").html()
            }
        ],
        columns: [
        {
            field: "ActivityPersonFirstName",
            title: "Nombre",
            template: "#: ActivityPersonFirstName# #: ActivityPersonLastName1# #: ActivityPersonLastName2#"
        },
        {
            field: "ActivityPersonPhone1",
            title: "Telefono1"
        },
        {
            command: [{text: "Editar", click: editarPersona },
            "destroy"]
}]

    });
});


function someter() {

    var activityPersonFirstName = $("#ActivityPersonFirstName").val();
    var activityPersonInitName = $("#ActivityPersonInitName").val();
    var activityPersonLastName1 = $("#ActivityPersonLastName1").val();
    var activityPersonLastName2 = $("#ActivityPersonLastName2").val();
    var activityPersonPhone1 = $("#ActivityPersonPhone1").val();
    var activityPersonPhone2 = $("#ActivityPersonPhone2").val();
    var activityPersonSocSec = $("#ActivityPersonSocSec").val();
    var activityId = $("#ActivityId").val();
    var activityPersonId = $("#ActivityPersonId").val();
    var uid = $("#uid").val();

    var activityPerson = new Object();
    activityPerson.ActivityPersonFirstName = ucFirstAllWords(activityPersonFirstName);
    activityPerson.ActivityPersonInitName = activityPersonInitName;
    activityPerson.ActivityPersonLastName1 = ucFirstAllWords(activityPersonLastName1);
    activityPerson.ActivityPersonLastName2 = ucFirstAllWords(activityPersonLastName2);
    activityPerson.ActivityPersonPhone1 = activityPersonPhone1;
    activityPerson.ActivityPersonPhone2 = activityPersonPhone2;
    activityPerson.ActivityPersonSocSec = activityPersonSocSec;
    activityPerson.ActivityId = activityId;
    activityPerson.ActivityPersonId = activityPersonId;

    var url = '@Url.Action("ActivityPerson_Create", "Registry", new {id = "_Id"} )'.replace("_Id", activityId);

    var isValidForm = $("#newPersonForm").kendoValidator({
        messages: {
            rules1: "Require tamaño de 9",
            rules2: "Require tamaño de 10",
            required: "Requerido"
        },
        rules: {
            rules1: function (input) {
                if (input.is("[name=ActivityPersonSocSec]")) {
                    return input.val().length === 9;
                }
                return true;
            },
            rules2: function (input) {
                if (input.is("[name=ActivityPersonPhone1]")) {
                    return input.val().length === 10;
                }
                return true;
            }

        }
    }).data("kendoValidator");

    if (isValidForm.validate()) {

        var ds = $("#tblActivityPersons").data("kendoGrid").dataSource;
        var rows = ds.data();
        if (uid != "")
        {
            var item = ds.getByUid(uid);

            item.set("ActivityPersonFirstName", activityPerson.ActivityPersonFirstName);
            item.set("ActivityPersonInitName", activityPerson.ActivityPersonInitName);
            item.set("ActivityPersonLastName1", activityPerson.ActivityPersonLastName1);
            item.set("ActivityPersonLastName2", activityPerson.ActivityPersonLastName2);
            item.set("ActivityPersonPhone1", activityPerson.ActivityPersonPhone1);
            item.set("ActivityPersonPhone2", activityPerson.ActivityPersonPhone2);
            item.set("ActivityPersonSocSec", activityPerson.ActivityPersonSocSec);
            ds.sync();


        } else {
            activityPerson.ActivityPersonId = 0;
            rows.push(activityPerson);
        }

        $("#newPersonWin").data("kendoWindow").close();

    }

};

function cancelar() {
    $("#tblActivityPersons").data("kendoGrid").dataSource.cancelChanges();
    $("#tblActivityPersons").data("kendoGrid").dataSource.refresh();

    var win = $("#newPersonWin").data("kendoWindow");
    win.close();
};

</script>

I'm using 2014.1.415, and noticed a (possibly new?) bug in how zeros are treated when the 'axisCrossingValue' is not set to zero.  It appears that zero values are always plotted directly on the value axis, even if the axis isn't crossing at zero.

I've attached two screenshots, the data goes from zero to 100, and is displayed correctly when the axisCrossingValue:0.  But if I move the axis to the top of the chart, axisCrossingValue:100, then all of the zeros are plotted along a straight line with the 100, which makes it look like they're all 100's across the chart.

Hello,

I have a datepicker with a dates array and a content template (not shown). When the date is changed I read a datasource and later open a window with this data. I want to able to open this window for a date every time I select a date from the picker not just when the value is changed via the "Change" event. I know the Kendo datepicker doesn't support a "Select" event like the Kendo Combobox but is there anyway of attaching an event listener to listen for date selection even if it is the same date as already stored in the datepicker? 


Also any explanation why the datepicker doesn't support the "Select" event?

Hi,

We have a grid and have detail Row. In the detail Row Template, we have a few text boxes, labels and "Submit"/ "Cancel" button. We wish to collapse the detail row on the click of Cancel button. On Submit, we perform certain operation and refresh the grid which automatically collapses the child band (i.e. detail row).

Can you please let us know how shall we collapse the row on click of Cancel button which is present in the child band.

Please let me know if you need more information.

Thanks!

Hi,

It seems like the width property of TextBlock isn't working. I have it set to a value of "80" but the text value is not truncating at this width and is instead overflowing to show the full text.

Is this a bug?

Thanks,
Gary

Hi, 

I would like to drag an element external from a Sortable and have it inject the Hint instead of the actual element.  I don't want the current element to be injected but a sub-element to be injected into the Sortable object.

How does this work?  I know that jQuery UI supports this but I want to stick with KendoUI.