Questions on Kendo UI for jQuery Forum

1 answer

426 views

Dynamically Change widget Style attributes

I have browsed around and found several thread, concluding that style binding an kendo MVC widget is just not supported.

Example of style binding: $('#kendoWidgetID').attr("data-bind", "style : { backgroundColor : modelColorAttribute } ");

I have, however, been unable to determine the following.

1: Is it in the works? Or will it be?

2: If style binding is not supported on kendo MVC Widgets, then how on earth am I meant to dynamically change the styles of my kendo widgets on my grid popup, depending on my selected model properties?

MVVM

answered on 14 Jan 2016

1 answer

118 views

How to control default filter parameter date format?

I have a grid defined with a few columns of type "date". An example of the json for a date column is as follows:

{

title: "myDate",

}

Grid

answered on 14 Jan 2016

1 answer

322 views

How to control default filter parameter date format?

I have a grid containing a few date columns. An example of the json for a data column is as follows:

{
title: "My Date Field",
field: "myDate",
type: "date",
format: "{0:MM/dd/yyyy hh:mm tt}",
filterable: { ui: "datetimepicker", format: "MM/dd/yyyy hh:mm" }
}

The column displays in the proper date format (MM/dd/yyyy hh:mm tt) and the filter uses the proper datetimepicker control, which also shows the selected date/time in the proper format (MM/dd/yyyy hh:mm). The problem is that the filter value in the parameterMap object for the date column is always in this format:

"Tue Jan 12 2016 00:00:00 GMT-0700 (Mountain Standard Time)"

I realize that I could override the parameterMap function in the grid and write code to look up the column type and, if it is a date, convert the filter value to the format that I want, but before I do that I would like to know if there is a way to simply control the default format that the parameterMap uses for the filter value when the filter value comes from a datetimepicker control. Any info you can provide would be appreciated.

Grid

answered on 14 Jan 2016

1 answer

320 views

Datasource bound to form elements

Hello all,

I have a call to a service that will always return a single object with properties on said object. I have a form bound to a view model. I have a property on the view model that is a reference to the dataSource (service call) so that when I update the object I can call the dataSource.sync() method to save the changes back to the server.

This workflow works well with collections of items (grid). However I am having a tough time figuring out how to bind the form elements to the single object that is being returned by this specific service. the basics are as follows:

Create View Model

Create DataSource, then call .read() method. In the response from the read method I set a property on the viewModel vm.set("myProp", myDS)

Then in my HTML form I would like to bind elements to data from myDS. However if I do something like:

var data = myDS.view()[0];

vm.set("myProp", data);

I of course lose access to the sync() method.

What is the proper way to bind form field values to data from a dataSource object that will only ever have a single object returned?

Hope this makes sense.

Thanks for any and all help.

MVVM

answered on 14 Jan 2016

2 answers

736 views

KendoUI CSS issue with Bootstrap and custom grid commands

Hello. Apologies if this issue is covered elsewhere, I couldn't find a clear statement of what to do with this kind of scenario:

I have a Kendo (v2014.2.716) grid on a page with a couple of custom commands defined. I'm also using Bootstrap (v3.0.1) for styling purposes, therefore I'm including both kendo.bootstrap.min.css and kendo.common-bootstrap.min.css in my project. I'm trying to apply a couple of Bootstrap CSS classes to the command such that the colors are consistent with buttons in other parts of the page:

command: [
{
name: "view", text: "View", className: "btn btn-warning",
click: function (e) {
// some irrelevant code here.....
}
}

However, when the buttons are rendered, the colors defined by the Bootstrap CSS are getting overridden. After taking a look with a DOM explorer in a browser, I see that the command link is getting the following classes applied to it:

<a class="k-button k-button-icontext btn btn-warning k-grid-view" href="#">View</a>

It appears that the k-button class is defining a color, border-color, and background-color.

So my questions are:
1) Why are these two CSS classes prepended to the classes specified by the className attribute? I could understand this for critical sizing issues, but not for colors.
2) Is there a recommended workaround short of re-defining all the Bootstrap styles I need with an !important next to the values that must take precedence?

Grid

answered on 14 Jan 2016

1 answer

4.1K+ views

[Solved] Insert Row in Kendo Grid

