Questions on Kendo UI for jQuery Forum

1 answer

1,000 views

get kendo grid data from Database using ASP.NET

Hi,

I have a kendo grid in and aspx page that gets data from database. This data is pretty huge and will get bigger. Hence it is taking time. So I want to implement serverpaging and filtering logic here. Here is my code:

// aspx page code

var new_url = "/getdata.aspx?dt="+ date_passed

var data_source1 = new kendo.data.DataSource({

transport: {

read: {

url: new_url,

dataType: "json"

},

cache: true

},

pageSize: 100,

page: 1

});

var grid_updated = $("#gridAllRuns").kendoGrid({

dataSource: data_source1,

dataBound: onDataBound,

height: $(document).height() - 250,

groupable: true,

sortable: true,

columnMenu: true,

reorderable: true,

resizable: true,

pageable: {

refresh: true,

pageSizes: [100, 500, 1000],

pageSize: 100,

buttonCount: 10

},

filterable: {

extra: false,

operators: {

string: {

eq: "equal to",

startswith: "starts with",

neq: "not equal to"

}

},

toolbar: kendo.template($("#template").html()),

columns: [{ title: "Firstname", field: "fname"}, { title: "Lastname", field: "lname"}]

});

// getdata.aspx.vb code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim for_date As String = Request.QueryString("dt")

Dim get_data As String = "select fname, lname where dt_passed ='" & for_date & "' order by fname"

Dim url As String = HttpContext.Current.Request.Url.AbsoluteUri

Dim data As String = ""

Dim constr As String = constr

Dim connection As New MySqlConnection(constr)

connection.Open()

Dim command As New MySqlCommand(get_data, connection)

command.CommandType = System.Data.CommandType.Text

Dim da As New MySqlDataAdapter()

da.SelectCommand = command

Dim dt As New DataTable()

da.Fill(dt)

'Console.Write(GetJson(dt))

Response.Clear()

Response.ContentType = "application/json; charset=utf-8"

Response.Write(GetJson(dt))

Response.End()

end sub

Public Function GetJson(ByVal dt As DataTable) As String

Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()

serializer.MaxJsonLength = 107869240

Dim rows As New List(Of Dictionary(Of String, Object))()

Dim row As Dictionary(Of String, Object) = Nothing

For Each dr As DataRow In dt.Rows

row = New Dictionary(Of String, Object)()

For Each col As DataColumn In dt.Columns

row.Add(col.ColumnName.Trim(), dr(col))

Next

rows.Add(row)

Next

Return serializer.Serialize(rows)

End Function

I am returning everything at once. Is there any logic that I can perform serverpaging and serverfiltering while getting the data from database? Please help!!!

Grid

answered on 05 Jun 2014

1 answer

122 views

Change the default form of a grid

Hello,

I have a problem in my grid widget. In fact, I would like to know how change in a grid the default form which run with edit button (generated by the edit command), to a custom form.

I have tried to customize this by editable field with the template function, but where the template is store in an external file. Is it possible to addres this file in the template function ?

example : editable: {
mode: "popup",
template: kendo.template($("../../Views/Materiel/#popup-editor").html())
}

Best regards,

Kevin Quinton

Grid

answered on 05 Jun 2014

8 answers

1.5K+ views

Reset upload.

Is there any way to reset the upload form without the control firing the remove event on previously uploaded files?

Upload

answered on 05 Jun 2014

1 answer

125 views

Define schema: total when unknown count in json

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)

[

{

"fname": "john",

"lname": "Lane"

},

{

"fname": "Kim",

"lname": "William"

}............................// huge data

]

Grid

answered on 05 Jun 2014

5 answers

106 views

Kendo dataviz diagram behaviour on different browsers

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

Diagram

answered on 04 Jun 2014

6 answers

243 views

Where is documentation on "format"?

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

NumericTextBox

answered on 04 Jun 2014

1 answer

