How to setValue multiSelect webix
it's my code:
$$('systemId').setValue(personItem.hSystemId.id);
it's doesn't work for me
code of my combo:
{
view: "multiselect",
name: "systemId",
id: "systemId",
label:"Система",
align:"top",
placeholder: 'Выберите систему',
options: {
buttonText: "Выбрать",
button: "Approve",
url: "/adminstrator/ws/person/systemCombo",
body: {
template: "#value#"
}
}
},
$$('systemId').setValue(personItem.hSystemId.id);
$$('systemId').refresh();
Please try this
Well, i think that you need to pass your "id" in the "setValue" as a string in order to make it function. Please check the snippet: http://webix.com/snippet/760eddf8 Hope it works.
Related
I have a kendo ui treeview and a dropdownbox on my asp.net mvc page. The dropdown box can have two values. Depending upon which one has been chosen, I want to change the datasource url, which is a method in a controller. The data type and structure of data from both the url will be the same. Essentially I want to change url: '#Url.Content("~/Document/GetMyDocument")' dynamically. The following is my treeview code:
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
},
dataSource: {
transport: {
read: {
url: '#Url.Content("~/Document/GetMyDocument")',
type: "post",
dataType: "json"
}
},
schema: {
model: {
text: "Name",
spriteCssClass: "fa fa-folder",
children: "Files"
}
}
},
dataTextField: ["Name", "FileName"],
dataValueField: ["id"],
check: onCheck
});
You can specify the URL of the treeview dataSource as function
transport: {
read: {
url: function (e) { }
}
}
You can then listen for the change event of the DropDownList and call
$('#treeview').data('kendoTreeView').dataSource.read();
Inside the url function you can get the value of the DropDownList and resolve the url dynamically:
var ddl = $('#myDDl').data('kendoDropDownList');
var value = ddl.value();
return value == "someValue" ? "/foo/bar": "/bar/baz";
I have two select2 dropdowns and I want to change options the second dropdown depending on first dropdown.
For example,
{
data: 'country_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: {!! $production_units !!} ,
dropdownAutoWidth: true,
}
},
{
data: 'state_id',
editor: 'select2',
renderer: customDropdownRenderer,
select2Options: {
data: [],
dropdownAutoWidth: true,
width: 'resolve'
}
},
Depending on country_id, I want to change select2 options of state_id. I know how to make this work with just select2, but I am not able to figure out how to make it work with handsontable.
I have change select2Options in afterChange, but how to do that?
afterChange: function (change, source) {
if(change)
{
if(change[0][1] == 'country_id')
{
$.get("/api/states?country="+change[0][3], function(data){
//What should be done here?
});
}
}
},
You retrieve all the states for that country. Make sure the states list is in the same format that select2 expects.
Then loop through the columns list and determine the dependent column for the current column that has been modified.
Get the cell properties:
var cellProperties = instance.getCellMeta(rowIndex, dependentColumnIndex);
Update the select2 source:
cellProperties['select2Options'].data = [states list];
I've been doing alot of searching but haven't found a clear answer for this. I have a set up textboxes that and a submit button and a Kendo UI grid. I want to post the data to the grid's datasource so that it will return the results based on the criteria. I am not using the MVC wrappers.
EDIT:
I've gotten closer but I can't seem to get the datasource to send the post data when I click submit. I've debugged and in my $("#fmSearch").submit it is hitting the jquery plugin and I've confirmed that it is converting the form data to JSON properly, but it seems as though it it not sending the updated information to the server so that the Action can read it.
Javascript
var dsGalleryItem = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Content("~/Intranet/GalleryItem/SearchGalleryItems")',
type: "POST",
data: $("#fmSearch").serializeFormToJSON(),
cache: false
}
},
schema: {
model: {
id: "galleryItemID",
fields: {
galleryItemID: {
nullable: true
},
imageName: {},
collectionName: {},
categoryName: {},
lastUpdatedOn: { type: "date" }
}
}
}
});
var gvResults = $("#gvResults").kendoGrid({
autoBind:false,
columns: [{
field: "imageName",
title: "Item Name",
template: "<a href='#Url.Content("~/Intranet/GalleryItem/Details/")#=galleryItemID#'> #=imageName#</a>"
}, {
field: "collectionName",
title: "Collection"
}, {
field: "categoryName",
title: "Category"
}, {
field: "lastUpdatedOn",
title: "Last Updated",
format: "{0:M/d/yyyy}"
}
],
selectable: "row",
change: onRowSelect,
dataSource: dsGalleryItem
});
$("#fmSearch").submit(
function (event) {
event.preventDefault();
dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });
});
MVC Action
[HttpPost]
public JsonResult SearchGalleryItems(string keyword, int? category, int? collection, DateTime? startDate, DateTime? endDate)
{
var galleryItemList = (from g in db.GalleryItems
//where g.imageName.Contains(keyword)
select new GalleryItemViewModel
{
galleryItemID = g.galleryItemID,
imageName = g.imageName,
collectionName = g.collection.collectionName,
categoryName = g.category.categoryName,
lastUpdatedOn = g.lastUpdatedOn
});
var galleryItemCount = Json(galleryItemList.ToList());
return Json(galleryItemList.ToList()); ;
}
The action is not setup to retrieve different data right now I just need to know how to connect the form to the grid.
Found the problem. I had this:
dsGalleryItem.read({ data: $("#fmSearch").serializeFormToJSON() });
It needed to be this:
dsGalleryItem.read($("#fmSearch").serializeFormToJSON());
I am a 100% newb to Sencha and am trying to take a stab at re-factoring my company's mobile app.
Here is my app.js:
Ext.application({
name: 'RecruitTalkTouch',
views: ['Login'],
launch: function () {
Ext.Viewport.add([
{ xtype: 'loginview' }
]);
}
});
Login.js View:
Ext.define('RecruitTalkTouch.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",
xtype: 'loginForm',
id: 'loginForm',
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Button' ],
config: {
title: 'Login',
items: [
{
xtype: 'label',
html: 'Login failed. Please enter the correct credentials.',
itemId: 'signInFailedLabel',
hidden: true,
hideAnimation: 'fadeOut',
showAnimation: 'fadeIn',
style: 'color:#990000;margin:5px 0px;'
},
{
xtype: 'fieldset',
title: 'Login Example',
items: [
{
xtype: 'textfield',
placeHolder: 'Email',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
},
{
xtype: 'passwordfield',
placeHolder: 'Password',
itemId: 'passwordTextField',
name: 'passwordTextField',
required: true
}
]
},
{
xtype: 'button',
itemId: 'logInButton',
ui: 'action',
padding: '10px',
text: 'Log In'
}
]
}
});
Login.js Controller:
Ext.define('RecruitTalkTouch.controller.Login', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: 'loginForm'
},
control: {
'#logInButton': {
tap: 'onSignInCommand'
}
}
},
onSignInCommand: function(){
console.log("HELLO WORLD");
}
});
When I click the submit button, nothing happens. How can I hook up my submit button to listen for events (click, tap, etc) along with submitting the information to a backend API?
In app.js file of your application, add:
controllers: [
'Login'
]
in your application class. And for submitting information, call a Ajax request like this:
Ext.Ajax.request({
url: // api url..,
method: 'POST',
params: {
username: // get user name from form and put here,
password: // get password and ...
},
success: function(response) {
do something...
},
failure: function(err) {do ..}
});
from inside onSignInCommand() function.
You must activate your controller by adding it to the controllers option of your application class.
Then, to submit your data to the backend, you've got several options. You can use a form panel instead of your raw container, and use its submit method. Alternatively, you can use the Ext.Ajax singleton. In this case, you'll have to build the payload yourself. Finally, you can create a model with a configured proxy, and use its save method. This last way is probably the best for long term maintainability... Even if in the case of a simple login form, that may be a little bit overkill.
Can u please refer this sample app to create login form. Its very simple app please go through it.
http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application/
I am using: VS 2010, ASP.NET MVC2, jqGrid 3.8.2.
I want to have the navGrid 'Edit' button open a different view in the controller. I have tried a number of things to no avail. In order to open the selected row, I assume I will need to append the id to the url.
jQuery('#listComponents').jqGrid({
url: '/Components/Get',
editurl: '/Components/Edit',
...
}).navGrid('#pagerComponents', {edit:true, ...}, {url: '/Components/Edit'});
Any suggestions are welcome. If I can't get it to work, I will add an 'Edit' button outside the jqGrid and do a normal Html.ActionLink call to open the different view.
Thanks!
Update
Following #Oleg's answer, I now have the following working perfectly:
jQuery('#listComponents').jqGrid(
{
url: '/Components/Get/',
...
}).navGrid('#pagerComponents', { edit: false, ...})
.navButtonAdd('#pagerComponents', {
caption: "",
title: "Edit Component",
buttonicon: "ui-icon-pencil",
onClickButton: function () {
var id = jQuery("#listComponents").getGridParam('selrow');
if (id) {
var data = jQuery("#listComponents").getRowData(id);
window.location = '/Components/Edit/' + data.COMPONENTID;
}
else {
alert("Please select a row to edit.");
}
}});
The option {edit:true, ...} of the navGrid follow to the usage of editGridRow method of the form editing, so the dialog will be displayed and not the View of your MVC controller. To have the behavior which you want you should use {edit:false, ...} setting and add custom button which look exactly like the original "Edit" button. To make this you should use buttonicon: "ui-icon-pencil" parameter (see editicon default parameter in the navGrid source code). In this answer you will find code example. You can additionally use $.jgrid.nav.edittitle as the title parameter:
var grid = $("#listComponents");
grid.jqGrid({
url: '/Components/Get',
editurl: '/Components/Edit',
...
});
grid.navGrid('#pagerComponents', {edit:false, ...}, ...);
grid.jqGrid ('navButtonAdd', '#pagerComponents',
{ caption: "", buttonicon: "ui-icon-pencil", title: $.jgrid.nav.edittitle,
onClickButton: function() {
var rowid = grid.jqGrid('getGridParam', 'selrow');
window.location = '/Components/Edit/' + 'rowid';
}
}
);