Kendo UI Cascading Combobox - Check if initialised - kendo-ui

I am using the Kendo UI Cascading combo boxes in an MVC 4 application. The source is too complex to post here, however it follows exactly the same structure as the MVC demo on the Kendo UI site (http://demos.kendoui.com/web/combobox/cascadingcombobox.html).
Occasionally I am getting the exception below, I assume this is because the page isn't fully loaded and the user has tried to interact with the page, therefore causing the combo to attempt to submit an AJAX request to get it's data.
Microsoft JScript runtime error: Cannot call method 'value' of kendoDropDownList before it is initialized
Is there a correct way of checking whether Kendo controls are fully initialised ? If not how can I catch this exception ?
Thanks, Jon.

Make sure load the combo box before you call
var val = $("#yourCombobox").value();
if your combobox isn't initialize it gives undefined as the result.
Load the main combo at the $(document).ready() function and then the onchange even of that combo get the value and load the next combo.

Related

How to access to my Grid in Dynamic CRM365 View

I am working on Dynamic CRM365 plugin, in my entity view, I need to know which item has been selected, before I use DOM to detect, however, I can't pass the certification, because all DOM access are risk and need to be replaced, therefore, I checked Xrm.Page.getControl and Xrm.Page.ui.controls, but no luck.
I passed Xrm.Page.getControl("ssl_notesforsigns") or Xrm.Page.getControl("ssl_notesforsign") => return null
I call Xrm.Page.ui, ui = null.
Any idea how to get grid by code?
Thanks
It is good to hear that you no longer want to access the DOM. As you say, that is entirely unsupported.
What is the name of the subgrid on your form? If you go to a form editor and look at the properties for the subgrid, you will see the name (I am guessing that it is not called ssl_notesforsigns). This name is the one you should use, and it can be used when calling Xrm.Page.getControl("namehere") to get your grid context.
Xrm.Page has been deprecated (even though you can still use it). Instead, you should get a reference to your grid context through the execution context. See Client API grid context. For code executing on a form event, you can get your grid context through the form context as follows:
var formContext = executionContext.getFormContext(); // get the form Context
var gridContext = formContext.getControl("namehere"); // get the grid context
When you have a reference to your grid context, you can get the selected rows using getSelectedRows():
var allSelectedRows = gridContext.getGrid().getSelectedRows();

How to read datasource of a Kendo DropDownList only once?

(MVC Razor) So on my page I have a Kendo grid which contains a DropDownList within a certain column. Now I don't want to fill data of my dropdownlist from controller (With Viewbag/ViewData) before the page loads because it would slow it down, but instead I'd like to fill the DropDownList data on user click with a call to a controller function, and call the read method only once(on first click). How would I be able to achieve this goal?
Set autoBind property to false. It will cause that dropdown will not be filled by data before user click on it.
After component is initialized dataBound event is started so you can set readonly in it.
Demo here

KendoUI Grid - rollback from from a remove row

I am creating a custom transport for KendoUI that would connect Kendo to a number of cool data sources like webSQL. My Kendo Grid problem is that when I implement the delete/destroy command I am not able to prevent the grid from the actual remove row to happen, even if the data source layer has responded with an error.
I get called via the RemoteTransport.destroy method. The input parameter contains an error and a success callback, but even if I call the error callback, or try to return a "false", or try to return a $.Deferred that I eventually reject: the grid row is gone. Actually it's gone before I get called.
I believe you would want the cancelChanges method on the grid.
http://docs.kendoui.com/api/web/grid#cancelchanges
A response from the KendoUI forum helps decoupling the UI part from the data layer part
In the RemoteTransport
call the rejection handler this will cause an exception in the
DataSource. In the DataSource definition place an error handler that
call the actual cancelChanges or whatever rollback method the control
will have. Still inperfect - but at least doable.

Telerik ASP.NET MVC Grid on Editing in Popup mode gives weird jscript error

I have a Grid, which I am trying to Edit in Pop Up mode. The pop up opens fine. I have placed two more grids within the pop up window. I load them through javascript ajax calls. These 2 grids on pop up also get populated just fine. Once I click on the submit for the pop up window (which is the default checkmark icon), I get this Jscript error
"data.CancelledAMA.AgreementID is null or not an object"
Where CancelledAMA is a custom object in my model (ReplacementCombo) that I bind to the original grid (not the 2 grids within the pop up window). And AgreementId is an int within the CancelledAMA object
I have tried the .DefaultDataItem(new ReplacementCombo()) in the original grid so that the model object gets populated with default values and created a constructor object too in the ReplacementCombo model class. But nothing works.
People,
I feel proud saying that after hours of pain, I have found the issue and resolved it!
Lesson learnt, on the Telerik MVC Grid you cannot have the DataKey from a nested object of the grid model. My original grid had the datakey as CancelledAMA.AgreementID and CancelledAMA is a nested object within the Model (ReplacementCombo) bound to the original Grid. You can only have a datakey to a property on the top level of the model object not properties of nested objects.
Thanks.

How to handle nested forms in ASP.NET MVC

I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://

Resources