Questions on Kendo UI for jQuery Forum

5 answers

324 views

FIXED: We have built our services to handle the filtering on the server side to limit the data that is sent down. Since I'm not use to the serverFiltering option on the dataSource I created my own issue. Once I switched that flag to true everything mapped correctly.

I'm switching from jQueryUI to KendoUI. I didn't have an issue mapping my json response from the server to the autocomplete response before. Now I can't seem to figure out how to map the json response in Kendo.

var group = $("#GroupCode");
group.kendoAutoComplete({
    minLength:3,
    dataTextField: "Code",
    dataSource: {
        type: "json",
        transport: {
            read: {
                url: '@Url.Action("GroupCodeListBySG", "Equipment")',
                type: "GET",
                dataType: "json",
                data: {
                    search: function() {
                        return group.val();
                    },
                    saleGroup: function() {
                        return $("#DivDrop option:selected").val();
                    }
                }
            }
        }
    }
});

That was just the basic data in which I send two variables to the server for the search. Below is an example of a json response.

[{"ExtensionData":{},"Code":"VEHICLES","DMFPercent":0,"Default_Excise_Tax":false,"Description":"VEHICLE ASSETS","Division":null,"IsActive":false,"IsAttachment":false,"JDUX_CatID":null,"JDUX_KeyCode":null,"RDOP_Agreement_MW":null,"RDOP_Agreement_NW":null,"RDOP_Agreement_SC":null,"RDOP_Agreement_SW":null,"RDOP_Facts_MW":null,"RDOP_Facts_NW":null,"RDOP_Facts_SC":null,"RDOP_Facts_SW":null,"Sales_Group":null,"Updated":"\/Date(-62135575200000)\/","Updated_By":null}]

I had it mapped to display display the Code + Description and map IsAttachment and Code field to some hidden data. Just trying to map the return data so I can see an autocomplete display isn't working. Would someone be able to give me an example on how I can map my return?

AutoComplete

answered on 27 Jul 2012

0 answers

163 views

Grid With DetailView just once open.

I use kendoGrid and change Event show detail view.
this code jues work just one time I don't know why.

my code is

