Questions on Kendo UI for jQuery Forum

3 answers

149 views

I have some working code which I am trying to convert to use the MVVM pattern. My code looks like the following:

To start with, I have a div tag like the following:

My template looks like the following:

Finally the following script provides data to the template:

display();
</script>

When I run, the output shows the numbers 1.2, 2.3 and 3.4 in 3 inputboxes (each of which appears in 3 separate <td> tags) against a label, like the following:

My Numbers: 1.2 2.3 3.4

I have been trying to convert the above code to an MVVM pattern, but somewhy not getting it right. Could someone please guide me how to do this correctly?

MVVM

answered on 04 Dec 2012

1 answer

222 views

[Solved] MVC Client binding - data present but not displaying

Hello, just checking out the Kendo UI suite via different binding methods and coming across this issue. When binding via the client side, it appears the JSON data is being correctly passed to the grid, but the data is not displaying within the grid.

@(Html.Kendo().Grid(Model.Companies)

.Name("ClientBindGrid")

.Columns(columns =>

{

columns.Bound(c => c.CompanyName);

columns.Bound(c => c.State);

})

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false) // paging, sorting, filtering and grouping will be applied client-side

.Read(read => read.Action("GetCompanies", "ManageCompanies", new { area = "api" }))

)

And here is what you see in the generate HTML:

<div class="k-widget k-grid" id="ClientBindGrid"><div class="k-grouping-header">Drag a column header and drop it here to group by that column</div><div class="k-grid-header"><div class="k-grid-header-wrap"><table cellspacing="0"><colgroup><col /><col /></colgroup><tr><th class="k-header k-filterable" data-field="CompanyName" data-title="Company Name" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="http://localhost:2337/CompanyMgmt/ManageCompanies">Company Name</a></th><th class="k-header k-filterable" data-field="State" data-title="State" scope="col"><a class="k-grid-filter"><span class="k-icon k-filter"></span></a><a class="k-link" href="http://localhost:2337/CompanyMgmt/ManageCompanies">State</a></th></tr></table></div></div><div class="k-grid-content" style="height:200px"><table cellspacing="0"><colgroup><col /><col /></colgroup><tbody><tr><td>H&H</td><td>CO</td></tr><tr class="k-alt"><td>H&H3333</td><td>CO</td></tr></tbody></table></div><div class="k-pager-wrap k-grid-pager"><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the first page"><span class="k-icon k-i-seek-w">seek-w</span></a><a class="k-link k-state-disabled" data-page="0" href="#" title="Go to the previous page"><span class="k-icon k-i-arrow-w">arrow-w</span></a><ul class="k-pager-numbers k-reset"><li><span class="k-state-selected" data-page="1">1</span></li></ul><a class="k-link k-state-disabled" data-page="2" href="#" title="Go to the next page"><span class="k-icon k-i-arrow-e">arrow-e</span></a><a class="k-link k-state-disabled" data-page="1" href="#" title="Go to the last page"><span class="k-icon k-i-seek-e">seek-e</span></a><span class="k-pager-info k-label">1 - 2 of 2 items</span></div></div><script>

