How I can get the counts list items of specific view ?
I want to get rid of the pivotControl-overflowDot, so all views a list have are shown without clicking on the dots.
I have the following code:
<script>
function renderHeaderTemplateForDocuments(renderCtx, fRenderHeaderColumnNames){
var viewData = eval(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
ClientPivotControl.prototype.SurfacedPivotCount = 20;
return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames);
var menu = $('ms-pivotControl-overflowDot');
menu.style.display = "none";
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Header: renderHeaderTemplateForDocuments
}
});
</script>
I don't know the numbers of elements and I set the SurfacedPivotCount to 20,
but I want the SurfacedPivotCount to be dynamic, based on the number of view elements.
Thanks!
When customizing SharePoint list via CSR the number of available list view options could be determined like this:
var viewData = JSON.parse(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
var numOfViews = viewData.length - 3; //system menu options such as Create View, Modify View and menu delimiter are exluded
Example
The following example demonstrates how to display all the available list view options
function renderHeaderTemplateForList(renderCtx, fRenderHeaderColumnNames){
var viewData = JSON.parse(renderCtx.ListSchema.ViewSelectorPivotMenuOptions);
var numOfViews = viewData.length - 3;
ClientPivotControl.prototype.SurfacedPivotCount = numOfViews;
return RenderHeaderTemplate(renderCtx, fRenderHeaderColumnNames); //render default Header template
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Header: renderHeaderTemplateForList
}
});
Result
Related
I'm trying to retrieve the page index of a selected object of the grid that is using ServerOperation, but I don't know how would I do that without too much complication.
Currently, I'm receiving an Id from the URL (https://...?ObjectId=12) and I will select this item in the grid, but first I have to show the page it is, so I'm trying to get the page number of this row.
The problem is that I'm using ServerOperation(true). In addition, I'm retrieving the paged list without any filters.
function _displayDetailsModal(id, selectRow = true, focusSelected = true) {
$(document).ready(() => {
var url = `${urls.Details}/${id}`;
if (selectRow) {
// GET PAGE OF ITEM THEN
// CHANGE TO PAGE THEN
kendoGrid.selectById(id);
}
if (focusSelected) {
kendoGrid.focusSelected(); // Scrolls to selected row.
}
loadModal(url);
});
}
Is this the kind of thing you are after?
Dojo: https://dojo.telerik.com/iNEViDIm/2
I have provided a simple input field where you can set the page number and then a button which will change the page to the selected page for you.
All I am doing is setting the datasource's page via the page method and then it will go off and make a read to the remote datasource for you and then return that page of data.
$('#btnPage').on('click',function(e){
var page = $('#pageNumber').val();
$('#pageLabel').html('Page Selected Is: ' + page);
var ds = $('#grid').data('kendoGrid').dataSource;
ds.page(parseInt(page));
});
If you select a page higher than the last available then it will just show the last page.
More info can be seen here: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/page
If you need any further info let me know:
I ended up doing it on the server. That is how I did it:
Controller.cs
Instead of sending just the usual ToDataSourceResult, I add two fiels (PageIndex and ObjectId), and send it to the front-end to change the page and select the row.
[HttpPost("List")]
public IActionResult List([DataSourceRequest] DataSourceRequest request, RequestActionViewModel requestAction)
{
// Getting the pageIndex of the ObjectId present in requestAction.
var objectIndex = elementList.FindIndex(el => el.Id == requestAction.ObjectId) + 1;
var objectPageIndex = Math.Ceiling((decimal)objectIndex / request.PageSize);
var dataSourceResult = elementList.ToDataSourceResult(request);
return Json(new {
Data = dataSourceResult.Data,
Total = dataSourceResult.Total,
AggregateResults = dataSourceResult.AggregateResults,
Errors = dataSourceResult.Errors,
// Extra fields
PageIndex = objectPageIndex,
ObjectId = requestAction.ObjectId
});
}
index.js
I Get from the server the page and the id of the element, select the change the page of the grid, and select the element.
function onGridRequestEnd(e) {
this.unbind("requestEnd", onGridRequestEnd);
if (e.PageIndex) {
kendoGrid.bind("dataBound", function temp() {
// Custom method.
kendoGrid.selectById(e.ObjectId, e.PageIndex);
// To avoid looping.
kendoGrid.unbind("dataBound", temp);
});
}
}
I'm currently facing a problem with the Kendo UI MultiSelect widget for selecting an option more than once. For example, in the image below I want to select Schindler's List again after selecting The Dark Knight, but unfortunately the MultiSelect widget behaves more like a set than an ordered list, i.e. repetitive selection is not allowed. Is there actually a proper way to achieve this? Any workarounds?
That's the intended behavior of the multi-select control and there is no simple way to make it do what you want using the available configuration options. Possible workarounds are ...
Creating a custom multi-select widget
Something like this should work (note that I haven't tested this much - it lets you add multiples and keeps the filter intact though):
(function ($) {
var ui = kendo.ui,
MultiSelect = ui.MultiSelect;
var originalRender = MultiSelect.fn._render;
var originalSelected = MultiSelect.fn._selected;
var CustomMultiSelect = MultiSelect.extend({
init: function (element, options) {
var that = this;
MultiSelect.fn.init.call(that, element, options);
},
options: {
name: 'CustomMultiSelect'
},
_select: function (li) {
var that = this,
values = that._values,
dataItem,
idx;
if (!that._allowSelection()) {
return;
}
if (!isNaN(li)) {
idx = li;
} else {
idx = li.data("idx");
}
that.element[0].children[idx].selected = true;
dataItem = that.dataSource.view()[idx];
that.tagList.append(that.tagTemplate(dataItem));
that._dataItems.push(dataItem);
values.push(that._dataValue(dataItem));
that.currentTag(null);
that._placeholder();
if (that._state === "filter") {
that._state = "accept";
}
console.log(this.dataSource.view());
},
_render: function (data) {
// swapping out this._selected keeps filtering functional
this._selected = dummy;
return originalRender.call(this, data);
this._selected = originalSelected;
}
});
function dummy() { return null; }
ui.plugin(CustomMultiSelect);
})(jQuery);
Demo here.
Using a dropdown list
Use a simple dropdown list (or ComboBox) and bind the select event to append to your list (which you have to create manually).
For example:
var mySelectedList = [];
$("#dropdownlist").kendoDropDownList({
select: function (e) {
var item = e.item;
var text = item.text();
// store your selected item in the list
mySelectedList.push({
text: text
});
// update the displayed list
$("#myOrderedList").append("<li>" + text + "</li>");
}
});
Then you could bind clicks on those list elements to remove elements from the list. The disadvantage of that is that it requires more work to make it look "pretty" (you have to create and combine your own HTML, css, images etc.).
I have that web app I am working on.
Here is a picture.
The idea is that there is an array of objects, it gets displayed as a row of divs. Each of these objects also has an array of objects inside them and they are displayed as a row of divs inside these divs.
The user should be able to add new objects to the objects listed on the page. That should be accessed by pressing "Edit".
The problem: How do I make the script grab the objects from that div that was clicked and display them in a window?
I am using meteor bootstrap package.
Ask me questions if you didn't understand something - that stuff is like a maze.
Javascript
var state = 0;
var
sides = [
{
name:"MURICA",
types:[
{
name:"EAGLE",
desc:"FREEDUM",
power:10
}
]
}
];
if (Meteor.isClient) {
Template.global.side = function(){
var obj = [], m;
m = 1;
for (var i in sides){
obj.push({
index : m,
object : sides[i]
});
}
console.log(JSON.stringify(obj));
return obj;
}
Template.content.state = function(){
return state;
}
Template.global.events ({
'click .edit': function(){
jQuery('#edit').toggle()
console.log("PRESSED FREEDOM");
}
});
}
HTML can be found here (was too big to post) http://pastebin.com/kmNnSV1w
This may be helpful:
html
<template name="asdf">
<div class="asdf-box" data-nameOfTheParam="{{putSomeValueHere}}">
<span class="asdf-button">Click me!</span>
</div>
</template>
js
Template.asdf.events({
'click .asdf-button': function(e) {
console.log( $(e.target).closest('.asdf-box').data('nameOfTheParam') );
}
});
When working with database items, you may just use the id: data-id={{_id}} and fetch the desired object in the callback based on this id.
hello i want to create a edit interface for array based div-array.
for example i create in a loop 15 divs,
based on this i want to load via ajax an edit interface where i can
select one of those divs and change their classes,
like so, i can do this by hand,
var divs = {
'selector': ['Select One'],
'id': ['div-1', 'div-2', 'div-3', 'div-4'],
'class': ['class-1', 'class-2', 'class-3', 'class-4']
};
the point is i dont know how many they are until the user inputs a int to render them.
id and class should be populated based on my current rendered div amount,
for example:
current code:
(function($) {
var container = $('.holder');
//The input getter for amount of divs
var form1 = new Backbone.Form({
schema: {
nDefine: 'Number',
}
}).render();
$('.input').append(form1.el);
// rendering amount of divs
function render(){
num = parseInt($('input').val());
for(var i = 1; i <= num; i++) {
container.append('<div id="id'+i+'" class="box category'+i+'">Id:'+i+'</div>');
}
}
// renders divs on click
$('.n-definer').click(function() {
container.empty();
render();
//form1.commit();
});
})(jQuery);
this works fine,
how can i get now those id's and classes into my backbone form selects in array form?
I`m trying to add options to my select menu in my custom plugin. I want to get these options from array that I have and with forearch or for to create these options.How can I do that?
Could you show us your code that generates the select box? If I'm guessing right, you might be able to do something like
var things = [];
var your = ["Derpy","Fluttershy","Applejack"];
for(var i = 0; i < your.length; i++) {
// The two values used to separate actual and display values if needed
things[i] = [your[i],your[i]];
}
// snip snip
tab.add({
type: 'select',
label: 'myAwesomePonySelector',
id: 'myAwesomePonySelector',
items : things
// your other definitions, like onShow and commit
});
I hope this helps.