<body>

            <div id="grid"></div>
            <div id="test"></div>

   <script type="text/x-kendo-template" id="template">
                <div class="toolbar">
                    <label class="category-label" for="category">joindate:</label>
     <input id="start">
     <input id="end">
     <button class="k-button" onclick="refreshGrid()" id="refresh">search</button>
     <button class="k-button" id="excel" onclick="excelGrid()" >excel</button>
                </div>
            </script>

            <script>
    function refreshGrid() {
     $("#grid").data("kendoGrid").dataSource.read();
    }

    function excelGrid(){

    var form = document.excel;
        form.command.value = "admin03_excel";
        form.start.value = $("#start").val();
        form.end.value = $("#end").val();
        form.action = "<%=RequestUtils.getPageLink(request,"/")%>ActAdmin.do";
        form.submit();

    }


    $(document).ready(function() {

                    $("#grid").kendoGrid({
                       dataSource: {
                              transport: {
        read: {
         url: "/ActAdmin.do?command=admin03_json",
         dataType: "json",
         data: { //additional parameters sent to the remote service
          start: function() {
           return $("#start").val();
          },
          end: function() {
           return $("#end").val();
          }
         }

         }
                              },
                              schema: {
        data: "rows",
        total: "total",
                                  model: {
                                      fields: {
                                          reg_date :{ type: "string" },
                                          usr_id :{ type: "string" },
                                          biz_name :{ type: "string" },
                                          biz_num :{ type: "string" },
                                          usr_name :{ type: "string" },
                                          reg_date :{ type: "string" },
                                          usr_hp :{ type: "string" }
                                      }
                                  }
                              },
                              pageSize: 15,
                              serverPaging: true,
                              serverSorting: true,
                              serverFiltering: true

                          },
                          height: 720,
                          filterable: true,
                          sortable: true,
                          pageable: true,
                          selectable: true,
        toolbar: kendo.template($("#template").html()),

          change: function(data){

          var text = "";
          var grid = this;

             grid.select().each(function() {
                var dataItem = grid.dataItem($(this));
                text = dataItem.usr_id;
                var window = $("#windowFacets");

                        if (startDate) {
                            startDate = new Date(startDate);
                            startDate.setDate(startDate.getDate() + 1);
                            end.min(startDate);
                        }
                    }

function endChange() {
var endDate = end.value();

                        if (endDate) {
                            endDate = new Date(endDate);
                            endDate.setDate(endDate.getDate() - 1);
                            start.max(endDate);
                        }
                    }

                    var start = $("#start").kendoDatePicker({
      value: "<%=(st_year+"-"+st_month+"-"+st_day)%>",
                        change: startChange,
      format: "yyyy-MM-dd"
                    }).data("kendoDatePicker");

                    var end = $("#end").kendoDatePicker({
      value: new Date(),
                        change: endChange,
      format: "yyyy-MM-dd"
                    }).data("kendoDatePicker");

                    start.max(end.value());
                    end.min(start.value());
                });
            </script>
        </div>

Grid

asked on 27 Jul 2012

2 answers

170 views

Selected Item - not recognizing

I have a grid with a local data array.
how can I do a row select on it?
Thanks-


                         $("#dataGrid").kendoGrid({
                             dataSource: {
                                data: customerData, // local array
                                schema: { model: {id: "CustomerPK"} },
                                group: [ { field: "CustomerType", dir: "asc" }]
                             },
                             groupable: true,
                             selectable: true,
                            change: function() {
                                var custID = this.select().data("id");
                                alert("Selected " + custID); // 'undefined'
                                }
                         });

Grid

answered on 26 Jul 2012

1 answer

190 views

MVC Grid does not return data

I am new to this but I can't seem to find the answer.

In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views. All works fine. The Index view returns hundreds of records.

2 problems: 1) When I try to use the Kendo Grid, 0 records are returned.
2) The GetCarriers method never seems to fire because I never hit the breakpoint.

Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController

public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
{
var carriers = carrierRepository.All; // <<<=== Never breaks here if I set the break point
DataSourceResult result = carriers.ToDataSourceResult(request);
return Json(result);
}

Replaced the code in my Index.cshtml

@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CarrierID);
columns.Bound(p => p.CarrierName);
})
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetCarriers", "Carriers")
))
)

Here is the Page Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]

</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Carriers">Carriers</a></li>
</ul>
</nav>
</header>
<section id="main">

<h2>Carriers</h2>

<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:

... omitted for brevity

