I have a tab strip with two tabs. In the first tab I have a search text box and grid to show search results. When the user has found the item using the search box, they select the item in the grid and it switches tabs to the treeview and selects the item in the treeview (all these components are kendo ui mvc).
The search is working and the the treeview item is selected, however, it has not scrolled down to the item position in the view. Here is the code I have, but cannot get the scrolling working. I am using the jquery plugin scrollto.
Index.cshtml:
<body>
<div class="container-fluid">
<section style="padding-top:10px;"></section>
<div style="float:left; position:fixed">
#(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Activate("onTabActivate")
)
.Items(tabstrip =>
{
tabstrip.Add().Text("Search")
.Selected(false)
.Content(#<text>
<div>
<div style="padding-bottom:5px; padding-bottom:5px;">
<input type="text" class="clearable" id="search" name="search" placeholder="Enter a Account Name or Number" />
</div>
#(Html.Kendo().Grid<SageEMS.CRM.WebApp.DataService.AccountTreeItem>()
.Name("searchGrid")
.Events(events => events
.Change("onGridSelect"))
.Columns(columns =>
{
columns.Bound(acc => acc.AccountName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(w => w.Account))
.ServerOperation(false)
.Read(read => read.Action("LoadSearchResult", "Home").Data("searchAccounts"))
)
.Pageable()
.Selectable()
)
</div>
</text>);
tabstrip.Add().Text("Accounts")
.Selected(false)
.Content(#<text>
<div class='k-scrollable' style='height: 400px; overflow: auto;'>
#(Html.Kendo().TreeView()
.Name("treeview")
.Events(events => events
.Expand("onExpand")
.Select("onTreeviewSelect"))
.DataTextField("AccountName")
.DataSource(dataSource => dataSource
.Model(m => m
.Id("Account")
.HasChildren("HasChildren"))
.Read(read => read.Action("LoadAccountTree", "Home").Data("loadChildren"))
)
))
</div>
</text>);
})
)
</div>
<div id="dvSections" style="padding-left:450px;">
#{Html.RenderPartial("Sections", Model);}
</div>
</div>
<script>
var _selectedAccount = null;
var _selectedTrackingItem = null;
var _searchValue;
var _selectedGridItem = null;
var $search = $('#search');
var $treeview = $("#treeview");
var $searchGrid = $("#searchGrid");
var $txtSelectedAccount = $('#txtSelectedAccount');
var $tabstrip = $("#tabstrip");
$search.on('change keyup copy paste cut', function () {
// set delay for fast typing
setTimeout(function () {
_searchValue = $('#search').val();
$searchGrid.data("kendoGrid").dataSource.read();
}, 500);
});
$(function () {
$txtSelectedAccount.text("All");
$treeview.select(".k-first");
});
function searchAccounts() {
if (_searchValue) {
return {
searchTerm: _searchValue
};
}
}
function onExpand(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function loadChildren() {
if (_selectedAccount) {
return {
id: _selectedAccount
};
}
}
function onTabActivate(e) {
var tab = $(e.item).find("> .k-link").text();
if (tab == "Search")
$search.focus();
if (tab == "Accounts") {
if (_selectedGridItem == null) return;
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
}
}
function onTreeviewSelect(e) {
_selectedAccount = $treeview.getKendoTreeView().dataItem(e.node).id;
$txtSelectedAccount.text(this.text(e.node));
}
function onGridSelect(e) {
var grid = $searchGrid.data("kendoGrid");
_selectedGridItem = grid.dataItem(grid.select());
var tabStrip = $tabstrip.kendoTabStrip().data("kendoTabStrip");
tabStrip.select(1);
// Get the tree item and select it
var dataItem = getTreeItem(_selectedGridItem.id);
if (dataItem)
selectNodeInTree(dataItem);
else
findExpandSearch(_selectedGridItem.id);
}
function getTreeItem(id) {
var treeView = $treeview.data('kendoTreeView');
var dataSource = treeView.dataSource;
var dataItem = dataSource.get(id);
return dataItem;
}
function findExpandSearch(id) {
// item is not loaded in treeview yet, find parent and trigger load children and search again
var url = "#Url.Action("LoadTreePath")";
$.ajax({
url: url,
type: "POST",
data: JSON.stringify({ id: id }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
cache: false,
success: function (data) {
if (data && data.length > 1) {
$.each(data, function (index, value) {
_selectedAccount = value;
loadChildren();
});
var dataItem = getTreeItem(data[0]);
if (dataItem)
selectNodeInTree(dataItem);
}
},
error: function (error, h, status) {
alert(error.responseText);
}
});
}
function selectNodeInTree(item) {
var treeView = $treeview.data("kendoTreeView");
var node = treeView.findByUid(item.uid);
if (node) {
treeView.select(node);
treeView.trigger("select", { node: node });
treeView.element.closest(".k-scrollable").scrollTo(treeView.select(), 450);
}
else
alert('Account not found in tree.');
}
</script>
<script src="../../Content/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
I have used the following sample as a guide:
http://dojo.telerik.com/uYutu/23
Any suggestions appreciated, thanks in advance.
The example you posted works by scrolling the splitter's k-pane. The tabstrip you're creating your tree in doesn't have a k-scrollable, so you need to create your own scrollable container:
<div class='scrollable' style='height: 300px; overflow: auto;'>
<div id="treeview-left"></div>
</div>
and then scroll it
tree.element.closest(".scrollable").scrollTo(tree.select(), 150)
Also, I think triggering the select event shouldn't be necessary since the select method will do that for you.
(demo)
I had a similar problem in my Treeview setup which was close to yours and was using the scrollTo() much as described in Lars Höppner’s solution.
My problem turned out to be a height style that was being applied to my treeview. Having any height defined on the treeview breaks the scrollTo() operation.
Once I removed the offending css class it worked fine. Something to check for.
Related
I'm having trouble retrieving data from a data-tag attribute on a button that is created by createElement
chatbot.js
const selectServiciosMoviles = document.querySelector('#selectServiciosMoviles')
const addSelect = (select, id, datatag) => {
const selection = document.createElement('button')
selection.classList.add('chatbot__selection')
selection.id = id
selection.setAttribute("data-tag", datatag)
selection.innerHTML = select
messageArea.appendChild(selection)
scrollToBottom(messageArea)
}
selectServiciosMoviles.addEventListener('click', () => {
setTimeout(() => {
addSelect('Portabilidad', 'selectPortabilidad', '{"categoria":"chatbot", "nombre":"chatbot","ubicacion":"home_b2b", "accion":"seleccionar", "etiqueta":"subcategoria_portabilidad"}')
addSelect('Planes Moviles', 'selectMoviles', '{"categoria":"chatbot", "nombre":"chatbot","ubicacion":"home_b2b", "accion":"seleccionar", "etiqueta":"subcategoria_planes_moviles"}')
addSelect('Roaming', 'selectRoaming', '{"categoria":"chatbot", "nombre":"chatbot","ubicacion":"home_b2b", "accion":"seleccionar", "etiqueta":"subcategoria_roaming"}')
addSelect('Seguro Movil', 'selectSeguros', '{"categoria":"chatbot", "nombre":"chatbot","ubicacion":"home_b2b", "accion":"seleccionar", "etiqueta":"subcategoria_seguro_movil"}')
scrollToBottom()
}, 2000)
});
html
<button class="chatbot__selection" id="selectPortabilidad" data-tag="{"categoria":"chatbot", "nombre","chatbot", "ubicacion":"home_b2b", "accion":"seleccionar","etiqueta":"subcategoria_portabilidad"}">Portabilidad</button>
<button class="chatbot__selection" id="selectMoviles" data-tag="{"categoria":"chatbot", "nombre","chatbot", "ubicacion":"home_b2b", "accion":"seleccionar","etiqueta":"subcategoria_portabilidad"}">Planes Moviles</button>
<button class="chatbot__selection" id="selectRoaming" data-tag="{"categoria":"chatbot", "nombre","chatbot", "ubicacion":"home_b2b", "accion":"seleccionar","etiqueta":"subcategoria_portabilidad"}">Roaming</button>
<button class="chatbot__selection" id="selectSeguros" data-tag="{"categoria":"chatbot", "nombre","chatbot", "ubicacion":"home_b2b", "accion":"seleccionar","etiqueta":"subcategoria_portabilidad"}">Seguro Movil</button>
libreria.js
var tagItems = document.querySelectorAll('[data-tag]')
tagItems.forEach(function (e) {
e.addEventListener('click', function (e) {
if(e.target.dataset.tag != undefined){
var data = JSON.parse(e.target.dataset.tag)
console.log(data)
}
})
})
the problem when seeing the console nothing appears to me, the data-tag of the button does not rescue me. please i need help, thanks
The code below is working fine it's filtering duplicate values from Array but it's not filtering undefined Values console.log([67, undefined]). i want to filter undefined values and duplicate values from array and output in options values as selected. I would be grateful for any help.
i have two datatable with drag and drop functionality. each row of datatable contain the IDs. when i drag the row of table 1 into table 2. the data stored into the Array. i have the addArray function for push the IDs into an Array there also filtering the duplicate IDs and make it uniqueArray. now i want to create the Select option Element which containing the iDs as a value. I want if i drag out a value from Array then the select options update automatically and delete the option from it...?
js
$(document).ready(function () {
new Sortable(drag, {
group: 'sortables',
multiDrag: true, // Enable multi-drag
selectedClass: 'selected', // The class applied to the selected items
fallbackTolerance: 3, // So that we can select items on mobile
animation: 150,
onUpdate: function (e, tr) {
addArray();
checkFields();
},
});
new Sortable(drop, {
group: "sortables",
multiDrag: true, // Enable multi-drag
selectedClass: 'selected', // The class applied to the selected items
fallbackTolerance: 3, // So that we can select items on mobile
animation: 150,
onChange: function (event, tr) {
Sorting();
addArray();
checkFields();
},
});
function addArray() {
let uniqueArray = [],
html = [];
$('#drop').children().each(function () {
const pk = $(this).data('pk');
if (pk && !uniqueArray.includes(pk)) {
uniqueArray.push(pk);
html.push(`<option value="${pk}">${pk}</option>`);
}
});
$('#id_articles').html(html.join(""))
}
function Sorting() {
sort = [];
$('#drop').children().each(function () {
sort.push({ 'pk': $(this).data('pk'), 'order': $(this).index() })
});
let crf_token = $('[name="csrfmiddlewaretoken"]').attr('value') // csrf token
$.ajax({
url: "/rundown/sorts/",
type: "post",
headers: { "X-CSRFToken": crf_token },
datatype: 'json',
data: {
'sort': JSON.stringify(sort),
},
success: function () {
console.log('success')
}
});
};
function checkFields() {
if ($('#drop tr').length >= 1) {
$('#drop').find('#blank_row').remove();
} else {
$('#drop').append($("<tr>").attr("id", "blank_row")
.append($('<td>').attr("colspan", '4')
.text('Drop here...')));
}
};
});
You do not have a filter. Why not just test
function stop_duplicate_in_array(array, value) {
if (!value && value !== 0) return array; // value is falsy but not 0
if (!array.includes(value)) array.push(value);
return array;
}
if 0 is not a possible value, remove && value !== 0
function stop_duplicate_in_array(array, value) {
if (value && !array.includes(value)) array.push(value);
return array;
}
You can simplify
function addArray() {
let uniqueArray = [],
html = [];
$('#drop').children().each(function() {
const pk = $(this).data('pk');
if (pk && !uniqueArray.includes(pk)) {
uniqueArray.push(pk);
html.push(`<option value="${pk}">${pk}</option>`);
}
});
$('#id_articles').html(html.join(""))
}
addArray()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop">
<article data-pk="A">A</article>
<article>Undefined</article>
<article data-pk="B">B</article>
<article data-pk="">Empty</article>
<article data-pk="C">C</article>
</div>
<select id="id_articles"></select>
Some remarks:
Currently you are adding a value, then removing it again in the stop-function, and adding it yet again. True, the values will be unique, but this is not very efficient. Use a Set for efficiently making a collection unique.
Use jQuery more to the full when creating option elements
To answer your question: just check for undefined before including it. But if you use the Set-way of working (see point 1), you can just delete undefined from that Set
Here is how it could look:
function addArray() {
let articles = new Set(
$('#drop').children().map((i, elem) => $(elem).data('pk')).get()
);
articles.delete(undefined);
$('#id_articles').empty().append(
Array.from(articles, value => $("<option>", { value }).text(value))
);
}
addArray();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop">
<div data-pk="red"></div>
<div data-pk="blue"></div>
<div data-pk="red"></div>
<div></div>
</div>
<select id="id_articles"></select>
Simply compare element with undefined
const array = [1,2,undefined,3,4,undefined,5];
const result = array.filter((el) => el !== undefined);
console.log(result)
I want to implement the ability to dynamically add comboboxes and I have to use Telerik ComboBox for that. I put this logic into button click.
$('#add-presenter').click(function (e) {
e.preventDefault();
var combobox = '#(Html.Telerik().ComboBox()
.Name("Presenters[" + (Model.Count) + "]")
.BindTo(new SelectList(LeaderList, "ID", "Value"))
.ClientEvents(ev => ev.OnChange("onSelect"))
.DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
.Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
.HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))';
combobox = combobox.split('Presenters[' + index + ']').join('Presenters[' + (index + 1) + ']');
index++;
$('#presenters-block').append(combobox);
}
This code renders in browser as this:
$('#add-presenter').click(function (e) {
e.preventDefault();
var combobox = '<div class="t-widget t-combobox t-header" style="width:320px;vertical-align:middle;"><div class="t-dropdown-wrap t-state-default"><input class="t-input" id="Presenters[0]-input" name="Presenters[0]-input" type="text" /><span class="t-select t-header"><span class="t-icon t-arrow-down">select</span></span></div><input id="Presenters[0]" name="Presenters[0]" style="display:none" type="text" /></div>';
combobox = combobox.split('Presenters[' + index + ']').join('Presenters[' + (index + 1) + ']');
index++;
$('#presenters-block').append(combobox);
combobox = $('#Presenters\\['+index+'\\]').data('tComboBox');
});
The problem is in data-binding. This code generates proper HTML, but newly added list doesn't "drop"
When I do combobox = $('#Presenters\\['+index+'\\]').data('tComboBox'); for newly added item I get undefined (it exists, but data isn't set), so combobox.dataBind(dataSource) approach doesn't work.
Ok, I tried, but failed to do this without postback. Here's rough solution to the problem: do ajax request and replace content with partial view:
The Partial view:
#model List<int>
#{
var LeaderList = ViewData["LeaderList"] as List<ListItem>;
}
<div id="presenters-ajax-wrapper">
<div id="presenters-block">
#(Html.Telerik().ComboBox()
.Name("Presenters[0]")
.BindTo(new SelectList(LeaderList, "ID", "Value"))
.ClientEvents(ev => ev.OnChange("onSelect"))
.DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
.Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
.HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))
#for(int i=1; i<Model.Count; i++)
{
var item = LeaderList.FirstOrDefault(l => l.ID == Model[i]);
var value = item != null ? item.Value : "";
#(Html.Telerik().ComboBox()
.Name("Presenters[" + i + "]")
.Value(value)
.BindTo(new SelectList(LeaderList, "ID", "Value"))
.ClientEvents(ev => ev.OnChange("onSelect"))
.DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
.Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
.HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))
}
</div>
<button id="add-presenter" class="t-button">+</button>
<script type="text/javascript">
var index = #(Model.Count == 0 ? 0 : Model.Count-1);
$('#add-presenter').click(function (e) {
e.preventDefault();
index++;
var msg = $('#monitForm').serialize();
$.ajax({
url: '#Url.Action("_GetPresenters","MonitoringFRadio")'+'?count='+(index+1),
data: msg,
type: 'POST',
success: function(data) {
$('#presenters-ajax-wrapper').html(data);
}
});
});
</script>
</div>
Action:
[HttpPost]
public virtual ActionResult _GetPresenters(EditableMonitoring model, int count)
{
//some logic here...
return PartialView("EditorTemplates/Presenters", model.Presenters);
}
Well, probably it would be better to create another partial view which would render a single combobox, instead of redrawing all of them...
I have got a Kendo Grid with editable records:
When the user clicks the edit button, a Kendo Window opens with a form to edit the record.
I am achieving this by filling the Kendo Window from a controller method that fetches the data of the selected record via webservice: <- this is what I want to avoid. Instead, I want to take the data straight out from the table and put it into the input fields inside the Kendo Window, without any additional processing or html calls. The data is already on the table, I just don't know how to send it to the Kendo Window inputs.
Here's some code:
The javascript function called after clicking the edit button:
function openEdit() {
var window = $("#editWindow").getKendoWindow();
window.refresh({
url: '#Url.Action("_EditForm", "Controller")'
});
window.center().open();
}
The view contains a partial view call:
#Html.Partial("_EditWindow")
The called partial view contains the Kendo Window:
#(Html.Kendo().Window()
.Name("editWindow")
.Modal(true)
.Events(e => e.Open("drawWindow").Close("refresh").Refresh("hideLoading"))
.Iframe(true)
.Visible(false)
.Title("Edit Record")
)
How can the data from the selected row of the table be passed to the Kendo Window?
EDIT
I know how to get the values from the selected record in javascript:
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
I just don't know how to pass them into the Kendo Window inputs.
I came to a solution for my problem. I now send the selected model from the view to the controller. I use the fantastic JSON.stringify to achieve it.
function onChange() {
if (this.dataItem(this.select()) != null) {
var rowModel = this.dataItem(this.select());
// gets the model of the selected item in the grid
$.ajax({
url: 'sendGridRecord',
type: "POST",
data: JSON.stringify(rowModel),
contentType: 'application/json'
});
}
}
You can define a partial view as per the requirement and render that on a kendow window on edit button click.i.e
#(Html.Kendo().Window().Name("myWindow")
.Content(Html.Partial(#Url.Content("~/Views/_EditWindow.cshtml")).ToString())
.Visible(false).Title("XYZ").Modal(true).Actions(actions => actions
.Custom("custom")
.Minimize()
.Maximize()
.Close()
).Resizable().Draggable())
function openEdit() {
//Open the kendow window here.
//Get the seleceted item
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
//populate the partial view fields using the selectedItem variable like
$('#name').val(selectedItem.Name);
}
You can use these two methods in order to pass the Kendo().Grid()'s selected row data:
Method I:
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
#(Html.Kendo().Button()
.Name("myBtn")
.HtmlAttributes(new { type = "button", #class = "k-primary k-button k-button-icontext", onclick = "callActionBySelectedRowId('#GridMaster')" })
.Content("Add New")
)
</div>
</text>);
})
function callActionBySelectedRowId(grid) {
var grid = $(grid).data('kendoGrid');
id = grid.dataItem(grid.select()).ID;
window.location.href = '#Url.Action("YourAction", "YourController")/' + id;
}
Method II:
View:
#(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(m => m.PersonID);
})
.Read(read => read.Action("GetPersons", "Home"))
.Update(up => up.Action("UpdatePerson", "Home"))
)
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Columns(columns =>
{
columns.Bound(c => c.BirthDate);
columns.Bound(c => c.Name);
columns.Command(cmd => cmd.Edit());
})
.Pageable()
.Sortable()
)
<input type="button" id="btn" name="name" value="send to Server!" />
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var items = {};
var grid = $('#persons').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
items['persons[' + j + '].Name'] = item.Name;
items['persons[' + j + '].PersonID'] = item.PersonID;
}
//If you want to pass single item parameter use this and comment out "for loop" & use the second "data" line below:
//var singleItem = grid.dataItem(selectedElements[0]);
$.ajax({
type: "POST",
data: items,
//data: { ID: singleItem.ID }, //for passing single item parameter
url: '#Url.Action("Test","Home")',
success: function (result) {
console.log(result);
}
})
})
})
Controller:
public ActionResult Test(Person[] persons)
{
return Json(persons);
}
Note: If the View called from Controller cannot be rendered use the javascript function as below by using window.location.href instead of $.ajax
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
var items = {};
var grid = $('#persons').data('kendoGrid');
var selectedElements = grid.select();
var item = grid.dataItem(selectedElements[0]);
window.location.href = '#Url.Action("YourAction", "YourController")/' + item.ID;
})
})
</script>
So right now I have a kendo grid where one of the columns has a checkbox for each row of data. Ultimately I want to be able to check and see which rows in the kendo grid have that check box checked, once a save button is clicked, and then store the contents of that row into an array/list so that I can send that data to the controller on an ajax call.
For example: My Kendo Grid has rows A, B, and C. If I hit the save button and only Row A is checked then I will store only Row A into an array.
Here is a snippet of the code that I currently have:
Razor
#(Html.Kendo().Grid(Model.ProgramVersions).Name("ProgramVersions")
.Columns(columns =>
{
columns.Bound(e => e.Code).Width(150);
columns.Bound(e => e.Description).Width(300);
columns.Bound(e => e.Linked).Width(150)
.Template(o => Html.CheckBox("Linked", o.Linked, o.Linked ? new {onclick = "return false"} : new {onclick = ""}));
})
.Pageable(p => p.PageSizes(new[] { 5, 10, 20 }))
.Scrollable(a => a.Height("auto"))
)
<button class="btnSubmit" type="button" onclick="submitLinkStartDateRequest()">Save</button>
Javascript
function submitLinkStartDateRequest() {
var programVersions = $("#ProgramVersions").data("kendoGrid").select();
var selectedProgramVersions = [];
programVersions.each(function() {
var programVersion = programVersions.dataItem($(this));
if ( /*something here*/) {
//add row from kendo grid to the selectedProgramVersions variable
}
});
$.ajax({
type: 'POST',
url: '/Lists/Controller',
dataType: 'json',
data: {
programVersions: selectedProgramVersions
}
});
}