I doing an angular implementation of the Kendo Grid and need to be able to insert rows in addition to the in-built Add/Update Row features. The data is read from the server and in sync whenever any changes are made on the client-side. How do I implement the insert row capability in Kendo Grid?

Grid

answered on 14 Jan 2016

7 answers

87 views

[Solved] Grid.Pager.Page() parameter typed as a boolean

http://docs.telerik.com/kendo-ui/api/javascript/ui/pager#methods-page

The example source code calls pager.page with the value 2 but the data type says this parameter should be a boolean. I am assuming this is incorrect?

Thanks

Grid

answered on 14 Jan 2016

6 answers

308 views

[Solved] KendoUI Intellisense in HTML File

Hi guys. I'm using Q2 2015 Kendo UI Pro. we're using Visual Studio (2013 Ultimate) to work on a HTML5 and ASP WebAPI product. on the HTML5 (HTML5 only, no ASP.Net in the backend for the HTML5 Page). KendoUI intellisense works fine in any .js file but there is no intellisense in my HTML file for kendo attributes. I am using Kendo in conjunction with Angular. Angulars intellisense for element attributes works without issue. Is there suppsoe to be HTML Intellisense for Kendo UI. I would hope so as "UI" is normally HTML and it's in the name. :P.

Kendo.all.min.js and kendo.all.min.intellisense.js both reside in the same place along with jquery.min.js and angular.min.js.

Kendo intellisense works great in js (ts files actually, but you get the idea)

as an aside the kendoUI typings for typescript also work faultlessly too, this appears to be purely the HTML Intellisense. :)

General Discussions

answered on 14 Jan 2016

1 answer

80 views

Step Chart Visual Marker Position

Hello guys,

It is possible to change the visual location on the marker form the middle to the left ?

Charts

answered on 14 Jan 2016

2 answers

444 views

Kendo Grid with custom DropDown items

Hi

I want to bind my Kendo Grid with custom dropdown... but the dropdown list items would be binded on demand or selection. not at the "Index" action result

My ViewModel

public class GridShowClaimDetails