{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>

Any ideas?
Thanks
P

Grid

answered on 26 Jul 2012

0 answers

95 views

Documentation error: .Sorting() -> .Sortable()

On page http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridSortSettingsBuilder, the API docs refer to the a .Sorting() method. The correct name of the method is Sortable().

Grid

asked on 26 Jul 2012

0 answers

113 views

Batch Editing a Grid

Hi,

I have services already developed to update, delete and add information. So I need know how can I discover the updated rows to implement myself a batch update. How can I do that ?

Thanks in advance

Grid

asked on 26 Jul 2012

1 answer

117 views

Copy excel cells to grid

Hi:

Is it possible to copy cells from excel back to the editable grid cells?

Thanks

Grid

answered on 26 Jul 2012

0 answers

366 views

Grid's k-grid-content div renders twice

The entire grid doesn't render twice. Just the content div. Also, the second content div contains an ajax loader that never goes away (See attached image).

Not sure what I'm doing incorrectly. I've tried removing the grid from the Panel Bar, but it hasn't made any difference yet.

I'm not sure if it's a library thing or some configuration issue. I had typed everything in plain jQuery, and that worked, but I have recently switched over to this format because I found it easier to write.

Info:
Kendo UI Version: kendoui.web.2012.2.710
Browser: Firefox - v15.0
OS: Windows 7
jQuery: Same version packaged with Kendo UI download

Thanks in advance!

@model Company.Domain.MVC.Models.ShipmentModel

@using Kendo.Mvc.UI

@{

Layout = "~/Views/Shared/_StandardLayout.cshtml";

ViewBag.Title = "Home";

}

<script type="text/javascript">

function QuoteItemGrid_ErrorHandler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

<div id="ShipmentForm">

@(Html.Kendo().PanelBar()

.Name("panelBar")

.ExpandMode(PanelBarExpandMode.Single)

.HtmlAttributes(new { style = "width:100%" })

.Items(panelBar =>

{

panelBar.Add().Text("Shipment Items")

.Expanded(true)

.Content(@<div>

@(Html.Kendo().Grid<Company.Domain.MVC.Models.ItemModel>()

.Name("QuoteItemGrid")

.Columns(columns =>

{

columns.Bound(i => i.FreightClass).Width(50);

columns.Bound(i => i.Length).Width(50);

columns.Bound(i => i.Width).Width(50);

columns.Bound(i => i.Height).Width(50);

columns.Bound(i => i.DimensionUnitOfMeasure).Width(50);

columns.Bound(i => i.QuantityValue).Width(50);

columns.Bound(i => i.QuantityUnitOfMeasure).Width(50);

columns.Bound(i => i.Weight).Width(50);

columns.Bound(i => i.WeightUnitOfMeasure).Width(50);

columns.Bound(i => i.NmfcCode).Width(50);

columns.Bound(i => i.ItemDescription).Width(50);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("QuoteItemGrid_ErrorHandler"))

.Model(model => model.Id(i => i.ItemID))

.Create(create => create.Action("CreateProducts", "Home"))

.Read(read => read.Action("GetProducts", "Home"))

.Update(update => update.Action("UpdateProducts", "Home"))

.Destroy(destroy => destroy.Action("DeleteProducts", "Home"))

)

</div>);

panelBar.Add().Text("Services")

.Content(@<div>Services here</div>);

panelBar.Add().Text("Address Information")

.Content(@<div style="margin-left:1%;">

HTML omitted for brevity

</div>);

panelBar.Add().Text("Miscellaneous")

.Content(@<div>

HTML omitted for brevity

</div>);

})

)

</div>

Grid

asked on 26 Jul 2012

0 answers

346 views

open Detail Template for the selected Row

Migrating from Telerik to Kendo Grid, Now Im having a problem auto-opening the detail template for the selected row within a grid...

See the following...

<script type="text/javascript">
function products_onRowSelect(e) {
collapseAll(e);
var grid = $("#Products").data("kendoGrid"),
row = grid.tbody.find(">tr.k-master-row k-state-selected");
if (row.has(".k-collapse").length) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
}
function collapseAll(e) {
var grid = $("#Products").data("kendoGrid");
var allMasterRows = grid.tbody.find('>tr.k-master-row');
//Loop through each row, if a row has a detail row following it then collapse that master row
for (var i = 0; i < allMasterRows.length; i++)
{
if (allMasterRows.eq(i).next('tr.k-detail-row').length > 0)
{
grid.collapseRow(allMasterRows.eq(i));
}
}
}
</script>

Runs without error, collapse all works fine, but the expand never happens... Breakpoint hits just fine, but the row doesnt expand through code, it does however if I click the expand icon within the grid, just the jScript function doesnt do it.. Any ideas?

Grid

asked on 26 Jul 2012

1 answer

573 views

Disable date tooltips/titles

When hovering over a date in the kendo calendar, a tooltip appears showing the full date. The calendar generates the following HTML:

<td><a class="k-link" href="#" data-value="2012/7/14" title="Tuesday, August 14, 2012">14</a></td>

If I use a template, it gets inserted inside the anchor link which is still subject to the tooltip/title. Here's the code generated using a template:

<td class=""><a class="k-link" href="#" data-value="2012/6/10" title="Tuesday, July 10, 2012">

<div title="" class="selectedDate">10</div>

</a></td>

I've tried to override the title by setting it to "" in my template but the browser just uses the outer title instead.

How can I disable the tooltip?

Calendar

answered on 26 Jul 2012