We Keep Coding

Change jsGrid insertvalue based on select control on the page

I am using JsGrid in my asp.net application. I felt it was very awesome grid. Everything worked out very well, but I was stuck at one point.
I have a dropdown on a page which is fetching data from database. and next to that control, i have added JsGrid.
When I change the index of dropdown, and when I click on Add row on my jsgrid, it should set the default value for one of the fields in the grid.
Can anybody please help me out in this regard.
enter image description here
Regards,
Nithin Eate

Redefine insertTemplate of the grid column you want to set default value to and pick up value from your dropdown widget:
insertTemplate: function() {
var input = this.__proto__.insertTemplate.call(this); // original input
// getValueFromDropDown() should read value from your dropdown control
var defaultValue = getValueFromDropDown();
input.val(defaultValue)
return input;
}
The source GitHub issue https://github.com/tabalinas/jsgrid/issues/471

Multiple radio buttons in Kendo UI grid with inline and batch editing

I thought I would be doing something simple as Kendo UI already can do so much, alas it is not as simple as I thought. Radio buttons make it hard.
I'm trying to create a permission mask just as you can see here:
And the corresponding, almost working JSFiddle:
http://jsfiddle.net/oz0b7xcu/
Currently I have View, Edit and None as separate columns - I can imagine them being an enum.
I figured out how to use a template & editor per field as to display the boolean with radio buttons instead of "true"/"false".
My problems:
Currently the inline editor only reacts when I click next to the radio button. Only after activating it I can select it. After "leaving" the field, the value is not persisted. (Try it out in the JSFiddle)
How do I create the "Save changed permissions" button? I would need one event per changed permission and add it to some array
How would I make it work over several pages, persisting the current permission "change set"
How do I set the edited row as "dirty"/"changed"?
I think what I am trying to do is pretty clear:
I have a list of users with permissions
I want to be able to quickly edit all users (batch) and just select view/edit/none (exclusive)
Maybe have a visualization for changed rows (dirty)
When I'm done, I want to get a list of all changed permissions
PS: Maybe all of this would be easier with "virtual columns"? Have only one PermissionMask field and depending on its value virtual columns are filled. Possible? Maybe a better solution? I don't depend on any data source so I could define something different here...