{

public int PkEobDetailId { get; set; }

public int PkClaimId { get; set; }

public int FkEncounterId { get; set; }

public int FkInsId { get; set; }

public int FkCompanyId { get; set; }

public int FkLocationId { get; set; }

public int FkClaimBatchId { get; set; }

public int PkClaimDetailId { get; set; }

public bool IsElectronic { get; set; }

public bool EobCompleted { get; set; }

public bool ClaimRefiled { get; set; }

public bool TempClosed { get; set; }

//Encounter Values

public DateTime EncounterDate { get; set; }

public string CodeValue { get; set; }

public decimal Cost { get; set; }

public int Unit { get; set; }

public decimal Charges { get; set; }

//Patient Details

public int FkPatientMpId { get; set; }

public string PayerName { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public int IsFirstClaim { get; set; }

#region Patient Liablity Section

public decimal Deductible { get; set; }

public decimal CoPayment { get; set; }

public decimal CoInsurance { get; set; }

public decimal Other { get; set; }

#endregion

//Grid Editable Fields

[Range(0, 99999.99)]

public decimal RemainingAmt { get; set; }

[Range(0, 99999.99)]

public decimal Allowed { get; set; }

[Range(0, 99999.99)]

public decimal Payment { get; set; }

[Range(0, 99999.99)]

public decimal Adjustment { get; set; }

[Range(0, 99999.99)]

public decimal TransferBalance { get; set; }

//DropDown Properties

[UIHint("_AdjustmentType")]

public AdjustmentTypeViewModel AdjustmentType { get; set; }

[UIHint("_CoverageType")]

public CoverViewModel CoverageType { get; set; }

[UIHint("_PatientResponsiblity")]

public PatientResponsibilityViewModel PatientResponsible { get; set; }

//Combined Properties

/// <summary>

/// FullAddress used to Bind the Grid on Practice Page

/// </summary>

public string FullName

{

get { return string.Format("{0}, {1}", FirstName, LastName); }

}

//Used for Posting the Gird Data.

public string EncDate

{

get { return EncounterDate.ToString(Constants.KDateFormat); }

}

public GridShowClaimDetails()

{

//Intialize the new AdjustmentType everytime as when binding with MVC Kendo Grid it was getting null.

//Intializing new at the time of getting ShowClaimDetails-EobController resolved the issue.

AdjustmentType = new AdjustmentTypeViewModel();

CoverageType = new CoverViewModel();

PatientResponsible = new PatientResponsibilityViewModel();

}

//Used to Store and Retreive back the DropDown values

public int FkCoverageTypeId { get; set; }

public int? FkDisallowedTypId { get; set; }

public int FkResponsibleTypeId { get; set; }

}

public class AdjustmentTypeViewModel

{

public Int64? ChargeId { get; set; }

public string Name { get; set; }

}

public class CoverViewModel

{

public int? CoverageId { get; set; }

public string CoverStatus { get; set; }

}

public class PatientResponsibilityViewModel

{

public int PkInsuranceId { get; set; }

public string PayerName { get; set; }

}

My Partial View

@using System.Collections

@using Kendo.Mvc.UI

@model Csmr.Model.ViewModel.Billing.PatientResponsibilityViewModel

@(Html.Kendo().DropDownListFor(m => m)

.Name("patientResponsible")

.DataValueField("PkInsuranceId")

.DataTextField("PayerName")

.BindTo((IEnumerable)ViewData["patientResponsiblity"])

)

//ShowClaimDetails is called when "Patient is seached"

//Get the Patient Claim Details and Binds it's Patient Responsibility.

public ActionResult ShowClaimDetails(int patientId = 0, int? claimId = null)

{

var gridClaims = _eobService.GetAllClaimDetails(patientId, claimId);

if (gridClaims.Count > 0)

{

BindPatientResponsiblity(patientId);

}

return Json(gridClaims, JsonRequestBehavior.AllowGet);

}

private void BindPatientResponsiblity(int patientId)

{

var patientResponsiblity = _eobService.GetPatientResponsiblity(patientId);

ViewData["patientResponsiblity"] = patientResponsiblity;

ViewData["defaultPatientResponsiblity"] = patientResponsiblity.FirstOrDefault();

}

My Main Grid

@(Html.Kendo().Grid<GridShowClaimDetails>() // Specify the type of the grid

.Name("gridClaimData")

.Columns(columns =>

{

columns.Bound(p => p.CoverageType).ClientTemplate("#=CoverageType.CoverStatus#").Title("Coverage. Type").Width(50);

columns.Bound(p => p.PkClaimId).Title("ClaimNo").Width(40);

columns.Bound(p => p.PayerName).Title("Insurance").Width(50);

columns.Bound(p => p.FullName).Width(50);

columns.Bound(p => p.EncDate).Title("Date").Width(50);

//.ClientTemplate("#= kendo.toString(kendo.parseDate(EncounterDate), 'MM/dd/yyyy') #");

columns.Bound(p => p.CodeValue).Title("CPT").Width(40);

columns.Bound(p => p.Unit).Title("Units").Width(40);

columns.Bound(p => p.Charges).Title("Bill. Amt($)").Format("{0:0.00}").Width(40);

columns.Bound(p => p.RemainingAmt).Title("Rem. Amt($)").Format("{0:0.00}").Width(40).Hidden();

columns.Bound(p => p.Allowed).Title("Allowed($)").Format("{0:0.00}").Width(40);

//columns.Group(group => group.Title("<center>Patient Liablity</center>")

// .Columns(info =>

// {

// info.Bound(x => x.Deductible).Title("Deducitble($)").Format("{0:0.00}").Width(40);

// info.Bound(x => x.CoPayment).Title("Co-Payment($)").Format("{0:0.00}").Width(40);

// info.Bound(x => x.CoInsurance).Title("Co-Insurance($)").Format("{0:0.00}").Width(40);

// info.Bound(x => x.Other).Title("Other($)").Format("{0:0.00}").Width(40);

// }));

columns.Bound(p => p.Payment).Title("Payment ($)").Format("{0:0.00}").Width(40);

columns.Bound(p => p.Adjustment).Title("Adjustment ($)").Format("{0:0.00}").Width(40);

columns.Bound(p => p.AdjustmentType).ClientTemplate("#=AdjustmentType.Name#").Title("Adj.Type").Width(50);

columns.Bound(p => p.TransferBalance).Title("Trans.Bal ($)").Format("{0:0.00}").Width(40);

columns.Bound(p => p.PatientResponsible).ClientTemplate("#=PatientResponsible.PayerName#").Title("Pat.Resp").Width(50);

columns.Command(command => command.Custom("Claim Details").Click("showDetails")).Width(50);

columns.Bound(p => p.FkEncounterId).Hidden();

columns.Bound(p => p.PkEobDetailId).Hidden();

columns.Bound(p => p.FkInsId).Hidden();

columns.Bound(p => p.FkCompanyId).Hidden();

columns.Bound(p => p.FkLocationId).Hidden();

columns.Bound(p => p.FkPatientMpId).Hidden();

columns.Bound(p => p.FkClaimBatchId).Hidden();

columns.Bound(p => p.IsElectronic).Hidden();

columns.Bound(p => p.EobCompleted).Hidden();

columns.Bound(p => p.ClaimRefiled).Hidden();

columns.Bound(p => p.TempClosed).Hidden();

columns.Bound(p => p.IsFirstClaim).Hidden();

columns.Bound(p => p.PkClaimDetailId).Hidden();

})

.Pageable()

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

.Scrollable(scroll =>

{

scroll.Enabled(true);

scroll.Height(240);

})

.Selectable(sel => sel.Type(GridSelectionType.Row))

.Events(events => events

.Save("onSave")

//.Edit("OnGridProcedureEdit")

)

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.PageSize(20)

.ServerOperation(false)

//.Read(read=>read.Action("EobClaim_Read", "Eob", new { area = "Billing" }).Data("additional_Info"))

.Model(model =>

{

model.Field(p => p.CoverageType).DefaultValue(

ViewData["defaultcoverage"] as CoverViewModel);

model.Id(p => p.PkEobDetailId);

model.Field(p => p.PkClaimId).Editable(false);

model.Field(p => p.PayerName).Editable(false);

model.Field(p => p.Charges).Editable(false);

model.Field(p => p.RemainingAmt).Editable(false);

model.Field(p => p.CodeValue).Editable(false);

model.Field(p => p.Unit).Editable(false);

model.Field(p => p.Adjustment).Editable(false);

model.Field(p => p.TransferBalance).Editable(false);

model.Field(p => p.AdjustmentType).DefaultValue(

ViewData["defaultAdjustment"] as AdjustmentTypeViewModel);

model.Field(p => p.PatientResponsible).DefaultValue(

ViewData["defaultPatientResponsiblity"] as PatientResponsibilityViewModel);

})

.Events(events => events

.Error("error_handler"))

.PageSize(10)

)

Jquery

//Patient Search on Eob. and Binding Claim Details

$("#txtSearchPatient").kendoAutoComplete({

minLength: 3,

dataTextField: "FullName",

dataValueField: "PkPatientInfoId",

suggest: true,

filter: "contains",

headerTemplate: '<div class="dropdown-header k-widget k-header">' +

'Full Name' +

'SSN' +

'</div>',

template: '#:data.FirstName#' +

'#: data.Ssn #',

dataSource: {

serverFiltering: true,

transport:

{

read:

{

url: PatientDetails,

dataType: "json",

type: "POST"

},

parameterMap: function () {

return { seachPatient: $("#txtSearchPatient").data("kendoAutoComplete").value() };

}

},

//select event redirects user to the profile of selected patient

//Redirecting and Binding to ClaimDetails

//Gets the Claim Details

//Gets the Patient Responsibility.

select: function (e) {

var dataItem = this.dataItem(e.item.index());

var patientId = dataItem.FkMpId;

var claimId = "";

$.ajax({

url: ShowClaimDetails,

data: { patientId: patientId, claimId: claimId },

success: function(data) {

if (data.length > 0) {

//If Patient Search is sucessfull and it contains the claim data specific

//Bind to gridClaimData - on existing Eob

var grid = $("#gridClaimData").getKendoGrid();

grid.dataSource.data(data);

grid.refresh();

} else {

alert("No Claim Exists!!");

$("#txtSearchPatient").focus();

}

},

error: function(request, status, error) {

alert(request.responseText);

}

});

}

});

Attaching Image what exactly I am trying to achieve

Grid

answered on 14 Jan 2016