jQuery(function(){jQuery("#ClientBindGrid").kendoGrid({"columns":[{"title":"Company Name","field":"CompanyName","encoded":true},{"title":"State","field":"State","encoded":true}],"groupable":{},"pageable":{"buttonCount":10},"sortable":true,"filterable":true,"dataSource":{"transport":{"read":{"url":""}},"pageSize":10,"page":1,"total":2,"type":"aspnetmvc-ajax","schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"CompanyID":{"type":"number"},"CompanyName":{"type":"string"},"Address1":{"type":"string"},"Address2":{"type":"string"},"City":{"type":"string"},"State":{"type":"string"},"PostalCode":{"type":"string"},"ItemMargin":{"type":"number"},"ServicesMargin":{"type":"number"},"InvoiceTimeIncrement":{"type":"number"},"CashDiscountPct":{"type":"number"},"BaseServiceHourlyRate":{"type":"number"},"HourlyPremiumRush":{"type":"number"},"HourlyPremiumLate":{"type":"number"},"HourlyPremiumCustomerMaterial":{"type":"number"},"CreatedByID":{"type":"number"},"CreatedOn":{"type":"date"},"ModifiedBy":{"type":"number"},"ModifiedOn":{"type":"date"},"UserProfile":{"type":"object"},"UserProfile1":{"type":"object"},"FullAddress":{"editable":false,"type":"string"}}}},"data":{"Data":[{"CompanyID":2,"CompanyName":"H\u0026H","Address1":"123 Mockinbird Lane","Address2":null,"City":"Denver","State":"CO","PostalCode":"12345","ItemMargin":0,"ServicesMargin":0,"InvoiceTimeIncrement":0,"CashDiscountPct":0,"BaseServiceHourlyRate":0,"HourlyPremiumRush":0,"HourlyPremiumLate":0,"HourlyPremiumCustomerMaterial":0,"CreatedByID":0,"CreatedOn":"\/Date(-62135571600000)\/","ModifiedBy":0,"ModifiedOn":"\/Date(-62135571600000)\/","UserProfile":null,"UserProfile1":null,"FullAddress":"Denver, CO 12345"},{"CompanyID":3,"CompanyName":"H\u0026H3333","Address1":"123 Mockinbird Lane","Address2":null,"City":"Denver","State":"CO","PostalCode":"12345","ItemMargin":0,"ServicesMargin":0,"InvoiceTimeIncrement":0,"CashDiscountPct":0,"BaseServiceHourlyRate":0,"HourlyPremiumRush":0,"HourlyPremiumLate":0,"HourlyPremiumCustomerMaterial":0,"CreatedByID":0,"CreatedOn":"\/Date(-62135571600000)\/","ModifiedBy":0,"ModifiedOn":"\/Date(-62135571600000)\/","UserProfile":null,"UserProfile1":null,"FullAddress":"Denver, CO 12345"}],"Total":2}}});});

</script>

You can see the data is populated above, but the grid has no rows. So it seems this binding event is not being fired?

Grid

answered on 04 Dec 2012

1 answer

1.6K+ views

Paging issue when clicking on 'next page' and 'last page' buttons, numbered pages ok

Hi,

I am taking over some work from another developer. He got the grid working - I am looking to extend it. I added a textbox and a button just below the grid. The purpose of this is to allow the user to pull more data from the database (on page load it loads 10 rows). This works (say the user enters in 100 and clicks the button) - when the page buttons with the numbers on it are used. When the next page, previous page, last page, first page buttons are used then the page just shows the original 10 rows.

Below is simplified code of what I am using. Using asp.net, jQuery 1.8.2, jQuery UI 1.9.1, Kendo UI v2012.3.1114.

Thanks,
Ryan

<script type="text/javascript">

$(document).ready(function()

{

GetData();

});

function GetData()

{

var Num = parseInt(document.getElementById("txt_Rows").value);

$.ajax({

type: "POST",

url: "UserActions.aspx/Method",

data: "{'Number' : " + Num + "}",

contentType: "application/json; charset=utf-8",

dataType: "json",

error: function(xhr, status) {

alert(status + " - " + xhr.responseText);

},

success: function(msg) {

$("#Grid").kendoGrid({

dataSource: { data: msg.d, pageSize: 10,

schema: {

model:

{

fields:

{

Column1: { type: "string" }

}

},

height: 400,

scrollable: true,

sortable: false,

pageable: true,

resizable: true,

columns: [

{ field: "Column1", title: "Column1"}

]

});

}

});

}

</script>

<div id="Grid">

</div>

<div align="right">

<asp:TextBox ID="txt_Rows" runat="server" Text="10" Width="40px" MaxLength="4"></asp:TextBox>

<input id="btn_LoadData" type="button" value="Load" onclick="GetData();return false;" />

</div>

[System.Web.Services.WebMethod]

public static List<Data> Method(int Number)

{

// Get data from database

List<Data> DataList = new List<Data>();

// Load data into list - create new instance of class Data

return DataList;

}

public class Data

{

public string Column1 { get; set; }

}

Grid

answered on 04 Dec 2012

1 answer

105 views

Individual pieces and their dependencies?

I am interested in using only the splitter for a particular project. The download contains individual files for each component. How do I know what the dependencies for a particular widget are to get only the minimum required up and running?

General Discussions

answered on 04 Dec 2012

1 answer

308 views

Splitter with Grid content

Hi all,

I have this problem in splitter and grid ui, my splitter have two panes, left side is a list in Grid ui and right side is the detail view. i want to click the row in the grid and of course there's an id on it, i want to reload the right side pane of splitter with the parameters id in the left side pane.

Right now i already get the id and the problem is whenever i access the splitter its always says undefined.

Can anyone tell me how to do it? I'm new to this Kendo UI and love this thing.

Please refer to my code below.

<div class="k-content">

<div id="tabs">

<ul>

<li class="k-state-active">AREA</li>

</ul>

<div>

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

</div>

<script type="text/javascript">

$().ready(function() {

$("#tabs").kendoTabStrip();

var baseUrl = "<?php echo $this->baseUrl();?>";

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: baseUrl + "/Maintenance/Area/json",

dataType: "json"

}

},

batch: true,

pageSize:20,

schema: {

model: {

id: "area_id",

fields: {

area_id: {editable:false, nullable:true},

area_code: {type:"string"},

area_desc: {type:"string"}

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

navigatable: true,

pageable:true,

height:400,

columns: [

{field:"area_code", title:"CODE"},

{field:"area_desc", title:"DESCRIPTION"}

],

selectable: "row",

change: onSelect

});

function onSelect(e) {

var id;

var splitter = $("#splitter").data("kendoSplitter");

splitter.ajaxRequest("#detail", baseUrl + "/Maintenance/Area/detail", {id: 8});

var selected = $.map(this.select(), function(item) {

id = $(item ).attr('data-id');

//return $(item).text();

});

alert(id);

//loadPaneDetail(id);

}

});

</script>

Thank you.

Splitter

answered on 03 Dec 2012

1 answer

285 views

How to make combo box multiple choice

Hi i want to make combo box for multiple choice, so i can chose many item on that combo box

thank you

ComboBox

answered on 03 Dec 2012

3 answers

603 views

Kendo Window not working

Hi Kendo Team,

After I upgraded to 2012.3.1121 build, the window stopped working. i checked in chrome and it is due to the html 5 syntax that you have put in

-webkit-transform: scale(0.01);

Please see the attached picture file.

This is my code to open the window.

<script type="text/javascript" language="javascript">

function WorkshopSettingsSuccess() {

$('#WorkshopSettings').data('kendoWindow').refresh();

$('#WorkshopSettings').data('kendoWindow').center().open();

};

</script>

<div id="menu_WorkshopList" class="menu2">

<ul id="menuworkshop">

<li>@Html.ActionLink("Add Job", "Index", "Home") </li>

<li id="menu_Settings">

@Ajax.ActionLink("Settings", "WorkshopSettings", "RepairAndMaintenanceSettings",

new AjaxOptions

{

UpdateTargetId = "WorkshopSettings",

InsertionMode = InsertionMode.Replace,

HttpMethod = "GET",

OnSuccess = "WorkshopSettingsSuccess"

})

</li>

</ul>

</div>

<div id="workshopFilterBucket">

@{Html.RenderAction("WorkshopFilter", "RepairAndMaintenanceList", new { filterMode = "1" });}

</div>

<div id="workshopbucket">

@{Html.RenderPartial("RepairAndMaintenanceList/_WorkshopJobList");}

</div>

@{Html.Kendo().Window()

.Name("WorkshopSettings")

.Title("Settings")

.Draggable(true)

.Visible(false)

.Modal(true)

.Height(300)

.Width(1200)

.Content(@<text>

<div id="WorkshopSettings">

</div>

</text>)

.Render();

}

Please let me know how to fix it.

Thank you

Window

answered on 03 Dec 2012

5 answers

354 views

That space to the right of the last item...

All of the menu demos show the menu in full width with a blank spot to the right of the last menu item. I want to shrink the size of my menu down and float it right but I can NOT get rid of that space, is there a way to make it go away?

Currently I have hid all the borders so it's not as noticeable but the gap over there is bigger than on the left.

Help?

Thanks in advance!

Menu

answered on 03 Dec 2012

1 answer

325 views

Autocomplete hidden

Hi,
I downloaded version version v2012.2.710 and built an application but i noticed a strange behaviour. I have the following setup:
1)main page that opens a kendo window(iframe:true) dfetails page
2)In the details page i have kendo splitter
3)Within a splitter i have a kendo autocomplete and a kendo dropdown.

scenarios
1)when details page is loaded and the first thing i do is typing in the autocomplete, the autocomplete sugestion window is hidden
2)when details page is loaded and i click first the dropdown and then type in the autocomplete, the autocomplete sugestion window is visible

If i open the window(iframe:false) or remove the splitters in the details page everything works ok.

AutoComplete

answered on 03 Dec 2012

1 answer

301 views

Filtering data in auto complete

Hi,

I am using auto complete for my search option. When data is entered in auto complete box it is filtered and data is shown but if i want to add another filter to it it is not working.
I am searching data from different categories based on dropdownlist.I want to add dropdown list data as the other filter.

Please help.

Regards,
Sam.

AutoComplete

answered on 03 Dec 2012