If you do not have any other editable fields except radio buttons, I feel you don't need to make the grid editable and you can still make it work. I made some changes to the code in your fiddle. here is the code. (only code that is changed)
columns: [
{ field: "Name" }, {
field: "View",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "Edit",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);' />"
}, {
field: "None",
width: "80px",
template: "<input type='radio' name='#: uid #' onclick='markDirty(this);'/>"
We can manually mark a record as dirty when selection is changed.
function markDirty(ctrl) {
$("#grid").data("kendoGrid").dataSource.getByUid(ctrl.name).dirty = true;
}
Finally you can get the data source from the grid on button click and perform any action required.
//this will have the data in an array
var data = $("#grid").data("kendoGrid").dataSource.data();
Hope this helps.

Need help to target / modify custom data attribute

I am working on a website/webshop in WordPress with Woocommerce and tries to add a quantity field next to the 'add to cart' button.
I found this article/tutorial:
How to add quantity to product archives in WooCommerce (and keep ajax) - Christian Varga
http://christianvarga.com/how-to-add-quantity-to-product-archives-in-woocommerce-and-keep-ajax/
It got two small snippets - The first will work correct after copy/paste in my function.php file.
The second is some javascript code which will make the quantity field work together with the 'add to cart' button.
This is the code:
$('.input-text.qty', 'ul.products').on('change', function() {
$(this).closest('div').next('a').attr('data-quantity', $(this).val());
});
When I insert the javascript code nothing happens. It is because I use a custom theme (Avada) which has a different structure I guess.
This was also written on the tutorial:
*Note: This works with WooCommerce’s default HTML structure, but if you’re using a custom theme the HTML structure might be different, so
you’ll need to modify this script to suit.
Here is the link to my page:
http://frisk-matic.identitest.dk/kaffe/
I tried to target my 'add to cart' button but I cannot get it to work and I am not that skilled when it comes to Javascript.
Can someone help me? I would be so glad if I could get a little understanding how this code works.
I know that the first line is to select the quantity field we added and the products div and the result is to change the data-quantity attribute for the button.
Best regards
Samz3n

Try it like this
$('.input-text.qty').on('change', function() {
$(this).parent().next('a.add_to_cart_button').attr('data-quantity', $(this).val());
});

The problem is that your html markup is not the same with this template. I've inspected the markup and write some jQuery code. I think it will do the thing for you! :)
$('.quantity').find('input[type="number"]').on('change',function(){
$(this).parent().next('.product-buttons').find('.add_to_cart_button').data('quantity',$(this).val());
});

u might have some name collisions with your jQuery library, u can try this
var $ = jQuery;
$('.quantity').find('input[type="number"]').on('change', function () {
var value = $(this).val();
var button = $(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});
or better, use this until you fix naming collisions with jQuery
jQuery('.quantity').find('input[type="number"]').on('change', function () {
var value = jQuery(this).val();
var button = jQuery(this).parent().next('.product-buttons').find('.add_to_cart_button');
button.attr('data-quantity', value);
});

Dojo: for each row in a grid, have a button that when clicked shows more information from the data store

This is proving to be surprisingly difficult.
Suppose I have a grid that displays the name and size of files.
Information is loaded from a JSON file into an instance of dojo/store/Memory and then key attributes presented in the grid. How would I include a button on each row of the grid, that when clicked, displays more attributes about the file? These attributes are stored in the dojo/store/memory.
Right now I have a row like this in the grid:
{name:"More", field:"id", formatter: buttonFormatter, datatype:"string", noresize: true, width: "120px"}
And I attempted to pass the ID to a button using the formatter:
var buttonFormatter = function(inValue){
var newButton = new Button({
label: "Details",
onClick: function(inValue){
alert("More information about " + inValue + " goes here");
}
});
return newButton;
}
This doesn't work however.
The difficulties, as far as I can tell, are:
1) Associating each specific button with a specific file from the store
2) Giving the onClick javascript access to data from the store
Thanks for your help!
Tristan

You can use dojo-data-type-event attach point to do the operation. The corresponding method in the grid widget instance will show your more attributes in different style like tooltip,append,dialog and etc as you need

Not sure if this might helps you, but have a look at it.
In this example there's an onclick-Event on a button to zoom to the clicked row.
https://developers.arcgis.com/en/javascript/jssamples/fl_zoomgrid.html
Regards

how to add a color to a line in sharepoint 2007 list that has a specific text?

I would like to know how to add a color to a line in sharepoint 2007 list
if in one field there is a specific text contained ?
for example :
I have a list that have three fields:
list1
1.id
2.name
3.full description
now i want to show only the first and the second field to the user.
list1
id name
1 abc
2 edv
second thing, i want to give a color (let say red) to a row that contains in the hidden
field - "full description", a text with the word for example 'color'.
I found a javascript code that i can add to the aspx page :
(document).ready(function(){
$Text = $("td .ms-vb2:contains('color')");
$Text.parent().css("background-color", "red");
});
but it's only works if the the "full description" is shown.
can someone give me an idea ?
thanks,
gadym

Have you considered creating a data view with conditional formatting? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
That way you won't have to do this ugly javascript hacking :)

One idea could be to use a calculated column to search the other field for the prescence of your text string - then base the jQuery logic on that calcualted column.
However you mention a description field which is probably defined as "Multiple lines of Text" and these can't be used in calculated columns.
How about outputting the Description field but then using some jQuery to hide it from view with .hide()?
I can't give you the exact javascript to do this right now but if you need any inspiration then Christophe's blog is a great place to start.

From your question I understood that you could highlighted the row which comes a particular text (color) , but couldn't hide that column. In the blow code I have hided that column. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, is this helps you?