727 views

Grid Model and fields.

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.

public class AgentModel //shown in a agent Grid

{

public int AgentID { get; set; }

public string Name { get; set; } //column is shown in agent grid add/edit popup as a field on Tabstrip1

public StateModel State { get; set; } //similar to above field

public Boolean IsActive { get; set; } //similar to above field

public List<AgentWiterModel> AgentWiters { get; set; } // Shown in AgentWriter grid on Tabstrip2 when add/edit of master Agent grid.

}

public class AgentWriterModel

{

public int AgentID { get; set; } //read only

public string AgencyID { get; set; }

public WriterModel Writer { get; set; }

}

public class WriterModel

{

public int WriterID{get;set;} //want to bind this value on popup

public string Code{get;set;}

public string Name { get; set; } //want to bind and show on popup

public Boolean IsActive { get; set; }

}

schema: {

model: {

id: "AgentID",

Name: "Name",

State: "State",

IsActive: "IsActive",

AgentWiters: "AgentWiters",

fields: {

AgentID: { type: "int", validation: { required: true} },

Name: { type: "string", validation: { required: true} },

State: { defaultValue: { Value: "", Text: "" }, validation: { required: true} },

IsActive: { type: "boolean", defaultValue: true }

}

On Edit of above model in a agent grid ;will open a below model in a new grid .Which I am facing difficulty to map perfect data-model.

schema: {

model: {

id: "Writer.WriterID",

Writer:"Writer",

AgentID: "AgentID",

AgencyID: "AgencyID",

fields: {

WriterID: { type: "string", defaultValue: ""},

Writer: { defaultValue: { WriterID: "", Name: ""} },

AgentID: { type: "int" },

AgencyID: { type: "string", validation: { required: true} },

}

Here I want the Writer grid to map with

columns like Writer.WriterID ,Writer.Name and AgencyID to add or edit into Agentwriter Grid.



columns: [

             { field: "AgentID", title: "AgentID", hidden: true },

           //{ field: "Writer.WriterID", title: "WriterID", hidden: true },

             { field: "Writer.Name", title: "WriterName" },

             { field: "AgencyID", title: "Agency ID"},

             { field: "Writer.IsActive", title: "Status", hidden: true },

          ]

//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

<table

<tr>

<td>

<label for="Writer" class="required">Name * :</label>

</td>

<td>

<input id="Writer" name="Writer" data-bind="value:Writer" />

</td>

</tr>

<tr>

<td>

<label for="WriterID" class="required">Writer ID * :</label>

</td>

<td>

<input type="text" id="WriterID" class="k-input k-textbox" name="WriterID" data-bind="value:Writer.WriterID" />

</td>

</tr>

<tr>

<td>

<label for="AgencyID" class="required">Agency ID * :</label>

</td>

<td>

<input type="text" id="AgencyID" class="k-input k-textbox" name="AgencyID" data-bind="value:AgencyID" />

</td>

</tr

</table>

Please let me know any info required.

Thanks
Chatrapathi chennam

Grid

answered on 04 Jun 2014

1 answer

339 views

Not updating - MVC

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>

Grid

answered on 04 Jun 2014

2 answers

99 views

AxisCrossingValue Bug

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.

Charts

answered on 04 Jun 2014

1 answer

357 views

Select event for datepicker?

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?



$("#datepicker").kendoDatePicker({
                value: today,
                dates: previousEntries,
                month: {
                    content: ''
                },
                open: function (e) {
                    var datepicker = $("#datepicker").data("kendoDatePicker");
                    datepicker.dates = previousEntries.slice();
                },
                change: onDateChange
            });
 
function onDateChange(e) {
    document.getElementById("selectedDate").value = e.sender.value();
    if(isInArray(e.sender.value(), e.sender.dates)) {
        previousEntriesInfoDataSource.read();
    }
}

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

DatePicker

answered on 04 Jun 2014